语义化标签整理

一、语义化

1、语义化属性

添加itemprop、itemscope属性，到达数据结构化，属性名可参考 schema.org；
meta标签和itemprop属性，<meta itemprop="dateModified" content="2018-11-17T04:14:51.000Z">；

注：参考知乎页面，改动一下meta的读取位置

<!--可以尝试，将meta标签放在需要元信息的块中-->
<article>
    <meta itemprop="dateModified" content="2018-11-17T04:14:51.000Z">
</article>

2、语义化标签

各个标签的含义，使用场景

注：语义化，即面向对象写html，方便网络蜘蛛或人快速理解网页结构和内容。

二、语义化标签

1、`<main>`

<main> 标签规定了document的主要内容，主要内容包括与中心主题直接相关或扩展的内容，或应用程序的中心功能。<main>元素中的内容对于文档来说应当是唯一的。

注：在一个文档中，不得包含多个未指定hidden 属性的<main>元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

2、`<header>`

<header> 标签定义文档或者文档的一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个 <header>元素。

注：<header>标签不能被放在 <footer>、<address> 或者另一个 <header>元素内部

3、`<footer>`

<footer> 标签定义文档或者文档的一部分区域的页脚。在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多 <footer>元素。

注：<footer>元素必须不能是 <header>、<address> 或者另一个<footer> 元素的后代元素

4、`<nav>`

<nav> 标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到<nav>元素。<nav>元素只是作为标注一个导航链接的区域。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

5、`<section>`

<section>元素表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6>element) 作为子节点来辨识每一个<section>。

如果元素内容可以分为几个部分的话，应该使用 article 而不是 section。
不要把 section元素作为一个普通的容器来使用，这是div的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。

<section>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</section>

6、`<article>`

<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
<article>元素的作者信息可通过<address>元素提供，但是不适用于嵌套的<article>元素。
<article>元素的发布日期和时间可通过<time>元素的pubdate属性表示。

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

注：section与article的区别

section：用来表示文档或应用的一部分。它主要来对一个整体部分划分为多个小部分，所以一般会使用<h1>-<h6>标签与<p>标签，每个小部分用标题来进行标示。
acticle：定义文章、页面或者是应用程序中独立完整可被外部引用的内容。一般有自己的<header>与<footer>，通常内部会用<aside>来进行辅助性说明等。

7、`<aside>`

<aside> 标签定义 <article>标签外的内容，<aside> 的内容应该与附近的内容相关。

通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。

注： <aside> 元素不能成为<address>元素的子元素

8、`<address>`

<address> 标签定义文档作者/所有者的联系信息。

如果 <address>元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。

如果<address> 元素位于 <article>元素内部，则它表示该文章作者/所有者的联系信息。

注：<address> 元素通常被包含在<footer>元素的其他信息中

一、语义化

1、语义化属性

2、语义化标签

二、语义化标签

1、<main>

2、<header>

3、<footer>

4、<nav>

5、<section>

6、<article>