HTML 零基础入门到实战：从骨架到页面的完整指南

[1. HTML 核心基础](#1. HTML 核心基础)
[2. HTML 常用标签详解](#2. HTML 常用标签详解)
[3. 表格与列表：页面结构化布局](#3. 表格与列表：页面结构化布局)
[4. 表单：与用户交互的核心](#4. 表单：与用户交互的核心)
[5. 实战案例：从博客到简历开发](#5. 实战案例：从博客到简历开发)
[6. 高效开发工具与技巧](#6. 高效开发工具与技巧)
[7. 常见问题与避坑指南](#7. 常见问题与避坑指南)

1. HTML 核心基础

1.1 什么是 HTML？

HTML（HyperText Markup Language，超文本标记语言）不是编程语言，而是描述网页结构的标记语言。它就像建筑的"骨架"，决定了页面上有哪些内容（文字、图片、按钮等）以及这些内容的排列顺序。

1.2 HTML 标签：页面的"积木"

所有 HTML 内容都由"标签"构成，标签是 HTML 的核心，常见规则如下：

成对标签 ：大部分标签需要"开始-结束"配对，结构为 <标签名>内容</标签名>，例如 这是一段文字。
单标签 ：少数标签无需结束，结构为 <标签名> 或 <标签名/>（推荐后者，更规范），例如换行标签  。
标签属性 ：在开始标签中添加"键值对"，用于补充标签信息，例如 <img src="图片路径" alt="图片加载失败提示">，其中 src 和 alt 就是属性。

易错点 ：属性必须写在开始标签内，且属性值必须用引号（单引号或双引号均可）包裹，例如 <a href=http://baidu.com> 是错误的，正确写法是 <a href="http://baidu.com">。

1.3 HTML 文件基本结构

任何 HTML 文件都有固定的"骨架"，缺少则可能导致页面显示异常。以下是 HTML5 标准结构：

html 复制代码

<!DOCTYPE html>  <!-- 声明文档类型为 HTML5，必须放在第一行 -->
<html lang="zh-CN">  <!-- 根标签，lang="zh-CN" 表示页面为中文（利于SEO） -->
<head>  <!-- 页面"配置区"，内容不显示在页面上 -->
    <meta charset="UTF-8">  <!-- 字符编码，必须设置，否则中文可能乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 适配移动端，禁止缩放 -->
    <title>我的第一个页面</title>  <!-- 浏览器标签栏显示的标题 -->
</head>
<body>  <!-- 页面"内容区"，所有可见内容都写在这里 -->
    你好，HTML！  <!-- 页面上显示的文字 -->
</body>
</html>

核心解释：

<meta charset="UTF-8">：如果省略，中文可能显示为"乱码"（如 �），这是新手最常见的问题之一。
<meta name="viewport">：移动端开发必备，没有它，页面在手机上可能会被"缩小"，导致文字模糊。

1.4 标签层次结构：DOM 树

标签之间的嵌套关系构成"DOM 树"（文档对象模型），就像"父子兄弟"的关系：

父子关系 ：外层标签是"父"，内层标签是"子"，例如 <head> 是 <title> 的父标签。
兄弟关系 ：同一层级的标签是"兄弟"，例如 <head> 和 <body> 是兄弟标签。

查看 DOM 树的方法：在浏览器中右键 → "检查"（或按 F12），切换到"Elements"标签，即可看到页面的 DOM 结构。

2. HTML 常用标签详解

2.1 注释标签：代码的"说明书"

注释不会在页面上显示，仅用于开发者标注代码功能，方便后续维护。

语法：
快捷键：Ctrl + /（大部分编辑器通用，按一次添加注释，再按一次取消）

使用原则：

注释要和代码逻辑一致，例如 。
避免冗余注释（如 ）。
复杂逻辑必须加注释，例如表单提交逻辑。

2.2 文本标签：标题、段落与换行

2.2.1 标题标签（h1-h6）

用于定义页面中的标题，共 6 级，h1 最大（最重要），h6 最小（次要）。

语法：

html 复制代码

<h1>一级标题（一个页面建议只写1个，利于SEO）</h1>
<h2>二级标题（文章小节标题）</h2>
<h3>三级标题（小节下的子标题）</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

易错点 ：不要为了"改变文字大小"而滥用标题标签，文字样式应由 CSS 控制；一个页面建议只写 1 个 h1，否则会影响搜索引擎收录。

2.2.2 段落标签（p）

用于包裹一段文字，自动实现段落间距和换行适配。

问题场景 ：如果直接写文字不包裹 p 标签，文字会"挤在一起"，无法区分段落。
正确示例：

html 复制代码

<p>这是第一段文字，用于介绍 HTML 的基本概念。即使我在这里写很长的内容，浏览器也会自动根据页面宽度换行，不需要手动调整。</p>
<p>这是第二段文字，与第一段之间会有默认的间距，让页面结构更清晰。</p>

2.2.3 换行标签（br）

用于强制换行（如诗歌、地址），是单标签。

语法： （推荐）或  （不规范）
示例：

html 复制代码

<p>床前明月光，<br/>疑是地上霜。<br/>举头望明月，<br/>低头思故乡。</p>

区别：p 标签是"段落分隔"（带间距），br 是"强制换行"（无间距），不要混淆使用。

2.3 格式化标签：文字样式调整

用于给文字添加加粗、倾斜等样式，推荐使用语义化标签（如 strong），而非纯样式标签（如 b），利于 SEO 和无障碍。

功能	语义化标签（推荐）	纯样式标签（不推荐）	语法示例
加粗	`strong`	`b`	`<strong>重要内容</strong>`
倾斜	`em`	`i`	`<em>强调内容</em>`
删除线	`del`	`s`	`<del>原价99元</del>`
下划线	`ins`	`u`	`<ins>现价59元</ins>`

示例效果 ：
重要内容（加粗）
强调内容（倾斜）
~~原价99元（删除线）~~
++现价59元（下划线）++

2.4 图片标签（img）：插入图片

用于在页面中显示图片，是单标签，必须包含 src 属性（图片路径）。

2.4.1 核心属性

属性	作用	示例值
`src`	图片路径（必填）	`./image/photo.jpg`（相对路径）
`alt`	图片加载失败时显示的提示（必填，无障碍）	`风景照片`
`title`	鼠标 hover 时显示的提示	`这是海边的风景`
`width`	图片宽度（单位：px，只改一个会等比缩放）	`300` 或 `300px`
`height`	图片高度（不建议同时改宽高，易变形）	`200` 或 `200px`

2.4.2 路径问题（新手必坑）

图片路径分为"相对路径"和"绝对路径"，90% 的图片加载失败都是路径错误导致的。

路径类型	定义	适用场景	示例
相对路径	以 HTML 文件所在位置为基准找图片	网站内部图片	`./photo.jpg`（同级）、`../image/photo.jpg`（上一级）
绝对路径	完整的磁盘路径或网络 URL	外部图片（如网络图片）	`D:/images/photo.jpg`（磁盘）、`https://xxx.com/photo.jpg`（网络）

正确示例：

html 复制代码

<!-- 1. 相对路径：图片在 HTML 同级的 image 文件夹中 -->
<img src="./image/sea.jpg" alt="海边风景" title="点击查看大图" width="500">

<!-- 2. 绝对路径：网络图片 -->
<img src="https://picsum.photos/500/300" alt="随机风景图" width="500">

易错点 ：Windows 系统的路径分隔符是 \，但 HTML 中必须用 /，例如 D:\image\photo.jpg 要改为 D:/image/photo.jpg。

2.5 超链接标签（a）：页面跳转

用于实现"点击跳转"功能，是页面导航的核心标签。

2.5.1 核心属性

href：跳转目标（必填），值可以是 URL、文件路径或锚点。
target：打开方式，_self（当前标签页打开，默认）、_blank（新标签页打开，推荐外部链接使用）。

2.5.2 常见链接类型

链接类型	作用	语法示例
外部链接	跳转到其他网站	`<a href="https://baidu.com" target="_blank">百度</a>`
内部链接	跳转到网站内部页面	`<a href="./about.html">关于我们</a>`
空链接	暂时没有跳转目标，用 # 占位	`<a href="#">更多内容</a>`
下载链接	点击下载文件（href 指向文件路径）	`<a href="./resume.pdf">下载简历</a>`
锚点链接	跳转到页面内指定位置	`<a href="#section1">跳转到第一节</a>`

2.5.3 锚点链接（页面内跳转）

用于"长页面快速定位"（如文章目录跳转），步骤如下：

给目标位置的标签添加 id 属性（唯一标识）。
链接的 href 设为 #id值。

示例：

html 复制代码

<!-- 1. 目录（锚点链接） -->
<div>
    <a href="#section1">1. 引言</a><br/>
    <a href="#section2">2. 核心概念</a><br/>
    <a href="#section3">3. 总结</a>
</div>

<!-- 2. 目标内容（带 id） -->
<h2 id="section1">1. 引言</h2>
<p>这里是引言内容...</p>

<h2 id="section2">2. 核心概念</h2>
<p>这里是核心概念内容...</p>

<h2 id="section3">3. 总结</h2>
<p>这里是总结内容...</p>

2.6 无语义标签（div & span）：布局神器

无语义标签本身没有含义，仅用于"包裹内容"和"布局"，是 CSS 样式控制的核心载体。

标签	特点	适用场景	示例
`div`	独占一行（块级元素）	大区域布局（如导航栏、卡片）	`<div class="header">导航栏</div>`
`span`	不独占一行（行内元素）	小区域样式（如文字高亮）	`<p>我喜欢<span class="highlight">HTML</span>和CSS</p>`

示例：

html 复制代码

<!-- div 用于大布局：每个 div 独占一行 -->
<div class="nav">导航栏</div>
<div class="content">
    <!-- span 用于行内样式：和文字在同一行 -->
    <p>当前章节：<span class="chapter">HTML 标签</span></p>
    <p>难度：<span class="level">简单</span></p>
</div>
<div class="footer">版权信息</div>

3. 表格与列表：页面结构化布局

3.1 表格（table）：展示结构化数据

用于展示"行/列"形式的数据（如成绩表、产品清单），核心是"表格-行-单元格"的三层结构。

3.1.1 基本结构

标签	作用	层级关系
`table`	整个表格的容器	最外层
`tr`	表格的一行	嵌套在 table 内
`th`	表头单元格（文字居中加粗）	嵌套在 tr 内（第一行）
`td`	普通单元格	嵌套在 tr 内（非表头行）
`thead`	表格头部（语义化标签，可选）	嵌套在 table 内，包含 tr
`tbody`	表格主体（语义化标签，可选）	嵌套在 table 内，包含 tr

示例：学生成绩表

html 复制代码

<table border="1" cellpadding="10" cellspacing="0" width="600">
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>95</td>
            <td>100</td>
            <td>92</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>92</td>
            <td>96</td>
        </tr>
    </tbody>
</table>

属性解释：

border="1"：表格边框宽度（1px），默认无边框。
cellpadding="10"：单元格内边距（文字到边框的距离）。
cellspacing="0"：单元格间距（默认 2px，设为 0 可消除间隙）。

3.1.2 合并单元格（进阶）

用于合并多行或多列的单元格（如合并"总计"行），核心是 rowspan（跨行）和 colspan（跨列）。

步骤：

确定合并方向：跨行（上下合并）用 rowspan，跨列（左右合并）用 colspan。
在"目标单元格"（跨行选上方，跨列选左侧）添加合并属性，值为"合并的单元格数量"。
删除被合并的多余单元格（否则表格结构错乱）。

示例：合并"总计"列

html 复制代码

<table border="1" cellpadding="10" cellspacing="0" width="600">
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td rowspan="2">张三</td> <!-- 跨行合并2个单元格（张三的2行） -->
        <td>语文</td>
        <td>95</td>
    </tr>
    <tr>
        <!-- 被合并的单元格，必须删除 -->
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td colspan="2">总计（2人）</td> <!-- 跨列合并2个单元格（姓名+科目） -->
        <td>195</td>
    </tr>
</table>

易错点：合并后必须删除多余单元格，否则表格会出现"多余空白"或结构错乱。

3.2 列表（ul/ol/dl）：展示有序/无序内容

列表用于展示"系列化内容"（如菜单、步骤、说明），分为无序列表、有序列表和自定义列表。

3.2.1 无序列表（ul + li）：无顺序的内容

用于展示"无先后顺序"的内容（如导航菜单、标签），默认前缀是"小圆点"。

语法：

html 复制代码

<ul>
    <li>首页</li>
    <li>文章</li>
    <li>关于我们</li>
    <li>联系我们</li>
</ul>

注意：ul 内只能嵌套 li，不能直接写文字；li 内可以嵌套任何标签（如 a、img）。

3.2.2 有序列表（ol + li）：有顺序的内容

用于展示"有先后顺序"的内容（如步骤、排名），默认前缀是"数字"。

语法：

html 复制代码

<ol>
    <li>打开浏览器</li>
    <li>输入百度网址（https://baidu.com）</li>
    <li>在搜索框输入"HTML 教程"</li>
    <li>点击搜索按钮</li>
</ol>

属性：type 可修改前缀类型（1 数字、A 大写字母、a 小写字母、I 大写罗马数字），例如 <ol type="A">。

3.2.3 自定义列表（dl + dt + dd）：带标题的说明

用于展示"标题+解释"的内容（如产品参数、FAQ），dt 是标题，dd 是解释。

语法：

html 复制代码

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于描述网页结构。</dd>
    <dd>不是编程语言，而是标记语言。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于美化网页。</dd>
    <dd>可以控制文字颜色、布局、动画等。</dd>
</dl>

示例效果 ：
HTML
超文本标记语言，用于描述网页结构。
不是编程语言，而是标记语言。
CSS
层叠样式表，用于美化网页。
可以控制文字颜色、布局、动画等。

4. 表单（form）：与用户交互的核心

表单用于"收集用户输入"（如登录、注册、问卷），核心是 form 容器和 input 控件。

4.1 表单的基本结构

form 是表单的容器，用于指定"数据提交地址"和"提交方式"，内部包含各种输入控件（如输入框、按钮）。

html 复制代码

<!-- action：数据提交的目标地址（后端接口），method：提交方式（GET/POST） -->
<form action="https://xxx.com/submit" method="POST">
    <!-- 输入控件 -->
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="登录">
</form>

核心属性：

action：数据提交到哪个后端接口（如 https://xxx.com/login），暂时没有后端时可留空。
method：提交方式，GET（数据在 URL 中显示，不安全，用于查询）或 POST（数据隐藏，安全，用于提交密码等敏感信息）。

4.2 常见表单控件（input 为主）

input 是表单的核心控件，通过 type 属性切换不同功能，常见类型如下：

控件类型	`type` 值	作用	示例代码
单行文本框	`text`	输入普通文字（如用户名）	`<input type="text" name="username" placeholder="请输入用户名">`
密码框	`password`	输入密码（文字隐藏为星号）	`<input type="password" name="password" placeholder="请输入密码">`
单选框	`radio`	多选一（如性别）	`<input type="radio" name="sex" value="male" id="male"> <label for="male">男</label>`
复选框	`checkbox`	多选多（如爱好）	`<input type="checkbox" name="hobby" value="reading" id="reading"> <label for="reading">阅读</label>`
提交按钮	`submit`	提交表单数据	`<input type="submit" value="注册">`
重置按钮	`reset`	清空表单输入	`<input type="reset" value="重新填写">`
普通按钮	`button`	自定义功能（需配合 JS）	`<input type="button" value="获取验证码" onclick="alert('验证码已发送')">`
文件上传	`file`	选择文件上传（如简历附件）	`<input type="file" name="resume">`

关键注意点：

单选框/复选框的 name 属性 ：同一组单选框/复选框必须有相同的 name 值，才能实现"多选一"或"多选多"，例如：

html 复制代码

<!-- 正确：同一组单选框 name 相同 -->
性别：
<input type="radio" name="sex" value="male" id="male"> <label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"> <label for="female">女</label>

label 标签的作用 ：点击 label 文字也能选中对应的单选框/复选框，提升用户体验。for 属性值必须和对应 input 的 id 一致。

4.3 其他表单控件

4.3.1 下拉菜单（select + option）

用于"选项较多"的场景（如选择城市、年份），节省页面空间。

语法：

html 复制代码

<select name="city">
    <option value="">--请选择城市--</option> <!-- 默认提示选项，value 为空 -->
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option> <!-- selected：默认选中 -->
    <option value="guangzhou">广州</option>
</select>

注意：option 的 value 是提交给后端的值，option 内的文字是显示给用户的，两者可以不同（如 value="1"，文字"北京"）。

4.3.2 多行文本框（textarea）

用于输入"多行文字"（如备注、个人介绍），可调整行数和列数。

语法：

html 复制代码

<textarea name="intro" rows="5" cols="30" placeholder="请输入个人介绍（不超过200字）"></textarea>

属性：
- rows：默认显示的行数（高度）。
- cols：默认显示的列数（宽度）。
- placeholder：提示文字（输入后消失）。
易错点 ：textarea 的开始标签和结束标签之间不要留空格，否则会默认显示空格。

5. 实战案例：从博客到简历开发

5.1 案例 1：个人博客页面

需求：展示一篇关于"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>HTML 表单入门教程 - 我的博客</title>
</head>
<body>
    <!-- 博客标题区域 -->
    <h1>HTML 表单入门：从基础到实战</h1>
    <p>作者：前端小白 | 发布时间：2024-10-16 | <a href="https://csdn.net" target="_blank">原文链接</a></p>

    <!-- 博客正文区域 -->
    <h2 id="intro">1. 表单的作用</h2>
    <p>表单是 HTML 中用于收集用户输入的核心组件，常见场景包括：</p>
    <ul>
        <li>用户登录（输入用户名和密码）</li>
        <li>注册账号（填写个人信息）</li>
        <li>问卷调查（选择选项、输入意见）</li>
    </ul>

    <h2 id="basic">2. 表单的基本结构</h2>
    <p>一个完整的表单包含 <code>form</code> 容器和输入控件，例如：</p>
    <!-- 插入代码示例（用 pre 标签保留格式） -->
    <pre><code>&lt;form action="https://xxx.com/submit" method="POST"&gt;
    &lt;input type="text" name="username" placeholder="请输入用户名"&gt;
    &lt;input type="password" name="password" placeholder="请输入密码"&gt;
    &lt;input type="submit" value="登录"&gt;
&lt;/form&gt;</code></pre>

    <h2 id="example">3. 实战示例：注册表单</h2>
    <p>以下是一个简单的注册表单，包含用户名、密码、性别、爱好和个人介绍：</p>
    <!-- 插入表单示例 -->
    <form>
        <p>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required> <!-- required：必填 -->
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required>
        </p>
        <p>
            性别：
            <input type="radio" id="male" name="sex" value="male"> <label for="male">男</label>
            <input type="radio" id="female" name="sex" value="female"> <label for="female">女</label>
        </p>
        <p>
            爱好：
            <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">阅读</label>
            <input type="checkbox" id="coding" name="hobby" value="coding"> <label for="coding">编程</label>
        </p>
        <p>
            <label for="intro">个人介绍：</label><br/>
            <textarea id="intro" name="intro" rows="3" cols="30"></textarea>
        </p>
        <p>
            <input type="submit" value="注册">
            <input type="reset" value="重置">
        </p>
    </form>

    <!-- 插入图片 -->
    <p>表单提交流程示意图：</p>
    <img src="https://picsum.photos/800/400" alt="表单提交流程" width="800">

    <!-- 目录锚点 -->
    <p style="margin-top: 50px;">
        <a href="#intro">回到 1. 表单的作用</a><br/>
        <a href="#basic">回到 2. 表单的基本结构</a><br/>
        <a href="#example">回到 3. 实战示例：注册表单</a>
    </p>
</body>
</html>

5.2 案例 2：个人简历页面

需求：用 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>
    <div class="resume">
        <!-- 基本信息 -->
        <h1>张三</h1>
        <div class="basic-info">
            <img src="https://picsum.photos/100/100" alt="个人头像" width="100">
            <p><strong>求职意向：</strong>前端开发工程师</p>
            <p><strong>联系电话：</strong>138-XXXX-XXXX</p>
            <p><strong>邮箱：</strong>zhangsan@example.com</p>
            <p><strong>GitHub：</strong><a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a></p>
        </div>

        <!-- 教育背景（有序列表） -->
        <h2>教育背景</h2>
        <ol>
            <li>2020.09 - 2024.06：XX大学 | 计算机科学与技术 | 本科</li>
            <li>2017.09 - 2020.06：XX高中 | 理科</li>
        </ol>

        <!-- 专业技能（无序列表） -->
        <h2>专业技能</h2>
        <ul>
            <li>HTML/CSS：熟练掌握 HTML5 语义化标签、CSS3 布局（Flex/Grid）、响应式开发。</li>
            <li>JavaScript：掌握 ES6+ 语法、DOM 操作、AJAX 异步请求。</li>
            <li>框架：了解 Vue.js 基础用法，能独立开发简单单页应用。</li>
        </ul>

        <!-- 项目经历（嵌套列表） -->
        <h2>项目经历</h2>
        <ol>
            <li>
                <h3>个人博客系统（2023.03 - 2023.06）</h3>
                <p><strong>项目描述：</strong>基于 HTML/CSS/JavaScript + Vue.js 开发的个人博客，支持文章发布、分类、评论功能。</p>
                <p><strong>负责模块：</strong></p>
                <ul>
                    <li>前端页面：使用 HTML5 语义化标签搭建页面结构，CSS3 实现响应式布局。</li>
                    <li>交互功能：用 JavaScript 实现文章分页、评论提交，Vue.js 实现数据绑定。</li>
                </ul>
            </li>
            <li>
                <h3>在线简历生成器（2022.10 - 2022.12）</h3>
                <p><strong>项目描述：</strong>用户输入个人信息后，自动生成结构化简历，支持导出 PDF。</p>
                <p><strong>负责模块：</strong>使用 HTML 表单收集用户信息，JavaScript 动态生成简历内容。</p>
            </li>
        </ol>
    </div>
</body>
</html>

6. 高效开发工具与技巧

6.1 Emmet 快捷键：提升编码速度

Emmet 是编辑器内置的"代码缩写工具"，能通过简短指令快速生成 HTML 结构，是前端开发必备技能。

快捷键指令	作用	生成代码
`!` + Tab	生成 HTML5 基本结构	完整的 HTML5 骨架
`div*3` + Tab	生成 3 个 div 标签	`<div></div><div></div><div></div>`
`ul>li*5` + Tab	生成包含 5 个 li 的 ul 标签	`<ul><li></li><li></li>...</ul>`
`div#box` + Tab	生成带 id="box" 的 div 标签	`<div id="box"></div>`
`div.container` + Tab	生成带 class="container" 的 div 标签	`<div class="container"></div>`
`a[href="http://baidu.com"]` + Tab	生成带 href 的 a 标签	`<a href="http://baidu.com"></a>`
`p{这是第$个段落}*3` + Tab	生成带编号的 p 标签	`<p>这是第1个段落</p><p>这是第2个段落</p><p>这是第3个段落</p>`

6.2 常用编辑器推荐

VS Code：免费、轻量、插件丰富（如 HTML 格式化插件 Prettier、实时预览插件 Live Server），是目前最流行的前端编辑器。
WebStorm：功能强大，适合大型项目，但收费（学生可申请免费）。

6.3 浏览器调试工具

打开方式：右键 → "检查" 或按 F12。
核心功能 ：
1. Elements 标签：查看和修改页面的 DOM 结构、CSS 样式。
2. Console 标签：执行 JavaScript 代码、查看错误信息。
3. Network 标签：查看图片、脚本等资源的加载情况（排查图片加载失败问题）。

7. 常见问题与避坑指南

7.1 中文乱码问题

原因：未设置 meta charset="UTF-8" 或编码格式不匹配。
解决方案 ：在 <head> 标签内第一行添加 <meta charset="UTF-8">，并确保文件保存时的编码格式为 UTF-8（VS Code 右下角可查看和修改）。

7.2 图片加载失败

常见原因 ：
1. 路径错误（如相对路径写成绝对路径，或文件夹名称错误）。
2. 图片文件名包含中文或特殊字符（如空格、#）。
解决方案 ：
1. 优先使用相对路径，确认图片路径与 HTML 文件的位置关系。
2. 图片文件名改为英文+数字（如 sea1.jpg），避免中文和特殊字符。
3. 用浏览器调试工具的"Network"标签查看图片请求状态，若显示 404 则是路径错误。

7.3 表单无法提交

常见原因 ：
1. 提交按钮不是 type="submit"（如写成 type="button"）。
2. 单选框/复选框没有 name 属性，导致数据无法传递。
3. 必填项（required）未填写，浏览器阻止提交。
解决方案 ：
1. 确认提交按钮的 type 为 submit。
2. 同一组单选框/复选框添加相同的 name 属性。
3. 检查是否有未填写的必填项（浏览器会提示）。

7.4 表格结构错乱

原因：合并单元格后未删除多余单元格，或行内单元格数量不统一。
解决方案 ：
1. 合并单元格后，必须删除被合并的 td 或 th。
2. 确保每一行的 td/th 数量一致（合并后也算一个）。

要不要我帮你整理一份HTML 常用标签速查表？包含标签语法、核心属性、示例代码和易错点，方便你日常开发时快速查阅。