HTML5与CSS3中新增的属性详解

  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”的标题,当元素有多个层级时,该元素可以将h1h6元素放在其内,譬如文章的主标题和副标题的组合。

                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元素最容易跟sectiondiv容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发              或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(特殊的section)除了它的内容,article会有一个标题              (通常会在header里),会有一个footer页脚。我们举几个例子介绍一下article,好更好区分article、section、div。

                article使用注意:

                    1、自身独立的情况下:用article

                    2、是相关内容:用section

                    3、没有语义的:用div

原文地址:https://www.cnblogs.com/12315peixin/p/5840367.html