← 返回上一页

第1章: HTML 简介与基本结构

了解 HTML 是什么以及如何构建网页的基本框架

🔧 开发工具与环境

在开始编写 HTML 之前，你需要准备合适的开发工具：

推荐的代码编辑器

编辑器 特点 适用人群
VS Code 免费、插件丰富、智能提示 所有开发者
Sublime Text 轻量、启动快、多选编辑 前端开发者
WebStorm 功能强大、智能重构 专业开发者
Atom 开源、可定制性强 喜欢定制化的开发者

⭐ 强烈推荐：VS Code 下载安装

VS Code 是目前最流行的代码编辑器，免费、开源、跨平台，非常适合 HTML/CSS/JavaScript 开发。

📥 第一步：下载

  1. 访问官网：https://code.visualstudio.com/
  2. 点击页面中间的 "Download" 按钮
  3. 系统会自动识别你的操作系统（Windows / Mac / Linux）

⚙️ 第二步：安装

  1. 运行下载好的安装程序
  2. 同意许可协议，点击"下一步"
  3. 建议勾选："添加到 PATH" 和 "添加右键菜单"
  4. 点击"安装"，等待完成

🔌 第三步：安装推荐插件

打开 VS Code 后，按 Ctrl+Shift+X（Mac: Cmd+Shift+X）打开插件市场，搜索并安装以下插件：

  • Chinese (Simplified) Language Pack — 中文语言包
  • Live Server — 实时预览网页，修改代码后自动刷新浏览器
  • Auto Rename Tag — 自动重命名配对的 HTML 标签
  • Prettier — 代码格式化工具，一键美化代码
💡 安装验证： 打开 VS Code → 新建文件 → 保存为 test.html → 输入 ! 然后按 Tab 键，如果自动生成了 HTML 模板，说明安装成功！

🖥️ 第四步：认识 VS Code 界面

打开 VS Code 后，你会看到以下几个核心区域：

┌─────────────────────────────────────────────────┐
│  📂 菜单栏（文件、编辑、查看、终端...）          │
├──────┬──────────────────────────┬────────────────┤
│      │                          │                │
│  ①   │      ③ 编辑区域          │   ④ 小地图     │
│  侧  │   （写代码的主区域）      │  （代码缩略图）│
│  边  │                          │                │
│  栏  │  <!DOCTYPE html>         │   ┃            │
│      │  <html>                  │   ┃            │
│  📁  │    <head>...</head>      │   ┃            │
│  🔍  │    <body>...</body>      │                │
│  🔌  │  </html>                 │                │
│      │                          │                │
├──────┴──────────────────────────┴────────────────┤
│  ⑤ 终端/输出面板（可按 Ctrl+` 打开终端）         │
├─────────────────────────────────────────────────┤
│  ⑥ 状态栏（显示行号、编码、语言类型等信息）      │
└─────────────────────────────────────────────────┘
① 侧边栏

包含5个图标按钮：
📁 资源管理器 — 查看项目文件
🔍 搜索 — 全局搜索内容
🔌 扩展 — 安装管理插件
🐛 调试 — 调试代码
📦 源代码管理 — Git操作

③ 编辑区域

写代码的主要区域：
📑 多标签页 — 同时打开多个文件
📐 分屏 — 右键标签页可拆分编辑器
🔢 行号 — 左侧显示行号，点击可选中整行
🎨 语法高亮 — 自动为不同代码着色

⌨️ 第五步：必备快捷键

掌握这些快捷键，编码效率翻倍！（Mac 用户将 Ctrl 替换为 Cmd）

快捷键 功能 使用场景
Ctrl + S 保存文件 修改代码后随时保存
Ctrl + Z 撤销 写错了可以撤回
Ctrl + C / V 复制 / 粘贴 快速复制代码片段
Ctrl + D 选中相同内容 批量修改同名变量或标签
Alt + ↑/↓ 移动整行 快速调整代码顺序
Ctrl + / 注释/取消注释 快速注释一行或多行代码
Ctrl + ` 打开/关闭终端 在编辑器内直接使用命令行
Shift + Alt + F 格式化代码 一键美化凌乱的代码

🚀 第六步：用 Live Server 预览网页

