刚接触前端的朋友肯定深有体会，在学完 HTML 的基本结构和几个常用标签之后，第三天通常会进入一个比较微妙的阶段：标签开始变多了，有的长得像，功能却不一样；有的看着简单，一用就出错。这天的学习笔记记录了标题等级、强调与重要性标签、注释标签、块级元素和内联元素、换行标签这些内容，看起来都是基础中的基础，但恰恰是这些基础，决定了后面学 CSS 布局和语义化的时候是顺畅还是别扭。这篇文章就围绕这份学习笔记，把每个知识点掰开揉碎讲清楚，配上我平时带新人时反复强调的避坑经验，希望能给正在学 HTML 的你一些实在的参考。
1. 先把这些标签放在整个前端学习路径里看
1.1 为什么第三天的内容这么“碎”
很多初学者学到第三天，会觉得 HTML 怎么越学越散，一会儿标题、一会儿注释、一会儿又冒出来块级和内联的概念。其实这个时候你已经从“知道有 HTML 这个东西”进入“开始理解标签的脾气”的阶段了。
前两天的内容通常是：HTML 是什么、基本结构（html、head、body）、段落标签 p、超链接 a、图片 img 这些。到了第三天，学的这批标签有一个共同点：它们都是“文本层面”和“结构层面”的基础构件。标题负责搭建信息层级，强调和重要性标签负责表达语气，注释负责给代码留暗号，块级和内联是理解布局的起点，换行标签则解决单纯的换行需求。
放在整个知识体系里看，这批标签不漂亮、不炫酷，但它们是你开始“组织内容”时最先要用到的工具。就像学写作要先认识标点符号一样，标题、强调、注释这些就是 HTML 里的标点。这个阶段如果能把每个标签的使用场景和边界摸清楚，后面学 CSS 的时候，很多“为什么这个元素宽度不生效”“为什么 div 会换行而 span 不会”的问题，在一开始就已经有答案了。
1.2 标签背后的两个核心思维：语义化和文档流
这天的笔记表面上是列标签，实际上藏着两个非常重要的思维模型。
第一个是语义化。HTML 标签不只是让浏览器显示内容，更是让内容的“含义”被识别。标题标签里的 h1 不只是一号大字的代名词，它代表“页面最重要的标题”；strong 不只是加粗，它代表“这里的内容很重要”。浏览器、搜索引擎、屏幕阅读器都是靠标签来理解页面结构的。以后你做 SEO、做无障碍优化，靠的就是现在这些标签用得对不对。
第二个是文档流。块级元素从上往下堆，内联元素从左往右排，这个朴素的规则就是文档流的雏形。理解文档流是理解 CSS 布局的前提。很多新手写 CSS 的时候发现元素不听使唤，往上追根溯源，往往就是没搞清这个元素到底是块级还是内联。
所以第三天的内容不是 “零碎知识点集合”，而是在帮你建立“用标签表达结构”和“理解元素默认行为”这两大底层能力。别急着追求花哨的效果，地基打得稳，后面才盖得起楼。
1.3 这天之后你应该达到什么水平
我一般会给学习第三天的人一个自测标准：拿到一段没有任何样式的纯文本，能不能在不使用 CSS 的情况下，靠标签把它的层级、语气、结构表达清楚；看到一个标签，能不能立刻判断它是块级还是内联；文档里想留备注，知道注释写在哪儿不会被渲染出来。这三点做到，第三天的目标就超额完成了。
这个标准不高，但很关键。因为 HTML 的标签数量虽然不算少，真正常用的其实就那二三十个。与其每个标签都浅尝辄止，不如把最核心的这批标签吃透，知道它们为什么存在，知道它们和同类标签的边界在哪里。接下来写页面，你就不再是“背标签”，而是“用标签表达内容”了。
2. 标签逐个拆解：不只是“能用”，而是“用对”
2.1 标题标签 h1~h6：别再把它当“字号调节器”
标题标签一共六个：h1、h2、h3、h4、h5、h6。很多初学者最喜欢干的一件事，是用标题标签来调整文字大小——觉得页面上的字太小，就把 p 换成一个 h3；觉得还不够大，就再换 h2。这是非常典型的新手误区。
标题标签的核心价值是表达内容的层级，而不是控制字号。h1 是页面的主标题，一个页面通常只能有一个 h1 作为核心主题的标识；h2 是主要板块的标题；h3 是 h2 之下的小节标题；以此类推。搜索引擎和屏幕阅读器会把 h1 作为页面的核心入口来抓取，如果一个页面有七八个 h1，或者从 h1 直接跳到 h5，信息结构就是混乱的。
我平时检查一下午要处理很多学生作业，只看标题层级就知道这个人有没有真正理解页面骨架。合理的方式是像写论文提纲一样，一级标题下面挂二级，二级下面挂三级，不跳级、不回头。字号的问题留给 CSS 去解决——你在 HTML 里只需明确“这是几级标题”，样式完全可以统一控制。等你学到 CSS 的 font-size，就知道了：标题标签自带的那点字号差别，你完全可以覆盖掉，真正重要的是语义。
2.2 强调与重要性标签：strong、em、b、i，到底用哪个
这是第三天最容易让人纠结的一组标签。先看现象：strong 默认是粗体，em 默认是斜体，b 默认也是粗体，i 默认也是斜体。如果不了解背景，你会觉得这组标签就是制造混乱的。
但它们的定位其实完全不同。从 HTML5 的语义标准来看，strong 代表“内容非常重要”，em 代表“语气上的强调”，b 代表“仅仅是视觉上的加粗但无额外语义”，i 代表“仅仅是视觉上的斜体，比如外文术语、书名、专业名词”。换句话说，strong 和 em 是在给内容附加语气和权重，属于语义标签；b 和 i 更像是纯粹的样式遗存，能不用就尽量不用。
实际使用里我会这样建议：
- 想表达“特别注意”“警告”“关键步骤”，用 strong。
- 想表达“这句话要重读”“语调加强”，用 em。
- 只是想让某段文字视觉上加粗或斜体，并且不想带任何语义，那最好别用 b 和 i，直接交给 CSS 的 font-weight 和 font-style。
还有一个容易忽略的点：strong 可以嵌套在 em 里，em 也可以嵌套在 strong 里，用来表达“双重的强调”。比如一句既需要重读又很重要的提示，你可以写成<strong><em>注意：保存前请确认</em></strong>。但这属于比较精细的用法，初学阶段能分清 strong 和 em 的差别就够了。
2.3 注释标签：代码里的暗号，但别乱写
注释标签的写法是<!-- 注释内容 -->，它不会在浏览器页面上显示。这看起来非常简单，实际使用时却有不少讲究。
注释最大的价值，是帮你记录“当时的想法”。很多项目隔一个月再回头看，当初为什么这么写完全想不起来。在合适的位置加一句注释，比如“这里把查询结果循环输出，后续如果要加缓存，从这附近改造”，等于是给未来的自己留了张便签。
但注释也有很现实的坑。第一，注释里不要写账号密码、真实姓名、内部接口地址这些敏感信息。注释虽然默认不在页面显示，但它是源代码的一部分，会随着代码分发，只要有人拿到源码，注释内容一览无余。第二，重要注释不要放在很长的代码块的末尾，最好放在代码块开始的位置，因为在实际阅读时很少有人会翻到末尾。第三，临时调试用的注释要及时清理，否则代码里全是<!-- 这段先注释掉看看效果 -->这种残留，久而久之连作者本人都搞不清哪些是废弃代码。
还有一个新手容易踩的小问题：注释标签的标记符号用的是两个连字符--，这个双连字符在标签内部不能随便出现，而且注释不能嵌套注释。也就是说，你无法用一个注释包住另一个注释然后一起生效。如果确实需要隐藏一大段代码，把它整段放进一个注释里就行，但要先确保这段代码内部没有其他注释。
2.4 换行标签 br：是朋友，也是“背锅侠”
br 是 break 的缩写，作用是强制换行。它是个空标签，不需要结束标签，写成<br>就行（早期的 XHTML 风格会写成<br />，现在 HTML5 里两种写法都接受，但我推荐直接写<br>，更简洁）。
br 很直观，但它的正确用法比很多人想象中窄。br 适合用在“在同一语境里需要打断但没有段落层级变化”的地方，比如：
- 一行地址里：
某市某路某号<br>1 栋 301 室 - 一首诗或歌词的每一行
- 一段文字里需要精确控制换行位置的场景
很多新手会把“想让段落之间分开”和“换行”混为一谈。段落之间要留空、要分开，应该用多个 p 标签，而不是在一段很长的文本里靠一堆 br 硬撑。举个例子，一篇文章明明有四个自然段，有人会这样写：第一段的全部文字接着<br><br>再接第二段，这在视觉上的确产生了换行和空白，但在语义上，浏览器和搜索引擎只会认为这是一个孤零零的段落，里面的换行只是装饰。更严重的是，这种做法会给后续的 CSS 控制带来很多麻烦。正确的做法就是老老实实开四个 p 标签。
用 br 还有一个可读性问题：它是不可见的。你写一串 br 在代码里，别人看源码时根本不知道这里为什么要换三次行。所以如果某个场景需要用多个 br，你几乎可以断定它应该被重构了——要么拆成段落，要么用 CSS 的 margin 来控制间距，而不是靠空行硬怼。
2.5 块级元素和内联元素：理解“换不换行”和“能不能并排”的底层规则
块级元素和内联元素，可以说是这天的内容里最抽象也最核心的概念。先给一个最直白的理解方式：块级元素在页面上独占一行，后面的内容会被挤到下一行，就像一块一块的砖，从页面顶部往下堆；内联元素则不会独占一行，它和相邻的内联元素在一行里从左到右排列，像一句话里的词。
常见的块级元素有：div、p、h1~h6、ul、ol、li、table、form、section、article、header、footer 等。常见的内联元素有：span、a、img、strong、em、br、input、label、button 等。注意 img 和 input 虽然常见，但它们在默认情况下是内联元素（准确说是可替换内联元素），这一点很多人记错，导致后面设置宽高时出现各种困惑。
块级和内联的差异不只是换不换行，还影响着很多布局属性的表现。块级元素可以设置 width、height、margin 上下左右都生效；内联元素设置宽高通常无效，左右 margin 和 padding 有效，上下 margin 和 padding 会“看起来生效”但不会把周围的元素推开（实际很混乱）。这正是很多新手写完 CSS 后发现“明明设了宽度怎么没反应”“上下间距怎么加不上”的根源。
需要特别补充的是：HTML5 的规范里已经不再严格区分“块级”和“内联”，而是引入了“内容类别”的概念，比如“流式内容”“短语内容”等。不过在现实的前端开发中，“块级”“内联”这两个词依然是日常交流最常用的说法。我的建议是：先把这个经典模型掌握牢，它有略显过时的成分，但能帮你解释九成以上的布局问题。等之后学到 CSS 的 display 属性，你会发现块级和内联之间的边界可以通过 display 自由切换：设置display: block、display: inline、display: inline-block就能改变元素的表现。理解了默认行为，你才知道自己在改什么。
2.6 块级和内联的嵌套规则：谁该在外面，谁该在里面
嵌套规则也是这天笔记里容易被忽略的细节。大致规则是：块级元素可以包含内联元素和部分块级元素；内联元素不能包含块级元素；p 标签是一个特殊情况——p 里不能放 div、h1~h6、ul 等块级元素。
举个例子，<p><div>内容</div></p>是不合法的做法，因为 p 的“内容模型”要求它里面只能放短语内容。虽然浏览器在解析容错时会给你“兜底”，但很可能把标签结构纠正得乱七八糟，你以为是父子关系，浏览器已经把它们变成兄弟关系了。
很多新手一开始不理解为什么要有这些限制，觉得“浏览器都能显示啊”。这是因为现代浏览器修复能力太强，但这并不意味着你写的代码没问题。一旦涉及 JavaScript 的 DOM 操作，或者 CSS 选择器依赖结构，错误的嵌套会导致你拿到完全不符合预期的节点结构和样式表现。理解了嵌套规则，写出来的 HTML 才具备“可预测性”。
3. 实操演示：写一个完整的 day-3 练习页面
3.1 页面目标与设计思路
光说不练没有用。我设计了一个小练习页面，把这一天学到的知识点全部用上，同时避开那些常见错误。这就像一个迷你场景：某书店网站想在首页放一个促销公告，包含主标题、板块标题、强调文字、地址信息、和一段注释。我们不用任何 CSS，只用 HTML 就把页面的语义结构搭出来。
设计思路是：先定层级，再定语气，最后处理换行。层级上用 h1 代表页面主标题，用 h2 代表板块标题；语气上用 strong 标记重要日期和促销力度，用 em 标记语气强调部分；地址和活动时间用 br 控制换行；代码结构里用注释说明各区块的用途。
3.2 完整代码与逐行说明
以下是我写的示例代码。建议你照着敲一遍，然后打开浏览器查看效果，再用开发者工具（F12）对比源码和渲染结果。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>书店促销公告</title> </head> <body> <!-- 这是整个页面的主标题区域，后续如果要替换活动名称，只改这里即可 --> <h1>周末书房特惠</h1> <!-- 主要促销信息：h2 是页面的板块标题 --> <h2>全场图书 8 折起</h2> <p> 本周六至周日，店内所有文学类图书统一 8 折， <strong>会员再享额外 9 折</strong>。 <em>数量有限，售完即止。</em> </p> <!-- 活动地址和信息，用 br 进行单行内的换行 --> <p> 活动地址：某市书城路 18 号二楼阅读区<br> 活动时间：上午 10:00 - 晚上 21:00 </p> <!-- 热门榜单区，这里是 h3，作为 h2 的下级分类 --> <h2>本周热门推荐</h2> <h3>文学小说</h3> <p>本月最受关注的悬疑小说《湖畔迷案》已补货上架。</p> <h3>人文社科</h3> <p>《认知的边界》连续三周进入畅销榜前三。</p> <!-- 注意：这段注释只是给开发人员的提醒，不会在页面展示 --> <!-- TODO: 上线前确认是否有出版社提供赠品 --> </body> </html>这段代码里值得注意的细节有几个。第一，页面只有一个 h1，板块用 h2，h2 下面的细分用 h3，层级是递进的。第二，strong 和 em 被用在段落内部，修饰的是短语，而不是段落本身。第三，br 被用来在同一个地址块内换行，而不是用来撑开段落间距。第四，注释都放在相关代码的上面，而不是堆在页脚。这些细节在写的时候如果能下意识注意到，说明你已经有了语义化意识。
3.3 在浏览器里验证：开发者工具怎么观察块级与内联
写完代码后，我强烈建议你做一个小实验：在浏览器里打开这个页面，按下 F12 打开开发者工具，切到 Elements 面板，然后分别选中一个 p 标签和一个 strong 标签。你会看到 p 标签占据了整行的宽度，即使内容只有几个字，它也会把剩余空间“占住”；而 strong 标签只包裹它内部的文字，宽度由内容撑开。这个视觉差异就是块级和内联最直观的区别。
你还可以体验一下“浏览器容错”：故意把一段文字写在 body 里，不套任何标签，浏览器也会帮你把它显示出来。但如果你在 Elements 面板里看结构，会发现浏览器可能已经暗自帮你生成了某些标签结构。这就是我前面说的“浏览器很能忍，你是侥幸过关”。实际写代码不能依赖这种容错，因为不同浏览器的容错策略不完全一致，同一段“错误代码”在不同浏览器里的结构解析可能不同，这会给调试带来很大的不确定性。
借助开发者工具反向验证，是新手阶段特别高效的学习方法。看到一个页面布局跟你想的不一样，别急着改样式，先看看结构，看看这个元素默认的 display 属性是什么，再判断问题出在标签上还是样式上。学会用这个思路，很多前端问题会瞬间变得清晰。
4. 新手最容易踩的 6 个坑（附排查思路）
4.1 标题层级随意跳级：h1 后面直接跟 h4
有些初学者为了视觉上调整字号，会在 h1 后面直接使用 h4 当小标题。这会让页面的内容大纲出现断档，搜索引擎在提取页面结构时，会感到困惑：为什么一级标题下面是四级标题？中间的两级去哪里了？
正确思路：标题等级应该像写大纲，逐级使用。如果你觉得 h3 的字号偏大或偏小，不要跳级，也别去换别的标题标签，等学到 CSS 后直接用 font-size 调整即可。在写 HTML 的阶段，你只需负责结构正确，美观交给 CSS。
4.2 在 p 标签里嵌套 div 或标题
前面说过，p 的语义是一个段落，它不能嵌套块级元素。很多新手因为想要“一段文字里包含一个独立的小区块”，就把 div 放进了 p。这在浏览器里虽然能显示，但结构会被浏览器强行解构，导致你预期的 DOM 结构不存在。
实际排查方法：如果你用 JavaScript 去获取某个元素时，发现按照父级关系访问不到目标元素，可以优先检查 HTML 嵌套是否合法。我自己就遇到过类似的问题，写了个事件委托，怎么都不触发，后来发现是 p 标签内嵌 div 被浏览器重新解析成了兄弟元素。按照规范写结构，从源头避免这种问题是最省心的。
4.3 用 br 来制造段落间距
这个问题前面详细说过，我再补充一个判断标准：如果你的代码里连续出现两个以上的 br，比如<br><br><br>，那几乎可以断定这段代码需要重构。多个 br 想表达的往往是“这里要一段较大的间距”，但正确做法是拆分成独立段落，用 CSS 的 margin 或 padding 控制间距。
当然我也明白，初学阶段还没学 CSS，只能拿 br 硬撑视觉间距。那我的建议是：在没学 CSS 之前，宁可让段落紧挨密排，也不要在结构里塞一堆 br。因为等你一到 CSS 阶段，第一件事就是回头清理这些 br，纯属返工。
4.4 注释泄露敏感信息
这一点值得单独拎出来强调。我见过有人把数据库连接串、服务器地址、甚至临时密码写在注释里，然后整个代码仓库被分享出去，酿成事故。注释虽然默认不渲染在页面上，但它完全是源码的一部分，对任何能接触代码的人来说都透明可见。
经验之谈：注释里只写与代码逻辑相关的说明，比如“这个函数的作用”“这段逻辑的边界条件”，不写任何账号密码、真实姓名、具体员工工号。如果是公共项目，还应该注意注释的措辞，不要写主观伤人的评价，因为你今天的代码注释，是明天同事要读的文档。
4.5 对内联元素设置宽高无效产生困惑
学完块级和内联概念后，很多新手开始动手“调样式”，于是第一个撞上的坑就来了：对一个 span 设置width: 200px，发现在浏览器里根本不生效，或者对一个 a 标签设置 margin 上下，发现它不把旁边的元素推开。
问题根源就在于 it: span 和 a 是内联元素，宽度高度由内容决定，上下 margin 不会参与文档流布局。想要给它们设置宽高、或者让左右上下 margin 都正常，需要先通过 CSS 把它们改成display: inline-block或display: block。如果现在还没学到 CSS，也请不要慌，你能在第二天第三天就意识到“为什么内联元素的宽度不受控制”，这已经比很多人摸爬滚打几个月才明白要强得多。
4.6 标签闭合不正：交叉嵌套
这是新手写代码时常见的手滑错误，比如：
<p>这是<strong>加粗的文字</p></strong>这个写法是交叉嵌套，标签没有正确闭合。正确的写法是：
<p>这是<strong>加粗的文字</strong></p>千万别小看闭合顺序的问题。浏览器对交叉嵌套的纠错能力有限，不同的浏览器解析结果可能不一致。这导致同一个网页在你本地的浏览器里好好的，换台电脑换个浏览器就出现格式错乱。排查这类问题最高效的办法是利用支持错误提示的编辑器或校验工具，它会直接给你标出结束标签不匹配的位置。
5. 一些长期有用的习惯：这天的内容还能怎么用得更好
5.1 日常组织 HTML 的方式：先结构，后细节
经过这一天的学习，你应该形成一个习惯：拿到一个页面的文案，先不要急着去写任何样式相关的内容，而是先用标签把内容的骨架搭出来。主标题是什么？分几个板块？每个板块下面有哪些要点？哪些内容值得强调？这个过程很像写文章的提纲。
然后再考虑细节：哪里需要换行，哪里需要注释。骨架搭对了，后面的细节都是锦上添花。反过来，如果一开始就在标签里纠结样式和换行，写到后面很容易把自己的结构搞得一团糟。
5.2 通过“关掉 CSS”来检查 HTML 质量
这里教你一个特别实用的检验方法：写好的页面，在浏览器里把 CSS 全部去掉，再去看这个页面。如果结构依然清晰、表达明确，说明你的 HTML 写得合格。反之，如果去掉了样式页面就像一盘散沙，说明你的 HTML 结构本身是有问题的——大概率是把样式和结构混为一谈了。
我平时做页面评审时会专门做这个检查，它能非常客观地反映出一个人的语义化水平。没有 CSS 的情况下，如果标题还是标题，段落还是段落，强调依然一眼可见，那你的 HTML 就是立得住的。
5.3 接下里的学习衔接：display 的思维准备
这天的内容有一个重要的伏笔：CSS 的 display 属性。等你学到这里，你会看到block、inline、inline-block、flex、grid这些值。到那时候，你再回看今天关于块级和内联的笔记，会理解更深：原来块级和内联只是元素的默认表现，而在 CSS 的世界里，你可以改变它们。
所以这一天的笔记，建议你妥善保存。很多前端开发者走到很后面会突然回来补这里的课，因为布局问题说到底是对元素盒子行为理解不到位。趁着今天刚刚接触，把“块级”“内联”“嵌套”“语义”这几个概念在脑子里钉牢，以后学什么都快。
6. 我踩过的一些坑，和给你的一些建议
6.1 常见问题速查表
我在教新人的过程中，经常会从他们代码里看到下面这些问题。这里整理成一张速查表，方便你对照自查：
| 现象 | 可能原因 | 正确做法 |
|---|---|---|
页面上一堆空行，但代码里全是<br><br> | 用 br 制造段落间距 | 拆分 p 标签，后续用 CSS margin 控制间距 |
| 标题在页面上显示很大，但搜索引擎不认 | 用 CSS 直觉替代了标题语义 | 按层级使用 h1~h6，字号交给 CSS |
| span 设置 width 无效 | span 是内联元素，宽高由内容决定 | 改成 display: inline-block 或 block |
| 一段包含 div 的 p 结构混乱 | p 里不能套块级元素 | 把 div 移到 p 外面，或用 span 代替 |
| 注释里有账号密码，被同事看到了 | 注释是源码的一部分，会随代码分发 | 注释内只写逻辑说明，敏感信息放安全环境变量 |
| 交叉嵌套标签导致换电脑结构错乱 | 标签闭合顺序不对 | 严格按“先开先闭”的规范写闭合标签 |
这张表你可以截图保存起来。等你以后写页面遇到类似问题，直接在表里找对应行，能帮你少走很多弯路。
6.2 给初学者的练习思路：多写多拆
最后说点掏心窝的话。HTML 看起来简单，但它恰恰是很多人学前端时最不重视的部分。总有人觉得“HTML 不就是几个标签嘛，真正难的是 JavaScript”。这个想法会让自己留下很多隐患。我不否认 JavaScript 的复杂度远高于 HTML，但 HTML 是文档的骨架，骨架歪了，优化体验、搜索引擎收录、无障碍适配都会受影响。基础标签用得好的人，往往在团队里的代码评审加分不少。
练习思路我给三个方向。第一个方向：找一篇你喜欢的文章，把它的标题、段落、重点、引用、列表全部用标签结构化，做成一个干净的 HTML 文档。第二个方向：看一个知名网站的页面，用 F12 把它的标题层级和主要语义标签画出来，分析作者为什么这样安排。第三个方向：把你之前写过的练习页面拿出来，重新用语义化标准改一遍，体会一下“从能用变成规范”的过程。
6.3 最后分享一个小技巧
每次写完 HTML，养成一个习惯：按下 F12，把鼠标放在元素上，看看 Elements 面板里显示的 DOM 结构和你在代码里写的结构是否一致。如果发现不一致，比如浏览器悄悄补了标签、调整了嵌套，说明你的 HTML 有需要修正的地方。这个“结构体检”的习惯，越早养成，越能帮你避开那些表面上不起眼、实际特别影响后续开发的问题。
说实话，day-3 的这批标签，是我在带人过程中反复强调最多的内容之一。很多写了几年代码的开发者在复盘时才发现，自己当年就是没认真对待这些最基础的标签，导致布局、语义和兼容性方面的知识一直有盲区。希望这篇学习笔记的解读，能帮你把这两个知识点真正内化成自己的东西。等你学到后面回过头看，一定会感谢现在认真搞懂这些细节的自己。
