HTML 语义元素
语义元素 = 具有含义的元素。
什么是语义元素？
语义元素能够清晰地向浏览器和开发者描述其含义。
非语义元素的例子： <div> 和 <span> - 它们不会告诉你任何关于其内容的信息。
语义元素的例子： <form>, <table>, 和 <article> - 它们清晰地定义了其内容。
HTML 中的语义元素
许多网站包含类似这样的 HTML 代码： <div id="nav"> <div class="header"> <div id="footer"> 来表示导航、页眉和页脚。
在 HTML 中，有一些语义元素可用于定义网页的不同部分：
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML <section> 元素
<section> 元素定义文档中的一个节。
根据 W3C 的 HTML 文档：“一个 section 是内容的逻辑分组，通常包含一个标题。”
可以使用 <section> 元素的例子
- 章节
- 介绍
- 新闻项目
- 联系信息
一个网页通常可以分为介绍、内容和联系信息等部分。
示例
文档中的两个 section
<section>
<h1>WWF</h1>
<p>世界自然基金会（WWF）是一个致力于环境保护、研究和恢复的国际组织，前身为世界野生动物基金会。WWF 成立于 1961 年。</p>
</section>
<section>
<h1>WWF 的熊猫标志</h1>
<p>熊猫已成为 WWF 的象征。WWF 著名的熊猫标志源于一只名叫“奇奇”的熊猫，它在 WWF 成立的同年从北京动物园迁往伦敦动物园。</p>
</section>
自己动手试一试 »
HTML <article> 元素
<article> 元素指定独立、完整的内容。
一篇 article 应该能够独立理解，并且可以与网站的其余部分分开分发。
可以使用 <article> 元素的例子
- 论坛帖子
- 博客文章
- 用户评论
- 产品卡片
- 报纸文章
示例
三篇具有独立、完整内容的 article
<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是由 Google 开发的网络浏览器，于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器！</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月以来，Firefox 一直是第二受欢迎的网络浏览器。</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是由 Microsoft 开发的网络浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
自己动手试一试 »
示例 2
使用 CSS 样式化 <article> 元素
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>最受欢迎的浏览器</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome 是由 Google 开发的网络浏览器，于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器！</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月以来，Firefox 一直是第二受欢迎的网络浏览器。</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是由 Microsoft 开发的网络浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
</article>
</body>
</html>
自己动手试一试 »
嵌套 <article> 在 <section> 中或反之？
<article> 元素指定独立、完整的内容。
<section> 元素定义文档中的一个节。
我们可以使用这些定义来决定如何嵌套这些元素吗？不行，我们不能！
因此，你会发现 HTML 页面中有包含 <article> 元素的 <section> 元素，以及包含 <section> 元素的 <article> 元素。
HTML <header> 元素
<header> 元素代表一个容器，用于放置介绍性内容或一组导航链接。
一个 <header> 元素通常包含
- 一个或多个标题元素 (<h1> - <h6>)
- logo 或图标
- 作者信息
注意：一个 HTML 文档中可以包含多个 <header> 元素。但是，<header> 不能放在 <footer>、<address> 或另一个 <header> 元素内。
示例
一个 <article> 的页眉：
<article>
<header>
<h1>WWF 做什么？</h1>
<p>WWF 的使命：</p>
</header>
<p>WWF 的使命是阻止我们星球自然环境的退化，
并建立一个人类与自然和谐相处的未来。</p>
</article>
自己动手试一试 »
HTML <footer> 元素
<footer> 元素为文档或 section 定义页脚。
一个 <footer> 元素通常包含
- 作者信息
- 版权信息
- 联系信息
- 站点地图
- 返回顶部链接
- 相关文档
一个文档中可以包含多个 <footer> 元素。
示例
文档中的一个页脚 section
<footer>
<p>作者：Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
自己动手试一试 »
HTML <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>
自己动手试一试 »
HTML <aside> 元素
<aside> 元素定义了与它所在内容相关的一些附加内容（例如侧边栏）。
<aside> 的内容应与周围内容间接相关。
示例
显示一些与所在内容相关联的附加内容
<p>今年夏天，我的家人和我参观了 Epcot 中心。天气很好，Epcot 棒极了！我度过了一个和家人在一起的美好夏天！</p>
<aside>
<h4>Epcot 中心</h4>
<p>Epcot 是华特迪士尼世界度假区的一个主题公园，提供激动人心的景点、国际展馆、屡获殊荣的烟花表演和季节性特别活动。</p>
</aside>
自己动手试一试 »
示例 2
使用 CSS 样式化 <aside> 元素
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>今年夏天，我的家人和我参观了 Epcot 中心。天气很好，Epcot 棒极了！我度过了一个和家人在一起的美好夏天！</p>
<aside>
<p>Epcot 中心是华特迪士尼世界度假区的一个主题公园，提供激动人心的景点、国际展馆、屡获殊荣的烟花表演和季节性特别活动。</p>
</aside>
<p>今年夏天，我的家人和我参观了 Epcot 中心。天气很好，Epcot 棒极了！我度过了一个和家人在一起的美好夏天！</p>
<p>今年夏天，我的家人和我参观了 Epcot 中心。天气很好，Epcot 棒极了！我度过了一个和家人在一起的美好夏天！</p>
</body>
</html>
自己动手试一试 »
HTML <figure> 和 <figcaption> 元素
<figure> 标签指定自包含的内容，如插图、图表、照片、代码列表等。
<figcaption> 标签为 <figure> 元素定义了标题。 <figcaption> 元素可以作为 <figure> 元素的第一个或最后一个子元素。
<img> 元素定义了实际的图像/插图。
示例
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>图 1 - Trulli，普利亚，意大利。</figcaption>
</figure>
自己动手试一试 »
为什么要使用语义元素？
根据 W3C 的说法：“语义 Web 允许数据在应用程序、企业和社区之间共享和重用。”
HTML 中的语义元素
下面是 HTML 中一些语义元素的列表。
| 标签 | 描述 |
|---|---|
| <article> | 定义独立、完整的内容 |
| <aside> | 定义页面内容之外的内容 |
| <details> | 定义用户可以查看或隐藏的附加详细信息 |
| <figcaption> | 为 <figure> 元素定义标题 |
| <figure> | 指定自包含的内容，如插图、图表、照片、代码列表等。 |
| <footer> | 为文档或 section 定义页脚 |
| <header> | 为文档或 section 指定页眉 |
| <main> | 指定文档的主要内容 |
| <mark> | 定义标记/高亮文本 |
| <nav> | 定义导航链接 |
| <section> | 定义文档中的一个节 |
| <summary> | 为 <details> 元素定义可见标题 |
| <time> | 定义日期/时间 |
有关所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