安装 Live Server 插件后，可以实时预览你的 HTML 页面：

  1. 在 VS Code 中打开一个 .html 文件
  2. 在编辑区域 右键，选择 "Open with Live Server"
  3. 浏览器会自动打开并显示你的网页
  4. 此后每次 保存文件（Ctrl+S），浏览器会 自动刷新 显示最新效果
💡 小技巧： 也可以点击 VS Code 右下角状态栏的 "Go Live" 按钮快速启动 Live Server。

有用的浏览器扩展

🚀 快速开始：创建你的第一个 HTML 文件

  1. 打开你喜欢的代码编辑器
  2. 创建新文件，保存为 index.html
  3. 输入基本的 HTML 结构
  4. 在浏览器中打开文件查看效果
  5. 使用 F12 打开开发者工具进行调试

什么是 HTML？

HTML (HyperText Markup Language，超文本标记语言) 是构建网页的基础语言。它不是编程语言，而是一种标记语言，用于定义网页的结构和内容。

🔍 深入理解：为什么叫"超文本"？

超文本（Hypertext）指的是包含链接的文本，可以通过点击链接跳转到其他页面或位置。这是 HTML 相对于普通文档的核心优势。

  • 普通文本：线性阅读，从头到尾
  • 超文本：非线性阅读，可以跳转和导航
  • 标记语言：使用标签来标记文本的语义和结构

HTML 的作用

HTML 的历史演进

版本 发布时间 主要特性
HTML 1.0 1991年 最基本的标签，如标题、段落、链接
HTML 2.0 1995年 增加了表单、表格等交互元素
HTML 4.01 1999年 标准化了 CSS 和 JavaScript 的使用
XHTML 1.0 2000年 更严格的 XML 语法规则
HTML5 2014年 语义化标签、多媒体支持、本地存储等

HTML 基本结构

每个 HTML 文档都有一个标准的结构：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> </head> <body> <!-- 页面内容写在这里 --> <h1>欢迎来到我的网页</h1> <p>这是一个段落。</p> </body> </html>

💡 最佳实践：DOCTYPE 声明的重要性

<!DOCTYPE html> 声明告诉浏览器使用 HTML5 标准解析页面。没有这个声明，浏览器可能会使用兼容模式（怪异模式），导致页面显示不一致。

  • 标准模式：浏览器按照 W3C 标准渲染页面
  • 怪异模式：浏览器模拟旧版本浏览器的行为
  • 建议：始终在 HTML 文档的第一行添加 DOCTYPE 声明

📊 可视化结构演示

下面的动画展示了HTML文档的层级结构，点击各个部分可以查看详细说明：

结构说明

标签 说明 重要性
<!DOCTYPE html> 声明文档类型为 HTML5 必需
<html> HTML 文档的根元素 必需
<head> 包含元数据（如标题、字符集、样式等） 必需
<meta charset="UTF-8"> 设置字符编码为 UTF-8 重要
<meta name="viewport"> 设置移动端视口 重要
<title> 定义浏览器标签页上显示的标题 必需
<body> 包含页面的可见内容 必需
⚠️ 常见错误：
  • 忘记 <!DOCTYPE html> 声明
  • 字符编码设置错误，导致中文乱码
  • 标签没有正确闭合或嵌套
  • 在 <head> 中放置可见内容

🚀 实战案例：分析真实网页结构

让我们分析一个真实的网页结构，理解 HTML 在实际项目中的应用：

案例：企业官网首页结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ABC 科技公司 - 创新引领未来</title> <meta name="description" content="ABC 科技公司专注于人工智能和大数据解决方案"> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <h1>ABC 科技</h1> <ul> <li><a href="#home">首页</a></li> <li><a href="#products">产品</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </header> <main> <section id="home"> <h2>欢迎来到 ABC 科技</h2> <p>我们致力于为企业提供最先进的技术解决方案...</p> </section> <section id="products"> <h2>我们的产品</h2> <article> <h3>AI 分析平台</h3> <p>基于深度学习的智能分析系统...</p> </article> </section> </main> <footer> <p>© 2024 ABC 科技公司. 保留所有权利.</p> </footer> </body> </html>

🔍 结构分析

  • 语义化标签：使用 <header>、<nav>、<main>、<section>、<article>、<footer> 等语义化标签
  • SEO 优化：包含 title 和 meta description，有利于搜索引擎优化
  • 可访问性：结构清晰，便于屏幕阅读器解析
  • 可维护性：代码结构层次分明，易于维护和扩展

