爱吃超人的怪兽1. 动手之前，先把HTML标签的“骨架”搞清楚
先别急着敲代码。很多新手上来就背标签，背了三天发现全忘了，原因很简单：你还不知道这些标签到底在页面里扮演什么角色。HTML标签说白了就是把网页内容“圈”起来的一堆记号，它们负责告诉浏览器“这里是一级标题”“那里是一张图片”“这个区块是导航”。只要把这句话理解透了，后面所有标签都只是在往不同形状的容器里装内容。
我曾经带过不少零基础的朋友入门，发现一个规律：凡是用“先看整体、再补细节”的方式去学标签的人，基本两周内就能独立写一个像样的静态页面；凡是上来就对着标签字典挨个背的，基本五天就放弃了。原因在于：HTML标签不是靠背的，是靠“用”的。你只要弄明白一个页面的骨架长什么样，剩下的事情就是往骨架上填肉。
从一张网页的解剖图来看，骨架分为三大块：头部的声明与元信息、可见的页面结构、以及功能性的交互控件。对应到标签上，它们各司其职。我常跟新手打一个比方：HTML标签像装修一套毛坯房，<html>是房子外墙，<head>是藏在墙里的水电管线，<body>是你能看到的客厅卧室，而<h1>、<p>、<img>这些标签就是你摆进房间的沙发、餐桌和装饰画。这样一想，整个知识体系就立体了。
本文面向三类人：一是刚接触网页开发、想快速建立起HTML知识框架的新手；二是前端入门后想系统整理标签用法的自学者；三是需要写静态页面但总在细节上出问题、想回来补基本功的人。文章会从标签的分类、核心属性、实际写法讲到高频踩坑点，尽量做到“你看完就能直接上手写页面”。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 一个HTML文档的基本骨架：从声明到闭合
2.1 doctype声明和html标签的作用
打开任何一个正规的网页，第一行基本都是<!DOCTYPE html>。这一行英文全称是Document Type Declaration，也就是文档类型声明。它的核心作用是告诉浏览器：“我这份文件是用HTML5标准写的，请你用标准模式来渲染，不要用老旧的怪异模式。”
这里面有个容易被忽略的坑：如果你省略了这行声明，浏览器会进入Quirks Mode（怪异模式），同一段CSS的渲染结果可能在Chrome和老版本Edge里差出十万八千里。很多新手说“我写的页面在A浏览器里正常、在B浏览器里错位”，排查半天后发现就是少了这一行。所以我的习惯是：无论写多小的测试页，第一行必须是<!DOCTYPE html>。
紧接着是<html>标签，它是整个文档的根元素。注意两点：一是lang属性不能乱省，<html lang="zh-CN">是告诉浏览器、搜索引擎和屏幕阅读器“这个页面使用简体中文”，这直接影响无障碍访问和SEO的收录质量；二是所有其他标签都必须嵌套在<html>...</html>里面，没有例外。
提示：不要把
<html>想得多神秘，它就是整个页面的最外层容器。任何标签跑出这个容器，浏览器要么忽略它，要么自动修正，但修正后的布局往往是乱的。
2.2 head区域里的关键标签：meta、title、link、script
<head>是页面的“幕后信息区”，它里面的内容不会直接显示在页面上，但对页面的正确性和性能至关重要。我见过太多新手把<title>写成属性而不是标签，也有人把<meta>当成普通文本乱放，结果页面顶部露出一串看不懂的代码。
<meta charset="utf-8">这行值得单独拎出来说。UTF-8是目前最通用的字符编码方式，它能同时兼容中英文、日文、韩文和各类特殊符号。如果漏掉这行或写错编码，页面上的中文就会变成一片乱码，也就是俗称的“口口豆腐块”。这算是中文网页开发里出现频率最高的问题，没有之一。
<title>是浏览器标签页上显示的文字，也是搜索引擎结果里的标题。它不属于可见内容，却直接影响用户体验和SEO。我的建议是：每个页面都要写一个独特、精炼的<title>，不要整个网站所有页面都用同一个标题。
<link>和<script>分别用于引入外部CSS文件和JS文件。刚入门时很多人图省事，把样式和脚本直接写在HTML里，这在练手阶段没问题，但项目一旦变大，维护成本会直线上升。我的经验是：从学标签的第一天起就养成“结构、样式、行为分离”的习惯——CSS放.css文件里，JS放.js文件里，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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>你好，世界</h1>
</body>
</html>
2.3 body区域：页面可见内容的唯一容器
<body>里面装的东西，才是用户在浏览器里真正看得见、摸得着的。从文本标题到图片、从链接到表单，全部都要放在这里。一个常见的误区是：有人把<body>里的内容直接写到<html>下面，和<head>平起平坐，这在语法上是不允许的。
还有一个细节值得注意：<body>里可以写注释，<!-- 我是注释 -->。注释不会显示在页面上，但对团队协作和后期维护非常有帮助。我写页面有个习惯：会在每个区块开始前用注释标注“头部导航”“侧边栏”“底部信息”等，这样一个月后回来改代码时，不用从头到尾读一遍也能秒定位。
3. 文字排版核心标签：标题、段落、格式化与超链接
3.1 标题标签h1到h6的正确使用姿势
<h1>到<h6>是六个级别的标题标签，从大到小、从粗到细。很多人以为它们只是“字体大小不同”，实际上它们更重要的身份是页面内容结构的等级标记：<h1>是页面的一级标题，通常一个页面只有一个；<h2>是章节标题；<h3>是章节下面的小节标题，以此类推。
我遇到过不少新手的页面，为了视觉效果把所有文字都塞进<h1>里，再靠CSS强行改小字号。这样做的后果是：页面视觉上没问题，但搜索引擎和读屏软件会以为你的页面全是重点，反而什么都抓不住。标准做法是：结构上用正确的标题层级，样式上的大小交给CSS去控制。
标题标签是块级元素，也就是说每个标题默认独占一行，前后会自动换行。如果你写了<h1>标题</h1><h2>副标题</h2>，它们会自然堆叠成两行，不需要手动加换行标签。这个“块级”的概念后面会反复用到，建议一开始就记住：块级元素占整行，行内元素只占内容宽度。
3.2 段落标签p、换行br和分割线hr
<p>是最常用的段落标签。它的一大特点是：HTML里多个连续空格和换行会被压缩成单个空格。很多新手在代码里敲了一堆回车想换行，预览时却发现文字全挤在一行，就是这个原因。想要真正换行，要么用<p>包成新段落，要么用<br>手动换行。
<br>是换行标签，属于空标签（不需要闭合），写法是<br>或者<br/>。它适合用在确实需要“软换行”的地方，比如地址的换行、诗句的排列。但要注意，它不应该被你拿来制造段落间距——段落间距是CSS的margin属性该干的事。我见过有新手在整个页面上敲了十来个<br>来撑开布局，结果一换屏幕分辨率页面就全乱了。用<br>做间距这件事，能避免就避免。
<hr>是水平分割线标签，用来在视觉上分隔不同区块。在HTML5里它还被赋予了语义含义：表示“主题的转变”。比如某篇文章从一个话题切换到另一个话题，可以用<hr>表示分隔。在页面中显示为一条横线，样式同样能用CSS调整。
3.3 文本格式化标签：strong、em、span和font的取舍
<strong>和<em>分别表示“重要”和“强调”。请注意它们的语义：<strong>代表内容很重要，浏览器默认显示为加粗；<em>代表语气上的强调，浏览器默认显示为斜体。这是HTML5里的规范定义，和<b>、<i>那种纯视觉标签有本质区别。如果只是为了加粗而加粗，用CSS的font-weight即可，不需要动标签。
<span>是纯行内容器，没有默认样式，常用于在文字中圈出一部分来做局部调整。比如你有一句话，想把其中几个字标红，就可以把那些字包在<span>里再给它加CSS类。它和<div>的对比很有意思：<div>是块级容器，负责页面分块；<span>是行内容器，负责行内精细化控制。这两个标签是后期写页面最高频的布局元素，务必理解它们的区别。
<font>标签在老教材里很常见，可以设置字号、颜色和字体，但它在HTML5里已经被废弃了。理由很简单：视觉样式应该由CSS负责，HTML只负责结构和语义。如果你在网上看到用<font>写的代码，建议主动改成<span>加CSS。
3.4 超链接标签a的完整用法
<a>标签是超链接，它的核心属性是href，用来指定链接目标地址。基础写法是<a href="https://example.com">点击访问</a>。除了跳转到外部网站，它还能做很多事：页面内锚点跳转、发送邮件、拨打电话等。
页面内锚点跳转是一个很实用的小技巧。你可以在页面某个位置放一个带有id属性的元素，比如<h2 id="section2">第二章</h2>，然后用<a href="#section2">跳转到第二章</a>实现点击后平滑滚动到对应位置。这比用JS写滚动逻辑简单得多，而且天然兼容性好。
<a>另一个重要属性是target，target="_blank"表示在新标签页打开链接。这里有一个安全细节：加_blank时最好同时加上rel="noopener noreferrer"，否则新打开的页面可以通过window.opener对象反向操作你的原页面，存在一定的安全风险。这是很多教程不会提但实际工作中会遇到的坑。
注意：
<a>是行内元素，它能包裹文字，也能包裹图片、按钮甚至整个区块。但<a>不能嵌套<a>，否则浏览器解析时会自动拆开，导致布局直接崩掉。
4. 媒体与资源标签：图片、音视频与引入路径
4.1 图片标签img的必备属性与图片加载失败处理
<img>是页面中展示图片的标签，它是一个自闭合标签，不需要写结束标签。三个核心属性：src指定图片路径，alt提供图片无法显示时的替代文字，width/height控制显示尺寸。
其中alt属性经常被忽略，但它非常重要：一是在图片加载失败时，浏览器会显示alt文字，用户体验不至于变成一片空白；二是对SEO友好，搜索引擎通过alt了解图片内容；三是对无障碍访问至关重要，屏幕阅读器会朗读alt内容。我给所有图片都写alt，已经成了肌肉记忆。
图片加载失败是一个高频问题，热搜词里也出现了“img标签图片加载失败的”这类搜索。失败的常见原因无非四种：路径写错、文件被移动或删除、文件名大小写不匹配、图片格式浏览器不支持。排查时先用开发者工具（F12）的Network面板看图片资源的请求状态码——404就是路径问题，403就是权限问题，500就是服务器问题，对症下药即可。
还有一种更隐蔽的情况：图片格式本身没问题，但在某些浏览器里不显示。比如WebP格式在部分老浏览器里不支持，或者SVG文件被服务器以错误的MIME类型返回。这时候把图片转成JPEG或PNG格式通常能解决。我给新手的建议是：线上页面尽量用常见的JPEG、PNG、WebP三种格式，特殊格式先在目标浏览器里测试再引入。
html复制<img src="images/cat.jpg" alt="一只橘猫蹲在窗台上" width="640" height="480">
4.2 音视频标签audio和video
HTML5提供了一套原生的音视频播放方案，<audio>和<video>标签的出现，让很长一段时间里“播放视频必须装Flash”的局面成了历史。它们的核心思路一致：把音视频文件丢给浏览器，由浏览器自带播放器来渲染控制条。
<video>常见的属性包括：src指定视频地址、controls显示播放控件、autoplay自动播放（注意大多数浏览器会阻止带声音的自动播放）、loop循环播放、poster指定封面图。还有一个细节：<video>标签内可以写一段兜底文字，当浏览器不支持该标签时显示。这是很实用的降级方案。
音频和视频标签还有一个进阶用法：同时提供多个<source>源文件，浏览器会自动选择它支持的第一个格式。比如视频同时提供MP4和WebM两种格式，老浏览器不支持WebM就自动用MP4，新浏览器则可能优先选择WebM。这种写法比单独指定src属性更健壮。
html复制<video controls width="720" poster="cover.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持视频播放，请更换浏览器后重试。
</video>
4.3 相对路径与绝对路径：让资源找得到
写src或href属性时，路径是绕不开的一关。相对路径是相对于当前文件所在位置去找目标文件。比如当前文件在website目录下，图片在website/images目录下，那么相对路径就是images/cat.jpg。绝对路径则是从根目录或完整网址开始写，比如/images/cat.jpg或https://example.com/images/cat.jpg。
我的经验是：本地开发时优先用相对路径，这样整个项目文件夹拷到别的机器上也不会出问题；部署到线上后，视情况切换为以域名开头的绝对路径。最常见的坑是：HTML文件在pages目录下，图片在images目录下，新手在HTML里直接写images/cat.jpg，结果浏览器按pages/images/cat.jpg去找，自然找不到。解决办法是写../images/cat.jpg，../表示“上一级目录”。
5. 列表与表格：结构化的数据展示
5.1 无序列表ul、有序列表ol与自定义列表dl
列表是网页中高频出现的结构，导航菜单、商品列表、文章目录，底层都是列表标签。无序列表用<ul>包裹，每一项用<li>表示，默认前方显示圆点；有序列表用<ol>包裹，每一项自动编号。两者结构相同：外层是<ul>或<ol>，里面是若干个<li>。
刚入门时有个高频错误：把<li>直接写在<body>下面，不用<ul>或<ol>包裹，或者把<div>直接塞在<ul>和<li>之间。从HTML规范上讲，<ul>和<ol>的直接子元素应该是<li>，中间插了别的元素属于无效结构。现代浏览器大多能容错显示，但如果你后面用JavaScript操作DOM，这种不规范结构会成为各种诡异Bug的温床。
自定义列表是另一种列表形式，外层用<dl>，每一项由<dt>（术语标题）和<dd>（术语描述）组成。它特别适合做图文混排的信息展示，比如商品参数表、词汇表。在移动端页面中，用<dl>来实现“标题在左、内容在右”的列表是一种很干净的方案。
5.2 表格标签table、tr、td、th和colspan/rowspan
表格在网页中的使用场景主要是展示结构化数据：价格对比表、课程表、成绩单、报表等。基本结构有三层：<table>是最外层容器，<tr>是行，<td>是单元格；如果某一行是表头，用<th>表示，默认加粗居中。
这中间有几个容易出错的细节：一是<tr>只能放在<table>或<thead>、<tbody>里面，不能直接放别的元素；二是单元格的数量要统一，如果一行有4个单元格、下一行只有3个，表格列宽就会乱；三是<td>和<th>必须放在<tr>里面，不能单独出现在<table>下。
colspan和rowspan可能是标题里公开提到的高频词。colspan="2"表示这个单元格横向跨2列，rowspan="2"表示纵向跨2行。它们用来实现“合并单元格”的效果，在复杂报表里非常常见。用它们时需要格外小心数据结构，合并后的表格如果单元格总数对不上，页面上会出现错位。我的经验是：画表格先画草图，把行列数量都标好再写代码，能避免大量返工。
html复制<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td colspan="2">总评：优秀</td>
</tr>
</table>
5.3 表格语义化标签：caption、thead、tbody、tfoot
现代HTML里，表格的结构不仅是<table>加<tr>这么简单，还提供了<caption>、<thead>、<tbody>、<tfoot>四个语义化标签。<caption>是表格标题，显示在表格上方；<thead>放表头行，<tbody>放数据行，<tfoot>放汇总行。
这样拆分的意义在于：一是语义清晰，不读代码也能看出哪部分是表头、哪部分是数据；二是方便做样式控制，比如给<thead>里的<th>统一加背景色；三是对打印、分页等场景更友好。虽然新手阶段只用<table>加<tr>也能显示出来，但我建议从一开始就养成用语义化标签的习惯，后面写复杂页面时会感谢自己。
6. 表单与交互标签：收集用户输入的起点
6.1 form表单的整体结构与提交机制
表单是网页和用户交互的最基础载体。<form>标签是表单的最外层容器，两个关键属性：action指定提交数据的地址，method指定提交方式（GET或POST）。
GET和POST的选择是一个常见的入门困惑。简单粗暴的理解是：GET把数据拼在URL后面，能被浏览器缓存和历史记录保留，适合搜索、筛选这类“纯查询”场景；POST把数据放在请求体里，不会暴露在URL上，适合登录、注册、提交订单这类涉及隐私或数据修改的场景。涉及敏感信息一律用POST，这条原则在真实项目中不会有例外。
<form>内部可以包含各种输入控件、按钮和文本说明。一个完整的表单流程是：用户填写内容，点击提交按钮，浏览器把表单数据按照name属性收集起来，打包发给action指定的地址。注意：控件必须设置name属性，否则它的值不会出现在提交数据里。很多新手表单提交后收不到数据，就是漏了name。
6.2 input标签的type类型详解
<input>是表单中使用频率最高的标签。它根据type属性的不同，可以呈现为文本框、密码框、单选框、复选框、按钮等多种形态。我把常用类型整理成一张表，方便对照：
| type值 | 显示效果 | 典型使用场景 |
|---|---|---|
| text | 单行文本框 | 用户名、邮箱、搜索框 |
| password | 密码框（内容打码） | 密码输入 |
| radio | 单选框 | 性别、选项唯一选择 |
| checkbox | 复选框 | 多选爱好、同意协议 |
| 带格式校验的邮箱输入框 | 邮箱注册 | |
| number | 数字输入框（带步进按钮） | 数量、价格 |
| date | 日期选择器 | 生日、预约日期 |
| file | 文件选择按钮 | 上传头像、附件 |
| submit | 提交按钮 | 提交整个表单 |
| reset | 重置按钮 | 清空当前表单 |
| button | 普通按钮 | 配合JS做自定义交互 |
在这些类型里，有几个容易踩的坑：radio要生效，同一组单选框必须有相同的name属性，否则浏览器把它们当成互相独立的选项，用户就能全部选中；checkbox以name相同为一个提交单位，后端接收时拿到的是一个数组；file类型本身只是文件选择按钮，真正的文件上传还需要配合enctype="multipart/form-data"和JS处理。
6.3 其他表单标签：textarea、select、label和button
<textarea>是多行文本输入框，适合留言、评论、个人简介这类需要多行文字的场景。它和<input>的一个明显区别是：<input>是自闭合标签，不能包含默认文字；<textarea>是双标签，标签中间的内容就是默认值。
<select>和<option>组成下拉菜单。<select name="city">是最外层，每个<option value="beijing">北京</option>是一个选项。如果不设置value属性，提交时发送的是<option>标签内的文字；设置了value，发送的就是value值。从数据规范的角度，我建议所有<option>都显式写value，避免后端拿到中英文混杂的数据。
<label>标签是一个经常被忽视但极其实用的标签。它的作用是把一段说明文字和某个表单控件关联起来：用户点击这段文字时，就相当于点击了控件本身。关联方式有两种：一是用for属性指向控件的id，即<label for="username">用户名</label><input id="username" name="username">；二是直接把控件包在<label>内部。这个细节对手机端体验尤其重要，因为手指点击的命中范围大了，用户操作就方便了。
<button>是按钮标签，它有几种类型需要区分：type="submit"提交表单、type="reset"重置表单、type="button"普通按钮。不写type属性的<button>默认是submit类型，这是个很容易中招的坑——页面里放了一个普通按钮，点击后页面突然刷新，排查半天发现是type没写。
7. 结构化布局与语义化标签：让页面不止是“好看”
7.1 块级元素div与行内元素span的搭配思路
<div>可能是页面开发中用得最多的标签，它是一个无语义的块级容器。什么叫“无语义”？就是它本身不代表“标题”“段落”“导航”等任何含义，纯粹就是一块用来分区的容器。正因为中立，它成了CSS布局的主力：你想把页面的某一块区域变红、变宽、变高，用<div>把它包起来，再加CSS即可。
<span>的定位则完全不同。它是行内元素，不会打断文本的流动。举例来说，“你有一句话<p>今天天气不错</p>，想把‘不错’两个字标黄”，处理方式是<p>今天天气<span>不错</span></p>，然后针对span加样式。它不会像<div>一样把一句话截成两段换行，这是行内元素的特性。
在实际布局中，<div>和<span>的组合几乎能搭建出任意页面结构。不过我得提醒一句：无脑用<div>堆结构虽然能实现效果，但会让代码变成“div坟场”——满屏的<div>嵌套，连作者自己过段时间都分不清哪个区域对应页面的哪个部分。这也是语义化标签出现的动机。
7.2 HTML5语义化标签：header、nav、main、section、article、footer
HTML5提出了一组有具体含义的语义化标签，用来替代一部分<div>：
<header>：页面的页眉，通常包含站名、导航等。<nav>：导航区域。<main>：页面的主体内容区，一个页面只应有一个。<section>：文档中的章节或区域。<article>：独立的文章或内容块。<footer>：页脚，通常包含版权、联系信息。
这些标签有两大价值：一是代码可读性大幅提升，看标签名字就知道页面结构；二是有利于SEO和无障碍支持——浏览器和搜索引擎能更准确地理解页面每一块的内容性质。举个例子：搜索引擎知道<nav>里面是导航链接，在解析页面权重时会更侧重<main>和<article>里的内容，而不是把导航里的链接全部当正文。
我给初学者的建议是：写新页面时先用语义化标签搭骨架，实在找不到合适的标签再退回到<div>。比如页面布局中有“侧边栏”， HTML5没有专门的<sidebar>标签，常见做法还是用<aside>或普通<div>。不要为了语义化而造出不存在的标签，这一点在实际工作中很重要。
html复制<body>
<header>
<h1>我的技术博客</h1>
<nav>
<a href="/">首页</a>
<a href="/about">关于</a>
</nav>
</header>
<main>
<article>
<h2>HTML标签入门指南</h2>
<p>本文面向零基础读者...</p>
</article>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
7.3 注释与代码规范：写给未来的自己
HTML里用<!-- 注释内容 -->来写注释，它不会显示在页面上。我见过有人完全不用注释，也见过有人把整段代码注释掉来调试，这都没问题。问题在于：项目一旦复杂起来，一周后你再看自己写的代码，如果没有注释，你可能需要花大量时间重新“读代码、猜意图”。
所以我的习惯是：在HTML文件的每个主要区块前写一行注释，说清楚这个区块是干什么的。如果某个结构的写法比较绕（比如嵌套了四五层列表），也会在注释里简单说明为什么要这么写。这听上去像是“额外工作”，实际上是在给未来的自己省时间。
还有一条规范性的建议：标签的嵌套必须严格闭合。<div><p>文字</div></p>这种交叉嵌套写法在浏览器里也许不会报错，但浏览器的自动修复规则并不总是符合你的预期，最终渲染出来的结果可能完全不是你想要的。写代码时保持“先开后闭、顺序闭合”的习惯，能避开大量莫名其妙的布局问题。
8. 高频问题排查：我见过的那些“看着正常却跑不通”的页面
8.1 中文乱码：九成是charset没写对
中文乱码是中文网页新手遇到的最多的问题。页面在编辑器里看着正常，一用浏览器打开就变成乱码。最常见的原因就是<meta charset="utf-8">没写或写到了<title>后面。<meta charset>应该在<head>里尽早出现，这样浏览器能在解析标题之前就知道用什么编码来读取文档。
另一个容易忽略的原因是：文件本身的编码不对。用记事本另存的HTML文件，默认可能是ANSI编码（在中文Windows下即GBK），虽然文件里写了<meta charset="utf-8">，但浏览器按UTF-8解读GBK编码的文件，照样乱码。解决办法是：在编辑器（VS Code、Sublime等）里把文件编码显式切换为UTF-8再保存。
8.2 图片不显示：路径问题全排查指南
图片不显示，可能的原因有很多，最经典的是路径错误。以这张图为例：你的HTML文件在project/pages/index.html，图片在project/images/pic.jpg。从index.html出发去images目录，要先回退一级再进入，所以路径应该是../images/pic.jpg。如果写images/pic.jpg，浏览器会从pages目录下找images子目录，自然找不到。
路径确认没问题后，再看文件名。Windows下文件名不区分大小写，但Linux服务器严格区分。本地开发时Cat.jpg和cat.jpg都能打开，部署到Linux服务器后就可能只认其中一个。这是跨平台开发中非常经典的一类坑。建议从开发第一天起统一使用小写文件名，用连字符-分隔单词，比如my-cat-photo.jpg，省掉后续一堆麻烦。
8.3 标签嵌套错误：浏览器“好心办坏事”
浏览器对HTML的错误有很强的容错能力，它能自动修正很多不规范写法。但正因为“能自动修正”，反而埋了很多坑：你写的结构和浏览器实际修复后的结构不一致，最后展示出来的页面和你预期的千差万别。
举一个最常见的例子：<ul>里直接包裹<div>。按照规范，<ul>的直接子元素只能是<li>，如果你写了<ul><div>...</div></ul>，浏览器解析时会把<div>“踢”到<ul>外面。这时候你给<ul>设置的背景色、边框等样式，根本作用不到<div>的内容上。排查这类问题的一个高效方法是：在浏览器里按F12打开开发者工具，查看Elements面板中实际解析出来的DOM结构，一眼就能看出浏览器帮你调整了什么。
8.4 CSS或JS不生效：先查引用路径和顺序
“CSS写了但页面没变化”是另一类高频问题。排查思路通常按顺序来：第一，<link>的href路径是否正确；第二，CSS文件是否真的被加载（浏览器的Network面板里看CSS请求是否200）；第三，选择器的优先级是否被其他样式覆盖；第四，CSS语法是否有拼写错误（中文输入法写出来的分号，是最隐蔽的Bug之一）。
JS不生效的排查思路类似：第一，<script>的src是否正确；第二，脚本是否在DOM加载前执行了——如果操作元素的JS代码写在<head>里，而它要操作的元素还在后面没解析出来，就会报“找不到元素”的错误。解决方法是把<script>放在<body>末尾，或者使用DOMContentLoaded事件。
9. 写给新手的几条实用心得
分享几个我实际带新人时反复强调的经验。第一，不要背标签，要写页面。给自己定一个小目标：做一个包含标题、段落、图片、链接、列表、表格、表单的个人介绍页，做完这个页面，你就已经掌握HTML里九成的高频标签了。
第二，刻意练习语义化思维。每写一个<div>之前，先问自己：这个区域是不是可以用<header>、<nav>、<article>、<footer>来表达？久而久之，写出来的页面结构会越来越清晰，也为后面的CSS布局和JS交互打下扎实的基础。
第三，善用浏览器开发者工具。几乎所有和HTML相关的问题都能在Elements面板里找到线索。看到不理解的显示结果，第一反应不是去搜索引擎问“为什么”，而是打开开发者工具看一下实际解析出来的结构，往往一眼就明白了。
第四，保留犯错笔记。我在初学阶段会把自己的错误保存下来，比如“忘记闭合</li>导致菜单样式错乱”“<input>没有设置name导致表单提交为空”。这些错误案例比任何教程都深刻，因为你是亲手踩过的。每次写新页面时翻一翻，能有效避免重蹈覆辙。
HTML标签本身不算难，但它是一切网页开发的基石。把这层地基打牢，后面学CSS、JavaScript时会有一种“脚下有根”的踏实感。别急着追求炫酷效果，沉下心来把一个一个标签用明白，你走的每一步都算数。