语义化在 HTML5 中

允许您以语义方式构建网页的 HTML 元素

新增！我的 44 页电子书“CSS 在 44 分钟内”已出版！ 😃

# article

定义一个自包含的内容块，可以存在于任何上下文中。
它可以有自己的标题、脚注、章节……对于博客文章列表很有用。

示例： 复制

我的博客文章

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

<article>
  <header>
    <h3>
      <a href="/my-blog-post">My blog post</a>
    </h3>
  </header>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  </section>
  <footer>
    <small>
      Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a>
    </small>
  </footer>
</article>

# aside

定义一个与主要内容相关的內容块。通常显示为侧边栏。

示例： 复制

我的博客文章

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

等等。

<main>
  <h1>My blog post</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  <p>etc.</p>
</main>

<aside>
  <h3>About the author</h3>
  <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>
</aside>

# figcaption

定义<figure>的标题。

示例： 复制

HTML 参考徽标

<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
  <figcaption>The HTML Reference logo</figcaption>
</figure>

# figure

定义单个自包含元素，通常是图像。

示例： 复制

<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
</figure>

# footer

定义网页或部分的页脚。

示例： 复制

# header

定义网页或部分的页眉。

示例： 复制

HTML 参考

<header>
  <h1>HTML Reference</h1>
  <nav>
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
  </nav>
</header>

# main

定义网页的主要内容。可以与侧边栏一起显示。

示例： 复制

我的博客文章

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

等等。

<main>
  <h1>My blog post</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  <p>etc.</p>
</main>

<aside>
  <h3>About the author</h3>
  <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>
</aside>

# mark

定义突出显示的文本。

示例： 复制

我们使用 HTML5 在网络上编写内容。

We use HTML5 to write <mark>content</mark> on the Web.

# nav

定义包含导航链接的部分。

示例： 复制

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>

# section

定义网页中的部分。

示例： 复制

部分标题

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

<section>
  <h2>Section title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</section>

# time

定义时间，使用 24 小时制。

示例： 复制

游戏开始于 19:00。

The game starts at <time datetime="2017-04-29T19:00">19:00</time>.

`datetime`

定义时间和日期。

`"2017-04-29T19:00"`

该值需要是一个有效的时间字符串。