🎮 在线代码编辑器

在这里你可以实时编写HTML代码并立即看到效果！这是学习HTML最好的方式。

📝 HTML 代码编辑器
👁 预览效果

💡 快速提示

  • 修改代码后点击"运行代码"按钮查看效果
  • 尝试修改标题和段落内容
  • 可以添加新的标签，如 <h2>、<ul> 等
  • 点击"重置"按钮恢复初始代码

HTML 标签的特点

1. 标签的组成

大多数 HTML 标签都是成对出现的：

<p>这是一个段落</p> <h1>这是一级标题</h1>

2. 自闭合标签

有些标签不需要结束标签，称为自闭合标签：

<br> <!-- 换行 --> <hr> <!-- 水平线 --> <img src="image.jpg" alt="图片"> <!-- 图片 --> <input type="text"> <!-- 输入框 --> <link rel="stylesheet" href="style.css"> <!-- 样式表 -->

3. 标签的嵌套

标签可以嵌套使用，但必须正确嵌套：

<!-- 正确 ✓ --> <div> <p>段落内容</p> </div> <!-- 错误 ✗ --> <div> <p>段落内容</div> </p>

🎯 标签使用最佳实践

  • 语义化优先：根据内容的语义选择合适的标签，而不是为了样式
  • 层次清晰：保持合理的嵌套层次，避免过深的嵌套
  • 小写标签：虽然 HTML 不区分大小写，但推荐使用小写
  • 属性引号：属性值应该用引号包围，推荐使用双引号
💡 提示： HTML 标签不区分大小写，但推荐使用小写字母，这是业界标准。

🎯 互动练习：查看页面源代码

在浏览器中，你可以右键点击页面，选择"查看网页源代码"来查看当前页面的 HTML 代码。

📝 章节练习

完成以下练习题，巩固本章知识：

练习 1：HTML结构排序

将下面的标签拖拽到正确的位置，组成一个完整的HTML文档结构：

拖拽标签到下方对应位置：

<html>
<head>
<body>
<title>
放置第一个标签（文档类型声明之后的根元素）
放置第二个标签（包含元数据）
放置第三个标签（在head中，定义标题）
放置第四个标签（包含可见内容）

练习 2：创建基本 HTML 页面

请创建一个包含以下内容的 HTML 页面：

  • 页面标题为"我的第一个网页"
  • 包含一个一级标题"欢迎"
  • 包含一个段落，内容自定

练习 3：判断题

1. HTML 是一种编程语言。

2. <head> 标签中的内容会显示在浏览器窗口中。

3. HTML 标签必须小写。

练习 4：找错误

下面的 HTML 代码有什么问题？

<!DOCTYPE html>
<html>
<head>
    <title>测试页面
</head>
<body>
    <h1>标题</h2>
    <p>段落内容</p>
</body>
</html>

❓ 常见问题 FAQ

学习过程中遇到问题？看看这些常见问题的解答：

Q1: HTML文件必须保存为.html扩展名吗？ +
Q2: 为什么我的网页显示乱码？ +
Q3: 如何查看其他网站的HTML代码？ +
Q4: HTML、CSS、JavaScript有什么区别？ +
Q5: 学习HTML需要什么基础吗？ +

📚 扩展学习资源

想要更深入地学习HTML？这里有一些推荐的资源：

📖 官方文档

🛠️ 实用工具

🎥 视频教程

  • B站HTML入门教程
  • 慕课网前端课程

💡 学习建议

  • 每天练习30分钟
  • 多看优秀网站源码
  • 自己动手做小项目

🎯 零基础实操指南：从零创建第一个网页

下面是一个详细的步骤指南，带你从零开始创建你的第一个网页。每一步都有详细的说明和截图提示。

1

安装代码编辑器

待完成

推荐使用 VS Code（Visual Studio Code），它免费、功能强大且适合初学者。

📥 下载和安装步骤：

  1. 访问官网：https://code.visualstudio.com/
  2. 点击"Download for Windows"（或Mac/Linux）
  3. 运行下载的安装程序
  4. 按照安装向导完成安装（建议勾选"添加到右键菜单"）
  5. 安装完成后启动 VS Code

✅ 验证安装成功：

  • 能够成功打开 VS Code
  • 看到欢迎页面
  • 可以创建新文件
2

