zoukankan      html  css  js  c++  java
  • 语义化标签

       

     一:语义化标签

             <hgroup></hgroup>

            <header></header>

            <nav></nav>

            <section></section>

            <footer></footer>

            <article></article>

            <aside></aside>

    二:语义化的好处

                     HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签

                     这种语义化的特性提升了网页的质量和语义

                     对搜索引擎更加的友好

            他们这些标签功能就是代替<div>功能中的一部分,他们没有任何的默认样式,除了会让文本另起一行外;

    hgroup元素代表 网页 或 section 的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合

           

                     <hgroup>

                         <h1>HTML 5</h1>

                         <h2>这是一篇介绍HTML 5语义化标签和更简洁的结构</h2>

                     </hgroup>

           

                     hgroup使用注意:

                             如果只需要一个h1-h6标签就不用hgroup

                             如果有连续多个h1-h6标签就用hgroup

                             如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签

                            

           

            header 元素代表 网页 或 section 的页眉。

                     通常包含h1-h6元素或hgroup

           

                     <header>

                         <hgroup>

                             <h1>网站标题</h1>

                             <h2>网站副标题</h2>

                         </hgroup>

                     </header>

                    

                     header使用注意:

                             可以是“网页”或任意“section”的头部部分

                             没有个数限制。

                             如果hgroup或h1-h6自己就能工作的很好,那就不要用header。

            nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

           

                     <nav>

                         <ul>

                             <li>HTML 5</li>

                             <li>CSS3</li>

                             <li>JavaScript</li>

                         </ul>

                     </nav>

                    

                     nav使用注意:

                             用在整个页面主要导航部分上,不合适就不要用nav元素;

           

           

           

            section元素代表文档中的 节 或 段,段可以是指一篇文章里按照主题的分段;节可以是指一个页面里的分组。

           

                     <section>

                         <h1>section是啥?</h1>

                         <article>

                             <h2>关于section</h1>

                             <p>section的介绍</p>

                             <section>

                                 <h3>关于其他</h3>

                                 <p>关于其他section的介绍</p>

                             </section>

                         </article>

                     </section>

                    

                     section使用注意:

                             section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。

                             article、nav、aside可以理解为特殊的section,

                             所以如果可以用article、nav、aside就不要用section,没实际意义的就用div          

                    

                    

                    

            article元素最容易跟section和div容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容

           

                     <article>

                         <h1>一篇文章</h1>

                         <p>文章内容..</p>

                         <footer>

                             <p><small>版权:html5jscss网所属,作者:damu</small></p>

                         </footer>

                     </article>

                    

                     article使用注意:

                             独立文章:用article

                             单独的模块:用section

                             没有语义的:用div

                    

                    

                    

            aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

                    

                     在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。

                    

                     <article>

                         <p>内容</p>

                         <aside>

                             <h1>作者简介</h1>

                             <p>小北,前端一枚</p>

                         </aside>

                     </article>

                    

                     aside使用总结:

                             aside在article内表示主要内容的附属信息,

                             在article之外则可做侧边栏

                             如果是广告,其他日志链接或者其他分类导航也可以用

           

           

           

            footer元素代表 网页 或 section 的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。

           

                     <footer>

                         COPYRIGHT@damu

                     </footer>

                    

                     footer使用注意:

                             可以是 网页 或任意 section 的底部部分;

                             没有个数限制,除了包裹的内容不一样,其他跟header类似。

  • 相关阅读:
    JAVA学习---文件和流
    JAVA学习---集合和工具类
    JAVA学习---异常
    python-time模块
    python-并发编程
    python-网络编程
    python-并发编程之进程
    python-面向对象之多态
    python-面向对象之反射
    python-面向对象之封装
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/9136545.html
Copyright © 2011-2022 走看看