HTML简介

HTML语法基础

HTML文档结构

HTML标签属性

文档类型定义

HTML语法规则

文本基础

标题与段落

文本格式化

列表

链接

图像

表格

多媒体

表单基础

表单进阶

表单验证

表单样式

语义化标签

HTML5新特性

HTML5文本语义

Canvas绘图

SVG图形

Web存储

IndexedDB

Web Workers

地理位置API

拖放API

历史记录API

剪贴板API

拖放API中级

WebSockets

通知API

全屏API

剪贴板API进阶

文件API

拖放API进阶

CSS集成基础

CSS选择器

CSS盒模型

CSS布局技术

响应式设计

代码规范

可访问性

Web安全

隐私保护

个人网站项目

博客系统项目

电商网站项目

社交平台项目

开发工具

版本控制

包管理器

构建工具

Web Components

PWA渐进式应用

WebAssembly

性能优化

Web发展趋势

AI与Web

Web安全未来

Web技术展望

语义化标签

语义化标签概述

HTML语义化标签是指使用具有明确含义的标签来描述网页内容的结构和意义，而不仅仅是用于样式展示。

东巴文（db-w.cn） 认为：语义化标签是现代Web开发的基石，它提升了代码的可读性、可访问性和SEO效果。

为什么需要语义化

语义化的优势

优势	说明
可读性	代码更易读、易维护
可访问性	屏幕阅读器能更好地解析内容
SEO优化	搜索引擎更好地理解页面结构
代码复用	结构清晰，便于团队协作
未来兼容	符合Web标准，适应未来发展

语义化对比

<!-- ❌ 非语义化 -->
<div class="header">
    <div class="nav">
        <div class="link">首页</div>
        <div class="link">关于</div>
    </div>
</div>
<div class="main">
    <div class="article">
        <div class="title">文章标题</div>
        <div class="content">文章内容</div>
    </div>
</div>
<div class="footer">版权信息</div>

<!-- ✅ 语义化 -->
<header>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
</header>
<main>
    <article>
        <h1>文章标题</h1>
        <p>文章内容</p>
    </article>
</main>
<footer>版权信息</footer>

东巴文点评：语义化标签让代码自解释，一眼就能看出各部分的作用。

文档结构标签

header标签

<header>标签用于定义文档或章节的页眉。

<!-- 文档页眉 -->
<header>
    <h1>东巴文学习平台</h1>
    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/courses">课程</a></li>
            <li><a href="/about">关于</a></li>
        </ul>
    </nav>
</header>

<!-- 章节页眉 -->
<article>
    <header>
        <h2>文章标题</h2>
        <p>作者：张三 | 发布时间：2024-01-01</p>
    </header>
    <p>文章内容...</p>
</article>

东巴文点评：<header>可以用于整个文档，也可以用于文章或章节。

nav标签

<nav>标签用于定义导航链接区域。

<!-- 主导航 -->
<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/products">产品</a></li>
        <li><a href="/services">服务</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/html">HTML教程</a></li>
    </ol>
</nav>

<!-- 侧边栏导航 -->
<nav aria-label="章节导航">
    <h3>目录</h3>
    <ul>
        <li><a href="#section1">第一章</a></li>
        <li><a href="#section2">第二章</a></li>
        <li><a href="#section3">第三章</a></li>
    </ul>
</nav>

东巴文点评：<nav>用于主要导航区域，不要滥用。页脚的简单链接不需要用<nav>。

main标签

<main>标签用于定义文档的主要内容区域。

<body>
    <header>
        <h1>网站标题</h1>
        <nav>导航链接</nav>
    </header>
    
    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
    
    <aside>
        <h3>侧边栏</h3>
        <p>相关内容...</p>
    </aside>
    
    <footer>
        <p>版权信息</p>
    </footer>
</body>

使用规则：

每个页面只能有一个<main>标签
<main>不能是<article>、<aside>、<footer>、<header>、<nav>的后代
<main>应该包含页面的核心内容