创建项目文件夹

待完成

创建一个专门的文件夹来存放你的HTML项目文件。

📁 操作步骤：

  1. 在电脑上选择一个合适的位置（如桌面或文档文件夹）
  2. 右键点击空白处，选择"新建" → "文件夹"
  3. 命名为 my-first-webpage
  4. 在 VS Code 中，点击"文件" → "打开文件夹"，选择刚创建的文件夹

💡 小贴士：

  • 文件夹名称使用英文，避免空格和特殊字符
  • 建议使用小写字母和连字符（如 my-project）
  • 保持文件组织有序，便于后续管理
3

创建HTML文件

待完成

创建你的第一个HTML文件。

📄 操作步骤：

  1. 在 VS Code 左侧资源管理器中，右键点击项目文件夹
  2. 选择"新建文件"
  3. 输入文件名：index.html
  4. 按回车确认，文件创建成功！

⚠️ 注意事项：

  • 文件扩展名必须是 .html，不是 .txt 或 .doc
  • 首页通常命名为 index.html
  • 确保文件名全部小写，避免空格
4

编写HTML代码

待完成

现在开始编写你的第一行HTML代码！

✍️ 快速生成HTML模板：

  1. 在刚创建的 index.html 文件中输入英文感叹号 !
  2. 按 Tab 键，VS Code会自动生成HTML模板
  3. 修改 <title> 标签中的内容为"我的第一个网页"
  4. 在 <body> 标签中添加内容

📝 完整代码示例：

<!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>
    <p>我正在学习HTML！</p>
</body>
</html>

🎯 VS Code快捷键：

  • Ctrl + S (Mac: Cmd + S) - 保存文件
  • Ctrl + Z - 撤销
  • Ctrl + Y - 重做
5

在浏览器中查看

待完成

最后，在浏览器中查看你的作品！

🌐 打开方式：

方法一：直接双击 index.html 文件

方法二：在VS Code中右键点击文件，选择"Open with Live Server"（需要安装Live Server插件）

方法三：将文件拖拽到浏览器窗口中

🎉 恭喜！

如果你看到了浏览器中显示的网页，恭喜你！你已经成功创建了你的第一个网页！这是你成为Web开发者的第一步！

❓ 遇到问题？

  • 如果显示乱码，检查文件是否保存为UTF-8编码
  • 如果页面空白，检查HTML结构是否正确
  • 按F12打开开发者工具查看错误信息

📚 本章小结

核心概念

  • HTML 是构建网页的基础标记语言
  • HTML5 是当前的标准版本
  • 超文本支持链接和导航
  • 标记语言使用标签定义结构

文档结构

  • DOCTYPE 声明文档类型
  • html 标签是根元素
  • head 包含元数据
  • body 包含可见内容

标签规则

  • 大多数标签成对出现
  • 自闭合标签不需要结束标签
  • 标签可以嵌套但必须正确
  • 推荐使用小写字母

最佳实践

  • 使用语义化标签
  • 保持代码结构清晰
  • 添加必要的注释
  • 遵循 W3C 标准

🎯 下一步学习

恭喜你完成了 HTML 基础的学习！下一章我们将学习文本标签，包括：

  • 标题标签（h1-h6）的使用
  • 段落和换行标签
  • 文本格式化标签
  • 列表标签的使用
