从 0 到 1 敲出 3 个企业级页面：七万字 HTML 零基础到实战全解（附 100 + 可复制代码案例）

玄同765

发布于 2026-01-14 14:14:13

260

【个人主页：】

大语言模型（LLM）开发工程师｜中国传媒大学·数字媒体技术（智能交互与游戏设计） 深耕领域：大语言模型开发 / RAG知识库 / AI Agent落地 / 模型微调 技术栈：Python / LangChain/RAG（Dify+Redis+Milvus）| SQL/NumPy | FastAPI+Docker ️ 工程能力：专注模型工程化部署、知识库构建与优化，擅长全流程解决方案 专栏传送门：LLM大模型开发项目实战指南、Python 从真零基础到纯文本 LLM 全栈实战、从零学 SQL + 大模型应用落地、大模型开发小白专属：从 0 入门 Linux&Shell 「让AI交互更智能，让技术落地更高效」 欢迎技术探讨/项目合作！关注我，解锁大模型与智能交互的无限可能！

这是为 0 编程基础小白量身定制的 HTML 全教程，全文七万字，覆盖 12 大核心模块、100 + 逐行注释的可复制代码案例，从浏览器原理讲到本地存储、响应式布局、简单动画，最后用 3 个完整企业级项目（科技产品展示站、求职简历单页、社区在线报名系统）串联所有技能，7 天内就能独立交付可上线的静态前端页面框架。

第一章认识 HTML

1.1 什么是 HTML

HTML 的全称是 Hyper Text Markup Language，中文译名是超文本标记语言。它不是编程语言，而是一种用于描述网页结构和内容的标记语言。简单来说，你在浏览器里看到的所有文字、图片、链接、按钮、视频等元素，都是通过 HTML “标记” 出来的，浏览器根据这些标记的规则解析并渲染成可见的网页。

1.2 HTML 的工作原理

当你在浏览器地址栏输入一个网址（如https://www.baidu.com）并按下回车键时，浏览器会执行以下几个步骤：

发送请求：向服务器发送一个 HTTP 请求，请求获取该网址对应的网页文件。
接收响应：服务器接收到请求后，会返回一个包含 HTML 代码的响应。
解析渲染：浏览器下载并解析 HTML 代码，根据代码中定义的标记构建 DOM 树（文档对象模型），然后将 DOM 树渲染成你看到的网页。

1.3 HTML 的发展历程

HTML 从 1993 年诞生至今，已经经历了多个版本的迭代，每个版本都在不断完善功能和规范。以下是 HTML 的主要发展历程：

版本	发布时间	主要新增功能
HTML 1.0	1993 年 6 月	基本的文本、链接、图片标记
HTML 2.0	1995 年 11 月	表格、表单、框架标记
HTML 3.2	1997 年 1 月	层叠样式表（CSS）支持、图像地图
HTML 4.01	1999 年 12 月	严格模式与过渡模式、语义化标记、脚本支持
XHTML 1.0	2000 年 1 月	基于 XML 的 HTML 4.01，语法更加严格
XHTML 1.1	2001 年 5 月	模块化设计
HTML5	2014 年 10 月	语义化标签、音频 / 视频支持、Canvas 绘图、本地存储、Web Workers 等
HTML5.1	2016 年 11 月	增强的表单验证、响应式图片、数学公式支持
HTML5.2	2017 年 12 月	支付请求 API、全屏 API、安全增强
HTML5.3	2021 年 12 月	更多语义化标签、性能优化、无障碍访问增强

目前，HTML5 是使用最广泛的版本，所有现代浏览器（如 Chrome、Firefox、Safari、Edge 等）都对其有很好的支持。

1.4 HTML 的基本结构

一个完整的 HTML 文件通常包含以下几个部分：

文档类型声明：，用于告诉浏览器这是一个 HTML5 文档。
HTML 标签：<html>...</html>，是整个 HTML 文档的根标签，所有其他标签都必须嵌套在它里面。
头部标签：<head>...</head>，用于定义文档的头部信息，如标题、元数据、样式表链接、脚本链接等。头部信息通常不会直接显示在网页上。
主体标签：<body>...</body>，用于定义文档的主体内容，如文字、图片、链接、按钮等。主体内容会直接显示在网页上。

下面是一个最简单的 HTML 文件示例：

<!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>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个最简单的HTML页面。</p>
</body>
</html>

你可以将这段代码复制到一个文本编辑器中，保存为 “index.html”，然后用浏览器打开，就能看到一个包含标题和段落的网页了。

1.5 常用的 HTML 编辑工具

对于初学者来说，选择一个合适的 HTML 编辑工具可以大大提高学习效率。以下是一些常用的 HTML 编辑工具：

文本编辑器：如 Notepad++、Sublime Text、Visual Studio Code（VS Code）等。这些工具功能强大，支持代码高亮、自动补全、语法检查等功能，是开发 HTML 页面的首选工具。
在线编辑器：如 CodePen、JSFiddle、RunJS 等。这些工具不需要安装，直接在浏览器里就能编写和运行 HTML、CSS、JavaScript 代码，适合快速调试和分享代码。
集成开发环境（IDE）：如 WebStorm、IntelliJ IDEA 等。这些工具功能非常强大，支持项目管理、版本控制、调试、测试等功能，适合开发大型 Web 应用。

第二章 HTML 标签、元素和属性

2.1 HTML 标签

HTML 标签是 HTML 语言的基本组成单位，用于标记网页中的不同元素。HTML 标签通常分为以下几类：

单标签：不需要闭合的标签，如、<img>、<input>等。
双标签：需要闭合的标签，如<h1>...</h1>、<p>...</p>、<div>...</div>等。双标签的闭合标签前必须加斜杠（/）。

2.2 HTML 元素

HTML 元素是由标签、属性和内容组成的。例如，<p class="intro">这是一个段落。</p>就是一个 HTML 元素，其中：

<p>和</p>是标签。
class="intro" 是属性。
这是一个段落。是内容。

2.3 HTML 属性

HTML 属性用于为 HTML 元素提供额外的信息，如样式、行为、链接地址等。属性通常写在开始标签的内部，属性名和属性值之间用等号（=）连接，属性值通常用引号（单引号或双引号）括起来。

以下是一些常用的 HTML 属性：

属性名	适用标签	作用	示例
class	所有标签	为元素添加类名，用于 CSS 样式选择和 JavaScript 操作	<div class="container">...</div>
id	所有标签	为元素添加唯一标识符，用于 CSS 样式选择和 JavaScript 操作	<div id="header">...</div>
src	img、script、link、video、audio 等	指定资源文件的路径（如图片、脚本、样式表、视频、音频等）	<img src="images/1.jpg" alt="风景图">
href	a、link 等	指定链接地址（如网页、邮箱、电话等）	<a href="https://www.baidu.com">百度</a>
alt	img、area 等	指定图片无法加载时显示的替代文本	<img src="images/1.jpg" alt="风景图">
title	所有标签	指定鼠标悬停在元素上时显示的提示文本	<a href="https://www.baidu.com" title="访问百度">百度</a>
style	所有标签	为元素添加内联 CSS 样式	<p style="color: red; font-size: 20px;">这是一个红色的段落。</p>
width	img、table、td、th 等	指定元素的宽度（单位可以是像素、百分比等）	<img src="images/1.jpg" alt="风景图" width="300">
height	img、table、td、th 等	指定元素的高度（单位可以是像素、百分比等）	<img src="images/1.jpg" alt="风景图" height="200">
type	input、button、script 等	指定元素的类型（如文本输入框、按钮、脚本类型等）	<input type="text" placeholder="请输入用户名">
value	input、button、option 等	指定元素的值（如文本输入框的默认值、按钮的文字、下拉菜单的选项值等）	<input type="text" placeholder="请输入用户名" value="张三">

第三章 HTML 文本格式化

3.1 标题标签

HTML 提供了 6 种标题标签，从<h1>到<h6>，h1 是最大的标题，h6 是最小的标题。标题标签通常用于标记网页的标题、章节标题等重要内容。

以下是标题标签的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签示例</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

3.2 段落标签

HTML 中的段落标签是<p>...</p>，用于标记一段文字内容。段落标签会在段落的前后自动添加换行和间距。

以下是段落标签的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签示例</title>
</head>
<body>
    <p>这是第一段文字内容。</p>
    <p>这是第二段文字内容。</p>
    <p>这是第三段文字内容。</p>
</body>
</html>

3.3 换行标签和水平分隔线标签

HTML 中的换行标签是，用于在不创建新段落的情况下强制换行。水平分隔线标签是<hr>，用于在网页中插入一条水平分隔线。

以下是换行标签和水平分隔线标签的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行标签和水平分隔线标签示例</title>
</head>
<body>
    <p>这是一段包含换行的文字内容。<br>这是换行后的文字内容。</p>
    <hr>
    <p>这是另一段文字内容。</p>
</body>
</html>

3.4 文本格式化标签

HTML 提供了多种文本格式化标签，用于标记网页中的粗体、斜体、下划线、删除线、上标、下标等特殊文本。

以下是常用的文本格式化标签：

标签名	作用	示例
<b>	标记粗体文本（无语义）	<b>这是粗体文本</b>
<strong>	标记重要的粗体文本（有语义）	<strong>这是重要的粗体文本</strong>
<i>	标记斜体文本（无语义）	<i>这是斜体文本</i>
<em>	标记强调的斜体文本（有语义）	<em>这是强调的斜体文本</em>
	标记下划线文本（无语义）	这是下划线文本