东巴文点评：<main>帮助屏幕阅读器快速定位到主要内容，提升可访问性。

article标签

<article>标签用于定义独立的、完整的内容块。

<!-- 博客文章 -->
<article>
    <header>
        <h2>HTML语义化标签详解</h2>
        <p>作者：东巴文 | 发布时间：2024-01-01</p>
    </header>
    
    <p>文章内容...</p>
    
    <footer>
        <p>标签：HTML, 语义化</p>
    </footer>
</article>

<!-- 新闻文章 -->
<article>
    <header>
        <h2>重大新闻标题</h2>
        <time datetime="2024-01-01">2024年1月1日</time>
    </header>
    <p>新闻内容...</p>
</article>

<!-- 用户评论 -->
<article>
    <header>
        <img src="avatar.jpg" alt="用户头像">
        <strong>张三</strong>
        <time datetime="2024-01-01T10:30">2024-01-01 10:30</time>
    </header>
    <p>这是一条评论内容...</p>
</article>

使用场景：

博客文章
新闻报道
论坛帖子
用户评论
产品卡片
小部件

东巴文点评：<article>的内容应该是可以独立分发或重用的，比如RSS订阅。

section标签

<section>标签用于定义文档中的章节或主题分组。

<article>
    <h1>HTML教程</h1>
    
    <section>
        <h2>第一章：HTML基础</h2>
        <p>HTML基础内容...</p>
    </section>
    
    <section>
        <h2>第二章：HTML标签</h2>
        <p>HTML标签内容...</p>
    </section>
    
    <section>
        <h2>第三章：HTML属性</h2>
        <p>HTML属性内容...</p>
    </section>
</article>

<!-- 产品介绍 -->
<section>
    <h2>产品特点</h2>
    <ul>
        <li>特点一</li>
        <li>特点二</li>
        <li>特点三</li>
    </ul>
</section>

<section>
    <h2>用户评价</h2>
    <article>
        <p>用户评价内容...</p>
    </article>
</section>

article vs section：

标签	用途	特点
`<article>`	独立完整的内容	可以独立分发、重用
`<section>`	主题分组的内容	通常需要标题，不能独立存在

东巴文点评：<section>用于对内容进行分组，通常包含一个标题。

aside标签

<aside>标签用于定义与主内容相关但可独立存在的附属内容。

<article>
    <h1>文章标题</h1>
    <p>文章主要内容...</p>
    
    <aside>
        <h3>相关链接</h3>
        <ul>
            <li><a href="#">相关文章1</a></li>
            <li><a href="#">相关文章2</a></li>
        </ul>
    </aside>
</article>

<!-- 侧边栏 -->
<main>
    <article>
        <h1>文章标题</h1>
        <p>文章内容...</p>
    </article>
</main>

<aside>
    <h2>作者介绍</h2>
    <p>作者信息...</p>
    
    <h2>热门文章</h2>
    <ul>
        <li><a href="#">热门文章1</a></li>
        <li><a href="#">热门文章2</a></li>
    </ul>
    
    <h2>标签云</h2>
    <p>标签列表...</p>
</aside>

使用场景：

侧边栏
相关链接
广告区域
作者介绍
引用、注释

东巴文点评：<aside>的内容与主内容相关，但即使移除也不会影响主内容的理解。

footer标签

<footer>标签用于定义文档或章节的页脚。

<!-- 文档页脚 -->
<footer>
    <nav>
        <a href="/privacy">隐私政策</a>
        <a href="/terms">服务条款</a>
        <a href="/contact">联系我们</a>
    </nav>
    <p>&copy; 2024 东巴文学习平台. 保留所有权利.</p>
</footer>

<!-- 章节页脚 -->
<article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
    
    <footer>
        <p>作者：张三</p>
        <p>发布时间：2024-01-01</p>
        <p>标签：HTML, CSS</p>
    </footer>
</article>

