HTML5的革新 结构之美
<hgroup>标签 手册释义:用于对网页或区段(section)的标题进行组合。 使用指引:用于标题类的组合,比如文章的标题与副标题: 复制代码 代码如下: <nav>标签 手册释义:定义导航链接的部分。 使用指引:用于定义页面的导航部分: 复制代码 代码如下: <aside>标签 定义 article 以外的内容。aside 的内容应该与 article 的内容相关。 使用指引:用于成节的内容,会在文档流中开始一个新的节,一般用于与文章内容相关的边栏: 复制代码 代码如下: <section>标签 手册释义:定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。 使用指引:用于成节的内容,会在文档流中开始一个新的节: 复制代码 代码如下: <footer>标签 手册释义:定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。 使用指引:一般用来包裹整个页面通用底部,也可用于其他区域底部,比如article底部: 复制代码 代码如下: <article>标签 手册释义:定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文 本。亦或是来自其他外部源内容。 使用指引:顾名思义,一般用于文章区块: 复制代码 代码如下: <figure>标签 手册释义:用于对元素进行组合。 使用指引:多用于图片与图片描述组合: 复制代码 代码如下: <menu>标签 手册释义:定义菜单列表。当希望列出表单控件时使用该标签。 使用指引:使用于菜单类区块,用来定义菜单列表或菜单选项: 复制代码 代码如下: HTML 5的其他新标签,就不此一一解释了,请自行查询一下手册。 其实,这些东西,如同XHTML的div、h1、inpu等标签一样,只要平时多加实践,运用自如也是轻而易举的。 关于兼容性 如果你是一个喜欢研究关注前端的人,你应该知道淘宝的页面结构中已大量用到了HTML 5新标签。所以,我想说的是只要敢于尝试,兼容性不是问题,兼容的方法,网上有很多(本文是讲结构的,哈~)。 后话 任何一门新技术,都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员,那你就得不断的尝试并接受最新的前端技术。 孙文曾说,欲经文明之幸福,不得不经文明之痛苦。人类的革命如此,HTML 5的革命亦是如此。IE的日渐没落,让各大浏览器厂商以一次进入了战国时代,群雄逐鹿。而对于开发者,我们只奢求各大浏览器厂商尽可能的遵循同一个标准,而不是群雄逐鹿后的四分五裂。因为,高效完美的呈现给各类用户同样的应用才是我们的终极目标。 如此,本文从页面的doctype说起,到用HTML 5新标签搭建语义化更明确的页面的结构,再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知,如果你有兴趣,那就打开你的IDE,写上一段由HTML 5新标签搭建的代码,然后用CSS去描绘你的宏伟蓝图吧! (来源:Mr.Think) (编辑:焦作站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |