HTML5的革新 结构之美

2019-01-28 20:24:21刘景俊

本。亦或是来自其他外部源内容。
使用指引:顾名思义,一般用于文章区块:

复制代码

<article>
<header>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章内容详情</p>
</article>

<figure>标签
手册释义:用于对元素进行组合。
使用指引:多用于图片与图片描述组合:

复制代码

<figure>
<img src="img.gif" alt="figure标签" title="figure标签" />
<figcaption>这儿是图片的描述信息</figcaption>
</figure>

<menu>标签
手册释义:定义菜单列表。当希望列出表单控件时使用该标签。
使用指引:使用于菜单类区块,用来定义菜单列表或菜单选项:

复制代码

<menu>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</menu>

HTML 5的其他新标签,就不此一一解释了,请自行查询一下手册。
其实,这些东西,如同XHTML的div、h1、inpu等标签一样,只要平时多加实践,运用自如也是轻而易举的。
关于兼容性
如果你是一个喜欢研究关注前端的人,你应该知道淘宝的页面结构中已大量用到了HTML 5新标签。所以,我想说的是只要敢于尝试,兼容性不是问题,兼容的方法,网上有很多(本文是讲结构的,哈~)。

后话
任何一门新技术,都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员,那你就得不断的尝试并接受最新的前端技术。
孙文曾说,欲经文明之幸福,不得不经文明之痛苦。人类的革命如此,HTML 5的革命亦是如此。IE的日渐没落,让各大浏览器厂商以一次进入了战国时代,群雄逐鹿。而对于开发者,我们只奢求各大浏览器厂商尽可能的遵循同一个标准,而不是群雄逐鹿后的四分五裂。因为,高效完美的呈现给各类用户同样的应用才是我们的终极目标。

如此,本文从页面的doctype说起,到用HTML 5新标签搭建语义化更明确的页面的结构,再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知,如果你有兴趣,那就打开你的IDE,写上一段由HTML 5新标签搭建的代码,然后用CSS去描绘你的宏伟蓝图吧! (来源:Mr.Think)