HTML5时代已经进入我们的世界,Firefox、Opera、Chrome等各大主流浏览器早就已经能够很好的支持各种HTML5规范,而微软也从IE9的版本开始支持HTML5、CSS3和SVG等新规范。这些事实表明:HTML5是现在最流行的WEB前端开发语言。下面我将为大家带来一些我所理解的HTML5新增属性:语义化标签,其中有地方的问题请大神指正。
语义化标签。
语义化标签的优点是:
1. HTML结构清晰
2. 代码可读性较好
3. 无障碍阅读
4. 搜索引擎可以根据标签的语言确定上下文和权重问题
5. 移动设备能够更完美的展现网页(对css支持较弱的设备)
6. 便于团队维护和开发
常用的语义化标签有:<header></header>
header 元素代表“网页”或“section”的页眉。
整个页面没有限制header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素.
header使用注意:
1、可以是“网页”或任意“section”的头部部分;
2、没有个数限制。
3、如果hgroup或h1-h6自己就能工作的很好,那就不要用header。
<footer></footer>
footer
元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer
元素包含了整个 节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。
footer使用注意:
1、可以是“网页”或任意“section”的底部部分;
2、没有个数限制,除了包裹的内容不一样,其他跟header类似。
<nav></nav>
nav
元素代表页面的导航链接区域。用于定义页面的主要导航部分。
nav使用注意:
用在整个页面主要导航部分上,不合适就不要用nav元素
<hgroup></hgroup>
hgroup
元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1
到h6
元素放在其内,譬如文章的主标题和副标题的组合。
hgroup使用注意:
1、如果只需要一个h1-h6标签就不用hgroup
2、如果有连续多个h1-h6标签就用hgroup
3、如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签
<aside></aside>
aside
元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。在article元 素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。
aside使用注意:
1、aside在article内表示主要内容的附属信息,
2、在article之外则可做侧边栏,没有article与之对应,最好不用。
3、如果是广告,其他日志链接或者其他分类导航也可以用
<section></section>
section
元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。section通常还带标题,虽 然html5中section会自动给标题h1-h6降级,但是最好手动给他们降级。
section使用注意:
1、表示文档中的节或者段;
2、article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div
<article></article>
article
元素最容易跟section
和div
容易混淆,其实article
代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发 或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(特殊的section)除了它的内容,article
会有一个标题 (通常会在header
里),会有一个footer
页脚。我们举几个例子介绍一下article,好更好区分article、section、div。
article使用注意:
1、自身独立的情况下:用article
2、是相关内容:用section
3、没有语义的:用div