← 返回上一页 下一章：文本标签 →
`; function runCode() { const code = document.getElementById('codeEditor').value; const preview = document.getElementById('previewFrame'); preview.srcdoc = code; } function resetEditor() { document.getElementById('codeEditor').value = defaultCode; runCode(); } // 页面加载时自动运行一次 window.onload = function() { runCode(); }; // 可视化结构演示 function toggleStructure() { const animation = document.getElementById('structureAnimation'); const button = event.target; if (animation.style.display === 'none') { animation.style.display = 'block'; button.textContent = '🎬 隐藏结构动画'; } else { animation.style.display = 'none'; button.textContent = '🎬 播放结构动画'; } } // 节点信息显示 const nodeInfo = { doctype: { title: '📄 DOCTYPE 声明', description: 'DOCTYPE声明告诉浏览器使用HTML5标准解析页面。它必须是HTML文档的第一行。没有这个声明，浏览器可能会使用兼容模式（怪异模式），导致页面显示不一致。' }, html: { title: '🌐 html 根元素', description: 'html标签是整个HTML文档的根元素，所有其他HTML元素都必须包含在html标签内。lang属性指定文档的语言，有助于搜索引擎优化和屏幕阅读器。' }, head: { title: '⚙️ head 头部', description: 'head标签包含文档的元数据，如标题、字符集声明、样式表链接等。head中的内容不会直接显示在浏览器窗口中，但对浏览器和搜索引擎很重要。' }, meta: { title: '🔤 meta 元数据', description: 'meta标签提供关于HTML文档的元数据。charset="UTF-8"指定字符编码为UTF-8，确保中文等特殊字符能正确显示。viewport设置对移动端适配非常重要。' }, title: { title: '📌 title 标题', description: 'title标签定义文档的标题，显示在浏览器的标题栏或标签页上。它对SEO（搜索引擎优化）非常重要，应该简洁明了地描述页面内容。' }, body: { title: '👁️ body 主体', description: 'body标签包含文档的所有可见内容，如文本、图片、链接、表格等。用户在浏览器中看到的所有内容都放在body标签内。' }, h1: { title: '📝 h1 一级标题', description: 'h1标签定义一级标题，是最高级别的标题。每个页面通常只有一个h1标签，用于定义页面的主标题。标题标签从h1到h6，级别依次降低。' }, p: { title: '📄 p 段落', description: 'p标签定义段落。浏览器会自动在段落前后添加空白。段落是HTML中最常用的文本容器之一，用于组织文本内容。' } }; function showNodeInfo(nodeId) { const info = nodeInfo[nodeId]; const nodeInfoDiv = document.getElementById('nodeInfo'); const nodeTitle = document.getElementById('nodeTitle'); const nodeDescription = document.getElementById('nodeDescription'); nodeTitle.textContent = info.title; nodeDescription.textContent = info.description; nodeInfoDiv.style.display = 'block'; nodeInfoDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } // 步骤完成追踪 let completedSteps = 0; const totalSteps = 5; function completeStep(stepNumber) { const step = document.getElementById('step' + stepNumber); const status = document.getElementById('step' + stepNumber + '-status'); const nextStep = document.getElementById('step' + (stepNumber + 1)); // 更新当前步骤状态 status.textContent = '已完成 ✓'; status.style.background = 'rgba(34, 197, 94, 0.2)'; status.style.color = '#22c55e'; // 禁用按钮 event.target.disabled = true; event.target.textContent = '✓ 已完成'; event.target.style.background = 'rgba(34, 197, 94, 0.3)'; event.target.style.cursor = 'default'; completedSteps++; // 启用下一步 if (nextStep) { nextStep.style.opacity = '1'; nextStep.scrollIntoView({ behavior: 'smooth', block: 'center' }); } // 检查是否完成所有步骤 if (completedSteps === totalSteps) { showAchievement(); } // 保存进度到本地存储 saveProgress(); } function showAchievement() { const achievement = document.getElementById('achievement-section'); achievement.style.display = 'block'; achievement.scrollIntoView({ behavior: 'smooth', block: 'center' }); // 添加庆祝动画 achievement.style.animation = 'pulse 0.5s ease-in-out 3'; } function saveProgress() { const progress = { completedSteps: completedSteps, timestamp: new Date().toISOString() }; localStorage.setItem('html-chapter1-progress', JSON.stringify(progress)); } function loadProgress() { const saved = localStorage.getItem('html-chapter1-progress'); if (saved) { const progress = JSON.parse(saved); // 这里可以恢复之前的进度 console.log('已加载之前的进度:', progress); } } // 原有功能 function showSourceCode() { const display = document.getElementById('sourceCodeDisplay'); if (display.style.display === 'none') { display.style.display = 'block'; } else { display.style.display = 'none'; } } function showAnswer1() { const answer = document.getElementById('answer1'); answer.style.display = answer.style.display === 'none' ? 'block' : 'none'; } function checkQuiz() { const q1 = document.querySelector('input[name="q1"]:checked'); const q2 = document.querySelector('input[name="q2"]:checked'); const q3 = document.querySelector('input[name="q3"]:checked'); const result = document.getElementById('quizResult'); if (!q1 || !q2 || !q3) { result.style.display = 'block'; result.innerHTML = '

请回答所有问题！

'; return; } const answers = { q1: 'false', // HTML 不是编程语言 q2: 'false', // head 内容不显示在浏览器窗口 q3: 'false' // HTML 标签不必须小写，但推荐小写 }; let correct = 0; let total = 3; if (q1.value === answers.q1) correct++; if (q2.value === answers.q2) correct++; if (q3.value === answers.q3) correct++; result.style.display = 'block'; const percentage = (correct / total * 100).toFixed(0); if (correct === total) { result.innerHTML = `
🎉 完美！ 你答对了 ${correct}/${total} 题！