<s>	标记删除线文本（无语义）	<s>这是删除线文本</s>
<del>	标记删除的文本（有语义）	<del>这是删除的文本</del>
<ins>	标记插入的文本（有语义）	<ins>这是插入的文本</ins>
<sup>	标记上标文本	2<sup>2</sup> = 4
<sub>	标记下标文本	H<sub>2</sub>O

以下是文本格式化标签的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签示例</title>
</head>
<body>
    <p>这是<b>粗体文本</b>，这是<strong>重要的粗体文本</strong>。</p>
    <p>这是<i>斜体文本</i>，这是<em>强调的斜体文本</em>。</p>
    <p>这是<u>下划线文本</u>，这是<s>删除线文本</s>，这是<del>删除的文本</del>，这是<ins>插入的文本</ins>。</p>
    <p>2<sup>2</sup> = 4，H<sub>2</sub>O。</p>
</body>
</html>

3.5 预格式化文本标签

HTML 中的预格式化文本标签是<pre>...</pre>，用于保留文本中的空格、换行和缩进等格式。预格式化文本标签通常用于显示代码、诗歌等需要保留原始格式的内容。

以下是预格式化文本标签的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预格式化文本标签示例</title>
</head>
<body>
    <pre>
        这是一段预格式化的文本内容。
        它保留了文本中的空格、换行和缩进等格式。
    </pre>
    <pre>
        function add(a, b) {
            return a + b;
        }
    </pre>
</body>
</html>

第四章 HTML 链接

4.1 基本链接标签

HTML 中的基本链接标签是<a>...</a>，用于创建超链接。链接标签的 href 属性用于指定链接地址，链接标签的内容用于显示链接文字。

以下是基本链接标签的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本链接标签示例</title>
</head>
<body>
    <p>点击<a href="https://www.baidu.com">这里</a>访问百度。</p>
    <p>点击<a href="https://www.google.com">这里</a>访问谷歌。</p>
    <p>点击<a href="https://www.bing.com">这里</a>访问必应。</p>
</body>
</html>

4.2 链接的打开方式

HTML 链接的 target 属性用于指定链接的打开方式。以下是 target 属性的常用值：

属性值	作用
_self	默认值，在当前窗口打开链接
_blank	在新窗口打开链接
_parent	在父框架打开链接
_top	在整个浏览器窗口打开链接，忽略所有框架

以下是链接打开方式的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接打开方式示例</title>
</head>
<body>
    <p>点击<a href="https://www.baidu.com" target="_self">这里</a>在当前窗口访问百度。</p>
    <p>点击<a href="https://www.google.com" target="_blank">这里</a>在新窗口访问谷歌。</p>
    <p>点击<a href="https://www.bing.com" target="_parent">这里</a>在父框架访问必应。</p>
    <p>点击<a href="https://www.bing.com" target="_top">这里</a>在整个浏览器窗口访问必应。</p>
</body>
</html>

4.3 锚点链接

HTML 锚点链接用于在同一个页面内跳转。创建锚点链接需要以下两个步骤：

创建锚点：使用 id 属性为目标元素添加唯一标识符。
创建链接：使用 href 属性指定锚点的位置（格式为 #id）。

以下是锚点链接的示例代码：

<!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>
        /* 为了让页面有足够的高度可以滚动，添加以下样式 */
        body {
            height: 2000px;
        }
        .section {
            margin-top: 500px;
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="top">
        <h1>页面顶部</h1>
        <a href="#section1">跳转到第一部分</a>
        <br>
        <a href="#section2">跳转到第二部分</a>
        <br>
        <a href="#section3">跳转到第三部分</a>
    </div>
    <div id="section1" class="section">
        <h2>第一部分</h2>
        <p>这是第一部分的内容。</p>
        <a href="#top">返回顶部</a>
    </div>
    <div id="section2" class="section">
        <h2>第二部分</h2>
        <p>这是第二部分的内容。</p>
        <a href="#top">返回顶部</a>
    </div>
    <div id="section3" class="section">
        <h2>第三部分</h2>
        <p>这是第三部分的内容。</p>
        <a href="#top">返回顶部</a>
    </div>
</body>
</html>

4.4 邮箱链接和电话链接

HTML 邮箱链接用于创建发送邮件的超链接，格式为 mailto: 邮箱地址。电话链接用于创建拨打手机的超链接，格式为 tel: 电话号码。

以下是邮箱链接和电话链接的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邮箱链接和电话链接示例</title>
</head>
<body>
    <p>点击<a href="mailto:example@qq.com">这里</a>发送邮件到example@qq.com。</p>
    <p>点击<a href="tel:13800138000">这里</a>拨打13800138000。</p>
</body>
</html>

第五章 HTML 图片

5.1 基本图片标签

HTML 中的基本图片标签是<img>，它是一个单标签，不需要闭合。图片标签的 src 属性用于指定图片文件的路径，alt 属性用于指定图片无法加载时显示的替代文本。

以下是基本图片标签的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本图片标签示例</title>
</head>
<body>
    <img src="images/1.jpg" alt="风景图">
</body>
</html>

5.2 图片的路径

HTML 图片的路径分为以下几种：

绝对路径：完整的 URL 地址，如https://www.example.com/images/1.jpg。
相对路径：相对于当前 HTML 文件的路径。
- 同一目录下：直接写文件名，如 images/1.jpg。
- 上级目录下：使用../ 表示，如../images/1.jpg。
- 下级目录下：使用目录名 / 文件名表示，如 images/1.jpg。

以下是图片路径的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片路径示例</title>
</head>
<body>
    <h3>绝对路径</h3>
    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300" alt="风景图">
    <h3>相对路径</h3>
    <h4>同一目录下</h4>
    <img src="images/1.jpg" alt="风景图">
    <h4>上级目录下</h4>
    <img src="../images/1.jpg" alt="风景图">
    <h4>下级目录下</h4>
    <img src="images/2.jpg" alt="动物图">
</body>
</html>

5.3 图片的尺寸

HTML 图片的尺寸可以通过 width 属性和 height 属性来设置，单位可以是像素（px）或百分比（%）。如果只设置 width 属性或只设置 height 属性，图片会按照原始比例缩放。

以下是图片尺寸的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片尺寸示例</title>
</head>
<body>
    <h3>原始尺寸</h3>
    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300" alt="风景图">
    <h3>设置宽度</h3>
    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300" alt="风景图" width="300">
    <h3>设置高度</h3>
    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300" alt="风景图" height="200">
    <h3>设置宽度和高度</h3>
    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300" alt="风景图" width="300" height="200">
    <h3>设置百分比宽度</h3>
    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300" alt="风景图" width="100%">
</body>
</html>

5.4 图片地图

HTML 图片地图用于将一张图片分成多个可点击的区域，每个区域链接到不同的网页。创建图片地图需要以下三个步骤：

创建图片：使用<img>标签创建图片，并添加 usemap 属性，属性值为 #地图名称。
创建地图：使用<map>标签创建地图，并添加 name 属性，属性值与图片的 usemap 属性值一致。
创建区域：使用<area>标签在地图中创建可点击的区域，并添加 shape 属性、coords 属性和 href 属性。shape 属性用于指定区域的形状，coords 属性用于指定区域的坐标，href 属性用于指定区域的链接地址。

以下是图片地图的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片地图示例</title>
</head>
<body>
    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" alt="中国地图" usemap="#chinaMap">
    <map name="chinaMap">
        <!-- 北京区域 -->
        <area shape="rect" coords="180,100,220,140" href="https://baike.baidu.com/item/北京/128981" target="_blank" alt="北京">
        <!-- 上海区域 -->
        <area shape="rect" coords="380,280,420,320" href="https://baike.baidu.com/item/上海/1738" target="_blank" alt="上海">
        <!-- 广州区域 -->
        <area shape="rect" coords="320,380,360,420" href="https://baike.baidu.com/item/广州/2572" target="_blank" alt="广州">
        <!-- 深圳区域 -->
        <area shape="rect" coords="340,400,380,440" href="https://baike.baidu.com/item/深圳/2155" target="_blank" alt="深圳">
    </map>
</body>
</html>

第六章 HTML 列表

6.1 无序列表

HTML 中的无序列表标签是<ul>...</ul>，用于创建一个没有顺序的列表。无序列表的每个列表项使用<li>...</li>标签。无序列表的默认项目符号是实心圆，你可以通过 CSS 样式来改变项目符号的样式。

以下是无序列表的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表示例</title>
</head>
<body>
    <h3>我的兴趣爱好</h3>
    <ul>
        <li>读书</li>
        <li>写字</li>
        <li>画画</li>
        <li>唱歌</li>
        <li>跳舞</li>
    </ul>
</body>
</html>

6.2 有序列表

HTML 中的有序列表标签是<ol>...</ol>，用于创建一个有顺序的列表。有序列表的每个列表项使用<li>...</li>标签。有序列表的默认项目符号是数字，你可以通过 CSS 样式来改变项目符号的样式。

以下是有序列表的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表示例</title>
</head>
<body>
    <h3>我的学习计划</h3>
    <ol>
        <li>学习HTML基础</li>
        <li>学习CSS样式</li>
        <li>学习JavaScript脚本</li>
        <li>学习Vue框架</li>
        <li>学习React框架</li>
    </ol>
</body>
</html>

6.3 自定义列表

HTML 中的自定义列表标签是<dl>...</dl>，用于创建一个带有标题和描述的列表。自定义列表的每个标题使用<dt>...</dt>标签，每个描述使用<dd>...</dd>标签。

以下是自定义列表的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表示例</title>
</head>
<body>
    <h3>HTML标签介绍</h3>
    <dl>
        <dt>html</dt>
        <dd>整个HTML文档的根标签</dd>
        <dt>head</dt>
        <dd>定义文档的头部信息</dd>
        <dt>body</dt>
        <dd>定义文档的主体内容</dd>
        <dt>h1-h6</dt>
        <dd>定义标题标签</dd>
        <dt>p</dt>
        <dd>定义段落标签</dd>
    </dl>
</body>
</html>

第七章 HTML 表格

7.1 基本表格结构

HTML 中的基本表格结构由以下几个标签组成：

<table>...</table>：整个表格的根标签。
<tr>...</tr>：定义表格的一行。
<th>...</th>：定义表格的表头单元格，默认加粗居中对齐。
<td>...</td>：定义表格的普通单元格。

以下是基本表格结构的示例代码：

<!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>
        /* 为了让表格更美观，添加以下样式 */
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h3>学生信息表</h3>
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>2023001</td>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>计算机科学与技术1班</td>
        </tr>
        <tr>
            <td>2023002</td>
            <td>李四</td>
            <td>女</td>
            <td>19</td>
            <td>软件工程2班</td>
        </tr>
        <tr>
            <td>2023003</td>
            <td>王五</td>
            <td>男</td>
            <td>18</td>
            <td>网络工程3班</td>
        </tr>
    </table>
</body>
</html>

7.2 表格的边框和间距

HTML 表格的边框可以通过 border 属性来设置，边框间距可以通过 cellspacing 属性来设置，单元格内边距可以通过 cellpadding 属性来设置。不过，现在更推荐使用 CSS 样式来设置表格的边框和间距。

以下是表格边框和间距的示例代码：

<!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>
        /* 表格1：使用HTML属性设置边框和间距 */
        #table1 {
            border-collapse: separate;
            width: 100%;
        }
        /* 表格2：使用CSS样式设置边框和间距 */
        #table2 {
            border-collapse: collapse;
            width: 100%;
            border: 2px solid #333;
        }
        #table2 th, #table2 td {
            border: 1px solid #333;
            padding: 12px;
            text-align: left;
        }
        #table2 th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h3>表格1：使用HTML属性设置边框和间距</h3>
    <table id="table1" border="1" cellspacing="5" cellpadding="10">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>2023001</td>
            <td>张三</td>
            <td>男</td>
        </tr>
    </table>
    <br>
    <h3>表格2：使用CSS样式设置边框和间距</h3>
    <table id="table2">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>2023001</td>
            <td>张三</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

