阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      编写 HTML5 语义化页面

      什么是主体结构标签?

      HTML结构语义化,是HTML5开始才提出来的,以前的html结构,都是一堆没有语义的冷冰冰的div标签。div+css写出来,HTML一打开就是一堆div,为了改变这种这种状况,HTML5给出了几个新的结构化的标签。

      HTML中比较重大的修改就是为了使文档结构更加清晰明确,容易阅读,增加了很多新的结构标签。

      什么是语义标签?

      HTML标签,也有的叫HTML元素,只是叫法不同;

      我们常说的语义,语义化,是指有意义;

      语义化标签,就是有意义的标签。

      一个语义标签能够清楚的描述其意义,无论是浏览器,搜索引擎还是开发者都可以很直接的看明白。

      • 无语义实例:
        • <div><span> ,这种无需考虑内容.
      • 语义元素实例
        • <form> , <table> , <img> ,这种会清楚的定义了它的内容.

      什么是HTML结构语义化

      所谓的HTML结构语义化,就是合理使用HTML5标签,让结构更加清晰明确,就这么简单。

      很多人说的HTML静态页,符合语义化。其实是指结构化+语义化。

      为了表述清楚,请知道这个事情。

      本章学习的重点

      • 掌握HTML5【主体结构标签】的使用方法,以及使用场合。
        • 主要包括 article /section/nav/aside/time/pubdate
      • 掌握HTML5【非主体结构标签】的使用方法,以及使用场合。
        • 主要包括 header /footer/hgroup/address
      • 如何结合【主体结构标签】与【非主体结构标签】来合理的组成整体的页面搭配。
      • 内容区块的如何划分
        • 内容区块,也有的叫内容块,是按照逻辑进行分割的单位;
        • 对于书籍:章,节都是内容块
        • 对于博客:导航菜单,正文区,评论区,相关文章区,都是内容块
        • 我们要学会对常见网页进行内容块的划分

      语义化的例子

      一些网站都包含以下HTML代码:

      • <div id="nav"> ,
      • <div class="header"> ,
      • <div id="footer"> 来指明导航链接, 头部, 以及尾部,但是在HTML5里就不需要了;
      <header>
      <nav>
      <footer>
      

      这种标签,就是语义化标签,代表有意义的标签,不能和div一样随便用的。

      HTML5语义标签大全

      HTML5 添加了很多语义标签,可以在 HTML5 新增的标签元素 中查看 “新的语义和结构元素"部分的;

      <header>标签

      <header> 标签的作用是引导和导航作用的,通常用来放置一个内容块的标题!!(除了标题,也可以包含其他内容的)

      一个header标签,通常情况下,至少包含一个heading标签(就是h1-h6),也包括后面要讨论的 hgroup,nav。

      <header>
          <h1>阿西河前端教程</h1>
      </header>
      

      注意:在页面中你可以使用多个 <header> 标签

      <header>
          <h1>阿西河前端教程</h1>
      </header>
      <div>
          <header>
              <h1>HTML教程</h1>
          </header>
          <p>阿西河前端教程是在2018年2月开始创建的</p>
      </div>
      

      <hgroup> 标签

      hgroup标签通常是用来将标题及子标题进行分组的

      如果只有一个主标题是不需要hgroup标签的,比如上面header标签的例子;

      但是如果还有子标题就需要了,比如下面这种

      <header>
          <hgroup>
              <h1>阿西河前端教程</h1>
              <h2>一个助你成为全栈开发的网站</h2>
          </hgroup>
      </header>
      

      <nav> 标签定义导航链接的部分。

      <nav> 元素用于定义页面的导航链接部分区域,不是所有的链接都需要包含在 <nav> 元素中,只需要把主要的链接组放进nav就可以了。

      比如页脚的 服务条款,版权声明,联系我们等;

      比如顶部导航条的,首页等

      <nav>
          <a href="/html/">HTML</a> |
          <a href="/css/">CSS</a> |
          <a href="/js/">JavaScript</a> |
          <a href="/jquery/">jQuery</a>
      </nav>
      

      完整的演示

      把上面header等全部使用起来

      <header>
          <hgroup>
              <h1>阿西河前端教程</h1>
              <h2>一个助你成为全栈开发的网站</h2>
          </hgroup>
          <nav>
              <ul>
                  <li><a href="/">首页</a></li>
                  <li><a href="/">图片</a></li>
                  <li><a href="/">关于我</a></li>
              </ul>
          </nav>
      </header>
      
      • 传统导航条
        • 顶部导航
        • 底部导航
      • 侧边栏导航
      • 页内导航
      • 翻页操作
      • 其他的导航链接组
        • 比如友情链接等。

      <footer>标签

      <footer> 表示页面中的一个内容区块的脚注,一般用在内容块底部的作者信息,相关阅读链接以及版权信息等。

      <footer> 元素应该包含它的包含元素,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等

      例子

      <footer>
          <nav>
            <ul>
              <li><a href="/">版权信息</a></li>
              <li><a href="/">站点地图</a></li>
              <li><a href="/">联系方式</a></li>
            </ul>
          </nav>
      </footer>
      

      和header一样,文档中你可以使用多个 <footer> 标签,一般是用在article,section这些加footer元素。

      <body>
        <header>
          <hgroup>
            <h2>阿西河前端教程</h2>
            <h2>一个助你成为全栈开发的网站</h2>
          </hgroup>
          <nav>
            <ul>
              <li><a href="/">首页</a></li>
              <li><a href="/">图片</a></li>
              <li><a href="/">关于我</a></li>
            </ul>
          </nav>
        </header>
        <article>
          <header>
            <h1>HTML5教程</h1>
            <p>发表于:2020年9月1日</p>
          </header>
          <p>巴拉巴拉的正文内容</p>
          <footer>
            <p>归属版权为阿西河前端教程所有</p>
          </footer>
        </article>
        <footer>
          <nav>
            <ul>
              <li><a href="/">版权信息</a></li>
              <li><a href="/">站点地图</a></li>
              <li><a href="/">联系方式</a></li>
            </ul>
          </nav>
        </footer>
      </body>
      

      注意:为了SEO规范,一般一张页面只用一个h1标签。

      <article>标签

      <article> 标签定义独立的完整的可以独自被外部引用的内容。

      <article> 元素使用例子如下:

      • 博客中的一篇文章;
      • 论坛中的一个帖子
      • 咨询网站的一篇新闻
      • 评论区的一段评论
      • 或者其他任何独立的内容

      实例演示

      下面是一个代码演示

      <article>
          <header>
              <h1>HTML5教程</h1>
              <p>发表于:2020年9月1日</p>
          </header>
          <p>巴拉巴拉的正文内容</p>
          <footer>
              <p>归属版权为阿西河前端教程所有</p>
          </footer>
      </article>
      

      上面的例子,介绍HTML5教程;header含有标题,footer含有版权,div区域是正文内容;这个例子就是独立和完整的,所以使用 article 进行包起来。

      article可以多次嵌套

      真实情况下,文章的正文其实还有文章的评论区等,这时候样子就是下面的样子

      <!-- 文章正文 -->
      <article>
          <header>
              <h1>HTML5教程</h1>
              <p>发表于:2020年9月1日</p>
          </header>
          <p>巴拉巴拉的正文内容</p>
          <footer>
              <p>归属版权为阿西河前端教程所有</p>
          </footer>
          <!-- 评论区 -->
          <div>
              <h2>评论区</h2>
              <article>
                  <header>
                      <h3>发表者:朱安邦</h3>
                      <p>发表于:2020年9月1日</p>
                  </header>
                  <div>
                      <p>这个教程是我写的,我感觉还不错</p>
                  </div>
                  <footer>
                      <p>个性签名:</p>
                      <p>阿西河前端教程的站长</p>
                  </footer>
              </article>
              <article>
                  <header>
                      <h3>发表者:特朗普</h3>
                      <p>发表于:2020年9月1日</p>
                  </header>
                  <div>
                      <p>这个教程写的一点也不好,比我差远了,没有人比我更懂HTML5</p>
                  </div>
                  <footer>
                      <p>个性签名:</p>
                      <p>美国总统,世界懂王</p>
                  </footer>
              </article>
          </div>
      </article>
      

      评论区每一个人的都是相互独立的,完整的,所以用article元素。

      <aside>标签

      <aside> 标签表示当前页面或文章的附属信息部分;

      可以是相关文章,侧边栏,广告,导航条,友情链接,最新文章列表以及其他区别于主要内容的部分;

      例子:比如article元素内容之外,但是又于article内容相关的辅助信息,比如相关新闻,相关文章等;

        <article>
          <h1>HTML5教程</h1>
          <p>阿西河的HTML5教程,写的真好啊!</p>
        </article>
        <aside>
          <h2>相关教程</h2>
          <ul>
            <li><a href="#">HTML 教程</a></li>
            <li><a href="#">CSS 教程</a></li>
            <li><a href="#">CSS3 教程</a></li>
          </ul>
        </aside>
      

      <section>标签

      <section> 标签表示页面中的一个内容块,比如章节、页眉、页脚或文档的其他部分。

      具体怎么划分,其实也可以参考设计师的PS图层分组;

      注意:section 作用是对内容进行分块的,或者对文章进行分段。

      article 包含 section

        <article>
          <header>
            <h1>HTML5教程</h1>
            <p>发表于:2020年9月1日</p>
          </header>
          <div>
            <section>
              <h2>html5 标签</h2>
              <p>标签的介绍</p>
            </section>
            <section>
              <h2>html5 属性</h2>
              <p>属性的介绍</p>
            </section>
          </div>
          <footer>
            <p>归属版权为阿西河前端教程所有</p>
          </footer>
        </article>
      

      上面的HTML标签和属性,都是独立的内容,所以用section包起来;

      section 包含 article

        <!-- 评论区 -->
        <section>
          <h2>评论区</h2>
          <article>
            <header>
              <h3>发表者:朱安邦</h3>
              <p>发表于:2020年9月1日</p>
            </header>
            <div>
              <p>这个教程是我写的,我感觉还不错</p>
            </div>
            <footer>
              <p>个性签名:</p>
              <p>阿西河前端教程的站长</p>
            </footer>
          </article>
          <article>
            <header>
              <h3>发表者:特朗普</h3>
              <p>发表于:2020年9月1日</p>
            </header>
            <div>
              <p>这个教程写的一点也不好,比我差远了,没有人比我更懂HTML5</p>
            </div>
            <footer>
              <p>个性签名:</p>
              <p>美国总统,世界懂王</p>
            </footer>
          </article>
        </section>
      

      因为本身属于评论区,属于一个内容块,所以使用 section 包含;但是里面每一个人的评论都是独立的,所以用 article包含。

      section 与 article 区别

      他们是可以互相包含的;

      • section 强调的是分段,分块
      • article 强调的是独立性
        • article 是一种特殊的section标签;他比section更强调独立性。

      如果一个内容,相对比较独立,完整的时候,就是有 article;如果将一块内容分为几段的时候,使用section;

      在实际使用中,因为所有页面的从属原因,以及CSS控制原因,可以把导航条,菜单,版权等在一个统一的div内,方便使用css控制,也方面阅读

      section使用禁忌

      • 不要将section元素用于设置样式的页面容器,那是div的工作
      • 如果 article ,aside,nav符合使用条件,不要使用section元素
      • 不要为没有标题(h1-h6)的内容块设置section;

      比如上面的评论区的代码,评论区与文章正文相关,所以不能使用article,也不能使用nav,但是他属于一个内容块,所以使用section;但是里面的评论又是不相关的,所以使用article;

      <figure> 和 <figcaption> 标签

      <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

      <figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

      <figcaption> 标签定义 <figure> 元素的标题.

      <figcaption> 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

      <figure>
          <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
          <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
      </figure>
      
      目录
      目录