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

原创 已于 2026-01-10 12:24:03 修改 · 422 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #html5 #json #css #javascript #人工智能

于 2026-01-10 11:52:11 首次发布

王者杯·14天创作挑战营·第9期 10w+人浏览 254人参与

在这里插入图片描述

  【个人主页：】

大语言模型（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）并按下回车键时，浏览器会执行以下几个步骤：

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

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

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

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

1.4 HTML 的基本结构

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

  1. 文档类型声明：，用于告诉浏览器这是一个 HTML5 文档。
  2. HTML 标签：<html>...</html>，是整个 HTML 文档的根标签，所有其他标签都必须嵌套在它里面。
  3. 头部标签：<head>...</head>，用于定义文档的头部信息，如标题、元数据、样式表链接、脚本链接等。头部信息通常不会直接显示在网页上。
  4. 主体标签：<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 编辑工具：

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

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

2.1 HTML 标签

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

  1. 单标签：不需要闭合的标签，如、<img>、<input>等。
  2. 双标签：需要闭合的标签，如<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>
srcimg、script、link、video、audio 等指定资源文件的路径（如图片、脚本、样式表、视频、音频等）<img src="images/1.jpg" alt="风景图">
hrefa、link 等指定链接地址（如网页、邮箱、电话等）<a href="https://www.baidu.com">百度</a>
altimg、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>
widthimg、table、td、th 等指定元素的宽度（单位可以是像素、百分比等）<img src="images/1.jpg" alt="风景图" width="300">
heightimg、table、td、th 等指定元素的高度（单位可以是像素、百分比等）<img src="images/1.jpg" alt="风景图" height="200">
typeinput、button、script 等指定元素的类型（如文本输入框、按钮、脚本类型等）<input type="text" placeholder="请输入用户名">
valueinput、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 锚点链接用于在同一个页面内跳转。创建锚点链接需要以下两个步骤：

  1. 创建锚点：使用 id 属性为目标元素添加唯一标识符。
  2. 创建链接：使用 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 图片的路径分为以下几种：

  1. 绝对路径：完整的 URL 地址，如https://www.example.com/images/1.jpg。
  2. 相对路径：相对于当前 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 图片地图用于将一张图片分成多个可点击的区域，每个区域链接到不同的网页。创建图片地图需要以下三个步骤：

  1. 创建图片：使用<img>标签创建图片，并添加 usemap 属性，属性值为 #地图名称。
  2. 创建地图：使用<map>标签创建地图，并添加 name 属性，属性值与图片的 usemap 属性值一致。
  3. 创建区域：使用<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 中的基本表格结构由以下几个标签组成：

  1. <table>...</table>：整个表格的根标签。
  2. <tr>...</tr>：定义表格的一行。
  3. <th>...</th>：定义表格的表头单元格，默认加粗居中对齐。
  4. <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 表格的合并单元格分为以下两种：

  1. 合并行单元格：使用 rowspan 属性，属性值为合并的行数。
  2. 合并列单元格：使用 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 中的基本表单结构由以下几个标签组成：

  1. <form>...</form>：整个表单的根标签。
  2. <input>：用于创建各种输入字段，如文本输入框、密码输入框、单选按钮、复选框、提交按钮等。
  3. <select>...</select>：用于创建下拉菜单。
  4. <textarea>...</textarea>：用于创建多行文本输入框。
  5. <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 表单的常用属性有以下几个：

  1. action：指定表单提交的目标地址（如服务器端脚本的路径）。
  2. method：指定表单提交的方式，常用的有 GET 和 POST 两种。
    • GET：将表单数据附加在 URL 地址后面，传输数据量小，安全性低，适合查询类操作。
    • POST：将表单数据放在 HTTP 请求的请求体中，传输数据量大，安全性高，适合提交类操作。
  3. target：指定表单提交后响应内容的打开方式，常用的有_self 和_blank 两种。
  4. 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 过渡需要以下两个步骤：

  1. 定义元素的初始样式。
  2. 定义元素的目标样式，并添加 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 动画需要以下两个步骤：

  1. 定义动画的关键帧：使用 @keyframes 关键字定义动画的关键帧，每个关键帧包含元素在该时刻的样式。
  2. 应用动画：在需要应用动画的元素上添加 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 布局方式，它可以让容器内的元素在不同的屏幕尺寸和分辨率下自动调整大小和位置。使用弹性布局需要以下两个步骤：

  1. 为容器添加 display: flex 属性。
  2. 为容器内的元素添加 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 布局方式，它可以让容器内的元素按照网格的方式排列。使用网格布局需要以下两个步骤：

  1. 为容器添加 display: grid 属性。
  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>
        /* 为了让网页更美观，添加以下样式 */
        * {
            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 本地存储主要分为两种：

  1. localStorage：永久存储，数据不会过期，除非用户手动删除。
  2. 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 的基础知识和应用技巧，成为一名优秀的前端工程师。

Python从0到100（九十七）：VisionTransformer（ViT）在时间序列行为识别中的应用
全网粉丝10w+，优快云、稀土掘金人工智能签约作者、专家博主，华为云十佳博主，985人工智能硕士。人工智能、大模型、计算机视觉、Python 爬虫— —商务合作：https://bbs.youkuaiyun.com/topics/614347534
05-07 3万+
VisionTransformer（ViT）通过其多头自注意力机制，在WISDM数据集的行为识别任务中展现了卓越的性能。相比传统卷积架构，ViT在全局特征提取和长距离依赖建模方面具有显著优势，尤其在处理动态活动的时间序列数据时表现出色。未来可通过优化注意力机制、增加数据增强或调整模型结构，进一步提升对静态活动的区分能力，推动其在更广泛场景中的应用。
【2025跑通的AI变现玩法之九】【AI+宝宝起名副业实战：从0到1搭建高变现直播体系】
商务合作|问题讨论|交流学习 请联系作者微信，加微信请务必注明来意，博客主页有联系方式
04-18 1万+
在Z世代父母成为生育主力的当下，宝宝起名早已超越传统范畴，成为融合文化寓意、时代审美与个性化需求的高频刚需。某音、某红薯等内容平台的数据显示，"宝宝起名"相关话题月播放量突破50亿次，用户日均搜索量超30万次，且付费转化率稳定在8%-12%。这种市场热度背后，是三大核心驱动因素：现代父母对名字的要求从"吉祥顺口"升级为"独特有内涵"，愿意为兼具音形义美感与文化底蕴的名字支付溢价。某母婴平台调研显示，65%的准父母会通过专业起名服务获取方案，其中32%愿意为定制化服务支付200-500元。直播场景天然适合起名
MCP 万字全解：从原理到实战，这篇最全，建议收藏
2401_85375151的博客
05-22 2589
还记得 GPT-4 一出手，横扫千军的场景吗？模型越来越强，参数越来越大，大家也越来越疑惑： 大模型到底怎么记住用户上下文的？ 为什么有的 AI 聊天机器人“越聊越聪明”？ 多轮对话时，它怎么知道你说的是哪个“它”？ 企业级 RAG、Agent 又是怎么协同多个模型、多个模块一起工作的？ 这一切的答案，都绕不开一个新词：MCP 协议（Model Communication Protocol）。
牛逼！Java 从入门到精通，超全汇总版
程序员cxuan的个人主页
05-06 11万+
文章目录Java 基础Head First JavaJava 核心技术卷一Java 编程思想设计模式Head First 设计模式图解设计模式设计模式重学 Java 设计模式Java 进阶Java 并发编程实战Java 并发编程艺术Java 并发编程之美图解Java多线程设计模式JVM深入理解 Java 虚拟机Java 虚拟机规范HotSpot 实战自己动手写 Java 虚拟机MySQLMySQL 基础教程SQL 基础教程深入浅出 MySQLMySQL 必知必会SQL 必知必会高性能 MySQLMySQL
Hive SQL报错终极指南：ParseException字符错误解析与7种根治方案
优快云博客专家，领域包括但不限于：AI、大数据、Python、架构师，有合作、课程、问题、疑惑请私信博主
05-06 2万+
FAILED: ParseException line 2:0 character ' ' not supported here line 2:1 character ' ' not supported 这种错误通常由‌SQL语法中的隐藏字符、非法符号或格式问题‌引发，尤其在多行SQL或复杂嵌套查询中频繁出现。本文基于Hive 3.x版本内核解析机制，深度剖析7类高频诱因，并提供可直接复用的解决方案。
架构学习资料精选
feiying
08-16 3255
架构师技术图谱，助你早日成为架构师 本项目是《码农周刊》架构学习资料精选，码农周刊团队官方出品。架构师必读，助你早日成为架构师！ 架构师技术图谱包括：分布式、前端、大数据、存储、微服务、推荐系统、框架、消息队列、编程语言、设计模式、重构、集群等内容。 体验小程序版「架构师技术图谱」，扫描下方微信小程序码即可。 欢迎订阅《码农周刊》！订阅地址 如何加入读者群？ 关注下方微信公众号，回复 “入群...
13 万字 C 语言从入门到精通保姆级教程2021 年版
热门推荐
李南江
06-07 61万+
13 万字C语言保姆级教程，从入门到精通。
计算机视觉卷积神经网络（CNN）基础：从LeNet到ResNet
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
04-11 14万+
计算机视觉卷积神经网络（CNN）基础：从LeNet到ResNet，在计算机视觉领域，卷积神经网络（Convolutional Neural Network，CNN）已然成为推动众多任务发展的核心力量。从早期简单的图像识别，到如今复杂的目标检测、语义分割、图像生成等任务，CNN 都展现出了卓越的性能。CNN 的发展历程见证了一系列经典模型的诞生，其中 LeNet 作为开山之作，为 CNN 的发展奠定了基础，而 ResNet 则通过创新性的设计，突破了传统神经网络的限制，使得网络能够构建得更深、性能更优。
从需求到上线：如何打造一个完整的业务审核系统
曾经“等你生日那天”都遥远得像未来，如今却可欢愉的挥手说“下个十年见”
10-24 5万+
随着业务的不断演变，其实我们会生产出众多的业务系统，这些系统会为对应的业务形态进行赋能工作，赋能后相关系统会开放给运营人员根据业务需要进行线上的实际操作，但是往往会因为运营相关人员在配置上的误操作会给相关业务线或相关功能模块带来一定的线上事故和损失。为了避免类似这样事件的发生，个人认为是需要在内部搭建一套业务审核系统的，该系统主要针对业务实际上线生效前通知相关的业务同学协助进行复查和确认，对任意线上的操作都能有一层基本的保障处理。
XML与HTML：结构化数据的基石
csbysj2020的博客
01-06 430
XML是一种用于存储和传输数据的标记语言。它允许用户自定义标签，从而创建结构化的数据格式。HTML是一种用于创建网页的标准标记语言。它通过标记标签来描述网页的结构和内容。XML和HTML都是结构化数据的重要工具。XML为数据存储和交换提供了灵活性和可扩展性，而HTML则为网页开发提供了丰富的标记标签和易于理解的结构。在现代网络技术中，两者发挥着不可替代的作用。了解XML和HTML的特点和应用场景，有助于我们更好地应对各种数据存储和展示需求。
HTML+layui表单校验范围值，根据条件显示隐藏某输入框
weixin_58412143的博客
01-06 227
【代码】HTML+layui表单校验范围值，根据条件显示隐藏某输入框。
HTML 五子棋实现方法
back_room的博客
01-09 288
使用HTML创建棋盘网格，CSS美化样式，JavaScript处理游戏逻辑。
10.5 PyQuery：jQuery 风格的 Python HTML 解析库
最新发布
专注于ArcGIS实用技巧与二次开发的分享
01-10 155
PyQuery是一个jQuery风格的Python HTML解析库，提供与jQuery相似的API，适合熟悉jQuery语法的开发者使用。文章介绍了PyQuery的安装方法（pip install pyquery）和四种初始化方式（HTML字符串、本地文件、lxml对象、URL请求）。详细讲解了基础操作包括元素选择、遍历、获取属性/文本/HTML内容，以及伪类选择器使用（如:first-child、:contains()）。最后提供了常用选择器速查表，涵盖基础选择器、层级选择器和属性选择器等核心功能，帮助开
html转化为base64编码的pdf文件
qq_68883928的博客
01-09 187
本文介绍了在Windows11环境下使用wkhtmltopdf工具将HTML转换为PDF的方法。首先通过网盘获取安装包并配置环境变量，然后在Java项目中引入openhtmltopdf相关依赖。核心工具类HtmlToPdfUtils提供了两种转换方式：convertHtmlToPdfBase64方法将HTML转换为Base64编码的PDF文件，core方法直接返回PDF字节数组。工具类采用ProcessBuilder调用wkhtmltopdf命令行工具，通过异步处理错误流、设置超时机制等优化措施确保转换稳定
【前端Web开发HTML5+CSS3+移动web视频教程】01 html- 标签之文字排版、图片、链接、音视频
m0_72900498的博客
01-07 697
HTML超文本标记语言超文本是什么？链接标记是什么？标记也叫标签。带尖括号的文本。
HTML:SQLite本地网页查看
aimersong69的博客
01-06 321
本文介绍了一个基于Web的SQLite本地查看器工具，无需安装即可在浏览器中查看SQLite数据库。该工具采用HTML5技术实现，支持拖拽上传.db/.sqlite文件，提供表结构浏览、数据查询、自定义SQL执行和数据导出为CSV等功能。通过sql.js库实现前端SQL解析，保证数据在本地处理，避免云端传输的安全风险。界面采用现代化设计，包含响应式布局、表格展示和交互式操作，适合开发人员快速查看和分析SQLite数据库内容。
html中的标签与实体
ybb_ymm的专栏
01-09 531
alt：可以用来设置再图片不能显示的时候，对图片进行的描述，搜索引擎可以通过alt属性来进行识别不同的图片，我们百度引擎搜索图片，一般就是通过这个属性来完成的， 因为他是不会识别src引入的真正图片的。alt：可以用来设置再图片不能显示的时候，对图片进行的描述，搜索引擎可以通过alt属性来进行识别不同的图片，我们百度引擎搜索图片，一般就是通过这个属性来完成的， 因为他是不会识别src引入的真正图片的。– 支持的图片颜色比较多，图片可以压缩，但是不支持透明，一般使用他来进行保存照片等颜色比较丰富的图片。
前端 HTML/CSS 核心知识点总结（定位、层级、透明、交互、布局）
2301_80724696的博客
01-05 971
本文总结了前端开发中6个核心知识点：1.定位与层级（z-index仅对定位元素生效，子元素始终在父元素之上）；2.5种元素居中方法（绝对定位+margin、transform平移、flex等）；3.透明效果实现（opacity继承性、rgba局部透明）；4.label标签优化表单交互；5.Swiper插件实现轮播图；6.纯CSS实现Tab切换（利用:checked伪类）。这些实战技巧涵盖布局、交互等高频场景，能有效提升开发效率。
文档(如word、ppt、pdf等)在线预览解决方案：基于HTML转换的技术实践与对比
小for学习栏
01-08 1022
文档在线预览技术方案与实践 本文全面分析了实现Office文档在线预览的多种技术方案。传统下载查看方式存在跨平台差、移动端体验不佳等问题，在线预览技术应运而生。文章对比了三种主流方案：前端渲染（如Mammoth.js）、服务端转换（如LibreOffice）和云服务API，详细阐述了各自的优缺点。重点介绍了基于HTML转换的技术原理，包括格式解析、样式提取、内容映射等核心步骤，并针对Word、PPT、PDF等不同格式的转换特点进行说明。最后提供了一个完整的文档预览系统实现示例，包含前端界面设计和后端API集
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值