7.3 表格的合并单元格

HTML 表格的合并单元格分为以下两种：

合并行单元格：使用 rowspan 属性，属性值为合并的行数。
合并列单元格：使用 colspan 属性，属性值为合并的列数。

以下是表格合并单元格的示例代码：

<!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>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h3>课程表</h3>
    <table>
        <tr>
            <th>时间</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <td rowspan="2">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>生物</td>
            <td>历史</td>
            <td>地理</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
        <tr>
            <td colspan="6">午休</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>音乐</td>
            <td>美术</td>
            <td>计算机</td>
            <td>书法</td>
            <td>阅读</td>
        </tr>
        <tr>
            <td>社团活动</td>
            <td colspan="4">自习</td>
        </tr>
    </table>
</body>
</html>

第八章 HTML 表单

8.1 基本表单结构

HTML 中的基本表单结构由以下几个标签组成：

<form>...</form>：整个表单的根标签。
<input>：用于创建各种输入字段，如文本输入框、密码输入框、单选按钮、复选框、提交按钮等。
<select>...</select>：用于创建下拉菜单。
<textarea>...</textarea>：用于创建多行文本输入框。
<button>...</button>：用于创建按钮。

以下是基本表单结构的示例代码：

<!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>
        /* 为了让表单更美观，添加以下样式 */
        form {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        select,
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
        textarea {
            resize: vertical;
            min-height: 100px;
        }
        input[type="submit"],
        input[type="reset"],
        button {
            padding: 8px 15px;
            border: none;
            border-radius: 3px;
            color: #fff;
            cursor: pointer;
        }
        input[type="submit"] {
            background-color: #007bff;
        }
        input[type="reset"] {
            background-color: #6c757d;
        }
        button {
            background-color: #28a745;
        }
        .form-group-inline {
            display: inline-block;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <h3>用户注册表单</h3>
    <form action="#" method="post">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>
        <div class="form-group">
            <label for="confirmPassword">确认密码：</label>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        </div>
        <div class="form-group">
            <label for="tel">电话：</label>
            <input type="tel" id="tel" name="tel" placeholder="请输入电话" required>
        </div>
        <div class="form-group">
            <label>性别：</label>
            <div class="form-group-inline">
                <input type="radio" id="male" name="gender" value="male" checked>
                <label for="male">男</label>
            </div>
            <div class="form-group-inline">
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">女</label>
            </div>
        </div>
        <div class="form-group">
            <label for="hobbies">爱好：</label>
            <div class="form-group-inline">
                <input type="checkbox" id="reading" name="hobbies" value="reading">
                <label for="reading">读书</label>
            </div>
            <div class="form-group-inline">
                <input type="checkbox" id="writing" name="hobbies" value="writing">
                <label for="writing">写字</label>
            </div>
            <div class="form-group-inline">
                <input type="checkbox" id="drawing" name="hobbies" value="drawing">
                <label for="drawing">画画</label>
            </div>
            <div class="form-group-inline">
                <input type="checkbox" id="singing" name="hobbies" value="singing">
                <label for="singing">唱歌</label>
            </div>
            <div class="form-group-inline">
                <input type="checkbox" id="dancing" name="hobbies" value="dancing">
                <label for="dancing">跳舞</label>
            </div>
        </div>
        <div class="form-group">
            <label for="city">所在城市：</label>
            <select id="city" name="city" required>
                <option value="">请选择所在城市</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
                <option value="chengdu">成都</option>
            </select>
        </div>
        <div class="form-group">
            <label for="introduction">个人简介：</label>
            <textarea id="introduction" name="introduction" placeholder="请输入个人简介"></textarea>
        </div>
        <div class="form-group">
            <input type="submit" value="注册">
            <input type="reset" value="重置">
            <button type="button">取消</button>
        </div>
    </form>
</body>
</html>

8.2 表单的属性

HTML 表单的常用属性有以下几个：

action：指定表单提交的目标地址（如服务器端脚本的路径）。
method：指定表单提交的方式，常用的有 GET 和 POST 两种。
- GET：将表单数据附加在 URL 地址后面，传输数据量小，安全性低，适合查询类操作。
- POST：将表单数据放在 HTTP 请求的请求体中，传输数据量大，安全性高，适合提交类操作。
target：指定表单提交后响应内容的打开方式，常用的有_self 和_blank 两种。
enctype：指定表单数据的编码类型，常用的有 application/x-www-form-urlencoded、multipart/form-data 和 text/plain 三种。multipart/form-data 用于上传文件。

以下是表单属性的示例代码：

<!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>
        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="file"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            padding: 8px 15px;
            border: none;
            border-radius: 3px;
            color: #fff;
            background-color: #007bff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h3>查询表单（GET方式）</h3>
    <form action="https://www.baidu.com/s" method="get" target="_blank">
        <div class="form-group">
            <label for="wd">搜索关键词：</label>
            <input type="text" id="wd" name="wd" placeholder="请输入搜索关键词" required>
        </div>
        <div class="form-group">
            <input type="submit" value="搜索">
        </div>
    </form>
    <br>
    <h3>上传表单（POST方式）</h3>
    <form action="#" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="file">选择文件：</label>
            <input type="file" id="file" name="file" required>
        </div>
        <div class="form-group">
            <input type="submit" value="上传">
        </div>
    </form>
</body>
</html>

8.3 输入字段的类型

HTML<input>标签的 type 属性用于指定输入字段的类型。以下是<input>标签的常用类型：

类型值	作用	示例
text	单行文本输入框（默认值）	<input type="text" placeholder="请输入文本">
password	密码输入框，输入的内容会被隐藏	<input type="password" placeholder="请输入密码">
email	邮箱输入框，会自动验证输入的内容是否符合邮箱格式	<input type="email" placeholder="请输入邮箱">
tel	电话输入框，在移动设备上会显示数字键盘	<input type="tel" placeholder="请输入电话">
number	数字输入框，会显示数字上下箭头	<input type="number" min="0" max="100" placeholder="请输入数字">
date	日期选择框，会显示日期选择器	<input type="date">
time	时间选择框，会显示时间选择器	<input type="time">
datetime-local	本地日期时间选择框，会显示日期时间选择器	<input type="datetime-local">
range	滑块输入框，用于选择范围值	<input type="range" min="0" max="100" value="50">
color	颜色选择框，会显示颜色选择器	<input type="color" value="#007bff">
checkbox	复选框，用于选择多个选项	<input type="checkbox" name="hobbies" value="reading">
radio	单选按钮，用于选择一个选项	<input type="radio" name="gender" value="male" checked>
file	文件上传输入框，用于选择要上传的文件	<input type="file">
hidden	隐藏输入框，用于存储不显示给用户的信息	<input type="hidden" name="id" value="123">
submit	提交按钮，用于提交表单数据	<input type="submit" value="提交">
reset	重置按钮，用于重置表单数据到默认值	<input type="reset" value="重置">
button	普通按钮，用于触发 JavaScript 事件	<input type="button" value="点击">

以下是输入字段类型的示例代码：

<!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>
        form {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"],
        input[type="color"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
        input[type="range"] {
            width: 100%;
        }
        .range-value {
            display: inline-block;
            margin-left: 10px;
            font-weight: bold;
        }
        .form-group-inline {
            display: inline-block;
            margin-right: 20px;
        }
    </style>
    <script>
        // 监听滑块输入框的变化，实时显示当前值
        document.addEventListener('DOMContentLoaded', function() {
            const rangeInput = document.getElementById('range');
            const rangeValue = document.getElementById('rangeValue');
            rangeInput.addEventListener('input', function() {
                rangeValue.textContent = rangeInput.value;
            });
        });
    </script>
</head>
<body>
    <h3>输入字段类型示例</h3>
    <form action="#" method="post">
        <div class="form-group">
            <label for="text">文本输入框：</label>
            <input type="text" id="text" name="text" placeholder="请输入文本">
        </div>
        <div class="form-group">
            <label for="password">密码输入框：</label>
            <input type="password" id="password" name="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="email">邮箱输入框：</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
            <label for="tel">电话输入框：</label>
            <input type="tel" id="tel" name="tel" placeholder="请输入电话">
        </div>
        <div class="form-group">
            <label for="number">数字输入框：</label>
            <input type="number" id="number" name="number" min="0" max="100" placeholder="请输入0-100的数字">
        </div>
        <div class="form-group">
            <label for="date">日期选择框：</label>
            <input type="date" id="date" name="date">
        </div>
        <div class="form-group">
            <label for="time">时间选择框：</label>
            <input type="time" id="time" name="time">
        </div>
        <div class="form-group">
            <label for="datetimeLocal">本地日期时间选择框：</label>
            <input type="datetime-local" id="datetimeLocal" name="datetimeLocal">
        </div>
        <div class="form-group">
            <label for="range">滑块输入框：</label>
            <input type="range" id="range" name="range" min="0" max="100" value="50">
            <span class="range-value" id="rangeValue">50</span>
        </div>
        <div class="form-group">
            <label for="color">颜色选择框：</label>
            <input type="color" id="color" name="color" value="#007bff">
        </div>
        <div class="form-group">
            <label>复选框：</label>
            <div class="form-group-inline">
                <input type="checkbox" id="checkbox1" name="checkboxes" value="1">
                <label for="checkbox1">选项1</label>
            </div>
            <div class="form-group-inline">
                <input type="checkbox" id="checkbox2" name="checkboxes" value="2">
                <label for="checkbox2">选项2</label>
            </div>
            <div class="form-group-inline">
                <input type="checkbox" id="checkbox3" name="checkboxes" value="3">
                <label for="checkbox3">选项3</label>
            </div>
        </div>
        <div class="form-group">
            <label>单选按钮：</label>
            <div class="form-group-inline">
                <input type="radio" id="radio1" name="radios" value="1" checked>
                <label for="radio1">选项1</label>
            </div>
            <div class="form-group-inline">
                <input type="radio" id="radio2" name="radios" value="2">
                <label for="radio2">选项2</label>
            </div>
            <div class="form-group-inline">
                <input type="radio" id="radio3" name="radios" value="3">
                <label for="radio3">选项3</label>
            </div>
        </div>
        <div class="form-group">
            <label for="file">文件上传输入框：</label>
            <input type="file" id="file" name="file">
        </div>
        <div class="form-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="普通按钮">
        </div>
    </form>
</body>
</html>

第九章 HTML 语义化标签

9.1 什么是语义化标签

HTML 语义化标签是指具有明确语义的 HTML 标签，它们能够清晰地表达网页的结构和内容，而不是仅仅用于布局。使用语义化标签可以提高网页的可读性、可维护性和可访问性，同时也有助于搜索引擎优化（SEO）。

9.2 常用的语义化标签

HTML5 引入了很多新的语义化标签，以下是常用的语义化标签：

标签名	作用
<header>	定义网页或某个区块的头部，通常包含网站标志、导航栏、搜索框等。
<nav>	定义导航栏，通常包含网站的导航链接。
<main>	定义网页的主体内容，通常只包含一个。
<article>	定义独立的、完整的内容块，如博客文章、新闻报道等。
<section>	定义网页的一个章节或区块，如产品介绍、服务内容等。
<aside>	定义网页的侧边栏，通常包含相关链接、广告、作者信息等。
<footer>	定义网页或某个区块的底部，通常包含版权信息、联系方式、社交媒体链接等。
<figure>	定义独立的媒体内容块，如图片、图表、音频、视频等。
<figcaption>	定义媒体内容块的标题或描述。
<time>	定义时间或日期。
<mark>	定义高亮显示的文本。
<details>	定义可展开 / 折叠的详细内容块。
<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: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        header {
            background-color: #007bff;
            color: #fff;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        nav ul {
            list-style: none;
        }
        nav ul li {
            display: inline-block;
            margin-right: 20px;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }
        nav ul li a:hover {
            color: #ffc107;
        }
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 20px;
        }
        article {
            flex: 3;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        article h1 {
            font-size: 28px;
            margin-bottom: 10px;
            color: #007bff;
        }
        article .meta {
            margin-bottom: 20px;
            color: #6c757d;
            font-size: 14px;
        }
        article .content {
            margin-bottom: 20px;
        }
        article .content img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        article .tags {
            margin-bottom: 20px;
        }
        article .tags a {
            display: inline-block;
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #e9ecef;
            color: #495057;
            text-decoration: none;
            border-radius: 3px;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        article .tags a:hover {
            background-color: #007bff;
            color: #fff;
        }
        aside {
            flex: 1;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        aside h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        aside ul {
            list-style: none;
            margin-bottom: 20px;
        }
        aside ul li {
            margin-bottom: 10px;
        }
        aside ul li a {
            color: #333;
            text-decoration: none;
            transition: color 0.3s;
        }
        aside ul li a:hover {
            color: #007bff;
        }
        aside .ad {
            margin-bottom: 20px;
        }
        aside .ad img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
        footer {
            background-color: #343a40;
            color: #fff;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }
        footer .copyright {
            margin-bottom: 10px;
        }
        footer .social {
            margin-bottom: 10px;
        }
        footer .social a {
            display: inline-block;
            margin-right: 15px;
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }
        footer .social a:hover {
            color: #ffc107;
        }
        footer .contact {
            font-size: 14px;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">我的博客</div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h1>HTML语义化标签的重要性</h1>
            <div class="meta">
                <span><time datetime="2024-03-01">2024年3月1日</time></span>
                <span>作者：张三</span>
                <span>阅读量：1000</span>
            </div>
            <div class="content">
                <p>HTML语义化标签是指具有明确语义的HTML标签，它们能够清晰地表达网页的结构和内容，而不是仅仅用于布局。使用语义化标签可以提高网页的可读性、可维护性和可访问性，同时也有助于搜索引擎优化（SEO）。</p>
                <figure>
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" alt="HTML语义化标签结构">
                    <figcaption>HTML语义化标签的基本结构</figcaption>
                </figure>
                <p>HTML5引入了很多新的语义化标签，如header、nav、main、article、section、aside、footer等。这些标签可以让网页的结构更加清晰，让搜索引擎和浏览器更好地理解网页的内容。</p>
                <p>例如，使用header标签可以清晰地表达网页的头部信息，使用nav标签可以清晰地表达网页的导航栏，使用main标签可以清晰地表达网页的主体内容，使用article标签可以清晰地表达网页的文章内容，使用aside标签可以清晰地表达网页的侧边栏，使用footer标签可以清晰地表达网页的底部信息。</p>
                <p>总之，使用HTML语义化标签是一种良好的编程习惯，可以让你的网页更加符合现代Web标准，同时也可以提高网页的用户体验和搜索引擎排名。</p>
            </div>
            <div class="tags">
                <a href="#">HTML</a>
                <a href="#">语义化标签</a>
                <a href="#">SEO</a>
            </div>
        </article>
        <aside>
            <h3>热门文章</h3>
            <ul>
                <li><a href="#">HTML基础教程</a></li>
                <li><a href="#">CSS样式基础</a></li>
                <li><a href="#">JavaScript脚本入门</a></li>
                <li><a href="#">Vue框架基础</a></li>
                <li><a href="#">React框架基础</a></li>
            </ul>
            <h3>广告</h3>
            <div class="ad">
                <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" alt="广告图片">
            </div>
            <h3>作者信息</h3>
            <div class="author">
                <p>姓名：张三</p>
                <p>职业：前端工程师</p>
                <p>简介：热爱前端开发，专注于HTML、CSS、JavaScript、Vue、React等技术的研究和应用。</p>
            </div>
        </aside>
    </main>
    <footer>
        <div class="copyright">© 2024 我的博客 版权所有</div>
        <div class="social">
            <a href="#">微信</a>
            <a href="#">微博</a>
            <a href="#">GitHub</a>
            <a href="#">知乎</a>
        </div>
        <div class="contact">
            <p>邮箱：example@qq.com</p>
            <p>电话：13800138000</p>
        </div>
    </footer>
</body>
</html>

第十章 HTML 多媒体

10.1 音频标签

HTML 中的音频标签是<audio>...</audio>，用于在网页中插入音频文件。音频标签支持的音频格式有 MP3、WAV、OGG 等。

以下是音频标签的示例代码：

<!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>
        /* 为了让网页更美观，添加以下样式 */
        body {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
        }
        .audio-container {
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>音频标签示例</h1>
    <div class="audio-container">
        <h3>使用浏览器默认控件</h3>
        <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls>
            您的浏览器不支持音频标签。
        </audio>
    </div>
    <div class="audio-container">
        <h3>自动播放</h3>
        <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" controls autoplay>
            您的浏览器不支持音频标签。
        </audio>
    </div>
    <div class="audio-container">
        <h3>循环播放</h3>
        <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" controls loop>
            您的浏览器不支持音频标签。
        </audio>
    </div>
    <div class="audio-container">
        <h3>静音</h3>
        <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" controls muted>
            您的浏览器不支持音频标签。
        </audio>
    </div>
    <div class="audio-container">
        <h3>预加载</h3>
        <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3" controls preload="auto">
            您的浏览器不支持音频标签。
        </audio>
    </div>
    <div class="audio-container">
        <h3>多种格式支持</h3>
        <audio controls>
            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3" type="audio/mpeg">
            <source src="https://www.soundhelix.com/examples/ogg/SoundHelix-Song-6.ogg" type="audio/ogg">
            <source src="https://www.soundhelix.com/examples/wav/SoundHelix-Song-6.wav" type="audio/wav">
            您的浏览器不支持音频标签。
        </audio>
    </div>
</body>
</html>

10.2 视频标签

HTML 中的视频标签是<video>...</video>，用于在网页中插入视频文件。视频标签支持的视频格式有 MP4、WebM、OGG 等。

以下是视频标签的示例代码：

<!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>
        /* 为了让网页更美观，添加以下样式 */
        body {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
        }
        .video-container {
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f5f5f5;
        }
        video {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>视频标签示例</h1>
    <div class="video-container">
        <h3>使用浏览器默认控件</h3>
        <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls>
            您的浏览器不支持视频标签。
        </video>
    </div>
    <div class="video-container">
        <h3>自动播放</h3>
        <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls autoplay muted>
            您的浏览器不支持视频标签。
        </video>
        <p>注意：自动播放通常需要配合muted属性，否则会被浏览器阻止。</p>
    </div>
    <div class="video-container">
        <h3>循环播放</h3>
        <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls loop>
            您的浏览器不支持视频标签。
        </video>
    </div>
    <div class="video-container">
        <h3>静音</h3>
        <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls muted>
            您的浏览器不支持视频标签。
        </video>
    </div>
    <div class="video-container">
        <h3>预加载</h3>
        <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls preload="auto">
            您的浏览器不支持视频标签。
        </video>
    </div>
    <div class="video-container">
        <h3>指定尺寸</h3>
        <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls width="600" height="350">
            您的浏览器不支持视频标签。
        </video>
    </div>
    <div class="video-container">
        <h3>多种格式支持</h3>
        <video controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
            <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            您的浏览器不支持视频标签。
        </video>
    </div>
</body>
</html>

第十一章 HTML 简单动画

11.1 使用 CSS 过渡实现动画

CSS 过渡是一种简单的动画方式，它可以让元素的样式在一段时间内平滑地变化。使用 CSS 过渡需要以下两个步骤：

定义元素的初始样式。
定义元素的目标样式，并添加 transition 属性，属性值包括过渡的属性、过渡的时间、过渡的缓动函数等。

以下是使用 CSS 过渡实现动画的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用CSS过渡实现动画示例</title>
    <style>
        /* 为了让网页更美观，添加以下样式 */
        body {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .box:hover {
            width: 200px;
            height: 200px;
            background-color: #ffc107;
            border-radius: 50%;
            transform: translateX(50px);
        }
        .text {
            font-size: 20px;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .text:hover {
            font-size: 30px;
            color: #ffc107;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
            transform: translateY(-5px);
        }
    </style>
</head>
<body>
    <h1>使用CSS过渡实现动画示例</h1>
    <div class="box"></div>
    <div class="text">鼠标悬停在我身上看看效果</div>
</body>
</html>

11.2 使用 CSS 动画实现动画

CSS 动画是一种更复杂的动画方式，它可以让元素的样式在一段时间内按照指定的关键帧变化。使用 CSS 动画需要以下两个步骤：

定义动画的关键帧：使用 @keyframes 关键字定义动画的关键帧，每个关键帧包含元素在该时刻的样式。
应用动画：在需要应用动画的元素上添加 animation 属性，属性值包括动画的名称、动画的时间、动画的缓动函数、动画的播放次数等。

以下是使用 CSS 动画实现动画的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用CSS动画实现动画示例</title>
    <style>
        /* 为了让网页更美观，添加以下样式 */
        body {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            margin-bottom: 20px;
            animation: rotate 2s linear infinite;
            cursor: pointer;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .text {
            font-size: 20px;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 20px;
            animation: blink 1s ease-in-out infinite;
            cursor: pointer;
        }
        @keyframes blink {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <h1>使用CSS动画实现动画示例</h1>
    <div class="box"></div>
    <div class="text">我在闪烁</div>
</body>
</html>

第十二章 HTML 响应式布局

12.1 什么是响应式布局

响应式布局是指网页的布局能够根据不同的设备尺寸和屏幕分辨率自动调整，以适应不同的显示设备。响应式布局的核心是使用 CSS 媒体查询和弹性布局。

12.2 弹性布局（Flexbox）

弹性布局是一种 CSS 布局方式，它可以让容器内的元素在不同的屏幕尺寸和分辨率下自动调整大小和位置。使用弹性布局需要以下两个步骤：

为容器添加 display: flex 属性。
为容器内的元素添加 flex 属性，属性值包括元素的伸缩比例、初始宽度、最大宽度等。

以下是弹性布局的示例代码：

<!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;
            color: #333;
            background-color: #f5f5f5;
        }
        header {
            background-color: #007bff;
            color: #fff;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }
        nav ul li a:hover {
            color: #ffc107;
        }
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        .card {
            flex: 1;
            min-width: 250px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .card h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        .card p {
            margin-bottom: 15px;
            color: #6c757d;
        }
        .card a {
            display: inline-block;
            padding: 8px 15px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        .card a:hover {
            background-color: #0069d9;
        }
        footer {
            background-color: #343a40;
            color: #fff;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">我的产品展示站</div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="card">
            <h3>产品1</h3>
            <p>这是产品1的详细描述，产品1具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品2</h3>
            <p>这是产品2的详细描述，产品2具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品3</h3>
            <p>这是产品3的详细描述，产品3具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品4</h3>
            <p>这是产品4的详细描述，产品4具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
    </main>
    <footer>
        <div class="copyright">© 2024 我的产品展示站 版权所有</div>
    </footer>
</body>
</html>

12.3 网格布局（Grid）

网格布局是一种更强大的 CSS 布局方式，它可以让容器内的元素按照网格的方式排列。使用网格布局需要以下两个步骤：

为容器添加 display: grid 属性。
定义网格的列数、行数、列间距、行间距等属性。

以下是网格布局的示例代码：

<!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;
            color: #333;
            background-color: #f5f5f5;
        }
        header {
            background-color: #007bff;
            color: #fff;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }
        nav ul li a:hover {
            color: #ffc107;
        }
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .card {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .card h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        .card p {
            margin-bottom: 15px;
            color: #6c757d;
        }
        .card a {
            display: inline-block;
            padding: 8px 15px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        .card a:hover {
            background-color: #0069d9;
        }
        footer {
            background-color: #343a40;
            color: #fff;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">我的产品展示站</div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="card">
            <h3>产品1</h3>
            <p>这是产品1的详细描述，产品1具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品2</h3>
            <p>这是产品2的详细描述，产品2具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品3</h3>
            <p>这是产品3的详细描述，产品3具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品4</h3>
            <p>这是产品4的详细描述，产品4具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
    </main>
    <footer>
        <div class="copyright">© 2024 我的产品展示站 版权所有</div>
    </footer>
</body>
</html>

12.4 媒体查询

媒体查询是响应式布局的核心，它可以根据不同的设备尺寸和屏幕分辨率应用不同的 CSS 样式。使用媒体查询需要使用 @media 关键字，后跟媒体类型和媒体特性。

以下是媒体查询的示例代码：

<!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;
            color: #333;
            background-color: #f5f5f5;
        }
        header {
            background-color: #007bff;
            color: #fff;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }
        nav ul li a:hover {
            color: #ffc107;
        }
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .card {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .card h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        .card p {
            margin-bottom: 15px;
            color: #6c757d;
        }
        .card a {
            display: inline-block;
            padding: 8px 15px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        .card a:hover {
            background-color: #0069d9;
        }
        footer {
            background-color: #343a40;
            color: #fff;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }
        /* 移动端样式 */
        @media (max-width: 768px) {
            nav ul {
                flex-direction: column;
                gap: 10px;
            }
            main {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 15px;
            }
            .card {
                padding: 15px;
            }
            .card h3 {
                font-size: 16px;
            }
            .card p {
                font-size: 14px;
            }
        }
        /* 平板端样式 */
        @media (min-width: 769px) and (max-width: 1024px) {
            main {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 18px;
            }
            .card {
                padding: 18px;
            }
            .card h3 {
                font-size: 17px;
            }
            .card p {
                font-size: 15px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">我的产品展示站</div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="card">
            <h3>产品1</h3>
            <p>这是产品1的详细描述，产品1具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品2</h3>
            <p>这是产品2的详细描述，产品2具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品3</h3>
            <p>这是产品3的详细描述，产品3具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
        <div class="card">
            <h3>产品4</h3>
            <p>这是产品4的详细描述，产品4具有以下特点：功能强大、价格实惠、易用性好。</p>
            <a href="#">查看详情</a>
        </div>
    </main>
    <footer>
        <div class="copyright">© 2024 我的产品展示站 版权所有</div>
    </footer>
</body>
</html>

第十三章 HTML 本地存储

13.1 什么是本地存储

HTML 本地存储是指将数据存储在用户浏览器中的一种方式，数据可以在用户关闭浏览器后继续保存。HTML 本地存储主要分为两种：

localStorage：永久存储，数据不会过期，除非用户手动删除。
sessionStorage：会话存储，数据只在当前会话中保存，用户关闭浏览器后数据会自动删除。

13.2 本地存储的使用

HTML 本地存储的使用非常简单，只需要使用 localStorage 或 sessionStorage 对象的 setItem ()、getItem ()、removeItem ()、clear () 等方法。

以下是本地存储的示例代码：

<!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>
        /* 为了让网页更美观，添加以下样式 */
        body {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
        textarea {
            resize: vertical;
            min-height: 100px;
        }
        .button-group {
            margin-bottom: 20px;
        }
        button {
            padding: 8px 15px;
            border: none;
            border-radius: 3px;
            color: #fff;
            background-color: #007bff;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0069d9;
        }
        button.clear {
            background-color: #dc3545;
        }
        button.clear:hover {
            background-color: #c82333;
        }
        .data-container {
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f5f5f5;
        }
        .data-container h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        .data-container ul {
            list-style: none;
            margin-bottom: 15px;
        }
        .data-container ul li {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .data-container ul li span {
            font-weight: bold;
            color: #007bff;
        }
    </style>
    <script>
        // 监听DOM加载完成事件
        document.addEventListener('DOMContentLoaded', function() {
            // 获取表单元素和按钮元素
            const form = document.getElementById('userForm');
            const saveBtn = document.getElementById('saveBtn');
            const loadBtn = document.getElementById('loadBtn');
            const clearBtn = document.getElementById('clearBtn');
            const dataList = document.getElementById('dataList');

            // 监听保存按钮的点击事件
            saveBtn.addEventListener('click', function() {
                // 获取表单数据
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const address = document.getElementById('address').value;
                const phone = document.getElementById('phone').value;
                const notes = document.getElementById('notes').value;

                // 创建用户对象
                const user = {
                    name: name,
                    email: email,
                    address: address,
                    phone: phone,
                    notes: notes,
                    timestamp: new Date().toISOString()
                };

                // 将用户对象转换为JSON字符串
                const userJson = JSON.stringify(user);

                // 将用户数据存储到localStorage中
                localStorage.setItem('user', userJson);

                // 显示保存成功的提示
                alert('用户数据保存成功！');

                // 重置表单
                form.reset();
            });

            // 监听加载按钮的点击事件
            loadBtn.addEventListener('click', function() {
                // 从localStorage中获取用户数据
                const userJson = localStorage.getItem('user');

                // 如果用户数据存在，将其显示在表单和列表中
                if (userJson) {
                    const user = JSON.parse(userJson);

                    // 将用户数据显示在表单中
                    document.getElementById('name').value = user.name;
                    document.getElementById('email').value = user.email;
                    document.getElementById('address').value = user.address;
                    document.getElementById('phone').value = user.phone;
                    document.getElementById('notes').value = user.notes;

                    // 将用户数据显示在列表中
                    dataList.innerHTML = `
                        <li><span>姓名：</span>${user.name}</li>
                        <li><span>邮箱：</span>${user.email}</li>
                        <li><span>地址：</span>${user.address}</li>
                        <li><span>电话：</span>${user.phone}</li>
                        <li><span>备注：</span>${user.notes}</li>
                        <li><span>保存时间：</span>${new Date(user.timestamp).toLocaleString()}</li>
                    `;
                } else {
                    // 显示没有数据的提示
                    alert('没有找到用户数据！');
                }
            });

            // 监听清除按钮的点击事件
            clearBtn.addEventListener('click', function() {
                // 清除localStorage中的用户数据
                localStorage.removeItem('user');

                // 重置表单和列表
                form.reset();
                dataList.innerHTML = '';

                // 显示清除成功的提示
                alert('用户数据清除成功！');
            });

            // 页面加载时，自动加载用户数据
            loadBtn.click();
        });
    </script>
</head>
<body>
    <h1>本地存储示例</h1>
    <form id="userForm">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        </div>
        <div class="form-group">
            <label for="address">地址：</label>
            <input type="text" id="address" name="address" placeholder="请输入地址" required>
        </div>
        <div class="form-group">
            <label for="phone">电话：</label>
            <input type="text" id="phone" name="phone" placeholder="请输入电话" required>
        </div>
        <div class="form-group">
            <label for="notes">备注：</label>
            <textarea id="notes" name="notes" placeholder="请输入备注"></textarea>
        </div>
        <div class="button-group">
            <button type="button" id="saveBtn">保存到本地存储</button>
            <button type="button" id="loadBtn">从本地存储加载</button>
            <button type="button" id="clearBtn" class="clear">清除本地存储</button>
        </div>
    </form>
    <div class="data-container">
        <h3>本地存储的用户数据</h3>
        <ul id="dataList"></ul>
    </div>
</body>
</html>

第十四章 HTML 实战项目

14.1 项目一：个人求职简历单页

项目描述：创建一个个人求职简历单页，包含个人信息、教育背景、工作经验、项目经验、技能特长、联系方式等模块。技术栈：HTML、CSS、JavaScript。代码示例：

<!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: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        /* 头部样式 */
        header {
            background-color: #007bff;
            color: #fff;
            padding: 40px 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .header-content h1 {
            font-size: 36px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .header-content p {
            font-size: 18px;
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.9);
        }
        .contact-info {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }
        .contact-info .item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .contact-info .item i {
            font-size: 20px;
        }
        .contact-info .item a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            transition: color 0.3s;
        }
        .contact-info .item a:hover {
            color: #ffc107;
        }
        /* 主体样式 */
        main {
            margin-top: 30px;
            background-color: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        section {
            margin-bottom: 30px;
        }
        section h2 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        /* 个人信息样式 */
        .personal-info {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        .personal-info .left {
            flex: 1;
            min-width: 250px;
        }
        .personal-info .right {
            flex: 1;
            min-width: 250px;
        }
        .personal-info .item {
            display: flex;
            margin-bottom: 15px;
        }
        .personal-info .item label {
            width: 100px;
            font-weight: bold;
            color: #007bff;
        }
        .personal-info .item span {
            flex: 1;
        }
        /* 教育背景样式 */
        .education-list {
            list-style: none;
        }
        .education-list li {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .education-list li:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .education-list li .school {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #007bff;
        }
        .education-list li .major {
            font-size: 16px;
            margin-bottom: 5px;
            color: #6c757d;
        }
        .education-list li .period {
            font-size: 14px;
            color: #6c757d;
        }
        /* 工作经验样式 */
        .work-experience-list {
            list-style: none;
        }
        .work-experience-list li {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .work-experience-list li:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .work-experience-list li .company {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #007bff;
        }
        .work-experience-list li .position {
            font-size: 16px;
            margin-bottom: 5px;
            color: #6c757d;
        }
        .work-experience-list li .period {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 15px;
        }
        .work-experience-list li .description {
            font-size: 14px;
            color: #333;
            line-height: 1.8;
        }
        /* 项目经验样式 */
        .project-list {
            list-style: none;
        }
        .project-list li {
            margin-bottom: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .project-list li:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .project-list li .name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #007bff;
        }
        .project-list li .role {
            font-size: 16px;
            margin-bottom: 5px;
            color: #6c757d;
        }
        .project-list li .period {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 15px;
        }
        .project-list li .description {
            font-size: 14px;
            color: #333;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        .project-list li .tech-stack {
            font-size: 14px;
            color: #333;
        }
        .project-list li .tech-stack span {
            display: inline-block;
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #007bff;
            color: #fff;
            border-radius: 3px;
            font-size: 12px;
        }
        /* 技能特长样式 */
        .skills {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            flex-wrap: wrap;
        }
        .skills .item {
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }
        .skills .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .skills .item h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #007bff;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        .skills .item ul {
            list-style: none;
        }
        .skills .item ul li {
            margin-bottom: 10px;
            padding: 5px;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        /* 联系方式样式 */
        .contact {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .contact .item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .contact .item i {
            font-size: 20px;
        }
        .contact .item a {
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s;
        }
        .contact .item a:hover {
            color: #ffc107;
        }
        /* 移动端样式 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            header {
                padding: 20px 0;
            }
            .header-content h1 {
                font-size: 24px;
            }
            .header-content p {
                font-size: 16px;
            }
            .contact-info {
                gap: 15px;
            }
            main {
                padding: 20px;
            }
            section h2 {
                font-size: 20px;
            }
            .personal-info {
                flex-direction: column;
                gap: 15px;
            }
            .skills {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 15px;
            }
            .contact {
                gap: 15px;
                padding: 15px;
            }
        }
        /* 平板端样式 */
        @media (min-width: 769px) and (max-width: 1024px) {
            .container {
                padding: 15px;
            }
            header {
                padding: 30px 0;
            }
            .header-content h1 {
                font-size: 30px;
            }
            .header-content p {
                font-size: 17px;
            }
            main {
                padding: 25px;
            }
            section h2 {
                font-size: 22px;
            }
            .skills {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 18px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <h1>张三</h1>
                <p>前端工程师</p>
            </div>
            <div class="contact-info">
                <div class="item">
                    <i class="fas fa-envelope"></i>
                    <a href="mailto:example@qq.com">example@qq.com</a>
                </div>
                <div class="item">
                    <i class="fas fa-phone"></i>
                    <a href="tel:13800138000">13800138000</a>
                </div>
                <div class="item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>北京市朝阳区</span>
                </div>
                <div class="item">
                    <i class="fab fa-github"></i>
                    <a href="https://github.com/zhangsan" target="_blank">https://github.com/zhangsan</a>
                </div>
                <div class="item">
                    <i class="fab fa-linkedin"></i>
                    <a href="https://linkedin.com/in/zhangsan" target="_blank">https://linkedin.com/in/zhangsan</a>
                </div>
            </div>
        </div>
    </header>
    <main class="container">
        <section id="personal-info">
            <h2>个人信息</h2>
            <div class="personal-info">
                <div class="left">
                    <div class="item">
                        <label>姓名：</label>
                        <span>张三</span>
                    </div>
                    <div class="item">
                        <label>性别：</label>
                        <span>男</span>
                    </div>
                    <div class="item">
                        <label>年龄：</label>
                        <span>25岁</span>
                    </div>
                    <div class="item">
                        <label>学历：</label>
                        <span>本科</span>
                    </div>
                </div>
                <div class="right">
                    <div class="item">
                        <label>专业：</label>
                        <span>计算机科学与技术</span>
                    </div>
                    <div class="item">
                        <label>毕业院校：</label>
                        <span>北京大学</span>
                    </div>
                    <div class="item">
                        <label>毕业时间：</label>
                        <span>2022年6月</span>
                    </div>
                    <div class="item">
                        <label>工作年限：</label>
                        <span>2年</span>
                    </div>
                </div>
            </div>
        </section>
        <section id="education">
            <h2>教育背景</h2>
            <ul class="education-list">
                <li>
                    <div class="school">北京大学</div>
                    <div class="major">计算机科学与技术</div>
                    <div class="period">2018年9月 - 2022年6月</div>
                </li>
            </ul>
        </section>
        <section id="work-experience">
            <h2>工作经验</h2>
            <ul class="work-experience-list">
                <li>
                    <div class="company">阿里巴巴集团</div>
                    <div class="position">前端工程师</div>
                    <div class="period">2022年7月 - 至今</div>
                    <div class="description">
                        <p>1. 负责淘宝首页的前端开发和维护工作，使用HTML、CSS、JavaScript、Vue等技术栈。</p>
                        <p>2. 参与淘宝移动端的响应式布局开发，确保在不同设备尺寸和屏幕分辨率下的显示效果。</p>
                        <p>3. 优化淘宝首页的加载速度和性能，提高用户体验。</p>
                        <p>4. 与后端工程师合作，完成数据接口的对接和调试工作。</p>
                        <p>5. 编写前端开发文档，指导其他开发人员进行开发。</p>
                    </div>
                </li>
            </ul>
        </section>
        <section id="project-experience">
            <h2>项目经验</h2>
            <ul class="project-list">
                <li>
                    <div class="name">淘宝首页重构</div>
                    <div class="role">前端开发工程师</div>
                    <div class="period">2023年1月 - 2023年3月</div>
                    <div class="description">
                        <p>1. 对淘宝首页进行了全面的重构，使用了最新的HTML5和CSS3技术。</p>
                        <p>2. 实现了响应式布局，确保在手机、平板、电脑等不同设备上的显示效果。</p>
                        <p>3. 优化了页面的加载速度和性能，使用了图片懒加载、代码分割、缓存等技术。</p>
                        <p>4. 与后端工程师合作，完成了数据接口的对接和调试工作。</p>
                        <p>5. 测试了页面的兼容性和稳定性，确保在不同浏览器和操作系统上的正常运行。</p>
                    </div>
                    <div class="tech-stack">
                        <span>HTML5</span>
                        <span>CSS3</span>
                        <span>JavaScript</span>
                        <span>Vue</span>
                        <span>Webpack</span>
                    </div>
                </li>
                <li>
                    <div class="name">淘宝移动端开发</div>
                    <div class="role">前端开发工程师</div>
                    <div class="period">2022年9月 - 2022年12月</div>
                    <div class="description">
                        <p>1. 负责淘宝移动端的前端开发工作，使用了Vue和uni-app技术栈。</p>
                        <p>2. 实现了商品列表、商品详情、购物车、订单管理等功能。</p>
                        <p>3. 优化了页面的加载速度和性能，提高了用户体验。</p>
                        <p>4. 与后端工程师合作，完成了数据接口的对接和调试工作。</p>
                        <p>5. 测试了页面的兼容性和稳定性，确保在不同手机品牌和操作系统上的正常运行。</p>
                    </div>
                    <div class="tech-stack">
                        <span>HTML5</span>
                        <span>CSS3</span>
                        <span>JavaScript</span>
                        <span>Vue</span>
                        <span>uni-app</span>
                    </div>
                </li>
            </ul>
        </section>
        <section id="skills">
            <h2>技能特长</h2>
            <div class="skills">
                <div class="item">
                    <h3>前端开发</h3>
                    <ul>
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>JavaScript</li>
                        <li>Vue</li>
                        <li>React</li>
                        <li>Angular</li>
                        <li>uni-app</li>
                    </ul>
                </div>
                <div class="item">
                    <h3>后端开发</h3>
                    <ul>
                        <li>Node.js</li>
                        <li>Express</li>
                        <li>Koa</li>
                        <li>MongoDB</li>
                        <li>MySQL</li>
                    </ul>
                </div>
                <div class="item">
                    <h3>工具和框架</h3>
                    <ul>
                        <li>Webpack</li>
                        <li>Vite</li>
                        <li>Git</li>
                        <li>GitHub</li>
                        <li>VS Code</li>
                        <li>Photoshop</li>
                        <li>Figma</li>
                    </ul>
                </div>
                <div class="item">
                    <h3>其他技能</h3>
                    <ul>
                        <li>响应式布局</li>
                        <li>移动应用开发</li>
                        <li>用户体验设计</li>
                        <li>SEO优化</li>
                        <li>性能优化</li>
                    </ul>
                </div>
            </div>
        </section>
        <section id="contact">
            <h2>联系方式</h2>
            <div class="contact">
                <div class="item">
                    <i class="fas fa-envelope"></i>
                    <a href="mailto:example@qq.com">example@qq.com</a>
                </div>
                <div class="item">
                    <i class="fas fa-phone"></i>
                    <a href="tel:13800138000">13800138000</a>
                </div>
                <div class="item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>北京市朝阳区</span>
                </div>
                <div class="item">
                    <i class="fab fa-github"></i>
                    <a href="https://github.com/zhangsan" target="_blank">https://github.com/zhangsan</a>
                </div>
                <div class="item">
                    <i class="fab fa-linkedin"></i>
                    <a href="https://linkedin.com/in/zhangsan" target="_blank">https://linkedin.com/in/zhangsan</a>
                </div>
            </div>
        </section>
    </main>
</body>
</html>

14.2 项目二：科技产品展示站

项目描述：创建一个科技产品展示站，包含首页轮播图、产品展示区、产品详情页、关于我们、联系我们等模块。技术栈：HTML、CSS、JavaScript、Bootstrap。代码示例：

<!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: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        /* 导航栏样式 */
        .navbar {
            background-color: rgba(255, 255, 255, 0.95) !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .navbar-brand {
            font-size: 24px;
            font-weight: bold;
            color: #007bff !important;
        }
        .nav-link {
            color: #333 !important;
            transition: color 0.3s;
        }
        .nav-link:hover {
            color: #007bff !important;
        }
        .navbar-toggler {
            border: none;
        }
        .navbar-toggler:focus {
            outline: none;
            box-shadow: none;
        }
        /* 轮播图样式 */
        .carousel-item img {
            height: 600px;
            object-fit: cover;
        }
        .carousel-caption {
            background-color: rgba(0, 0, 0, 0.5);
            padding: 20px;
            border-radius: 5px;
        }
        .carousel-caption h3 {
            font-size: 36px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .carousel-caption p {
            font-size: 18px;
            margin-bottom: 20px;
        }
        .carousel-caption .btn {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        .carousel-caption .btn:hover {
            background-color: #0069d9;
        }
        /* 产品展示区样式 */
        .section {
            margin-top: 50px;
            margin-bottom: 50px;
        }
        .section-title {
            font-size: 32px;
            margin-bottom: 30px;
            color: #007bff;
            text-align: center;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
            display: inline-block;
            width: auto;
        }
        .section-content {
            text-align: center;
            margin-bottom: 30px;
        }
        .product-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        .product-card {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .product-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            margin-bottom: 15px;
            border-radius: 5px;
        }
        .product-card h3 {
            font-size: 20px;
            margin-bottom: 10px;
            color: #007bff;
            font-weight: bold;
        }
        .product-card p {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 15px;
            line-height: 1.8;
        }
        .product-card .price {
            font-size: 24px;
            color: #dc3545;
            margin-bottom: 15px;
            font-weight: bold;
        }
        .product-card .btn {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border-radius: 3px;
            transition: background-color 0.3s;
            display: block;
            width: 100%;
        }
        .product-card .btn:hover {
            background-color: #0069d9;
        }
        /* 关于我们样式 */
        .about-us {
            background-color: #fff;
            padding: 50px 0;
        }
        .about-us .content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        .about-us .content h3 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
            font-weight: bold;
        }
        .about-us .content p {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 20px;
            line-height: 1.8;
        }
        /* 联系我们样式 */
        .contact-us {
            background-color: #f5f5f5;
            padding: 50px 0;
        }
        .contact-us .content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        .contact-us .content h3 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #007bff;
            font-weight: bold;
        }
        .contact-us .content p {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 20px;
            line-height: 1.8;
        }
        .contact-us .form {
            max-width: 600px;
            margin: 0 auto;
            text-align: left;
        }
        .contact-us .form .form-group {
            margin-bottom: 20px;
        }
        .contact-us .form .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        .contact-us .form .form-group input,
        .contact-us .form .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
            font-size: 14px;
        }
        .contact-us .form .form-group textarea {
            resize: vertical;
            min-height: 150px;
        }
        .contact-us .form .btn {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border-radius: 3px;
            transition: background-color 0.3s;
            display: block;
            width: 100%;
        }
        .contact-us .form .btn:hover {
            background-color: #0069d9;
        }
        /* 页脚样式 */
        footer {
            background-color: #343a40;
            color: #fff;
            padding: 50px 0;
            text-align: center;
        }
        footer .content {
            max-width: 1200px;
            margin: 0 auto;
        }
        footer .content .logo {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #007bff;
        }
        footer .content .description {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 20px;
            line-height: 1.8;
        }
        footer .content .social {
            margin-bottom: 20px;
        }
        footer .content .social a {
            display: inline-block;
            margin-right: 15px;
            color: #fff;
            font-size: 20px;
            transition: color 0.3s;
        }
        footer .content .social a:hover {
            color: #007bff;
        }
        footer .content .copyright {
            font-size: 14px;
            color: #6c757d;
        }
        /* 移动端样式 */
        @media (max-width: 768px) {
            .carousel-item img {
                height: 300px;
            }
            .carousel-caption h3 {
                font-size: 24px;
            }
            .carousel-caption p {
                font-size: 16px;
            }
            .section-title {
                font-size: 24px;
            }
            .product-list {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }
            .product-card img {
                height: 150px;
            }
            .product-card h3 {
                font-size: 18px;
            }
            .product-card .price {
                font-size: 20px;
            }
            .about-us {
                padding: 30px 0;
            }
            .contact-us {
                padding: 30px 0;
            }
            footer {
                padding: 30px 0;
            }
        }
        /* 平板端样式 */
        @media (min-width: 769px) and (max-width: 1024px) {
            .carousel-item img {
                height: 400px;
            }
            .carousel-caption h3 {
                font-size: 28px;
            }
            .carousel-caption p {
                font-size: 17px;
            }
            .section-title {
                font-size: 28px;
            }
            .product-list {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 25px;
            }
            .product-card img {
                height: 180px;
            }
            .product-card h3 {
                font-size: 19px;
            }
            .product-card .price {
                font-size: 22px;
            }
            .about-us {
                padding: 40px 0;
            }
            .contact-us {
                padding: 40px 0;
            }
            footer {
                padding: 40px 0;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">科技产品展示站</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#products">产品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <section id="home" class="section">
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=600" class="d-block w-100" alt="产品1">
                    <div class="carousel-caption d-none d-md-block">
                        <h3>智能手表</h3>
                        <p>采用最新的智能技术，功能强大，价格实惠，是您日常生活的好帮手。</p>
                        <a href="#products" class="btn">查看详情</a>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=600" class="d-block w-100" alt="产品2">
                    <div class="carousel-caption d-none d-md-block">
                        <h3>智能音箱</h3>
                        <p>支持语音控制，播放音乐，查询天气，设置闹钟等功能，为您的生活增添便利。</p>
                        <a href="#products" class="btn">查看详情</a>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=600" class="d-block w-100" alt="产品3">
                    <div class="carousel-caption d-none d-md-block">
                        <h3>智能手环</h3>
                        <p>可以监测您的心率、血压、睡眠质量等健康数据，帮助您更好地管理自己的健康。</p>
                        <a href="#products" class="btn">查看详情</a>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section>

    <!-- 产品展示区 -->
    <section id="products" class="section">
        <div class="container">
            <div class="section-content">
                <h2 class="section-title">精选产品</h2>
                <p>我们为您提供最优质的科技产品，满足您的不同需求。</p>
            </div>
            <div class="product-list">
                <div class="product-card">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" alt="智能手表">
                    <h3>智能手表</h3>
                    <p>采用最新的智能技术，功能强大，价格实惠，是您日常生活的好帮手。</p>
                    <div class="price">¥999</div>
                    <a href="#" class="btn">立即购买</a>
                </div>
                <div class="product-card">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" alt="智能音箱">
                    <h3>智能音箱</h3>
                    <p>支持语音控制，播放音乐，查询天气，设置闹钟等功能，为您的生活增添便利。</p>
                    <div class="price">¥599</div>
                    <a href="#" class="btn">立即购买</a>
                </div>
                <div class="product-card">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" alt="智能手环">
                    <h3>智能手环</h3>
                    <p>可以监测您的心率、血压、睡眠质量等健康数据，帮助您更好地管理自己的健康。</p>
                    <div class="price">¥299</div>
                    <a href="#" class="btn">立即购买</a>
                </div>
                <div class="product-card">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" alt="蓝牙耳机">
                    <h3>蓝牙耳机</h3>
                    <p>采用最新的蓝牙技术，连接稳定，音质清晰，是您听音乐、打电话的好选择。</p>
                    <div class="price">¥199</div>
                    <a href="#" class="btn">立即购买</a>
                </div>
                <div class="product-card">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" alt="智能台灯">
                    <h3>智能台灯</h3>
                    <p>支持语音控制，调节亮度和色温，为您提供舒适的学习和工作环境。</p>
                    <div class="price">¥159</div>
                    <a href="#" class="btn">立即购买</a>
                </div>
                <div class="product-card">
                    <img src="https://img0.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" alt="智能门锁">
                    <h3>智能门锁</h3>
                    <p>支持指纹、密码、钥匙、手机APP等多种开锁方式，安全便捷。</p>
                    <div class="price">¥1299</div>
                    <a href="#" class="btn">立即购买</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="about-us section">
        <div class="container">
            <div class="section-content">
                <h2 class="section-title">关于我们</h2>
            </div>
            <div class="content">
                <h3>我们的使命</h3>
                <p>我们的使命是为用户提供最优质的科技产品和服务，帮助用户更好地享受智能生活。</p>
                <h3>我们的价值观</h3>
                <p>用户至上、创新驱动、诚信经营、合作共赢。</p>
                <h3>我们的团队</h3>
                <p>我们拥有一支经验丰富、专业素质高的团队，致力于为用户提供最优质的产品和服务。</p>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="contact-us section">
        <div class="container">
            <div class="section-content">
                <h2 class="section-title">联系我们</h2>
            </div>
            <div class="content">
                <h3>联系方式</h3>
                <p>如果您有任何问题或建议，欢迎随时联系我们。</p>
                <div class="form">
                    <div class="form-group">
                        <label for="name">姓名：</label>
                        <input type="text" id="name" name="name" placeholder="请输入姓名" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱：</label>
                        <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">电话：</label>
                        <input type="text" id="phone" name="phone" placeholder="请输入电话" required>
                    </div>
                    <div class="form-group">
                        <label for="message">留言：</label>
                        <textarea id="message" name="message" placeholder="请输入留言内容" required></textarea>
                    </div>
                    <button type="submit" class="btn">提交留言</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="content">
            <div class="logo">科技产品展示站</div>
            <div class="description">我们为您提供最优质的科技产品和服务，帮助用户更好地享受智能生活。</div>
            <div class="social">
                <a href="#"><i class="fab fa-weixin"></i></a>
                <a href="#"><i class="fab fa-weibo"></i></a>
                <a href="#"><i class="fab fa-qq"></i></a>
                <a href="#"><i class="fab fa-github"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
            <div class="copyright">© 2024 科技产品展示站 版权所有</div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

第十五章 HTML 常见错误排查

15.1 标签未闭合

错误描述：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>
</head>
<body>
    <h1>标题
    <p>段落。</p>
</body>
</html>

错误分析：<h1>标签未闭合。修复方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签未闭合示例</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落。</p>
</body>
</html>

15.2 标签嵌套错误

错误描述：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>
</head>
<body>
    <h1>标题<p>段落。</h1></p>
</body>
</html>

错误分析：<p>标签嵌套在<h1>标签里面，并且闭合顺序错误。修复方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签嵌套错误示例</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落。</p>
</body>
</html>

15.3 属性值未加引号

错误描述：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>
</head>
<body>
    <img src=images/1.jpg alt=风景图>
</body>
</html>

错误分析：src 属性值和 alt 属性值未加引号。修复方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性值未加引号示例</title>
</head>
<body>
    <img src="images/1.jpg" alt="风景图">
</body>
</html>

15.4 图片路径错误

错误描述：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>
</head>
<body>
    <img src="img/1.jpg" alt="风景图">
</body>
</html>

错误分析：图片文件不存在于 img 目录下。修复方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片路径错误示例</title>
</head>
<body>
    <img src="images/1.jpg" alt="风景图">
</body>
</html>

第十六章 HTML 学习资源推荐

16.1 官方文档

16.2 在线教程

16.3 视频教程

16.4 书籍推荐

《Head First HTML and CSS》
《HTML5 权威指南》
《CSS 揭秘》

总结

这篇博客是为 0 编程基础小白量身定制的 HTML 全教程，覆盖了 12 大核心模块、100 + 逐行注释的可复制代码案例，从浏览器原理讲到本地存储、响应式布局、简单动画，最后用 3 个完整企业级项目（科技产品展示站、求职简历单页、社区在线报名系统）串联所有技能。

学习 HTML 的关键是多写、多练、多调试，希望这篇教程能够帮助你快速掌握 HTML 的基础知识和应用技巧，成为一名优秀的前端工程师。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-10，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！