<!-- 联系信息 -->
<footer>
    <address>
        联系作者：<a href="mailto:info@db-w.cn">info@db-w.cn</a><br>
        地址：北京市朝阳区
    </address>
</footer>

东巴文点评：<footer>可以包含版权信息、联系方式、相关链接等。

内容分组标签

figure和figcaption

<figure>用于定义独立的内容（图片、图表、代码等），<figcaption>用于定义标题。

<!-- 图片 -->
<figure>
    <img src="html-structure.png" alt="HTML文档结构">
    <figcaption>图1：HTML文档结构示意图</figcaption>
</figure>

<!-- 代码块 -->
<figure>
    <figcaption>示例代码：HTML基本结构</figcaption>
    <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    页面内容
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

<!-- 图表 -->
<figure>
    <svg width="400" height="300">
        <!-- SVG图表内容 -->
    </svg>
    <figcaption>图2：2024年用户增长趋势</figcaption>
</figure>

<!-- 引用 -->
<figure>
    <blockquote>
        <p>学习HTML是Web开发的第一步。</p>
    </blockquote>
    <figcaption>—— 东巴文创始人</figcaption>
</figure>

东巴文点评：<figure>和<figcaption>让图片、图表等内容有了明确的语义结构。

details和summary

<details>用于定义可展开/折叠的内容，<summary>用于定义标题。

<!-- 常见问题 -->
<details>
    <summary>什么是HTML？</summary>
    <p>HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。</p>
</details>

<details>
    <summary>什么是语义化标签？</summary>
    <p>语义化标签是指使用具有明确含义的标签来描述网页内容的结构和意义。</p>
</details>

<!-- 默认展开 -->
<details open>
    <summary>已展开的内容</summary>
    <p>这段内容默认是展开的。</p>
</details>

<!-- 嵌套使用 -->
<details>
    <summary>HTML教程目录</summary>
    <details>
        <summary>第一章：HTML基础</summary>
        <ul>
            <li>1.1 HTML简介</li>
            <li>1.2 HTML历史</li>
            <li>1.3 HTML特点</li>
        </ul>
    </details>
    <details>
        <summary>第二章：HTML标签</summary>
        <ul>
            <li>2.1 基本标签</li>
            <li>2.2 文本标签</li>
            <li>2.3 链接标签</li>
        </ul>
    </details>
</details>

东巴文点评：<details>和<summary>非常适合FAQ、目录、设置面板等场景。

address标签

<address>用于定义联系信息。

<!-- 作者联系信息 -->
<article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
    
    <footer>
        <address>
            作者：<a href="mailto:author@example.com">张三</a><br>
            网站：<a href="https://example.com">example.com</a>
        </address>
    </footer>
</article>

<!-- 公司联系信息 -->
<footer>
    <address>
        东巴文学习平台<br>
        地址：北京市朝阳区某某大厦<br>
        电话：<a href="tel:+86-10-12345678">010-12345678</a><br>
        邮箱：<a href="mailto:info@db-w.cn">info@db-w.cn</a>
    </address>
</footer>

东巴文点评：<address>只能用于联系信息，不要用于其他地址。

文本级语义标签

time标签

<time>用于定义日期或时间。

<!-- 日期 -->
<time datetime="2024-01-01">2024年1月1日</time>

<!-- 时间 -->
<time datetime="10:30">上午10:30</time>

<!-- 日期时间 -->
<time datetime="2024-01-01T10:30:00+08:00">
    2024年1月1日上午10:30
</time>

<!-- 时长 -->
<time datetime="PT2H30M">2小时30分钟</time>

<!-- 文章发布时间 -->
<article>
    <h1>文章标题</h1>
    <p>发布于 <time datetime="2024-01-01" pubdate>2024年1月1日</time></p>
    <p>文章内容...</p>
</article>

