HTML 完整教程与实践（带详细注释）
第一章：HTML 简介与基础结构
示例 1：最简单的 HTML 文档
<!--
文档类型声明：告知浏览器这是 HTML5 文档
这是 HTML5 标准的声明方式，必须放在文档最开头
-->
<!DOCTYPE html>
<!--
html 标签：整个 HTML 文档的根元素
lang 属性指定页面主要语言为简体中文
所有其他元素都必须包含在 html 标签内
-->
<html lang="zh-CN">
<!--
head 标签：包含文档的元数据（不直接显示在页面上）
元数据包括标题、字符集、样式、脚本等信息
-->
<head>
<!--
meta 标签：定义文档的元数据
charset="UTF-8" 指定字符编码为 UTF-8，支持几乎所有语言的字符
这是确保中文等特殊字符正确显示的关键
-->
<meta charset="UTF-8">
<!--
视口设置：确保页面在各种设备上正确显示
width=device-width：让页面宽度等于设备宽度
initial-scale=1.0：初始缩放比例为 1:1
这是响应式设计的基础配置
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
title 标签：定义网页标题
显示在浏览器标签栏，也用于搜索引擎结果和书签
应简洁且能准确描述页面内容
-->
<title>我的第一个 HTML 页面</title>
</head>
<!--
body 标签：包含所有可见的页面内容
用户在浏览器中看到的所有内容都放在这里
-->
<body>
<!--
h1 标签：一级标题
一个页面通常只有一个 h1 标签，代表最重要的标题
-->
<h1>欢迎来到我的网页</h1>
<!--
p 标签：定义段落
浏览器会自动在段落前后添加空白
-->
<p>这是我的第一个 HTML 页面，我正在学习网页开发！</p>
</body>
<!-- html 标签结束：所有内容必须放在开始和结束标签之间 -->
</html>
示例 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>HTML 结构解析</title>
<!--
style 标签：用于嵌入 CSS 样式
这里设置了一些基础样式让页面更易读
-->
<style>
/* 为 body 元素设置样式：字体、行高和内边距 */
body {
font-family: Arial, sans-serif; /* 设置字体 */
line-height: 1.6; /* 设置行高，提高可读性 */
padding: 20px; /* 设置内边距，让内容不贴边 */
}
/* 为标题设置颜色 */
h1, h2 {
color: #2c3e50; /* 深蓝色，专业且易读 */
}
</style>
</head>
<!-- 主体区域：包含所有可见内容 -->
<body>
<h1>HTML 文档结构</h1>
<h2>1. 文档声明</h2>
<p><!DOCTYPE html> - 声明这是 HTML5 文档</p>
<h2>2. 根元素</h2>
<p><html> - 所有其他元素的容器</p>
<h2>3. 头部</h2>
<p><head> - 包含元数据，如标题、字符集等</p>
<h2>4. 主体</h2>
<p><body> - 包含所有可见的页面内容</p>
<!--
hr 标签：插入水平线
用于分隔不同的内容区块
-->
<hr>
<p>这是一个完整的 HTML 文档结构示例</p>
</body>
</html>
第二章：HTML 元素与标签
示例 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>HTML 元素示例</title>
<style>
/* 为示例元素添加边框，便于观察 */
.example {
border: 1px solid #333;
padding: 10px;
margin: 10px 0;
}
/* 为代码显示区域设置样式 */
code {
background-color: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>HTML 元素的组成</h1>
<div class="example">
<h2>1. 完整元素（有开始标签、内容和结束标签）</h2>
<!--
p 标签是一个典型的完整元素
开始标签：<p>
内容：这是一个段落元素...
结束标签：</p>
-->
<p>这是一个段落元素，包含开始标签、内容和结束标签</p>
<p>代码形式：<code><p>这是段落内容</p></code></p>
</div>
<div class="example">
<h2>2. 空元素（没有内容和结束标签）</h2>
<!--
br 标签是一个空元素，用于插入换行
它没有内容，也没有结束标签
-->
<p>这行文字后面<br>会换行显示</p>
<p>代码形式：<code><br></code></p>
</div>
<div class="example">
<h2>3. 带有属性的元素</h2>
<!--
a 标签（链接）带有 href 属性
属性提供了元素的额外信息
格式：属性名="属性值"
-->
<a href="https://www.example.com" target="_blank">这是一个链接</a>
<p>代码形式：<code><a href="https://www.example.com" target="_blank">链接文本</a></code></p>
<ul>
<li><code>href</code> 属性：指定链接目标地址</li>
<li><code>target="_blank"</code> 属性：指定在新窗口打开链接</li>
</ul>
</div>
</body>
</html>
示例 2：常用全局属性
<!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>
<style>
/* 用于演示 class 属性的样式 */
.highlight {
background-color: yellow;
padding: 5px;
}
.important {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>HTML 全局属性示例</h1>
<h2>1. class 属性 - 为元素指定类名</h2>
<!--
class 属性可以为元素指定一个或多个类名
多个类名用空格分隔
通常用于应用 CSS 样式
-->
<p class="highlight">这个段落使用了 highlight 类，背景是黄色</p>
<p class="highlight important">这个段落同时使用了两个类</p>
<h2>2. id 属性 - 为元素指定唯一标识符</h2>
<!--
id 属性为元素提供唯一的标识符
整个页面中 id 值必须唯一
常用于通过 JavaScript 操作元素或创建锚点链接
-->
<p id="intro">这是一个带有 id 属性的段落</p>
<p>可以通过 <code><a href="#intro"></code> 创建跳转到这个段落的链接</p>
<a href="#intro">点击跳转到上面的段落</a>
<h2>3. style 属性 - 为元素指定内联样式</h2>
<!--
style 属性用于为元素添加内联 CSS 样式
格式：style="属性名: 值; 属性名: 值;"
内联样式优先级高于外部和内部样式
-->
<p style="color: blue; font-size: 18px;">这个段落使用了 style 属性设置样式</p>
<h2>4. title 属性 - 提供额外信息</h2>
<!--
title 属性为元素提供额外的信息
当鼠标悬停在元素上时显示提示文本
-->
<p>将鼠标悬停在下面的文字上：</p>
<span title="这是一个提示信息，说明这段文字的含义">带有提示信息的文本</span>
<h2>5. hidden 属性 - 隐藏元素</h2>
<!--
hidden 属性用于隐藏元素
被隐藏的元素不会在页面上显示
-->
<p>下面有一个被隐藏的段落：</p>
<p hidden>这个段落因为有 hidden 属性而被隐藏了</p>
</body>
</html>
第三章：文本格式化
示例 1：标题与段落
<!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: sans-serif;
}
/* 为不同级别标题设置不同样式 */
h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
h2 { color: #34495e; margin-top: 30px; }
.note {
background-color: #f8f9fa;
padding: 15px;
border-left: 4px solid #3498db;
margin: 20px 0;
}
</style>
</head>
<body>
<!--
h1 是最高级别的标题
一个页面通常只应有一个 h1 标签
它代表页面的主要标题
-->
<h1>HTML 标题与段落</h1>
<!--
p 标签定义段落
浏览器会自动在段落前后添加空白
多个空格或换行在浏览器中只会显示为一个空格
-->
<p>在 HTML 中，我们使用标题标签来定义不同级别的标题，使用段落标签来组织文本内容。</p>
<p>合理使用标题和段落可以使页面结构清晰，便于阅读和理解。</p>
<div class="note">
<strong>注意：</strong> 标题标签不仅影响文本的外观，更重要的是它们赋予了文本语义，
有助于搜索引擎理解页面内容结构，也有助于屏幕阅读器等辅助技术。
</div>
<!-- h2 是二级标题，用于表示主要章节 -->
<h2>1. 六级标题示例</h2>
<!-- h3 是三级标题，用于表示章节下的小节 -->
<h3>1.1 三级标题</h3>
<p>这是三级标题下的段落内容...</p>
<h3>1.2 另一个三级标题</h3>
<p>这是另一个三级标题下的段落内容...</p>
<h2>2. 换行与水平线</h2>
<h3>2.1 使用 br 标签换行</h3>
<!--
br 标签用于在段落中插入换行
它是一个空元素，没有结束标签
-->
<p>这是第一行文字<br>这是第二行文字<br>这是第三行文字</p>
<h3>2.2 使用 hr 标签插入水平线</h3>
<!--
hr 标签用于插入水平线
常用于分隔不同的内容区块
它也是一个空元素
-->
<p>这是水平线上面的内容</p>
<hr>
<p>这是水平线下面的内容</p>
</body>
</html>
示例 2：文本格式化标签
<!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 {
font-family: Arial, sans-serif;
line-height: 1.8;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.example-box {
border: 1px solid #ddd;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
}
code {
background-color: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
font-family: monospace;
}
</style>
</head>
<body>
<h1>HTML 文本格式化标签</h1>
<p>HTML 提供了多种标签用于格式化文本，使文本呈现不同的样式和语义。</p>
<div class="example-box">
<h2>1. 粗体与重要文本</h2>
<!--
b 标签：仅使文本加粗（无特殊语义）
strong 标签：表示文本重要，通常也会加粗显示（有语义）
推荐使用 strong 而非 b，因为它包含语义信息
-->
<p><b>这是 b 标签的粗体文本</b> - 仅视觉加粗</p>
<p><strong>这是 strong 标签的重要文本</strong> - 表示重要内容</p>
<p>代码：<code><b>粗体文本</b> 和 <strong>重要文本</strong></code></p>
</div>
<div class="example-box">
<h2>2. 斜体与强调文本</h2>
<!--
i 标签：仅使文本斜体（无特殊语义）
em 标签：表示文本需要强调，通常也会斜体显示（有语义）
推荐使用 em 而非 i，因为它包含语义信息
-->
<p><i>这是 i 标签的斜体文本</i> - 仅视觉斜体</p>
<p><em>这是 em 标签的强调文本</em> - 表示需要强调</p>
<p>代码：<code><i>斜体文本</i> 和 <em>强调文本</em></code></p>
</div>
<div class="example-box">
<h2>3. 其他文本格式化标签</h2>
<!--
mark 标签：标记或高亮文本
small 标签：显示小号文本
del 标签：表示删除的文本，通常带删除线
ins 标签：表示插入的文本，通常带下划线
sub 标签：下标文本
sup 标签：上标文本
-->
<p><mark>这是 mark 标签标记的文本</mark> - 高亮显示</p>
<p>这是正常大小的文本，<small>这是 small 标签的小号文本</small></p>
<p>原价：<del>¥100</del>，现价：¥80</p>
<p>我的名字是<ins>张三</ins>（之前写错了）</p>
<p>水的化学式是 H<sub>2</sub>O</p>
<p>2<sup>3</sup> = 8</p>
</div>
<div class="example-box">
<h2>4. 标签组合使用</h2>
<!-- 格式化标签可以嵌套使用，实现复杂的文本效果 -->
<p>
<strong>注意：</strong> 请在 <em>2023年12月31日</em> 前完成 <mark>年度报告</mark> 的提交。
</p>
<p>
代码：<code><strong>注意：</strong> 请在 <em>2023年12月31日</em> 前完成 <mark>年度报告</mark></code>
</p>
</div>
</body>
</html>
第四章：链接与图像
示例 1：各种类型的链接
<!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>
<style>
body {
font-family: 'Segoe UI', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.link-section {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #eee;
border-radius: 5px;
}
a {
color: #2563eb;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.anchor-target {
padding: 10px;
margin: 10px 0;
background-color: #f0f9ff;
}
</style>
</head>
<body>
<h1>HTML 链接的各种用法</h1>
<p>链接是 HTML 的核心功能之一，用于连接不同的页面和资源。</p>
<div class="link-section">
<h2>1. 基本外部链接</h2>
<!--
a 标签（anchor 的缩写）用于创建链接
href 属性指定链接的目标地址
这里链接到外部网站
-->
<p>
<a href="https://www.example.com">访问示例网站</a> - 这是一个基本的外部链接
</p>
<p>代码：<code><a href="https://www.example.com">访问示例网站</a></code></p>
</div>
<div class="link-section">
<h2>2. 在新窗口打开链接</h2>
<!--
target 属性控制链接的打开方式
target="_blank" 表示在新窗口或新标签页中打开链接
rel="noopener noreferrer" 是安全最佳实践，防止新页面访问原页面
-->
<p>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
在新窗口打开示例网站
</a>
</p>
<p>代码：<code><a href="https://www.example.com" target="_blank" rel="noopener noreferrer">...</code></p>
</div>
<div class="link-section">
<h2>3. 内部链接（链接到本地文件）</h2>
<!--
链接到同一网站的其他页面
href 属性使用相对路径
-->
<p>
<a href="about.html">关于我们</a> - 链接到同一目录下的 about.html
</p>
<p>
<a href="products/index.html">产品列表</a> - 链接到 products 子目录下的 index.html
</p>
<p>代码：<code><a href="about.html">关于我们</a></code></p>
</div>
<div class="link-section">
<h2>4. 页面内锚点链接</h2>
<!--
链接到当前页面的特定部分
1. 首先为目标位置设置 id 属性
2. 链接的 href 属性值为 # + 目标 id
-->
<p>
<a href="#section1">跳转到第一部分</a><br>
<a href="#section2">跳转到第二部分</a><br>
<a href="#section3">跳转到第三部分</a>
</p>
<!-- 目标位置 -->
<div id="section1" class="anchor-target">
<h3>第一部分内容</h3>
<p>这是第一部分的内容...</p>
</div>
<div id="section2" class="anchor-target">
<h3>第二部分内容</h3>
<p>这是第二部分的内容...</p>
</div>
<div id="section3" class="anchor-target">
<h3>第三部分内容</h3>
<p>这是第三部分的内容...</p>
</div>
<p>代码：<code><a href="#section1">跳转到第一部分</a></code> 和 <code><div id="section1">...</div></code></p>
</div>
<div class="link-section">
<h2>5. 特殊链接</h2>
<!-- 发送电子邮件的链接 -->
<p>
<a href="mailto:contact@example.com">发送邮件给我们</a>
</p>
<!-- 带主题的邮件链接 -->
<p>
<a href="mailto:contact@example.com?subject=咨询产品">发送带主题的邮件</a>
</p>
<!-- 拨打电话的链接（在移动设备上有效） -->
<p>
<a href="tel:+8612345678901">拨打我们的电话</a>
</p>
<!-- 下载文件的链接 -->
<p>
<a href="document.pdf" download>下载PDF文档</a> - download 属性提示浏览器下载文件
</p>
</div>
</body>
</html>
示例 2：图像的使用
<!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>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.image-example {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #eee;
border-radius: 5px;
}
.image-container {
margin: 15px 0;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
img {
max-width: 100%; /* 确保图像不会超出容器宽度 */
height: auto; /* 保持图像比例 */
}
code {
background-color: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>HTML 图像的使用</h1>
<p>在 HTML 中，使用 <img> 标签插入图像，这是一个空元素（没有结束标签）。</p>
<div class="image-example">
<h2>1. 基本图像</h2>
<!--
img 标签用于插入图像
src 属性：指定图像的路径（必须）
alt 属性：图像无法显示时的替代文本（必须，有利于可访问性）
-->
<div class="image-container">
<img src="https://picsum.photos/id/237/600/400" alt="一只可爱的小狗">
</div>
<p>代码：</p>
<code><img src="https://picsum.photos/id/237/600/400" alt="一只可爱的小狗"></code>
<ul>
<li><code>src</code>：图像的 URL 或路径</li>
<li><code>alt</code>：替代文本，当图像无法加载时显示</li>
</ul>
</div>
<div class="image-example">
<h2>2. 指定图像尺寸</h2>
<!--
width 和 height 属性：指定图像的宽度和高度
单位是像素（px），可以省略单位
建议指定尺寸，避免页面加载时布局跳动
-->
<div class="image-container">
<img src="https://picsum.photos/id/10/400/300" alt="风景照片" width="400" height="300">
</div>
<p>代码：</p>
<code><img src="https://picsum.photos/id/10/400/300" alt="风景照片" width="400" height="300"></code>
<p><strong>注意：</strong> 改变 width 和 height 会拉伸或压缩图像，最好保持原始比例。</p>
</div>
<div class="image-example">
<h2>3. 作为链接的图像</h2>
<!--
将 img 标签放在 a 标签内部，使图像成为可点击的链接
-->
<div class="image-container">
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
<img src="https://picsum.photos/id/20/300/200" alt="点击访问示例网站">
</a>
<p>点击图像会跳转到示例网站</p>
</div>
<p>代码：</p>
<code>
<a href="https://www.example.com"><br>
<img src="https://picsum.photos/id/20/300/200" alt="点击访问示例网站"><br>
</a>
</code>
</div>
<div class="image-example">
<h2>4. 图像路径</h2>
<p>图像路径有两种类型：相对路径和绝对路径</p>
<h3>相对路径</h3>
<p>相对于当前 HTML 文件的路径：</p>
<ul>
<li><code><img src="image.jpg" alt="..."></code> - 图像与 HTML 文件在同一文件夹</li>
<li><code><img src="images/photo.jpg" alt="..."></code> - 图像在 images 子文件夹中</li>
<li><code><img src="../picture.png" alt="..."></code> - 图像在上一级文件夹中</li>
</ul>
<h3>绝对路径</h3>
<p>完整的 URL 路径：</p>
<ul>
<li><code><img src="https://www.example.com/images/logo.png" alt="..."></code></li>
</ul>
</div>
<div class="image-example">
<h2>5. 响应式图像</h2>
<!--
使用 CSS 使图像响应式，在不同设备上自动调整大小
max-width: 100% 确保图像不会超过容器宽度
height: auto 保持图像比例
-->
<div class="image-container">
<img src="https://picsum.photos/id/1015/800/400" alt="山脉风景" class="responsive-img">
</div>
<p>CSS 代码：</p>
<code>
.responsive-img {<br>
max-width: 100%;<br>
height: auto;<br>
}
</code>
<p>这样图像会根据屏幕尺寸自动调整大小。</p>
</div>
</body>
</html>
第五章：列表
示例 1：三种基本列表类型
<!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>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.list-container {
margin-bottom: 30px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}
h2 {
color: #2c3e50;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
code {
background-color: #e9ecef;
padding: 2px 5px;
border-radius: 3px;
font-family: monospace;
}
</style>
</head>
<body>
<h1>HTML 列表类型</h1>
<p>HTML 提供了三种主要的列表类型：无序列表、有序列表和定义列表。</p>
<div class="list-container">
<h2>1. 无序列表（Unordered List）</h2>
<!--
无序列表使用 ul 标签定义
每个列表项使用 li 标签
默认显示项目符号（圆点）
-->
<p><strong>示例：</strong> 购物清单</p>
<ul>
<li>牛奶</li>
<li>面包</li>
<li>鸡蛋</li>
<li>水果
<!-- 列表可以嵌套 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
</ul>
<p><strong>代码：</strong></p>
<pre><code><ul>
<li>牛奶</li>
<li>面包</li>
<li>鸡蛋</li>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
</ul></code></pre>
</div>
<div class="list-container">
<h2>2. 有序列表（Ordered List）</h2>
<!--
有序列表使用 ol 标签定义
每个列表项使用 li 标签
默认显示数字编号
-->
<p><strong>示例：</strong> 烹饪步骤</p>
<ol>
<li>准备食材</li>
<li>将食材切碎</li>
<li>加热锅并加入油</li>
<li>依次加入食材翻炒
<!-- 有序列表也可以嵌套 -->
<ol>
<li>先炒洋葱和大蒜</li>
<li>加入肉类翻炒至变色</li>
<li>加入蔬菜继续翻炒</li>
</ol>
</li>
<li>加入调味料</li>
<li>完成烹饪，装盘即可</li>
</ol>
<p><strong>代码：</strong></p>
<pre><code><ol>
<li>准备食材</li>
<li>将食材切碎</li>
<li>加热锅并加入油</li>
<li>依次加入食材翻炒
<ol>
<li>先炒洋葱和大蒜</li>
<li>加入肉类翻炒至变色</li>
</ol>
</li>
<li>完成烹饪，装盘即可</li>
</ol></code></pre>
</div>
<div class="list-container">
<h2>3. 定义列表（Definition List）</h2>
<!--
定义列表使用 dl 标签定义
每个术语使用 dt 标签
每个术语的解释使用 dd 标签
常用于展示词汇表、术语解释等
-->
<p><strong>示例：</strong> 编程术语解释</p>
<dl>
<dt><strong>HTML</strong></dt>
<dd>超文本标记语言（HyperText Markup Language），用于创建网页结构。</dd>
<dt><strong>CSS</strong></dt>
<dd>层叠样式表（Cascading Style Sheets），用于描述网页的呈现方式。</dd>
<dt><strong>JavaScript</strong></dt>
<dd>一种编程语言，用于为网页添加交互性和动态效果。</dd>
<dt><strong>API</strong></dt>
<dd>应用程序编程接口（Application Programming Interface），用于不同软件组件之间的通信。</dd>
</dl>
<p><strong>代码：</strong></p>
<pre><code><dl>
<dt><strong>HTML</strong></dt>
<dd>超文本标记语言，用于创建网页结构。</dd>
<dt><strong>CSS</strong></dt>
<dd>层叠样式表，用于描述网页的呈现方式。</dd>
</dl></code></pre>
</div>
</body>
</html>
示例 2：列表样式与高级用法
<!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 {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.list-example {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 5px;
}
h2 {
color: #333;
border-bottom: 2px solid #4285f4;
padding-bottom: 8px;
}
/* 自定义无序列表样式 */
.custom-ul {
list-style-type: square; /* 方形项目符号 */
}
.custom-ul-2 {
list-style-type: none; /* 去除默认符号 */
padding-left: 0;
}
.custom-ul-2 li {
padding-left: 25px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234285f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left center;
}
/* 自定义有序列表样式 */
.roman-list {
list-style-type: upper-roman; /* 大写罗马数字 */
}
.alpha-list {
list-style-type: lower-alpha; /* 小写字母 */
}
/* 水平列表 - 常用于导航菜单 */
.horizontal-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.horizontal-list li {
display: inline-block; /* 使列表项水平排列 */
margin-right: 20px;
}
.horizontal-list a {
text-decoration: none;
color: #4285f4;
}
.horizontal-list a:hover {
text-decoration: underline;
}
/* 描述列表样式 */
.styled-dl dt {
font-weight: bold;
margin-top: 10px;
color: #4285f4;
}
.styled-dl dd {
margin-left: 20px;
font-style: italic;
}
code {
background-color: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>列表样式与高级用法</h1>
<p>通过 CSS 可以自定义列表的外观，实现各种效果。</p>
<div class="list-example">
<h2>1. 自定义无序列表样式</h2>
<p><strong>方形项目符号：</strong></p>
<ul class="custom-ul">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<p><strong>自定义图标：</strong></p>
<ul class="custom-ul-2">
<li>已完成任务一</li>
<li>已完成任务二</li>
<li>已完成任务三</li>
</ul>
<p><strong>CSS 代码：</strong></p>
<pre><code>.custom-ul {
list-style-type: square; /* 方形项目符号 */
}
.custom-ul-2 {
list-style-type: none; /* 去除默认符号 */
padding-left: 0;
}
.custom-ul-2 li {
padding-left: 25px;
background-image: url("data:image/svg+xml,..."); /* 自定义图标 */
background-repeat: no-repeat;
background-position: left center;
}</code></pre>
</div>
<div class="list-example">
<h2>2. 自定义有序列表样式</h2>
<p><strong>罗马数字编号：</strong></p>
<ol class="roman-list">
<li>主要步骤一</li>
<li>主要步骤二</li>
<li>主要步骤三</li>
</ol>
<p><strong>字母编号：</strong></p>
<ol class="alpha-list">
<li>子项 a</li>
<li>子项 b</li>
<li>子项 c</li>
</ol>
<p><strong>CSS 代码：</strong></p>
<pre><code>.roman-list {
list-style-type: upper-roman; /* 大写罗马数字 */
}
.alpha-list {
list-style-type: lower-alpha; /* 小写字母 */
}</code></pre>
</div>
<div class="list-example">
<h2>3. 水平列表（导航菜单）</h2>
<!--
通过 CSS 将垂直列表转换为水平列表
这是创建导航菜单的常用技术
-->
<p><strong>水平导航菜单：</strong></p>
<ul class="horizontal-list">
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#products">产品</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
<p><strong>CSS 代码：</strong></p>
<pre><code>.horizontal-list {
list-style-type: none; /* 去除项目符号 */
padding: 0;
margin: 0;
}
.horizontal-list li {
display: inline-block; /* 使列表项水平排列 */
margin-right: 20px;
}</code></pre>
</div>
<div class="list-example">
<h2>4. 样式化的定义列表</h2>
<dl class="styled-dl">
<dt>前端开发</dt>
<dd>负责实现网页的用户界面，包括HTML、CSS和JavaScript等技术。</dd>
<dt>后端开发</dt>
<dd>负责处理服务器端逻辑、数据库交互和业务规则实现。</dd>
<dt>全栈开发</dt>
<dd>同时掌握前端和后端开发技能的开发者。</dd>
</dl>
<p><strong>CSS 代码：</strong></p>
<pre><code>.styled-dl dt {
font-weight: bold;
margin-top: 10px;
color: #4285f4;
}
.styled-dl dd {
margin-left: 20px;
font-style: italic;
}</code></pre>
</div>
</body>
</html>
第六章：表格
示例 1：基本表格结构
<!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>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.table-example {
margin-bottom: 30px;
}
table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
margin: 15px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9; /* 偶数行背景色 */
}
h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
code {
background-color: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>HTML 表格基础</h1>
<p>表格用于展示结构化数据，由行和列组成。</p>
<div class="table-example">
<h2>1. 简单表格</h2>
<!--
table 标签：定义表格
tr 标签：定义表格行（table row）
th 标签：定义表头单元格（table header）
td 标签：定义表格数据单元格（table data）
-->
<table>
<!-- 表头行 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<!-- 数据行 1 -->
<tr>
<td>张三</td>
<td>28</td>
<td>工程师</td>
</tr>
<!-- 数据行 2 -->
<tr>
<td>李四</td>
<td>32</td>
<td>设计师</td>
</tr>
<!-- 数据行 3 -->
<tr>
<td>王五</td>
<td>45</td>
<td>经理</td>
</tr>
</table>
<p><strong>代码解析：</strong></p>
<pre><code><table> <!-- 表格开始 -->
<tr> <!-- 表头行 -->
<th>姓名</th> <!-- 表头单元格 -->
<th>年龄</th>
<th>职业</th>
</tr>
<tr> <!-- 第一行数据 -->
<td>张三</td> <!-- 数据单元格 -->
<td>28</td>
<td>工程师</td>
</tr>
<!-- 更多行... -->
</table></code></pre>
</div>
<div class="table-example">
<h2>2. 带表头、表体和表脚的表格</h2>
<!--
thead 标签：定义表格的表头部分
tbody 标签：定义表格的主体部分
tfoot 标签：定义表格的脚注部分
这些标签使表格结构更清晰，便于样式化和脚本处理
-->
<table>
<!-- 表头 -->
<thead>
<tr>
<th colspan="3">2023年第一季度销售报表</th> <!-- colspan="3" 合并3列 -->
</tr>
<tr>
<th>产品</th>
<th>销量</th>
<th>销售额 (元)</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<td>产品A</td>
<td>120</td>
<td>24,000</td>
</tr>
<tr>
<td>产品B</td>
<td>85</td>
<td>17,000</td>
</tr>
<tr>
<td>产品C</td>
<td>50</td>
<td>30,000</td>
</tr>
</tbody>
<!-- 表脚 -->
<tfoot>
<tr>
<th>总计</th>
<th>255</th>
<th>71,000</th>
</tr>
</tfoot>
</table>
<p><strong>代码解析：</strong></p>
<pre><code><table>
<thead> <!-- 表头部分 -->
<tr>
<th colspan="3">销售报表</th> <!-- 合并3列 -->
</tr>
<tr>
<th>产品</th>
<th>销量</th>
<th>销售额</th>
</tr>
</thead>
<tbody> <!-- 表体部分 -->
<tr><td>产品A</td><td>120</td><td>24,000</td></tr>
<!-- 更多数据行... -->
</tbody>
<tfoot> <!-- 表脚部分 -->
<tr><th>总计</th><th>255</th><th>71,000</th></tr>
</tfoot>
</table></code></pre>
</div>
</body>
</html>
示例 2：单元格合并与复杂表格
<!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 {
font-family: 'Segoe UI', sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.table-container {
margin-bottom: 30px;
overflow-x: auto; /* 表格过宽时允许水平滚动 */
}
table {
border-collapse: collapse;
width: 100%;
margin: 15px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
th {
background-color: #f0f7ff;
color: #2c3e50;
}
.merged-example th {
background-color: #fff3cd;
}
.merged-example td {
background-color: #fff;
}
h2 {
color: #2c3e50;
margin-top: 30px;
}
.highlight {
background-color: #e3f2fd;
font-weight: bold;
}
code {
background-color: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>复杂表格与单元格合并</h1>
<p>通过 colspan 和 rowspan 属性，可以合并单元格创建复杂表格。</p>
<div class="table-container">
<h2>1. 单元格合并基础</h2>
<ul>
<li><code>colspan</code> - 横向合并单元格（跨列）</li>
<li><code>rowspan</code> - 纵向合并单元格（跨行）</li>
</ul>
<table>
<tr>
<th>普通单元格</th>
<th colspan="2">合并两列的单元格</th> <!-- 横向合并2列 -->
</tr>
<tr>
<td rowspan="2">合并两行的单元格</td> <!-- 纵向合并2行 -->
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
<tr>
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
</table>
<p><strong>代码：</strong></p>
<pre><code><table>
<tr>
<th>普通单元格</th>
<th colspan="2">合并两列的单元格</th> <!-- colspan="2" 合并2列 -->
</tr>
<tr>
<td rowspan="2">合并两行的单元格</td> <!-- rowspan="2" 合并2行 -->
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
<tr>
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
</table></code></pre>
</div>
<div class="table-container">
<h2>2. 课程表示例（复杂表格）</h2>
<!-- 实际应用中的复杂表格：课程表 -->
<table class="merged-example">
<tr>
<th colspan="6">2023年秋季学期课程表</th> <!-- 合并6列 -->
</tr>
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td rowspan="2">上午</td> <!-- 合并2行 -->
<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>中午</td>
<td colspan="5" class="highlight">午休</td> <!-- 合并5列 -->
</tr>
<tr>
<td rowspan="2">下午</td> <!-- 合并2行 -->
<td>体育</td>
<td>音乐</td>
<td class="highlight" colspan="2">计算机</td> <!-- 合并2列 -->
<td>美术</td>
</tr>
<tr>
<td>政治</td>
<td>英语</td>
<td>数学</td>
<td>语文</td>
<td rowspan="2" class="highlight">班会</td> <!-- 合并2行 -->
</tr>
<tr>
<td>晚上</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
</tr>
</table>
<p><strong>设计思路：</strong></p>
<ol>
<li>首先创建表头行，合并所有列显示标题</li>
<li>创建星期表头行，列出所有星期</li>
<li>对"上午"和"下午"使用 rowspan="2" 合并两行</li>
<li>对"午休"使用 colspan="5" 合并五列</li>
<li>对"计算机"课程使用 colspan="2" 合并两列</li>
<li>对"班会"使用 rowspan="2" 合并两行</li>
</ol>
</div>
<div>
<h2>3. 表格使用注意事项</h2>
<ul>
<li>表格应仅用于展示表格数据，而非页面布局</li>
<li>复杂表格可能对屏幕阅读器用户不友好，应谨慎使用</li>
<li>始终使用正确的表格结构标签（thead, tbody, tfoot）</li>
<li>使用 border-collapse: collapse 使表格边框更美观</li>
<li>在移动设备上，考虑使用 overflow-x: auto 确保表格可滚动</li>
<li>合并单元格时要确保表格结构正确，避免行列混乱</li>
</ul>
</div>
</body>
</html>
第七章：表单
示例 1：基本表单控件
<!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>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.form-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block; /* 使标签独占一行 */
margin-bottom: 5px;
font-weight: 500;
}
input, select, textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
font-family: inherit; /* 继承字体，保持一致性 */
font-size: 16px;
}
input[type="checkbox"],
input[type="radio"] {
width: auto; /* 复选框和单选框不需要100%宽度 */
margin-right: 10px;
}
.checkbox-group, .radio-group {
display: flex;
flex-wrap: wrap;
gap: 15px; /* 选项之间的间距 */
}
.checkbox-item, .radio-item {
display: flex;
align-items: center;
}
button {
background-color: #4285f4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #3367d6;
}
h2 {
color: #2c3e50;
border-bottom: 2px solid #4285f4;
padding-bottom: 10px;
}
code {
background-color: #e9ecef;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>HTML 基本表单控件</h1>
<p>表单用于收集用户输入，包含多种类型的输入控件。</p>
<div class="form-section">
<h2>1. 文本输入控件</h2>
<!--
form 标签：定义表单
action 属性：指定表单提交的目标URL
method 属性：指定提交方法（get 或 post）
-->
<form action="/submit" method="post">
<div class="form-group">
<!--
label 标签：为表单控件提供标签
for 属性与 input 的 id 属性关联，点击标签会聚焦到输入框
-->
<label for="name">姓名：</label>
<!--
input 标签：单行文本输入框
type="text"：普通文本输入
id 属性：与 label 的 for 属性关联
name 属性：表单提交时的参数名
required 属性：指定为必填项
-->
<input type="text" id="name" name="name" required placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label for="email">电子邮箱：</label>
<!-- type="email"：电子邮件输入，会自动验证格式 -->
<input type="email" id="email" name="email" required placeholder="请输入您的邮箱">
</div>
<div class="form-group">
<label for="password">密码：</label>
<!-- type="password"：密码输入，输入内容会被掩盖 -->
<input type="password" id="password" name="password" required placeholder="请输入密码">
</div>
<div class="form-group">
<label for="age">年龄：</label>
<!-- type="number"：数字输入，只允许输入数字 -->
<input type="number" id="age" name="age" min="0" max="120" placeholder="请输入您的年龄">
</div>
<div class="form-group">
<label for="birthday">出生日期：</label>
<!-- type="date"：日期选择器 -->
<input type="date" id="birthday" name="birthday">
</div>
<div class="form-group">
<label for="message">留言：</label>
<!--
textarea 标签：多行文本输入框
rows 属性：指定可见行数
cols 属性：指定可见列数（宽度）
-->
<textarea id="message" name="message" rows="4" placeholder="请输入您的留言..."></textarea>
</div>
<button type="submit">提交</button>
</form>
<p><strong>主要控件解析：</strong></p>
<ul>
<li><code><input type="text"></code> - 普通文本输入框</li>
<li><code><input type="email"></code> - 电子邮件输入框（带验证）</li>
<li><code><input type="password"></code> - 密码输入框</li>
<li><code><input type="number"></code> - 数字输入框</li>
<li><code><input type="date"></code> - 日期选择器</li>
<li><code><textarea></code> - 多行文本输入框</li>
</ul>
</div>
</body>
</html>
示例 2：选择控件与按钮
<!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>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.form-container {
background-color: #f8f9fa;
padding: 25px;
border-radius: 8px;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
}
select, input[type="file"] {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
.checkbox-group, .radio-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 8px;
}
.checkbox-item, .radio-item {
display: flex;
align-items: center;
}
input[type="checkbox"],
input[type="radio"] {
width: auto;
margin-right: 8px;
}
.button-group {
display: flex;
gap: 15px;
margin-top: 20px;
}
button, input[type="button"], input[type="submit"], input[type="reset"] {
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
border: none;
}
input[type="submit"] {
background-color: #28a745;
color: white;
}
input[type="reset"] {
background-color: #dc3545;
color: white;
}
input[type="button"] {
background-color: #ffc107;
color: #212529;
}
h2 {
color: #2c3e50;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.file-info {
margin-top: 8px;
color: #666;
font-size: 0.9em;
}
code {
background-color: #e9ecef;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>HTML 选择控件与按钮</h1>
<p>除了基本输入控件，HTML 还提供了多种选择控件和按钮类型。</p>
<div class="form-container">
<h2>1. 选择控件示例</h2>
<form action="/submit-preferences" method="post">
<div class="form-group">
<label for="country">国家/地区：</label>
<!--
select 标签：下拉选择框
option 标签：下拉选项
selected 属性：指定默认选中项
-->
<select id="country" name="country">
<option value="">请选择</option>
<option value="cn" selected>中国</option>
<option value="us">美国</option>
<option value="jp">日本</option>
<option value="uk">英国</option>
</select>
</div>
<div class="form-group">
<label for="interests">兴趣爱好（可多选）：</label>
<!--
multiple 属性：允许选择多个选项
size 属性：指定可见选项数量
按住 Ctrl 键（Windows）或 Command 键（Mac）可多选
-->
<select id="interests" name="interests[]" multiple size="4">
<option value="reading">阅读</option>
<option value="sports">运动</option>
<option value="music">音乐</option>
<option value="travel">旅行</option>
<option value="coding">编程</option>
<option value="cooking">烹饪</option>
</select>
</div>
<div class="form-group">
<label>最喜欢的颜色：</label>
<!--
单选按钮组：type="radio"
同一组单选按钮必须有相同的 name 属性
只能选择其中一个选项
-->
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="color-red" name="favorite-color" value="red">
<label for="color-red">红色</label>
</div>
<div class="radio-item">
<input type="radio" id="color-blue" name="favorite-color" value="blue" checked>
<label for="color-blue">蓝色</label>
</div>
<div class="radio-item">
<input type="radio" id="color-green" name="favorite-color" value="green">
<label for="color-green">绿色</label>
</div>
<div class="radio-item">
<input type="radio" id="color-yellow" name="favorite-color" value="yellow">
<label for="color-yellow">黄色</label>
</div>
</div>
</div>
<div class="form-group">
<label>订阅内容（可多选）：</label>
<!--
复选框：type="checkbox"
可以选择多个选项
-->
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="subscribe-news" name="subscribe[]" value="news">
<label for="subscribe-news">新闻资讯</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="subscribe-events" name="subscribe[]" value="events" checked>
<label for="subscribe-events">活动通知</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="subscribe-offers" name="subscribe[]" value="offers" checked>
<label for="subscribe-offers">优惠信息</label>
</div>
</div>
</div>
<div class="form-group">
<label for="avatar">上传头像：</label>
<!--
文件上传控件：type="file"
accept 属性：限制可上传的文件类型
multiple 属性：允许上传多个文件
-->
<input type="file" id="avatar" name="avatar" accept="image/*">
<p class="file-info">支持 JPG、PNG 等图片格式，文件大小不超过 5MB</p>
</div>
<div class="button-group">
<!-- 提交按钮：提交表单数据到服务器 -->
<input type="submit" value="提交">
<!-- 重置按钮：重置表单到初始状态 -->
<input type="reset" value="重置">
<!-- 普通按钮：通常与 JavaScript 配合使用 -->
<input type="button" value="预览" onclick="alert('预览功能将在这里实现')">
</div>
</form>
</div>
<div>
<h2>2. 各种按钮类型</h2>
<div class="button-group">
<!-- 使用 button 标签创建按钮 -->
<button type="button">普通按钮</button>
<!-- 提交按钮 -->
<button type="submit" form="my-form">提交按钮</button>
<!-- 重置按钮 -->
<button type="reset" form="my-form">重置按钮</button>
</div>
<p><strong>按钮类型说明：</strong></p>
<ul>
<li><code><input type="submit"></code> - 提交表单数据</li>
<li><code><input type="reset"></code> - 重置表单</li>
<li><code><input type="button"></code> - 普通按钮，需配合 JavaScript 使用</li>
<li><code><button></code> - 更灵活的按钮标签，内容可以是文本或HTML</li>
</ul>
</div>
<!-- 用于演示按钮的表单 -->
<form id="my-form" style="display: none;">
<!-- 这个表单仅用于演示按钮功能，不显示在页面上 -->
</form>
</body>
</html>
第八章：语义化标签与HTML5新特性
示例 1：HTML5 语义化标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 语义化标签示例</title>
<style>
body {
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
}
/* 头部样式 */
header {
background-color: #2c3e50;
color: white;
padding: 1rem 0;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
/* 主要内容区样式 */
main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 20px;
display: grid;
grid-template-columns: 3fr 1fr;
gap: 2rem;
}
/* 文章样式 */
article {
background-color: white;
padding: 2rem;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.article-meta {
color: #666;
font-size: 0.9rem;
margin-bottom: 1rem;
border-bottom: 1px solid #eee;
padding-bottom: 1rem;
}
section {
margin-bottom: 2rem;
}
h2 {
color: #2c3e50;
margin-top: 0;
}
h3 {
color: #34495e;
}
/* 侧边栏样式 */
aside {
background-color: white;
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.sidebar-section {
margin-bottom: 2rem;
}
.sidebar-section h3 {
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
.related-links {
list-style: none;
padding: 0;
}
.related-links li {
margin-bottom: 0.5rem;
}
.related-links a {
color: #3498db;
text-decoration: none;
}
.related-links a:hover {
text-decoration: underline;
}
/* 页脚样式 */
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 2rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
address {
font-style: normal;
margin-bottom: 1rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr; /* 在小屏幕上单列显示 */
}
.header-content {
flex-direction: column;
gap: 1rem;
}
nav ul {
flex-wrap: wrap;
justify-content: center;
}
}
</style>
</head>
<body>
<!--
header 标签：定义文档的头部区域
通常包含网站标志、导航菜单等
-->
<header>
<div class="header-content">
<div class="logo">我的博客</div>
<!--
nav 标签：定义导航链接区域
用于放置网站的主要导航链接
-->
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</div>
</header>
<!--
main 标签：定义文档的主要内容
一个文档中应只有一个 main 标签
-->
<main>
<!--
article 标签：定义独立的自包含内容
如博客文章、新闻报道、评论等
-->
<article>
<h2>HTML5 语义化标签的重要性</h2>
<!-- 文章元数据区域 -->
<div class="article-meta">
<time datetime="2023-07-15">发布于 2023年7月15日</time>
<span> | 作者：张三</span>
<span> | 分类：Web开发</span>
</div>
<!--
section 标签：定义文档中的一个章节
通常包含一个标题和相关内容
-->
<section>
<h3>什么是语义化标签？</h3>
<p>语义化标签是指能够清晰描述其内容含义的HTML标签。与传统的div标签不同，语义化标签不仅能定义网页的结构，还能传达内容的意义。</p>
<p>例如，<header> 标签明确表示这是页面的头部，<nav> 标签表示导航区域，<footer> 标签表示页脚等。</p>
</section>
<section>
<h3>为什么要使用语义化标签？</h3>
<ul>
<li><strong>提高可访问性</strong>：帮助屏幕阅读器等辅助技术正确解析页面内容</li>
<li><strong>有利于SEO</strong>：搜索引擎能更好地理解页面结构和内容</li>
<li><strong>代码可读性更好</strong>：开发者能更快速地理解页面结构</li>
<li><strong>未来兼容性</strong>：语义化是Web标准的发展方向</li>
</ul>
</section>
<section>
<h3>常用的HTML5语义化标签</h3>
<table border="1" cellpadding="8" style="width:100%; border-collapse:collapse;">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><header></td>
<td>页面或section的头部，通常包含标题、logo等</td>
</tr>
<tr>
<td><nav></td>
<td>导航链接区域</td>
</tr>
<tr>
<td><main></td>
<td>文档的主要内容</td>
</tr>
<tr>
<td><article></td>
<td>独立的自包含内容，如文章、帖子</td>
</tr>
<tr>
<td><section></td>
<td>文档中的章节或区块</td>
</tr>
<tr>
<td><aside></td>
<td>侧边栏内容，与主要内容相关但非必需</td>
</tr>
<tr>
<td><footer></td>
<td>页面或section的底部，通常包含版权信息等</td>
</tr>
</table>
</section>
<!--
figure 和 figcaption 标签：用于包含图片和其说明文字
-->
<section>
<h3>语义化标签示例</h3>
<figure>
<img src="https://picsum.photos/id/0/800/400" alt="HTML5语义化标签结构示意图" style="max-width:100%; height:auto;">
<figcaption>HTML5语义化标签页面结构示意图</figcaption>
</figure>
</section>
</article>
<!--
aside 标签：定义侧边栏内容
包含与主要内容相关但非核心的信息
-->
<aside>
<div class="sidebar-section">
<h3>关于作者</h3>
<p>张三，资深Web开发者，拥有10年前端开发经验，专注于HTML5、CSS3和JavaScript技术。</p>
</div>
<div class="sidebar-section">
<h3>相关文章</h3>
<ul class="related-links">
<li><a href="#">CSS3新特性详解</a></li>
<li><a href="#">JavaScript异步编程</a></li>
<li><a href="#">响应式设计最佳实践</a></li>
<li><a href="#">Web可访问性指南</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3>订阅更新</h3>
<form>
<input type="email" placeholder="您的邮箱地址" style="width:100%; padding:8px; margin-bottom:10px; border:1px solid #ddd; border-radius:4px;">
<button type="submit" style="width:100%; padding:8px; background-color:#3498db; color:white; border:none; border-radius:4px; cursor:pointer;">订阅</button>
</form>
</div>
</aside>
</main>
<!--
footer 标签：定义文档的页脚区域
通常包含版权信息、联系方式等
-->
<footer>
<div class="footer-content">
<!--
address 标签：定义联系信息
-->
<address>
联系我们：<a href="mailto:contact@example.com" style="color:#3498db;">contact@example.com</a><br>
地址：北京市朝阳区某某大厦
</address>
<p>© 2023 我的博客 - 保留所有权利</p>
<p>最后更新：<time datetime="2023-07-15">2023年7月15日</time></p>
</div>
</footer>
</body>
</html>
示例 2：HTML5 新特性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 新特性示例</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
color: #333;
}
.feature-section {
margin-bottom: 40px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #34495e;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.demo-container {
background-color: white;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
border: 1px solid #e9ecef;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
input, textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
.output {
margin-top: 15px;
padding: 10px;
background-color: #e3f2fd;
border-radius: 4px;
}
.code-example {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
font-family: monospace;
font-size: 0.9rem;
}
.video-container {
margin: 20px 0;
}
video, audio {
max-width: 100%;
border-radius: 4px;
}
#canvas-demo {
border: 1px solid #ddd;
background-color: white;
}
</style>
</head>
<body>
<h1>HTML5 新特性示例</h1>
<div class="feature-section">
<h2>1. 新的表单控件和属性</h2>
<p>HTML5 引入了多种新的表单输入类型和属性，提供更好的用户体验和内置验证。</p>
<div class="demo-container">
<form id="html5-form">
<div class="form-group">
<label for="email">电子邮箱：</label>
<!-- type="email" 提供电子邮件格式验证 -->
<input type="email" id="email" name="email" required placeholder="请输入邮箱地址">
</div>
<div class="form-group">
<label for="url">个人网站：</label>
<!-- type="url" 提供URL格式验证 -->
<input type="url" id="url" name="url" placeholder="请输入网址，如 https://example.com">
</div>
<div class="form-group">
<label for="date">出生日期：</label>
<!-- type="date" 提供日期选择器 -->
<input type="date" id="date" name="date">
</div>
<div class="form-group">
<label for="range">音量：</label>
<!-- type="range" 提供滑块控件 -->
<input type="range" id="range" name="range" min="0" max="100" value="50">
<span id="range-value">50</span>%
</div>
<div class="form-group">
<label for="search">搜索：</label>
<!-- type="search" 提供搜索框 -->
<input type="search" id="search" name="search" placeholder="搜索...">
</div>
<div class="form-group">
<label for="tel">电话号码：</label>
<!-- type="tel" 适合输入电话号码 -->
<input type="tel" id="tel" name="tel" placeholder="请输入电话号码">
</div>
<div class="form-group">
<label for="color">选择颜色：</label>
<!-- type="color" 提供颜色选择器 -->
<input type="color" id="color" name="color" value="#3498db">
</div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<div class="output" id="form-output"></div>
</div>
<div class="code-example">
<pre><!-- 电子邮件输入 -->
<input type="email" id="email" required>
<!-- URL输入 -->
<input type="url" id="url">
<!-- 日期选择器 -->
<input type="date" id="date">
<!-- 滑块控件 -->
<input type="range" id="range" min="0" max="100">
<!-- 颜色选择器 -->
<input type="color" id="color"></pre>
</div>
</div>
<div class="feature-section">
<h2>2. 媒体元素：Video 和 Audio</h2>
<p>HTML5 提供了原生的视频和音频播放支持，无需依赖第三方插件。</p>
<div class="demo-container">
<h3>视频示例</h3>
<div class="video-container">
<!--
video 标签：用于播放视频
controls 属性：显示播放控件
width 属性：设置宽度
poster 属性：视频加载前显示的封面图
-->
<video controls width="640" poster="https://picsum.photos/id/237/640/360">
<!-- 提供多种格式以兼容不同浏览器 -->
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持HTML5视频播放。
</video>
</div>
<h3>音频示例</h3>
<!--
audio 标签：用于播放音频
controls 属性：显示播放控件
-->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持HTML5音频播放。
</audio>
</div>
<div class="code-example">
<pre><!-- 视频播放 -->
<video controls width="640" poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持HTML5视频播放。
</video>
<!-- 音频播放 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持HTML5音频播放。
</audio></pre>
</div>
</div>
<div class="feature-section">
<h2>3. Canvas 绘图</h2>
<p>HTML5 Canvas 提供了通过JavaScript在网页上绘制图形的能力。</p>
<div class="demo-container">
<button onclick="drawOnCanvas()">绘制图形</button>
<button onclick="clearCanvas()">清除画布</button>
<!--
canvas 标签：创建一个可以通过JavaScript绘制的画布
width 和 height 属性：设置画布尺寸
id 属性：用于在JavaScript中引用
-->
<canvas id="canvas-demo" width="600" height="300"></canvas>
</div>
<div class="code-example">
<pre><!-- Canvas元素 -->
<canvas id="canvas-demo" width="600" height="300"></canvas>
<script>
// 获取canvas元素和绘图上下文
const canvas = document.getElementById('canvas-demo');
const ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 150, 100);
// 绘制圆形
ctx.beginPath();
ctx.arc(300, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();
// 绘制文本
ctx.font = '24px Arial';
ctx.fillStyle = '#2c3e50';
ctx.fillText('Hello Canvas!', 400, 120);
</script></pre>
</div>
</div>
<div class="feature-section">
<h2>4. 本地存储 (LocalStorage)</h2>
<p>HTML5 提供了在客户端存储数据的能力，localStorage 可以长期存储数据。</p>
<div class="demo-container">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" placeholder="请输入您的用户名">
</div>
<div class="form-group">
<label for="message">保存信息：</label>
<textarea id="message" rows="3" placeholder="请输入要保存的信息"></textarea>
</div>
<button onclick="saveData()">保存数据</button>
<button onclick="loadData()">读取数据</button>
<button onclick="clearData()">清除数据</button>
<div class="output" id="storage-output"></div>
</div>
<div class="code-example">
<pre><script>
// 保存数据到localStorage
function saveData() {
const username = document.getElementById('username').value;
const message = document.getElementById('message').value;
// localStorage使用键值对存储数据
localStorage.setItem('username', username);
localStorage.setItem('message', message);
localStorage.setItem('saveTime', new Date().toLocaleString());
document.getElementById('storage-output').textContent = '数据已保存！';
}
// 从localStorage读取数据
function loadData() {
const username = localStorage.getItem('username') || '未保存';
const message = localStorage.getItem('message') || '未保存';
const saveTime = localStorage.getItem('saveTime') || '未知';
const output = `
用户名：${username}<br>
信息：${message}<br>
保存时间：${saveTime}
`;
document.getElementById('storage-output').innerHTML = output;
}
// 清除localStorage中的数据
function clearData() {
localStorage.removeItem('username');
localStorage.removeItem('message');
localStorage.removeItem('saveTime');
// 或者使用 localStorage.clear() 清除所有数据
document.getElementById('storage-output').textContent = '数据已清除！';
document.getElementById('username').value = '';
document.getElementById('message').value = '';
}
</script></pre>
</div>
</div>
<script>
// 表单相关脚本
const rangeInput = document.getElementById('range');
const rangeValue = document.getElementById('range-value');
// 显示滑块当前值
rangeInput.addEventListener('input', function() {
rangeValue.textContent = this.value;
});
// 表单提交处理
const html5Form = document.getElementById('html5-form');
const formOutput = document.getElementById('form-output');
html5Form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 获取表单数据
const formData = new FormData(this);
let output = '<strong>表单数据：</strong><br>';
formData.forEach((value, key) => {
output += `${key}: ${value}<br>`;
});
formOutput.innerHTML = output;
});
// Canvas相关脚本
const canvas = document.getElementById('canvas-demo');
const ctx = canvas.getContext('2d'); // 获取2D绘图上下文
// 在Canvas上绘制图形
function drawOnCanvas() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制矩形
ctx.fillStyle = '#3498db'; // 设置填充颜色
ctx.fillRect(50, 50, 150, 100); // 绘制填充矩形
// 绘制边框矩形
ctx.strokeStyle = '#2980b9'; // 设置边框颜色
ctx.lineWidth = 3; // 设置线宽
ctx.strokeRect(250, 50, 150, 100); // 绘制边框矩形
// 绘制圆形
ctx.beginPath(); // 开始新路径
ctx.arc(480, 100, 50, 0, Math.PI * 2); // 定义圆形
ctx.fillStyle = '#e74c3c'; // 设置填充颜色
ctx.fill(); // 填充圆形
// 绘制文本
ctx.font = '24px Arial'; // 设置字体
ctx.fillStyle = '#2c3e50'; // 设置文本颜色
ctx.fillText('Hello Canvas!', 50, 220); // 绘制文本
// 绘制线条
ctx.beginPath();
ctx.moveTo(250, 220); // 起点
ctx.lineTo(550, 220); // 终点
ctx.strokeStyle = '#f39c12';
ctx.lineWidth = 2;
ctx.stroke(); // 绘制线条
}
// 清除Canvas
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// 本地存储相关脚本（在HTML中定义）
</script>
</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>张三的个人网站</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome图标库 -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 自定义Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6', // 主色调：蓝色
secondary: '#64748b', // 次要色调：灰色
accent: '#f97316', // 强调色：橙色
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.hover-lift:hover {
transform: translateY(-5px);
}
}
</style>
</head>
<body class="font-sans text-gray-800 bg-gray-50">
<!-- 导航栏 -->
<header id="navbar" class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<!-- 网站Logo -->
<a href="#" class="text-2xl font-bold text-primary flex items-center gap-2">
<i class="fa fa-code" aria-hidden="true"></i>
<span>张三</span>
</a>
<!-- 桌面导航菜单 -->
<nav class="hidden md:flex items-center gap-8">
<a href="#home" class="font-medium hover:text-primary transition-colors">首页</a>
<a href="#about" class="font-medium hover:text-primary transition-colors">关于我</a>
<a href="#skills" class="font-medium hover:text-primary transition-colors">技能</a>
<a href="#projects" class="font-medium hover:text-primary transition-colors">项目</a>
<a href="#contact" class="font-medium hover:text-primary transition-colors">联系我</a>
<a href="#" class="bg-primary text-white px-5 py-2 rounded-full hover:bg-primary/90 transition-colors">
下载简历
</a>
</nav>
<!-- 移动端菜单按钮 -->
<button id="menu-toggle" class="md:hidden text-gray-700 focus:outline-none">
<i class="fa fa-bars text-xl" aria-hidden="true"></i>
</button>
</div>
<!-- 移动端导航菜单 -->
<div id="mobile-menu" class="md:hidden hidden bg-white border-t">
<div class="container mx-auto px-4 py-3 flex flex-col gap-4">
<a href="#home" class="py-2 font-medium hover:text-primary transition-colors">首页</a>
<a href="#about" class="py-2 font-medium hover:text-primary transition-colors">关于我</a>
<a href="#skills" class="py-2 font-medium hover:text-primary transition-colors">技能</a>
<a href="#projects" class="py-2 font-medium hover:text-primary transition-colors">项目</a>
<a href="#contact" class="py-2 font-medium hover:text-primary transition-colors">联系我</a>
<a href="#" class="bg-primary text-white px-5 py-2 rounded-full text-center hover:bg-primary/90 transition-colors">
下载简历
</a>
</div>
</div>
</header>
<main>
<!-- 英雄区域 -->
<section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-blue-50 to-indigo-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center gap-12">
<!-- 个人介绍文本 -->
<div class="md:w-1/2 space-y-6">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-gray-900">
你好，我是<span class="text-primary">张三</span>
</h1>
<h2 class="text-[clamp(1.2rem,2vw,1.8rem)] text-secondary font-medium">
前端开发工程师 & UI/UX 设计师
</h2>
<p class="text-lg text-gray-600 max-w-lg">
专注于创建美观、易用且功能强大的网站和应用程序，热衷于用户体验和交互设计。
</p>
<div class="flex flex-wrap gap-4 pt-4">
<a href="#contact" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full font-medium transition-all shadow-lg hover:shadow-primary/30">
联系我
</a>
<a href="#projects" class="bg-white hover:bg-gray-50 text-gray-800 px-8 py-3 rounded-full font-medium transition-all shadow-md border border-gray-200">
查看我的项目
</a>
</div>
<!-- 社交媒体链接 -->
<div class="pt-6 flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-dribbble" aria-hidden="true"></i>
</a>
</div>
</div>
<!-- 个人头像 -->
<div class="md:w-1/2 flex justify-center">
<div class="relative">
<!-- 背景装饰 -->
<div class="absolute -inset-4 bg-gradient-to-tr from-primary to-indigo-400 rounded-full blur-xl opacity-20"></div>
<!-- 头像 -->
<div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl">
<img src="https://picsum.photos/id/1005/400/400" alt="张三的头像" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 关于我 -->
<section id="about" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">关于我</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div class="flex flex-col md:flex-row gap-12 items-center">
<!-- 关于我图片 -->
<div class="md:w-5/12 relative">
<div class="absolute -top-4 -left-4 w-64 h-64 border-4 border-primary/20 rounded-lg -z-10"></div>
<div class="absolute -bottom-4 -right-4 w-64 h-64 border-4 border-primary/20 rounded-lg -z-10"></div>
<img src="https://picsum.photos/id/1076/600/800" alt="工作中的张三" class="w-full h-auto rounded-lg shadow-xl">
</div>
<!-- 关于我内容 -->
<div class="md:w-7/12 space-y-6">
<h3 class="text-2xl font-bold text-gray-800">我是一名充满激情的前端开发者</h3>
<p class="text-gray-600 leading-relaxed">
我拥有5年前端开发经验，专注于构建用户友好、性能优异的Web应用。我热衷于学习新技术，并将其应用到实际项目中，创造出既美观又实用的数字产品。
</p>
<p class="text-gray-600 leading-relaxed">
我的开发理念是"用户至上"，始终将用户体验放在首位。我相信好的设计应该是无形的，能够让用户专注于内容而非界面本身。
</p>
<!-- 个人信息 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4">
<div class="flex items-center gap-3">
<i class="fa fa-user text-primary w-6"></i>
<span>张三</span>
</div>
<div class="flex items-center gap-3">
<i class="fa fa-envelope text-primary w-6"></i>
<span>zhangsan@example.com</span>
</div>
<div class="flex items-center gap-3">
<i class="fa fa-phone text-primary w-6"></i>
<span>+86 123 4567 8910</span>
</div>
<div class="flex items-center gap-3">
<i class="fa fa-map-marker text-primary w-6"></i>
<span>北京市朝阳区</span>
</div>
</div>
<a href="#contact" class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full font-medium transition-all shadow-md hover:shadow-primary/30">
联系我 <i class="fa fa-arrow-right ml-2" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 技能 -->
<section id="skills" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">我的技能</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">
我掌握了多种前端技术和设计工具，能够独立完成从设计到开发的全流程工作
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- 技术技能 -->
<div>
<h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fa fa-code text-primary mr-3"></i> 技术技能
</h3>
<!-- 技能条 -->
<div class="space-y-6">
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">HTML5 & CSS3</span>
<span>95%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-primary h-3 rounded-full" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">JavaScript (ES6+)</span>
<span>90%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-primary h-3 rounded-full" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">React & Vue</span>
<span>85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-primary h-3 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">Tailwind CSS & SCSS</span>
<span>88%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-primary h-3 rounded-full" style="width: 88%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">响应式设计</span>
<span>92%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-primary h-3 rounded-full" style="width: 92%"></div>
</div>
</div>
</div>
</div>
<!-- 设计技能 -->
<div>
<h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fa fa-paint-brush text-primary mr-3"></i> 设计技能
</h3>
<!-- 设计技能图标 -->
<div class="grid grid-cols-2 sm:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-xl shadow-sm text-center hover-lift transition-transform">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-desktop text-2xl text-primary"></i>
</div>
<h4 class="font-medium">UI设计</h4>
<p class="text-sm text-gray-500 mt-2">用户界面设计</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm text-center hover-lift transition-transform">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-users text-2xl text-primary"></i>
</div>
<h4 class="font-medium">UX设计</h4>
<p class="text-sm text-gray-500 mt-2">用户体验设计</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm text-center hover-lift transition-transform">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-pencil text-2xl text-primary"></i>
</div>
<h4 class="font-medium">原型设计</h4>
<p class="text-sm text-gray-500 mt-2">交互原型制作</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm text-center hover-lift transition-transform">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-picture-o text-2xl text-primary"></i>
</div>
<h4 class="font-medium">视觉设计</h4>
<p class="text-sm text-gray-500 mt-2">品牌与视觉系统</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm text-center hover-lift transition-transform">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-mobile text-2xl text-primary"></i>
</div>
<h4 class="font-medium">移动设计</h4>
<p class="text-sm text-gray-500 mt-2">移动端界面设计</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm text-center hover-lift transition-transform">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-camera text-2xl text-primary"></i>
</div>
<h4 class="font-medium">图像处理</h4>
<p class="text-sm text-gray-500 mt-2">图片编辑与优化</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 项目展示 -->
<section id="projects" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">我的项目</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">
以下是我参与或独立完成的一些项目，展示了我的技术能力和设计理念
</p>
</div>
<!-- 项目筛选 -->
<div class="flex flex-wrap justify-center gap-4 mb-12">
<button class="project-filter active px-6 py-2 rounded-full bg-primary text-white">全部</button>
<button class="project-filter px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">网站</button>
<button class="project-filter px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">应用</button>
<button class="project-filter px-6 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors">设计</button>
</div>
<!-- 项目网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 项目1 -->
<div class="project-card group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/id/180/600/400" alt="电子商务网站" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
<div class="p-6 w-full">
<div class="flex justify-between items-center">
<span class="bg-primary/90 text-white text-sm px-3 py-1 rounded-full">网站</span>
<div class="flex gap-3">
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-primary transition-colors">电子商务网站</h3>
<p class="text-gray-600 mb-4">一个完整的电子商务平台，包含产品展示、购物车、支付和订单管理功能。</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">React</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">Redux</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">Node.js</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">MongoDB</span>
</div>
</div>
</div>
<!-- 项目2 -->
<div class="project-card group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/id/0/600/400" alt="任务管理应用" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
<div class="p-6 w-full">
<div class="flex justify-between items-center">
<span class="bg-primary/90 text-white text-sm px-3 py-1 rounded-full">应用</span>
<div class="flex gap-3">
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-primary transition-colors">任务管理应用</h3>
<p class="text-gray-600 mb-4">一个现代化的任务管理工具，支持拖拽排序、标签分类和团队协作功能。</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">Vue</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">Firebase</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">Tailwind</span>
</div>
</div>
</div>
<!-- 项目3 -->
<div class="project-card group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/id/160/600/400" alt="旅行博客网站" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
<div class="p-6 w-full">
<div class="flex justify-between items-center">
<span class="bg-primary/90 text-white text-sm px-3 py-1 rounded-full">网站</span>
<div class="flex gap-3">
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-primary transition-colors">旅行博客网站</h3>
<p class="text-gray-600 mb-4">一个精美的旅行分享平台，支持文章发布、图片展示和地点标记功能。</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">Next.js</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">GraphQL</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">SCSS</span>
</div>
</div>
</div>
<!-- 项目4 -->
<div class="project-card group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/id/119/600/400" alt="金融数据分析仪表板" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
<div class="p-6 w-full">
<div class="flex justify-between items-center">
<span class="bg-primary/90 text-white text-sm px-3 py-1 rounded-full">应用</span>
<div class="flex gap-3">
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-primary transition-colors">金融数据分析仪表板</h3>
<p class="text-gray-600 mb-4">一个专业的金融数据可视化工具，提供实时市场分析和个性化报告。</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">React</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">D3.js</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">Express</span>
</div>
</div>
</div>
<!-- 项目5 -->
<div class="project-card group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/id/20/600/400" alt="移动应用UI设计" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
<div class="p-6 w-full">
<div class="flex justify-between items-center">
<span class="bg-primary/90 text-white text-sm px-3 py-1 rounded-full">设计</span>
<div class="flex gap-3">
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-dribbble" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-primary transition-colors">移动应用UI设计</h3>
<p class="text-gray-600 mb-4">一款健康追踪应用的用户界面设计，注重用户体验和数据可视化。</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">Figma</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">UI设计</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">原型</span>
</div>
</div>
</div>
<!-- 项目6 -->
<div class="project-card group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all">
<div class="relative overflow-hidden">
<img src="https://picsum.photos/id/48/600/400" alt="企业官网重设计" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
<div class="p-6 w-full">
<div class="flex justify-between items-center">
<span class="bg-primary/90 text-white text-sm px-3 py-1 rounded-full">网站</span>
<div class="flex gap-3">
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-primary transition-colors">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-primary transition-colors">企业官网重设计</h3>
<p class="text-gray-600 mb-4">为科技公司进行的官网重设计项目，提升品牌形象和用户转化率。</p>
<div class="flex flex-wrap gap-2">
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">HTML5</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">CSS3</span>
<span class="text-xs bg-blue-100 text-primary px-2 py-1 rounded">JavaScript</span>
</div>
</div>
</div>
</div>
<!-- 查看更多按钮 -->
<div class="text-center mt-12">
<a href="#" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white px-8 py-3 rounded-full font-medium transition-all">
查看更多项目 <i class="fa fa-arrow-right ml-2" aria-hidden="true"></i>
</a>
</div>
</div>
</section>
<!-- 联系我 -->
<section id="contact" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">联系我</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
<p class="text-gray-600 max-w-2xl mx-auto">
有任何问题或合作意向？请随时联系我，我会尽快回复您
</p>
</div>
<div class="flex flex-col lg:flex-row gap-12">
<!-- 联系信息 -->
<div class="lg:w-5/12">
<div class="bg-white p-8 rounded-xl shadow-md h-full">
<h3 class="text-2xl font-bold text-gray-800 mb-6">联系方式</h3>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary flex-shrink-0">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div>
<h4 class="font-medium text-gray-900">电子邮件</h4>
<p class="text-gray-600 mt-1">zhangsan@example.com</p>
<a href="mailto:zhangsan@example.com" class="text-primary hover:underline mt-1 inline-block">发送邮件</a>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary flex-shrink-0">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div>
<h4 class="font-medium text-gray-900">电话</h4>
<p class="text-gray-600 mt-1">+86 123 4567 8910</p>
<a href="tel:+8612345678910" class="text-primary hover:underline mt-1 inline-block">拨打电话</a>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary flex-shrink-0">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div>
<h4 class="font-medium text-gray-900">地址</h4>
<p class="text-gray-600 mt-1">北京市朝阳区建国路88号</p>
</div>
</div>
</div>
<div class="mt-10">
<h4 class="font-medium text-gray-900 mb-4">关注我</h4>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-dribbble" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<!-- 联系表单 -->
<div class="lg:w-7/12">
<div class="bg-white p-8 rounded-xl shadow-md">
<h3 class="text-2xl font-bold text-gray-800 mb-6">发送消息</h3>
<form id="contact-form" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="contact-name" class="block text-gray-700 font-medium mb-2">姓名</label>
<input type="text" id="contact-name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="您的姓名" required>
</div>
<div>
<label for="contact-email" class="block text-gray-700 font-medium mb-2">电子邮件</label>
<input type="email" id="contact-email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="您的邮箱地址" required>
</div>
</div>
<div>
<label for="contact-subject" class="block text-gray-700 font-medium mb-2">主题</label>
<input type="text" id="contact-subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="消息主题" required>
</div>
<div>
<label for="contact-message" class="block text-gray-700 font-medium mb-2">消息</label>
<textarea id="contact-message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors resize-none" placeholder="请输入您的消息内容..." required></textarea>
</div>
<button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-md hover:shadow-primary/30">
发送消息 <i class="fa fa-paper-plane ml-2" aria-hidden="true"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
<i class="fa fa-code" aria-hidden="true"></i>
<span>张三</span>
</h3>
<p class="text-gray-400 mb-4">
前端开发工程师 & UI/UX 设计师，热衷于创建优秀的数字产品。
</p>
<div class="flex gap-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-dribbble" aria-hidden="true"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-medium mb-4">快速链接</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我</a></li>
<li><a href="#skills" class="text-gray-400 hover:text-white transition-colors">技能</a></li>
<li><a href="#projects" class="text-gray-400 hover:text-white transition-colors">项目</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-medium mb-4">服务</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">网站开发</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">应用开发</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">UI/UX设计</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">响应式设计</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">网站维护</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-medium mb-4">联系信息</h4>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-gray-400">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>zhangsan@example.com</span>
</li>
<li class="flex items-center gap-2 text-gray-400">
<i class="fa fa-phone" aria-hidden="true"></i>
<span>+86 123 4567 8910</span>
</li>
<li class="flex items-center gap-2 text-gray-400">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>北京市朝阳区</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 text-center text-gray-500">
<p>© 2023 张三的个人网站. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>
<!-- JavaScript -->
<script>
// 移动端菜单切换
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
// 切换图标
const icon = menuToggle.querySelector('i');
if (icon.classList.contains('fa-bars')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
} else {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('py-2', 'shadow');
navbar.classList.remove('py-3');
} else {
navbar.classList.add('py-3');
navbar.classList.remove('py-2', 'shadow');
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// 关闭移动菜单（如果打开）
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
const icon = menuToggle.querySelector('i');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80, // 考虑导航栏高度
behavior: 'smooth'
});
}
});
});
// 返回顶部按钮
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100', 'visible');
} else {
backToTopButton.classList.add('opacity-0', 'invisible');
backToTopButton.classList.remove('opacity-100', 'visible');
}
});
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 项目筛选功能
const filterButtons = document.querySelectorAll('.project-filter');
const projectCards = document.querySelectorAll('.project-card');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
// 更新按钮状态
filterButtons.forEach(btn => {
btn.classList.remove('active', 'bg-primary', 'text-white');
btn.classList.add('bg-gray-200');
});
button.classList.add('active', 'bg-primary', 'text-white');
button.classList.remove('bg-gray-200');
const filter = button.textContent.trim().toLowerCase();
// 筛选项目
projectCards.forEach(card => {
if (filter === '全部' || card.textContent.toLowerCase().includes(filter)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
});
// 联系表单处理
const contactForm = document.getElementById('contact-form');
if (contactForm) {
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// 在实际应用中，这里会有表单提交到服务器的逻辑
// 这里仅做演示
const formData = new FormData(contactForm);
const formValues = Object.fromEntries(formData.entries());
console.log('表单数据:', formValues);
// 显示提交成功消息
alert('消息发送成功！我会尽快回复您。');
contactForm.reset();
});
}
</script>
</body>
</html>
第十章：HTML 最佳实践与性能优化
示例 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>HTML 语义化与可访问性最佳实践</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* 自定义样式 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* 焦点样式，提高键盘导航可访问性 */
*:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
</style>
</head>
<body class="font-sans bg-gray-50 text-gray-800">
<!-- 跳过导航链接 - 帮助键盘用户快速访问主要内容 -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary text-white px-4 py-2 rounded-md z-50">
跳过导航，直接到主要内容
</a>
<!-- 页面头部 -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<!-- Logo 使用 h1 并包含适当的 alt 文本 -->
<a href="/" class="flex items-center gap-2">
<img src="https://picsum.photos/id/237/50/50" alt="公司Logo" class="w-10 h-10 rounded">
<h1 class="text-xl font-bold">无障碍网站</h1>
</a>
<!-- 主导航 -->
<nav aria-label="主导航">
<ul class="flex gap-6">
<li><a href="#" class="hover:text-primary transition-colors">首页</a></li>
<li><a href="#" class="hover:text-primary transition-colors">产品</a></li>
<li><a href="#" class="hover:text-primary transition-colors">服务</a></li>
<li><a href="#" class="hover:text-primary transition-colors">关于我们</a></li>
<li><a href="#" class="hover:text-primary transition-colors">联系我们</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- 主要内容区域 -->
<main id="main-content" class="container mx-auto px-4 py-8">
<!-- 页面标题 -->
<div class="mb-10 text-center">
<h2 class="text-3xl font-bold mb-2">HTML 语义化与可访问性最佳实践</h2>
<p class="text-gray-600 max-w-2xl mx-auto">创建对所有用户都友好的网站，包括使用辅助技术的用户</p>
</div>
<!-- 文章部分 -->
<article class="max-w-3xl mx-auto bg-white p-8 rounded-xl shadow-sm mb-10">
<header class="mb-6">
<h3 class="text-2xl font-bold mb-2">语义化HTML的重要性</h3>
<div class="flex items-center text-gray-600 text-sm">
<span>作者：张三</span>
<span class="mx-2">•</span>
<time datetime="2023-09-15">2023年9月15日</time>
</div>
</header>
<section class="mb-6">
<p class="mb-4">语义化HTML不仅仅是为了让代码更易读，更重要的是它能帮助辅助技术（如屏幕阅读器）正确解析和传达网页内容给用户。</p>
<h4 class="text-xl font-semibold mb-3">正确使用标题层级</h4>
<p class="mb-4">标题应该按照层级顺序使用（h1到h6），不应该跳过层级，这有助于建立清晰的内容结构：</p>
<div class="bg-gray-50 p-4 rounded-md mb-4 font-mono text-sm">
<h1>页面主标题</h1><br>
<h2>主要章节</h2><br>
<h3>章节小节</h3><br>
<h4>更细的分类</h4>
</div>
</section>
<section class="mb-6">
<h4 class="text-xl font-semibold mb-3">使用适当的语义化标签</h4>
<p class="mb-4">HTML5提供了许多语义化标签，应该根据内容的含义选择合适的标签：</p>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><header> - 页面或区域的头部</li>
<li><nav> - 导航链接区域</li>
<li><main> - 页面的主要内容</li>
<li><article> - 独立的自包含内容</li>
<li><section> - 文档中的章节</li>
<li><aside> - 侧边栏内容</li>
<li><footer> - 页面或区域的底部</li>
</ul>
</section>
<section>
<h4 class="text-xl font-semibold mb-3">增强表单可访问性</h4>
<p class="mb-4">表单是网站交互的重要部分，确保表单可访问性至关重要：</p>
<form class="space-y-4 max-w-md mx-auto bg-gray-50 p-6 rounded-md">
<div>
<!-- 使用label关联表单控件 -->
<label for="name" class="block mb-1 font-medium">姓名</label>
<input type="text" id="name" name="name" required
class="w-full px-3 py-2 border border-gray-300 rounded">
</div>
<div>
<label for="email" class="block mb-1 font-medium">电子邮件</label>
<input type="email" id="email" name="email" required
class="w-full px-3 py-2 border border-gray-300 rounded">
</div>
<!-- 使用fieldset和legend组织相关表单控件 -->
<fieldset class="border border-gray-300 p-4 rounded">
<legend class="font-medium">通知偏好</legend>
<div class="flex items-center mt-2">
<input type="checkbox" id="email-notify" name="notifications" value="email">
<label for="email-notify" class="ml-2">电子邮件通知</label>
</div>
<div class="flex items-center mt-2">
<input type="checkbox" id="sms-notify" name="notifications" value="sms">
<label for="sms-notify" class="ml-2">短信通知</label>
</div>
</fieldset>
<button type="submit" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary/90 transition-colors">
提交
</button>
</form>
</section>
</article>
<!-- 多媒体可访问性 -->
<article class="max-w-3xl mx-auto bg-white p-8 rounded-xl shadow-sm">
<h3 class="text-2xl font-bold mb-4">多媒体内容的可访问性</h3>
<section class="mb-6">
<h4 class="text-xl font-semibold mb-3">图像的替代文本</h4>
<p class="mb-4">所有图像都应该有适当的alt属性，为无法看到图像的用户提供描述：</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<h5 class="font-medium mb-2">良好的实践：</h5>
<img src="https://picsum.photos/id/1025/300/200" alt="一只棕色的熊在森林中站立，背景是树木和蓝天" class="w-full h-auto rounded">
<div class="mt-1 text-sm font-mono bg-gray-50 p-2 rounded">
<img src="bear.jpg" alt="一只棕色的熊在森林中站立，背景是树木和蓝天">
</div>
</div>
<div>
<h5 class="font-medium mb-2">装饰性图像：</h5>
<img src="https://picsum.photos/id/106/300/200" alt="" class="w-full h-auto rounded">
<div class="mt-1 text-sm font-mono bg-gray-50 p-2 rounded">
<img src="decorative.jpg" alt="">
</div>
<p class="text-sm text-gray-600 mt-2">装饰性图像使用空的alt属性</p>
</div>
</div>
</section>
<section>
<h4 class="text-xl font-semibold mb-3">视频和音频的字幕</h4>
<p class="mb-4">视频和音频内容应该提供字幕或文字记录，以便听障用户能够获取信息：</p>
<div class="bg-gray-50 p-4 rounded-md">
<video controls width="100%" poster="https://picsum.photos/id/1039/800/450" aria-describedby="video-desc">
<source src="example.mp4" type="video/mp4">
<!-- 提供视频的文字替代内容 -->
<p>您的浏览器不支持视频播放。视频内容：一段关于HTML可访问性最佳实践的讲解。</p>
</video>
<div id="video-desc" class="mt-2 text-sm text-gray-600">
视频标题：HTML可访问性最佳实践，时长：5分30秒，内容包括语义化标签和表单可访问性。
</div>
<!-- 字幕轨道 -->
<track kind="subtitles" src="subtitles_zh.vtt" srclang="zh" label="中文">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="英文">
</div>
</section>
</article>
</main>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white mt-12 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-bold mb-4">关于我们</h3>
<p class="text-gray-400">我们致力于创建对所有人都友好的Web体验，无论其能力如何。</p>
</div>
<div>
<h3 class="text-lg font-bold mb-4">快速链接</h3>
<nav aria-label="页脚导航">
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition-colors">首页</a></li>
<li><a href="#" class="hover:text-white transition-colors">服务</a></li>
<li><a href="#" class="hover:text-white transition-colors">博客</a></li>
<li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
</ul>
</nav>
</div>
<div>
<h3 class="text-lg font-bold mb-4">联系我们</h3>
<address class="not-italic text-gray-400">
<p>北京市朝阳区某某大厦</p>
<p class="mt-2">
<a href="mailto:contact@example.com" class="hover:text-white transition-colors">contact@example.com</a>
</p>
<p class="mt-2">
<a href="tel:+8612345678901" class="hover:text-white transition-colors">+86 123 4567 8901</a>
</p>
</address>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
<p>© 2023 无障碍网站. 保留所有权利.</p>
</div>
</div>
</footer>
</body>
</html>
示例 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>HTML 性能优化实践</title>
<!-- 1. 关键CSS内联 -->
<style>
/* 只包含首屏渲染必需的CSS */
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background-color: #f8f9fa;
color: #333;
}
.header {
background-color: #2c3e50;
color: white;
padding: 1rem 0;
}
.hero {
padding: 4rem 0;
text-align: center;
}
.btn-primary {
display: inline-block;
background-color: #3498db;
color: white;
padding: 0.75rem 1.5rem;
text-decoration: none;
border-radius: 4px;
}
/* 加载状态指示器 */
.img-loading {
background: #f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath fill='%233498db' d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center no-repeat;
}
</style>
<!-- 2. 非关键CSS异步加载 -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
<!-- 3. 预连接到必要的第三方域名 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 4. 预加载关键字体 -->
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"></noscript>
<!-- 5. 元数据和SEO优化 -->
<meta name="description" content="HTML性能优化最佳实践示例，展示如何提高网页加载速度和性能">
<meta name="keywords" content="HTML性能优化, 网页加载速度, 前端性能">
<meta property="og:title" content="HTML性能优化实践">
<meta property="og:description" content="学习如何优化HTML以提高网页性能和用户体验">
<meta property="og:type" content="article">
</head>
<body>
<!-- 6. 减少DOM深度和复杂度 -->
<header class="header">
<div class="container">
<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>
</div>
</header>
<main>
<section class="hero">
<h1>HTML 性能优化实践</h1>
<p>学习如何优化您的HTML代码以提高网页加载速度和性能</p>
<a href="#tips" class="btn-primary">查看优化技巧</a>
</section>
<section id="tips" class="container">
<h2>关键性能优化技巧</h2>
<div class="tips-grid">
<article class="tip-card">
<h3>图像优化</h3>
<!-- 7. 使用适当的图像格式和尺寸，添加宽度和高度属性减少布局偏移 -->
<div class="img-container">
<img
src="https://picsum.photos/id/1025/600/400"
alt="优化的图像示例"
width="600"
height="400"
class="img-loading"
loading="lazy" <!-- 8. 延迟加载非首屏图像 -->
>
</div>
<ul>
<li>使用现代图像格式（WebP, AVIF）</li>
<li>提供响应式图像（srcset和sizes）</li>
<li>延迟加载非首屏图像</li>
<li>指定图像尺寸以减少布局偏移</li>
</ul>
</article>
<article class="tip-card">
<h3>资源加载优化</h3>
<img
src="https://picsum.photos/id/180/600/400"
alt="资源加载优化"
width="600"
height="400"
class="img-loading"
loading="lazy"
>
<ul>
<li>内联关键CSS，异步加载非关键CSS</li>
<li>使用preload、prefetch优化资源加载</li>
<li>JavaScript延迟加载（defer/async）</li>
<li>预连接到第三方域名</li>
</ul>
</article>
<article class="tip-card">
<h3>HTML结构优化</h3>
<img
src="https://picsum.photos/id/48/600/400"
alt="HTML结构优化"
width="600"
height="400"
class="img-loading"
loading="lazy"
>
<ul>
<li>减少DOM深度和节点数量</li>
<li>避免空标签和冗余嵌套</li>
<li>使用语义化标签减少额外的class和id</li>
<li>压缩HTML代码（移除空格、注释）</li>
</ul>
</article>
</div>
</section>
<section class="features">
<div class="container">
<h2>性能优化带来的好处</h2>
<div class="features-list">
<div class="feature-item">
<h3>更快的加载速度</h3>
<p>优化的HTML减少了下载大小和渲染时间，使用户能够更快地访问内容。</p>
</div>
<div class="feature-item">
<h3>更好的用户体验</h3>
<p>减少布局偏移和加载延迟，提供更流畅的浏览体验。</p>
</div>
<div class="feature-item">
<h3>更高的转化率</h3>
<p>研究表明，页面加载速度每提高1秒，转化率可提高7%。</p>
</div>
<div class="feature-item">
<h3>更好的SEO排名</h3>
<p>Google将页面速度作为排名因素，优化性能有助于提高搜索排名。</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2023 HTML性能优化指南. 保留所有权利.</p>
</div>
</footer>
<!-- 9. 异步加载非关键JavaScript -->
<script src="analytics.js" async></script>
<!-- 10. 延迟加载非首屏JavaScript -->
<script defer>
// 仅在DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 这里放置交互逻辑
console.log('页面加载完成，准备好处理交互');
// 动态加载额外的非关键脚本
const loadScript = (src) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
document.body.appendChild(script);
};
// 当用户滚动时加载更多脚本
let scriptsLoaded = false;
window.addEventListener('scroll', () => {
if (!scriptsLoaded && window.scrollY > 300) {
loadScript('interactive.js');
scriptsLoaded = true;
}
}, { once: true });
});
</script>
</body>
</html>
总结与展望
HTML作为Web的基础技术，从最初的简单文本标记发展到如今功能丰富的HTML5标准，经历了巨大的变革。通过本教程，我们学习了HTML的基础知识、各种元素和标签的使用方法，以及如何创建语义化、可访问性高且性能优良的网页。
随着Web技术的不断发展，HTML也在持续演进。未来的HTML标准可能会引入更多语义化标签、增强的表单控件和更好的多媒体支持，使开发者能够更轻松地创建丰富、交互性强且对所有用户友好的Web体验。
学习HTML只是Web开发旅程的开始。结合CSS和JavaScript，你可以创建出令人惊叹的网站和应用程序。持续学习和实践，关注Web标准的最新发展，将帮助你成为一名优秀的前端开发者。
祝你在Web开发的道路上取得成功！