二维码

HTML 语义元素

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>

  • 介绍
  • 新闻项目
  • 联系方式

一个网页通常可以分成几个部分进行介绍, 内容和联系信息。

1
2
3
4
5
6
7
8
9
10
11
文档中的两个部分:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

HTML <article> 元素

该元素指定独立的、独立的内容。<article>

一篇文章本身应该有意义,并且应该有可能 独立于网站的其余部分进行分发。

可以使用元素的示例:<article>

  • 论坛帖子
  • 博客文章
  • 用户评论
  • 产品卡
  • 报纸文章
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
三篇具有独立、独立内容的文章:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

示例 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
使用 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>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>

</article>

</body>
</html>

嵌套<article>在<section>反之亦然?

该元素指定独立的、独立的内容。<article>

该元素定义文档中的部分。<section>

我们可以使用定义来决定如何嵌套这些元素吗?不,我们不能!

因此,您会发现带有元素的 HTML 页面 包含元素,以及包含元素的元素。<section> <article> <article> <section>

HTML <header> 元素

该元素表示介绍性内容的容器或 一组导航链接。<header>

元素通常包含:<header>

  • 一个或多个标题元素 (<h1> - <h6>
  • 徽标或图标
  • 作者信息

**注意:**您可以将多个元素合二为一 HTML 文档。但是,不能放在 或其他元素中。<header> <header> <footer> <address> <header>

1
2
3
4
5
6
7
8
9
10
<article>的标题:

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

该元素定义文档或节的页脚。<footer>

元素通常包含:<footer>

  • 作者信息
  • 版权 信息
  • 联系信息
  • 网站地图
  • 返回顶部链接
  • 相关文档

一个文档中可以有多个元素。<footer>

1
2
3
4
5
6
文档中的页脚部分:

<footer>
  <p>Author: adamsw</p>
  <p><a href="mailto:marketing@adamsw.com">marketing@adamsw.com</a></p>
</footer>

HTML <nav> 元素

该元素定义一组导航链接。<nav>

请注意,并非文档的所有链接都应位于元素内。该元素仅适用于导航链接的主要块。<nav> <nav>

浏览器(如禁用用户的屏幕阅读器)可以使用此元素 以确定是否省略此内容的初始呈现。

1
2
3
4
5
6
7
8
一组导航链接:

<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>

1
2
3
4
5
6
7
8
显示除放置内容之外的一些内容:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

示例 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
使用 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>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

HTML <figure> 和 <figcaption> 元素

标记指定独立的内容,如插图、图表、照片、代码清单等。<figure>

标记定义元素的标题。该元素可以作为第一个或 作为元素的最后一个子元素。<figcaption> <figure> <figcaption> <figure>

该元素定义实际的图像/插图。<img>

1
2
3
4
<figure>  
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

为什么选择语义元素?

语义网允许数据在应用程序之间共享和重用, 企业和社区。

HTML 中的语义元素

以下是 HTML 中一些语义元素的列表。

Tag Description
[<article>] Defines independent, self-contained content
[<aside>] Defines content aside from the page content
[<details>] Defines additional details that the user can view or hide
[<figcaption>] Defines a caption for a /<figure> element
[<figure>] Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
[<footer>] Defines a footer for a document or section
[<header>] Specifies a header for a document or section
[<main>] Specifies the main content of a document
[<mark>] Defines marked/highlighted text
[<nav>] Defines navigation links
[<section>] Defines a section in a document
[<summary>] Defines a visible heading for a /<details> element
[<time>] Defines a date/time

有关所有可用 HTML 标记的完整列表,请访问我们的 [HTML 标记参考]。