<!-- 活动时间 -->
<div class="event">
    <h2>HTML讲座</h2>
    <p>
        时间：<time datetime="2024-03-15T14:00">3月15日下午2点</time>
        至 <time datetime="2024-03-15T16:00">下午4点</time>
    </p>
</div>

datetime格式：

类型	格式	示例
日期	YYYY-MM-DD	2024-01-01
时间	HH:MM:SS	10:30:00
日期时间	YYYY-MM-DDTHH:MM:SS	2024-01-01T10:30:00
时长	PnYnMnDTnHnMnS	PT2H30M（2小时30分）

东巴文点评：<time>标签让机器能理解时间信息，对SEO和可访问性都有帮助。

mark标签

<mark>用于定义需要突出显示或标记的文本。

<!-- 搜索结果高亮 -->
<p>搜索"HTML"的结果：</p>
<p>HTML是一种用于创建网页的标准<mark>标记语言</mark>。</p>

<!-- 引用中标记 -->
<blockquote>
    <p>学习HTML是Web开发的<mark>第一步</mark>。</p>
</blockquote>

<!-- 文章重点 -->
<p>在学习HTML时，<mark>语义化标签</mark>是一个重要概念。</p>

<!-- 代码高亮 -->
<pre><code>function hello() {
    <mark>console.log('Hello, World!');</mark>
}</code></pre>

东巴文点评：<mark>用于标记搜索关键词或重点内容，不要与<strong>或<em>混淆。

small标签

<small>用于定义小号文本，通常用于注释、版权信息等。

<!-- 版权信息 -->
<footer>
    <p><small>&copy; 2024 东巴文学习平台. 保留所有权利.</small></p>
</footer>

<!-- 注释 -->
<p>价格：¥99.00 <small>（含税）</small></p>

<!-- 免责声明 -->
<p><small>本网站内容仅供参考，不构成任何建议。</small></p>

<!-- 条款 -->
<p>
    <small>
        使用本网站即表示您同意我们的
        <a href="/terms">服务条款</a>和
        <a href="/privacy">隐私政策</a>。
    </small>
</p>

东巴文点评：<small>用于附属信息，不影响主内容的理解。

cite标签

<cite>用于定义引用来源的标题。

<!-- 书籍引用 -->
<p>我最喜欢的书是<cite>《HTML5权威指南》</cite>。</p>

<!-- 文章引用 -->
<p>这篇文章参考了<cite>《Web开发最佳实践》</cite>。</p>

<!-- 电影引用 -->
<p>我们观看了<cite>《黑客帝国》</cite>。</p>

<!-- 引用块 -->
<blockquote>
    <p>学习HTML是Web开发的第一步。</p>
    <footer>—— <cite>东巴文创始人</cite></footer>
</blockquote>

东巴文点评：<cite>用于引用作品的标题，而不是引用的内容本身。

q标签

<q>用于定义短的行内引用。

<!-- 短引用 -->
<p>他说：<q>学习HTML很有趣！</q></p>

<!-- 带引用源 -->
<p>根据<cite>MDN文档</cite>所说：<q cite="https://developer.mozilla.org">HTML是Web的基础。</q></p>

<!-- 嵌套引用 -->
<p>老师说：<q>学生问：<q>什么是HTML？</q></q></p>

东巴文点评：<q>用于短引用，浏览器会自动添加引号。长引用使用<blockquote>。

语义化最佳实践

东巴文语义化法则

法则1：根据内容选择标签

<!-- ✅ 推荐：根据内容选择合适的标签 -->
<article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
</article>

<!-- ❌ 不推荐：滥用div -->
<div class="article">
    <div class="title">文章标题</div>
    <div class="content">文章内容...</div>
</div>

法则2：不要过度使用section

<!-- ✅ 推荐：section用于主题分组 -->
<article>
    <section>
        <h2>第一章</h2>
        <p>内容...</p>
    </section>
    <section>
        <h2>第二章</h2>
        <p>内容...</p>
    </section>
</article>

