Appearance
语义化
本章将介绍HTML5中的语义化标签，它们对于构建结构清晰、易于维护的网页至关重要。
什么是语义化？
语义化的含义
语义化是指使用恰当的HTML标签来标记内容，使标签本身能够表达内容的含义。
非语义化示例：
html
<!-- 使用div和span，看不出内容是什么 -->
<div class="header">
<div class="nav">
<span class="link">首页</span>
</div>
</div>
<div class="content">
<div class="article">文章内容</div>
</div>
<div class="footer">页脚</div>语义化示例：
html
<!-- 使用语义化标签，一目了然 -->
<header>
<nav>
<a href="#">首页</a>
</nav>
</header>
<main>
<article>文章内容</article>
</main>
<footer>页脚</footer>语义化的好处
对开发者友好
- 代码更易读、易维护
- 团队协作更高效
- 代码结构更清晰
对搜索引擎友好（SEO）
- 搜索引擎能更好理解页面结构
- 提高网站在搜索结果中的排名
对辅助技术友好
- 屏幕阅读器能更好地为视障用户解读页面
- 提高网站的可访问性
对浏览器友好
- 浏览器能更好地解析页面结构
- 提供更好的用户体验
页面结构标签
header标签
<header> 用于定义页面或区块的头部：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>header标签示例</title>
</head>
<body>
<!-- 页面头部 -->
<header>
<h1>网站标题</h1>
<nav>
<a href="/">首页</a>
<a href="/about">关于</a>
<a href="/contact">联系</a>
</nav>
</header>
<!-- 文章头部 -->
<article>
<header>
<h2>文章标题</h2>
<p>作者：张三 | 发布日期：2024-01-01</p>
</header>
<p>文章内容...</p>
</article>
<!-- 区块头部 -->
<section>
<header>
<h3>区块标题</h3>
</header>
<p>区块内容...</p>
</section>
</body>
</html>nav标签
<nav> 用于定义导航链接区域：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>nav标签示例</title>
</head>
<body>
<!-- 主导航 -->
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/services">服务</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系方式</a></li>
</ul>
</nav>
<!-- 面包屑导航 -->
<nav aria-label="面包屑导航">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/products/laptop">笔记本电脑</a></li>
</ol>
</nav>
<!-- 侧边栏导航 -->
<aside>
<nav aria-label="侧边栏导航">
<h4>快速链接</h4>
<ul>
<li><a href="#section1">第一章</a></li>
<li><a href="#section2">第二章</a></li>
<li><a href="#section3">第三章</a></li>
</ul>
</nav>
</aside>
<!-- 页脚导航 -->
<footer>
<nav aria-label="页脚导航">
<a href="/privacy">隐私政策</a>
<a href="/terms">服务条款</a>
<a href="/sitemap">网站地图</a>
</nav>
</footer>
</body>
</html>注意
一个页面可以有多个 <nav> 标签，建议使用 aria-label 属性区分不同的导航区域。
main标签
<main> 用于定义页面的主要内容，一个页面只能有一个：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>main标签示例</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>导航菜单</nav>
</header>
<!-- 页面主要内容（唯一） -->
<main>
<h2>页面主题内容</h2>
<p>这里是页面的核心内容...</p>
<article>
<h3>文章标题</h3>
<p>文章内容...</p>
</article>
</main>
<aside>侧边栏内容</aside>
<footer>页脚信息</footer>
</body>
</html>重要规则
- 每个页面只能有一个
<main>标签 <main>不能是<article>、<aside>、<footer>、<header>、<nav>的后代
article标签
<article> 用于定义独立的、可复用的内容块：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>article标签示例</title>
</head>
<body>
<main>
<!-- 博客文章 -->
<article>
<header>
<h2>如何学习HTML</h2>
<p>
<span>作者：张三</span>
<time datetime="2024-01-15">2024年1月15日</time>
</p>
</header>
<p>HTML是网页开发的基础...</p>
<section>
<h3>什么是HTML</h3>
<p>HTML是一种标记语言...</p>
</section>
<section>
<h3>如何开始</h3>
<p>首先创建一个HTML文件...</p>
</section>
<footer>
<p>标签：HTML, 前端开发</p>
</footer>
</article>
<!-- 新闻文章 -->
<article>
<header>
<h2>科技新闻标题</h2>
<time datetime="2024-01-16">2024年1月16日</time>
</header>
<p>新闻内容...</p>
</article>
<!-- 用户评论 -->
<article>
<header>
<strong>用户A</strong> 说：
<time datetime="2024-01-16T10:30">2024-01-16 10:30</time>
</header>
<p>这是一条评论内容...</p>
</article>
</main>
</body>
</html>section标签
<section> 用于定义文档中的节（章节）：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>section标签示例</title>
</head>
<body>
<main>
<h1>HTML教程</h1>
<!-- 第一章 -->
<section>
<h2>第一章：HTML入门</h2>
<p>本章介绍HTML的基本概念...</p>
<!-- 子节 -->
<section>
<h3>1.1 什么是HTML</h3>
<p>HTML是一种标记语言...</p>
</section>
<section>
<h3>1.2 HTML历史</h3>
<p>HTML的发展历程...</p>
</section>
</section>
<!-- 第二章 -->
<section>
<h2>第二章：HTML标签</h2>
<p>本章介绍常用的HTML标签...</p>
</section>
<!-- 第三章 -->
<section>
<h2>第三章：HTML表单</h2>
<p>本章介绍HTML表单...</p>
</section>
</main>
</body>
</html>article vs section
<article>：内容独立、可复用（如文章、评论）<section>：内容相关、组成整体（如章节）- 可以嵌套使用：
<article>里可以有<section>，<section>里可以有<article>
aside标签
<aside> 用于定义与主内容相关但可独立存在的内容：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>aside标签示例</title>
<style>
.container {
display: flex;
gap: 20px;
}
main {
flex: 3;
}
aside {
flex: 1;
background: #f5f5f5;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<main>
<article>
<h1>文章标题</h1>
<p>文章的主要内容...</p>
<!-- 文章内的aside：相关说明 -->
<aside>
<h4>相关提示</h4>
<p>这是一个补充说明，与文章相关但不是主要内容。</p>
</aside>
<p>文章继续...</p>
</article>
</main>
<!-- 侧边栏aside -->
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
<li><a href="#">文章3</a></li>
</ul>
<h3>热门标签</h3>
<p>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
</p>
<h3>广告</h3>
<p>广告内容...</p>
</aside>
</div>
</body>
</html>footer标签
<footer> 用于定义页面或区块的底部：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>footer标签示例</title>
</head>
<body>
<!-- 页面页脚 -->
<footer>
<nav>
<a href="/privacy">隐私政策</a>
<a href="/terms">服务条款</a>
<a href="/contact">联系我们</a>
</nav>
<p>© 2024 我的网站. 保留所有权利.</p>
<address>
联系邮箱：<a href="mailto:info@example.com">info@example.com</a>
</address>
</footer>
<!-- 文章页脚 -->
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
<footer>
<p>作者：张三</p>
<p>发布于：<time datetime="2024-01-15">2024年1月15日</time></p>
</footer>
</article>
<!-- 区块页脚 -->
<section>
<h2>产品介绍</h2>
<p>产品内容...</p>
<footer>
<a href="/products">查看更多产品</a>
</footer>
</section>
</body>
</html>内容分组标签
figure和figcaption
<figure> 用于包装独立的内容（如图片、图表、代码），<figcaption> 用于添加标题：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>figure示例</title>
</head>
<body>
<article>
<h1>文章标题</h1>
<!-- 图片示例 -->
<figure>
<img src="landscape.jpg" alt="风景照片" width="600" />
<figcaption>图1：美丽的风景</figcaption>
</figure>
<!-- 代码示例 -->
<figure>
<pre>
<code>
function hello() {
console.log("Hello, World!");
}
</code>
</pre>
<figcaption>代码1：Hello函数示例</figcaption>
</figure>
<!-- 引用示例 -->
<figure>
<blockquote>
<p>生活就像一盒巧克力，你永远不知道下一颗是什么味道。</p>
</blockquote>
<figcaption>—— 电影《阿甘正传》</figcaption>
</figure>
<!-- 图表示例 -->
<figure>
<svg width="200" height="100">
<rect x="10" y="10" width="50" height="80" fill="blue" />
<rect x="70" y="30" width="50" height="60" fill="green" />
<rect x="130" y="20" width="50" height="70" fill="red" />
</svg>
<figcaption>图2：销售数据对比</figcaption>
</figure>
</article>
</body>
</html>details和summary
<details> 创建可折叠的内容，<summary> 定义可见的标题：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>details示例</title>
</head>
<body>
<h2>常见问题</h2>
<!-- 基本用法 -->
<details>
<summary>什么是HTML？</summary>
<p>HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。</p>
</details>
<!-- 默认展开 -->
<details open>
<summary>如何学习HTML？</summary>
<p>建议从以下几个方面入手：</p>
<ul>
<li>学习HTML基本标签</li>
<li>理解文档结构</li>
<li>多动手实践</li>
</ul>
</details>
<!-- 嵌套使用 -->
<details>
<summary>前端开发学习路线</summary>
<details>
<summary>第一阶段：HTML基础</summary>
<p>学习HTML标签、文档结构、表单等</p>
</details>
<details>
<summary>第二阶段：CSS样式</summary>
<p>学习选择器、布局、响应式设计等</p>
</details>
<details>
<summary>第三阶段：JavaScript</summary>
<p>学习语法、DOM操作、事件处理等</p>
</details>
</details>
</body>
</html>mark标签
<mark> 用于高亮显示文本：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>mark示例</title>
</head>
<body>
<h2>搜索结果</h2>
<p>在搜索结果中，<mark>关键词</mark>会被高亮显示。</p>
<p>HTML是<mark>超文本标记语言</mark>，用于创建网页。</p>
<!-- 引用中的高亮 -->
<blockquote>
<p>学习编程最重要的是<mark>实践</mark>，只有动手写代码才能真正掌握。</p>
</blockquote>
</body>
</html>time标签
<time> 用于标记日期或时间：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>time示例</title>
</head>
<body>
<article>
<h1>文章标题</h1>
<p>发布于 <time datetime="2024-01-15">2024年1月15日</time></p>
<!-- 各种日期时间格式 -->
<p>活动时间：<time datetime="2024-03-20">3月20日</time></p>
<p>会议时间：<time datetime="2024-03-20T14:30">下午2:30</time></p>
<p>截止日期：<time datetime="2024-12-31">年底</time></p>
<p>时长：<time datetime="PT2H30M">2小时30分钟</time></p>
</article>
</body>
</html>address标签
<address> 用于标记联系信息：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>address示例</title>
</head>
<body>
<article>
<h1>文章标题</h1>
<p>文章内容...</p>
<!-- 作者联系信息 -->
<address>
作者：<a href="mailto:author@example.com">张三</a><br />
个人网站：<a href="https://author.example.com">author.example.com</a>
</address>
</article>
<footer>
<!-- 公司联系信息 -->
<address>
<strong>联系方式</strong><br />
电话：<a href="tel:+8613800138000">138-0013-8000</a><br />
邮箱：<a href="mailto:contact@example.com">contact@example.com</a><br />
地址：北京市朝阳区xxx街道
</address>
</footer>
</body>
</html>完整页面结构示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>语义化网页结构示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: white;
padding: 20px;
}
header h1 {
margin-bottom: 10px;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
gap: 20px;
}
main {
flex: 3;
}
aside {
flex: 1;
background: #f5f5f5;
padding: 20px;
}
article {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #ddd;
}
article header {
background: none;
color: inherit;
padding: 0;
margin-bottom: 15px;
}
article footer {
margin-top: 15px;
font-size: 14px;
color: #666;
}
section {
margin: 20px 0;
}
figure {
margin: 20px 0;
}
figcaption {
font-size: 14px;
color: #666;
text-align: center;
}
footer {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
footer a {
color: #4caf50;
}
</style>
</head>
<body>
<!-- 页面头部 -->
<header>
<h1>Tech Docs Station 技术文档站</h1>
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/frontend">前端</a></li>
<li><a href="/backend">后端</a></li>
<li><a href="/database">数据库</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<!-- 主要内容区域 -->
<div class="container">
<main>
<!-- 面包屑导航 -->
<nav aria-label="面包屑导航">
<a href="/">首页</a> > <a href="/frontend">前端</a> >
<span>HTML教程</span>
</nav>
<!-- 文章内容 -->
<article>
<header>
<h1>HTML语义化标签详解</h1>
<p>
<span>作者：<strong>张三</strong></span> |
<time datetime="2024-01-15">2024年1月15日</time> |
<span>阅读：1234次</span>
</p>
</header>
<p>
语义化HTML是指使用恰当的HTML标签来标记内容，使标签本身能够表达内容的含义。
</p>
<!-- 文章章节 -->
<section>
<h2>为什么需要语义化？</h2>
<p>语义化标签对于网页开发有诸多好处：</p>
<ul>
<li>提高代码可读性</li>
<li>改善SEO效果</li>
<li>增强可访问性</li>
<li>便于团队协作</li>
</ul>
</section>
<section>
<h2>常用语义化标签</h2>
<p>HTML5引入了许多语义化标签：</p>
<figure>
<table border="1" style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="padding: 10px;">标签</th>
<th style="padding: 10px;">用途</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;">header</td>
<td style="padding: 10px;">页面或区块头部</td>
</tr>
<tr>
<td style="padding: 10px;">nav</td>
<td style="padding: 10px;">导航区域</td>
</tr>
<tr>
<td style="padding: 10px;">main</td>
<td style="padding: 10px;">主要内容区域</td>
</tr>
<tr>
<td style="padding: 10px;">article</td>
<td style="padding: 10px;">独立内容块</td>
</tr>
</tbody>
</table>
<figcaption>表1：常用语义化标签</figcaption>
</figure>
</section>
<!-- 补充说明 -->
<aside>
<h4>小提示</h4>
<p>使用语义化标签时，要确保标签的含义与内容相符，不要滥用。</p>
</aside>
<footer>
<p>
标签： <a href="#">HTML</a>, <a href="#">语义化</a>,
<a href="#">前端开发</a>
</p>
</footer>
</article>
<!-- 评论区域 -->
<section>
<h2>评论区</h2>
<article>
<header>
<strong>李四</strong> 评论于
<time datetime="2024-01-16T10:30">2024-01-16 10:30</time>
</header>
<p>文章写得很好，受益匪浅！</p>
</article>
<article>
<header>
<strong>王五</strong> 评论于
<time datetime="2024-01-16T14:20">2024-01-16 14:20</time>
</header>
<p>感谢分享，学到了很多。</p>
</article>
</section>
</main>
<!-- 侧边栏 -->
<aside>
<section>
<h3>相关文章</h3>
<nav>
<ul>
<li><a href="#">CSS选择器详解</a></li>
<li><a href="#">JavaScript入门教程</a></li>
<li><a href="#">响应式设计基础</a></li>
</ul>
</nav>
</section>
<section>
<h3>热门标签</h3>
<p>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</p>
</section>
<section>
<h3>订阅更新</h3>
<form>
<input type="email" placeholder="输入邮箱" />
<button type="submit">订阅</button>
</form>
</section>
</aside>
</div>
<!-- 页面底部 -->
<footer>
<nav aria-label="页脚导航">
<a href="/privacy">隐私政策</a> | <a href="/terms">服务条款</a> |
<a href="/sitemap">网站地图</a>
</nav>
<p>© 2024 Tech Docs Station. 保留所有权利.</p>
<address>
联系邮箱：<a href="mailto:contact@example.com">contact@example.com</a>
</address>
</footer>
</body>
</html>语义化标签总结
| 标签 | 用途 | 使用场景 |
|---|---|---|
<header> | 头部区域 | 页面头部、文章头部、区块头部 |
<nav> | 导航区域 | 主导航、面包屑、侧边栏导航 |
<main> | 主要内容 | 页面核心内容（每页唯一） |
<article> | 独立内容 | 文章、评论、帖子 |
<section> | 章节 | 内容分组、章节划分 |
<aside> | 附属内容 | 侧边栏、相关链接、广告 |
<footer> | 底部区域 | 页面页脚、文章页脚 |
<figure> | 独立内容容器 | 图片、图表、代码块 |
<figcaption> | 内容标题 | figure的标题说明 |
<details> | 可折叠内容 | FAQ、折叠面板 |
<summary> | 折叠标题 | details的可见标题 |
<mark> | 高亮文本 | 搜索结果、重点标记 |
<time> | 时间日期 | 发布日期、事件时间 |
<address> | 联系信息 | 作者信息、公司联系方式 |
本章小结
本章我们学习了：
- 语义化的概念：使用恰当的标签表达内容含义
- 页面结构标签：
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer> - 内容分组标签：
<figure>、<figcaption>、<details>、<summary> - 文本语义标签：
<mark>、<time>、<address> - 语义化的好处：提高可读性、改善SEO、增强可访问性
下一章
下一章我们将学习 HTML5新特性，了解HTML5新增的功能和特性。