答案解析：

  1. HTML 是标记语言，不是编程语言
  2. <head> 中的内容是元数据，不显示在页面上
  3. HTML 标签不区分大小写，但推荐使用小写
`; } else { result.innerHTML = `
得分：${correct}/${total} (${percentage}%)

答案解析：

  1. HTML 是标记语言，不是编程语言 ✗
  2. <head> 中的内容是元数据，不显示在页面上 ✗
  3. HTML 标签不区分大小写，但推荐使用小写 ✗

继续加油！💪

`; } } function showAnswer3() { const answer = document.getElementById('answer3'); answer.style.display = answer.style.display === 'none' ? 'block' : 'none'; } // 页面加载时恢复进度 window.addEventListener('load', loadProgress); // 拖拽排序功能 let draggedElement = null; const dropAnswers = {}; document.addEventListener('DOMContentLoaded', function() { const draggables = document.querySelectorAll('.draggable'); const dropZones = document.querySelectorAll('.drop-zone'); draggables.forEach(draggable => { draggable.addEventListener('dragstart', function(e) { draggedElement = this; this.style.opacity = '0.5'; }); draggable.addEventListener('dragend', function(e) { this.style.opacity = '1'; }); }); dropZones.forEach(zone => { zone.addEventListener('dragover', function(e) { e.preventDefault(); this.style.background = 'rgba(102, 126, 234, 0.2)'; this.style.borderColor = 'rgba(102, 126, 234, 0.6)'; }); zone.addEventListener('dragleave', function(e) { this.style.background = 'transparent'; this.style.borderColor = 'rgba(102, 126, 234, 0.3)'; }); zone.addEventListener('drop', function(e) { e.preventDefault(); this.style.background = 'transparent'; this.style.borderColor = 'rgba(34, 197, 94, 0.5)'; if (draggedElement) { const slot = this.getAttribute('data-slot'); const tag = draggedElement.getAttribute('data-tag'); // 保存答案 dropAnswers[slot] = tag; // 显示拖入的标签 this.innerHTML = draggedElement.innerHTML; this.style.color = '#22c55e'; this.style.fontWeight = 'bold'; // 隐藏原始拖拽元素 draggedElement.style.display = 'none'; } }); }); }); function checkDragDrop() { const correctAnswers = { '1': 'html', '2': 'head', '3': 'title', '4': 'body' }; const result = document.getElementById('dragDropResult'); let correct = 0; let total = 4; for (let slot in correctAnswers) { if (dropAnswers[slot] === correctAnswers[slot]) { correct++; } } result.style.display = 'block'; if (correct === total) { result.innerHTML = `
🎉 完美！ 你完全理解了HTML文档结构！

正确的结构顺序：

  1. <html> - 根元素
  2. <head> - 头部（元数据）
  3. <title> - 标题（在head中）
  4. <body> - 主体（可见内容）
`; } else { result.innerHTML = `
得分：${correct}/${total}

正确的结构顺序：

  1. <html> - 根元素（包含整个文档）
  2. <head> - 头部（包含元数据，不显示在页面上）
  3. <title> - 标题（必须放在head中）
  4. <body> - 主体（包含所有可见内容）

再试一次！💪

`; } } // FAQ交互功能 function toggleFaq(element) { const answer = element.nextElementSibling; const icon = element.querySelector('.faq-icon'); if (answer.style.display === 'none') { answer.style.display = 'block'; icon.textContent = '−'; element.style.background = 'rgba(102, 126, 234, 0.3)'; } else { answer.style.display = 'none'; icon.textContent = '+'; element.style.background = 'rgba(102, 126, 234, 0.2)'; } } // 添加CSS动画 const style = document.createElement('style'); style.textContent = ` @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .step-complete-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .draggable:hover { transform: scale(1.05); transition: all 0.2s ease; } `; document.head.appendChild(style);