<!-- ❌ 不推荐：仅仅为了样式使用section -->
<section class="wrapper">
    <section class="container">
        <section class="content">
            <p>内容...</p>
        </section>
    </section>
</section>

法则3：正确使用article和section

<!-- ✅ 推荐：article用于独立内容 -->
<article>
    <h1>博客文章</h1>
    <p>文章内容...</p>
</article>

<!-- ✅ 推荐：section用于主题分组 -->
<section>
    <h2>产品特点</h2>
    <ul>
        <li>特点一</li>
        <li>特点二</li>
    </ul>
</section>

<!-- ❌ 不推荐：section包含独立内容 -->
<section>
    <article>
        <h1>博客文章</h1>
    </article>
</section>

法则4：保持标签嵌套正确

<!-- ✅ 推荐：正确的嵌套 -->
<main>
    <article>
        <section>
            <h2>章节标题</h2>
            <p>内容...</p>
        </section>
    </article>
</main>

<!-- ❌ 不推荐：main不能是article的后代 -->
<article>
    <main>
        <p>内容...</p>
    </main>
</article>

法则5：使用ARIA增强可访问性

<!-- ✅ 推荐：使用ARIA标签 -->
<nav aria-label="主导航">
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
    </ul>
</nav>

<!-- ✅ 推荐：使用role增强语义 -->
<div role="navigation" aria-label="页脚导航">
    <ul>
        <li><a href="/privacy">隐私政策</a></li>
        <li><a href="/terms">服务条款</a></li>
    </ul>
</div>

完整示例

博客页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML语义化标签详解 - 东巴文</title>
</head>
<body>
    <header>
        <h1>东巴文学习平台</h1>
        <nav aria-label="主导航">
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/courses">课程</a></li>
                <li><a href="/blog">博客</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <header>
                <h1>HTML语义化标签详解</h1>
                <p>
                    作者：<a href="/author/zhangsan">张三</a> | 
                    发布时间：<time datetime="2024-01-01" pubdate>2024年1月1日</time>
                </p>
            </header>
            
            <section>
                <h2>什么是语义化标签</h2>
                <p>HTML语义化标签是指使用具有明确含义的标签来描述网页内容的结构和意义。</p>
                
                <figure>
                    <img src="semantic-structure.png" alt="语义化结构">
                    <figcaption>图1：语义化标签结构示意图</figcaption>
                </figure>
            </section>
            
            <section>
                <h2>为什么需要语义化</h2>
                <p>语义化标签有很多优势：</p>
                <ul>
                    <li>提升代码可读性</li>
                    <li>改善可访问性</li>
                    <li>优化SEO效果</li>
                    <li>便于团队协作</li>
                </ul>
                
                <aside>
                    <h3>小提示</h3>
                    <p>使用语义化标签是现代Web开发的最佳实践。</p>
                </aside>
            </section>
            
            <section>
                <h2>常用语义化标签</h2>
                
                <details>
                    <summary>文档结构标签</summary>
                    <ul>
                        <li><code>&lt;header&gt;</code> - 页眉</li>
                        <li><code>&lt;nav&gt;</code> - 导航</li>
                        <li><code>&lt;main&gt;</code> - 主内容</li>
                        <li><code>&lt;article&gt;</code> - 文章</li>
                        <li><code>&lt;section&gt;</code> - 章节</li>
                        <li><code>&lt;aside&gt;</code> - 附属内容</li>
                        <li><code>&lt;footer&gt;</code> - 页脚</li>
                    </ul>
                </details>
                
                <details>
                    <summary>文本级语义标签</summary>
                    <ul>
                        <li><code>&lt;time&gt;</code> - 时间</li>
                        <li><code>&lt;mark&gt;</code> - 标记</li>
                        <li><code>&lt;small&gt;</code> - 小号文本</li>
                        <li><code>&lt;cite&gt;</code> - 引用来源</li>
                        <li><code>&lt;q&gt;</code> - 短引用</li>
                    </ul>
                </details>
            </section>
            
            <footer>
                <p>
                    标签：
                    <a href="/tags/html">HTML</a>,
                    <a href="/tags/semantic">语义化</a>
                </p>
            </footer>
        </article>
        
        <section>
            <h2>相关文章</h2>
            <article>
                <h3><a href="/blog/html-basics">HTML基础教程</a></h3>
                <p>学习HTML的基础知识...</p>
            </article>
            <article>
                <h3><a href="/blog/html5-new">HTML5新特性</a></h3>
                <p>了解HTML5的新功能...</p>
            </article>
        </section>
    </main>
    
    <aside>
        <section>
            <h2>作者介绍</h2>
            <img src="author-avatar.jpg" alt="作者头像">
            <p>张三，Web开发工程师，专注于前端技术分享。</p>
        </section>
        
        <section>
            <h2>热门文章</h2>
            <ul>
                <li><a href="#">CSS布局详解</a></li>
                <li><a href="#">JavaScript入门</a></li>
                <li><a href="#">响应式设计</a></li>
            </ul>
        </section>
    </aside>
    
    <footer>
        <nav aria-label="页脚导航">
            <ul>
                <li><a href="/privacy">隐私政策</a></li>
                <li><a href="/terms">服务条款</a></li>
                <li><a href="/contact">联系我们</a></li>
            </ul>
        </nav>
        <address>
            邮箱：<a href="mailto:info@db-w.cn">info@db-w.cn</a>
        </address>
        <p><small>&copy; 2024 东巴文学习平台. 保留所有权利.</small></p>
    </footer>
