HTML5 语义化结构化规范化


Posted in HTML / CSS onOctober 17, 2008

HTML结构更加清晰、规范,学习HTML5优化结构的思路。
HTML5添加了一些新元素,用来标识常用的结构,是html更具语义化,可是我们无法直接使用,即使可能用到还要等他个十年八年的。
那就像微格式一样,使用class代替,或者随意点,使用id和class名来代替,让自己的结构更加清晰化,可以推广为规范,让团队协作更加顺畅。
一些新增的结构标记
◎section:这可以是书中的一章或一节,实际上可以是在HTML4中有自己的标题的任何东西
◎header:页面上显示的页眉;与head元素不一样
◎footer:页脚;可以显示电子邮件中的签名
◎nav:指向其他页面的一组链接
◎article:blog、杂志、文章汇编等中的一篇文章
一些例子
HTML5的文档结构
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
XHTML的文档结构
<divid="header">header</div>
<divid="nav">nav</div>
<divclass="article">
<divclass="section">section</div>
</div>
<divid="aside">aside</div>
<divid="footer">footer</div>
HTML5的图片结构
<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</figure>
XHTML的图片结构
<divclass="figure">
<h4class="legend">Figure2.InstallMozillaXFormsdialog</h4>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</div>
HTML5的加上标记

m元素表示文本被“加上标志”,但是不一定要强调。可以把它想像成书中突出显示的一节。

Google的缓存页面就是典型的用例。如果链接到一个缓存的副本,搜索词就被加上标志。例如,如果搜索“Egret”,那么缓存的Google页面可能像下面这样:
TheGreat<m>Egret</m>(alsoknownastheAmerican<m>Egret</m>)isalargewhitewadingbirdfoundworldwide.TheGreat<m>Egret</m>flieswithslowwingbeats.ThescientificnameoftheGreat<m>Egret</m>isCasmerodiusalbus.XHTML的加上标记TheGreat<spanclass="m">Egret</span>(alsoknownastheAmerican<spanclass="m">Egret</span>)isalargewhitewadingbirdfoundworldwide.TheGreat<spanclass="m">Egret</span>flieswithslowwingbeats.ThescientificnameoftheGreat<spanclass="m">Egret</span>isCasmerodiusalbus.

HTML / CSS 相关文章推荐
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
HTML5 与 XHTML2
Oct 17 #HTML / CSS
X/HTML5 和 XHTML2
Oct 17 #HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 #HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 #HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 #HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 #HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 #HTML / CSS
You might like
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
nodejs中实现路由功能
2014/12/29 NodeJs
javascript截取字符串小结
2015/04/28 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
护理学毕业生自荐信
2013/10/02 职场文书
我爱我校演讲稿
2014/05/21 职场文书
有关环保的标语
2014/06/13 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
交通处罚决定书
2015/06/24 职场文书
通讯稿格式及范文
2015/07/22 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技