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> 元素
The <section> 元素定义文档中的一个部分。
根据 W3C 的 HTML 文档：“一个部分是内容的主题分组，通常带有标题。”
可以使用 <section> 元素的示例
- 章节
- 简介
- 新闻项目
- 联系信息
一个网页通常可以分成多个部分，例如简介、内容和联系信息。
示例
文档中的两个部分
<section>
<h1>WWF</h1>
<p>世界自然基金会 (WWF) 是一家国际组织，致力于环境保护、研究和恢复工作，以前称为世界野生动物基金会。 WWF 成立于 1961 年。</p>
</section>
<section>
<h1>WWF 的熊猫标志</h1>
<p>熊猫已成为 WWF 的标志。 WWF 著名的熊猫标志起源于一只名叫“奇奇”的熊猫，它于 WWF 成立的同一年从北京动物园转到伦敦动物园。</p>
</section>
自己尝试 »
HTML <article> 元素
The <article> 元素指定独立的、自包含的内容。
一篇独立的文章应该有意义，并且应该可以独立于网站的其他部分进行发布。
可以使用 <article> 元素的示例
- 论坛帖子
- 博客文章
- 用户评论
- 产品卡片
- 报纸文章
示例
三篇带有独立、自包含内容的文章
<article>
<h2>谷歌浏览器</h2>
<p>谷歌浏览器是谷歌开发的一款网络浏览器，于 2008 年发布。谷歌浏览器是当今世界上最流行的网络浏览器！</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是一款由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月起，Firefox 一直是最受欢迎的第二大网络浏览器。</p>
</article>
<article>
<h2>微软 Edge</h2>
<p>微软 Edge 是微软开发的一款网络浏览器，于 2015 年发布。微软 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>谷歌浏览器</h2>
<p>谷歌浏览器是谷歌开发的一款网络浏览器，于 2008 年发布。谷歌浏览器是当今世界上最流行的网络浏览器！</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是一款由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月起，Firefox 一直是最受欢迎的第二大网络浏览器。</p>
</article>
<article class="browser">
<h2>微软 Edge</h2>
<p>微软 Edge 是微软开发的一款网络浏览器，于 2015 年发布。微软 Edge 取代了 Internet Explorer。</p>
</article>
</article>
</body>
</html>
自己尝试 »
<article> 嵌套在 <section> 中或反之？
The <article> 元素指定独立的、自包含的内容。
The <section> 元素定义文档中的一个部分。
我们可以使用这些定义来决定如何嵌套这些元素吗？ 不，我们不能！
因此，您会发现包含`<article>` 元素的`<section>` 元素的 HTML 页面，以及包含`<section>` 元素的`<article>` 元素。
HTML `<header>` 元素
`<header>` 元素代表一个用于介绍性内容或导航链接集的容器。
一个`<header>` 元素通常包含
- 一个或多个标题元素（`
<h1>` - `<h6>`） - 徽标或图标
- 作者信息
注意：您可以在一个 HTML 文档中拥有多个`<header>` 元素。但是，`<header>` 不能放置在`<footer>`、`<address>` 或其他`<header>` 元素中。
示例
<article> 的标题：
<article>
`<header>`
`<h1>`WWF 做什么？`</h1>`
`<p>`WWF 的使命：`</p>`
`</header>`
`<p>`WWF 的使命是阻止地球自然环境的退化，
并建设一个人类与自然和谐共处的未来。`</p>`
</article>
自己尝试 »
HTML `<footer>` 元素
`<footer>` 元素为文档或节定义页脚。
一个`<footer>` 元素通常包含
- 作者信息
- 版权信息
- 联系信息
- 网站地图
- 返回顶部链接
- 相关文档
您可以在一个文档中拥有多个`<footer>` 元素。
示例
文档中的页脚部分
<footer>
`<p>`作者：Hege Refsnes`</p>`
`<p>`<a href="mailto:[email protected]">`[email protected]`</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. - 特鲁利，普利亚，意大利。`</figcaption>`
`</figure>`
自己尝试 »
为什么使用语义元素？
根据 W3C：“语义网允许数据在应用程序、企业和社区之间共享和重用。”
HTML 中的语义元素
下面列出了一些 HTML 中的语义元素。
| 标签 | 描述 |
|---|---|
| <article> | 定义独立的、自包含的内容 |
| <aside> | 定义与页面内容无关的内容 |
| <details> | 定义用户可以查看或隐藏的其他详细信息 |
| <figcaption> | 为`<figure>` 元素定义标题 |
| <figure> | 指定自包含内容，例如插图、图表、照片、代码列表等。 |
| <footer> | 为文档或节定义页脚 |
| <header> | 指定文档或节的页眉 |
| <main> | 指定文档的主要内容 |
| <mark> | 定义标记/突出显示的文本 |
| <nav> | 定义导航链接 |
| <section> | 定义文档中的节 |
| <summary> | 为`<details>` 元素定义可见标题 |
| <time> | 定义日期/时间 |
有关所有可用 HTML 标签的完整列表，请访问我们的`<a href="/tags/default.asp">`HTML 标签参考`</a>`。
