首页  >  文章  >  web前端  >  HTML5 语义化结构化规范化_html5教程技巧

HTML5 语义化结构化规范化_html5教程技巧

WBOY
WBOY原创
2016-05-16 15:51:391424浏览
HTML结构更加清晰、规范,学习HTML5优化结构的思路。
HTML5添加了一些新元素,用来标识常用的结构,是html更具语义化,可是我们无法直接使用,即使可能用到还要等他个十年八年的。
那就像微格式一样,使用class代替,或者随意点,使用id和class名来代替,让自己的结构更加清晰化,可以推广为规范,让团队协作更加顺畅。
一些新增的结构标记
◎section:这可以是书中的一章或一节,实际上可以是在HTML4中有自己的标题的任何东西
◎header:页面上显示的页眉;与head元素不一样
◎footer:页脚;可以显示电子邮件中的签名
◎nav:指向其他页面的一组链接
◎article:blog、杂志、文章汇编等中的一篇文章
一些例子
HTML5的文档结构
...



...



...

XHTML的文档结构
header
nav

section

aside
footer
HTML5的图片结构

Figure2.InstallMozillaXFormsdialog


XHTML的图片结构

Figure2.InstallMozillaXFormsdialog


HTML5的加上标记

  m元素表示文本被“加上标志”,但是不一定要强调。可以把它想像成书中突出显示的一节。
  Google的缓存页面就是典型的用例。如果链接到一个缓存的副本,搜索词就被加上标志。例如,如果搜索“Egret”,那么缓存的Google页面可能像下面这样:
TheGreatEgret(alsoknownastheAmericanEgret)isalargewhitewadingbirdfoundworldwide.TheGreatEgretflieswithslowwingbeats.ThescientificnameoftheGreatEgretisCasmerodiusalbus.XHTML的加上标记TheGreatEgret(alsoknownastheAmericanEgret)isalargewhitewadingbirdfoundworldwide.TheGreatEgretflieswithslowwingbeats.ThescientificnameoftheGreatEgretisCasmerodiusalbus.
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn