什么是语义元素？
语义元素 = 具有特定含义的元素。
语义元素能够清晰地向浏览器和开发者表明其自身的含义。
非语义元素的示例：<div>和<span>无法传达关于其内容的任何信息。
语义元素的示例：<img>、<table>以及<article>——清晰的定义了其内容。
HTML <section> Element
<section>元素用于定义文档中的一个章节。根据 W3C 的 HTML 文档说明：“章节是内容的主题性分组，通常带有一个标题”。
<section>元素的常被用在：章节、简介、新闻条目、联系信息等相关模块。
通常，一个网页可以划分成几个<section>部分，分别用于介绍、主体内容展示以及联系信息的呈现。
<section>
<h2>介绍</h2>
<p>这是关于该事件的一些背景信息……</p>
</section>
<section>
<h2>正文主体</h2>
<p>这里详细讲述事件的经过……</p>
</section>
<section>
<h2>结论</h2>
<p>总结整个事件并得出相关结论……</p>
</section>HTML <article> Element
<article>元素用于指定独立的、自成一体的内容。
一篇文章（使用<article>元素定义的内容）自身应该具有完整的意义，并且应当能够独立于网站的其他部分进行分发。
<article>元素的常被用在：论坛帖子、博客文章、用户评论、产品卡片、报纸文章等相关模块。
<article>
<h2>谷歌浏览器</h2>
<p>谷歌浏览器是由谷歌公司开发的一款网络浏览器，于2008年发布。如今，谷歌浏览器是世界上最受欢迎的网络浏览器！</p>
</article>
<article>
<h2>火狐浏览器</h2>
<p>火狐浏览器是由Mozilla（谋智网络）开发的一款开源网络浏览器。自2018年1月以来，火狐浏览器一直是第二受欢迎的网络浏览器。</p>
</article>
<article>
<h2>微软Edge浏览器</h2>
<p>微软Edge浏览器是由微软公司开发的一款网络浏览器，于2015年发布。微软Edge浏览器取代了Internet Explorer（IE浏览器）。</p>
</article>HTML <article> 和 <article> 之间的嵌套关系
- <article>元素用于指定独立的、自成一体的内容。
- <section>元素用于定义文档中的章节。
在 HTML 页面中，<section>元素包含着<article>元素，而有些页面里，<article>元素又包含着<section>元素。
<article>元素用于指定独立的、自成一体的内容。
HTML <header> Element
<header>元素表示一个用于存放介绍性内容或一组导航链接的容器。
一个<header>元素通常包含：一个或多个标题元素（<h1>到<h6>）、标志或图标、作者信息。
注意：在一个 HTML 文档中可以有多个<header>元素。然而，<header>元素不能放置在<footer>、<address>元素或另一个<header>元素内部。
<article>
<header>
<h1>世界自然基金会（WWF）做什么？</h1>
<p>世界自然基金会的使命：</p>
</header>
<p>世界自然基金会的使命是阻止地球自然环境的恶化，并构建一个人类与自然和谐共生的未来。</p>
</article>HTML <footer> Element
<footer>元素用于定义一个文档或一个章节的页脚部分。
一个<footer>元素通常包含：作者信息、版权信息、联系信息、网站地图、返回顶部、相关文档。
在一个文档中，你可以有多个<footer>元素。
<footer>
<p>作者：赫格·雷夫斯内斯</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>HTML <nav> Element
<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> Element
<aside>元素用于定义放置在其所在内容之外的一些内容（比如侧边栏）。
<aside>元素中的内容应该与周围的内容存在间接关联。
<p>今年夏天，我和我的家人参观了艾波卡特中心。天气很好，艾波卡特中心棒极了！我和家人一起度过了一个愉快的夏天！</p>
<aside>
<h4>艾波卡特中心</h4>
<p>艾波卡特中心是华特迪士尼世界度假区的一个主题公园，这里有令人兴奋的景点、国际展馆、屡获殊荣的烟花表演以及季节性的特别活动。</p>
</aside>HTML <figure> 和 <figcaption> Element
<figure>标签用于指定自成一体的内容，例如插图、图表、照片、代码清单等。
<figcaption>标签<figure>元素定义一个标题（说明文字）。
<figcaption>元素可以作为<figure>元素的第一个子元素或者最后一个子元素来放置。
<img>标签用于定义实际的图像 / 插图。
<figure>
<img src="pic_trulli.jpg" alt="圆顶石屋">
<figcaption>图 1 - 意大利普利亚地区的圆顶石屋。</figcaption>
</figure>HTML 常见语义元素
以下是一些常见的 HTML 语义化元列表：