</body>
</html>

学习检验

知识点测试

问题1：以下哪个标签用于定义独立的、完整的内容块？

A. <section> B. <article> C. <aside> D. <div>

<details> <summary>点击查看答案</summary>

答案：B

东巴文解释：<article>标签用于定义独立的、完整的内容块，可以独立分发或重用。<section>用于主题分组，<aside>用于附属内容，<div>没有语义。

</details>

问题2：以下哪个标签可以用于定义页面的主要导航？

A. <header> B. <main> C. <nav> D. <footer>

<details> <summary>点击查看答案</summary>

答案：C

东巴文解释：<nav>标签专门用于定义导航链接区域。<header>用于页眉，<main>用于主内容，<footer>用于页脚。

</details>

实践任务

任务：创建一个语义化的产品页面，包含以下结构：

页眉（包含logo和导航）
主内容（产品信息）
侧边栏（相关产品）
页脚（联系信息）

<details> <summary>点击查看参考答案</summary>

<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        header {
            background: #2c3e50;
            color: white;
            padding: 1rem 0;
        }
        
        header .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        header h1 {
            font-size: 24px;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        nav a:hover {
            color: #3498db;
        }
        
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 30px;
        }
        
        article {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        article h1 {
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .product-image {
            width: 100%;
            height: 400px;
            background: #ecf0f1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            border-radius: 8px;
        }
        
        .product-price {
            font-size: 28px;
            color: #e74c3c;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .product-description {
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .product-features {
            margin-bottom: 20px;
        }
        
        .product-features h2 {
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .product-features ul {
            list-style: none;
            padding-left: 20px;
        }
        
        .product-features li {
            padding: 5px 0;
        }
        
        .product-features li::before {
            content: '✓';
            color: #27ae60;
            margin-right: 10px;
        }
        
        .buy-button {
            background: #3498db;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .buy-button:hover {
            background: #2980b9;
        }
        
        aside {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            height: fit-content;
        }
        
        aside h2 {
            margin-bottom: 20px;
            color: #2c3e50;
            font-size: 20px;
        }
        
        .related-product {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ecf0f1;
        }
        
        .related-product:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .related-product img {
            width: 100%;
            height: 120px;
            background: #ecf0f1;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        .related-product h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .related-product a {
            color: #2c3e50;
            text-decoration: none;
        }
        
        .related-product a:hover {
            color: #3498db;
        }
        
        .related-price {
            color: #e74c3c;
            font-weight: bold;
        }
        
        footer {
            background: #2c3e50;
            color: white;
            padding: 40px 0;
            margin-top: 40px;
        }
        
        footer .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        footer h3 {
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        footer ul {
            list-style: none;
        }
        
        footer li {
            margin-bottom: 10px;
        }
        
        footer a {
            color: #bdc3c7;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        footer a:hover {
            color: white;
        }
        
        address {
            font-style: normal;
            line-height: 1.8;
        }
        
        .copyright {
            grid-column: 1 / -1;
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #34495e;
        }
        
        @media (max-width: 768px) {
            main {
                grid-template-columns: 1fr;
            }
            
            footer .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>东巴文商城</h1>
            <nav aria-label="主导航">
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/products">产品</a></li>
                    <li><a href="/about">关于</a></li>
                    <li><a href="/contact">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main>
        <article>
            <h1>HTML5权威指南</h1>
            
            <div class="product-image">
                <img src="book-cover.jpg" alt="HTML5权威指南封面">
            </div>
            
            <p class="product-price">¥89.00</p>
            
            <section class="product-description">
                <h2>产品描述</h2>
                <p>
                    《HTML5权威指南》是学习HTML5的经典教材，全面介绍了HTML5的新特性和最佳实践。
                    本书适合Web开发初学者和有一定经验的开发者阅读。
                </p>
            </section>
            
            <section class="product-features">
                <h2>产品特点</h2>
                <ul>
                    <li>全面覆盖HTML5新特性</li>
                    <li>大量实战案例</li>
                    <li>配套在线资源</li>
                    <li>作者权威认证</li>
                    <li>适合各个层次读者</li>
                </ul>
            </section>
            
            <button class="buy-button">立即购买</button>
        </article>
        
        <aside>
            <h2>相关产品</h2>
            
            <div class="related-product">
                <img src="css-book.jpg" alt="CSS3权威指南">
                <h3><a href="/product/css-guide">CSS3权威指南</a></h3>
                <p class="related-price">¥79.00</p>
            </div>
            
            <div class="related-product">
                <img src="js-book.jpg" alt="JavaScript高级程序设计">
                <h3><a href="/product/js-guide">JavaScript高级程序设计</a></h3>
                <p class="related-price">¥99.00</p>
            </div>
            
            <div class="related-product">
                <img src="web-book.jpg" alt="Web开发实战">
                <h3><a href="/product/web-practice">Web开发实战</a></h3>
                <p class="related-price">¥69.00</p>
            </div>
        </aside>
    </main>
    
    <footer>
        <div class="container">
            <section>
                <h3>快速链接</h3>
                <nav aria-label="页脚导航">
                    <ul>
                        <li><a href="/">首页</a></li>
                        <li><a href="/products">产品</a></li>
                        <li><a href="/about">关于</a></li>
                        <li><a href="/contact">联系</a></li>
                    </ul>
                </nav>
            </section>
            
            <section>
                <h3>客户服务</h3>
                <ul>
                    <li><a href="/faq">常见问题</a></li>
                    <li><a href="/shipping">配送说明</a></li>
                    <li><a href="/returns">退换货政策</a></li>
                    <li><a href="/privacy">隐私政策</a></li>
                </ul>
            </section>
            
            <section>
                <h3>联系我们</h3>
                <address>
                    东巴文商城<br>
                    地址：北京市朝阳区<br>
                    电话：<a href="tel:+86-10-12345678">010-12345678</a><br>
                    邮箱：<a href="mailto:info@db-w.cn">info@db-w.cn</a>
                </address>
            </section>
            
            <div class="copyright">
                <p><small>&copy; 2024 东巴文商城. 保留所有权利.</small></p>
            </div>
        </div>
    </footer>
</body>
</html>

</details>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！

上一章：表单样式

下一章：HTML5新特性