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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
google地图的路线实现代码
2009/08/20 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
angular-tree-component的使用详解
2018/07/30 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
python 自动提交和抓取网页
2009/07/13 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python中尾递归用法实例详解
2015/04/28 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
天游软件面试
2013/11/23 面试题
销售简历自我评价
2014/01/24 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
婚前协议书范本
2014/10/27 职场文书
团员自我评价范文
2015/03/10 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android