HTML 基础（一）

本页对应 HTML 基础，共 8 段视频，约 1 小时 10 分。

学习目标

1. 能够独立新建 .html 文件，并使用 VS Code 输入英文 ! 生成 HTML5 骨架，准确指出 html、head、title、body 的位置与作用。
2. 能够正确书写开始标签、结束标签和单标签，说明标签命名小写、结束标签多斜杠、内容写在标签中间等语法规则。
3. 能够判断标签之间的父子（嵌套）关系和兄弟（并列）关系，并按父子缩进两个空格、兄弟对齐的格式编写代码。
4. 能够使用 HTML 注释语法及 Ctrl + / 快捷键添加注释，并说明注释仅供程序员阅读、不会在浏览器页面中显示。
5. 能够使用 h1–h6 编写分级标题，说明标题加粗、字号递减、独占一行及 h1 通常只使用一次的特点。
6. 能够综合使用标题、段落 p、水平线 hr、换行 br 完成“淄博烧烤”页面，并区分 p 与 br 在换行和间距上的显示差异。

知识点

本节目标与网页组成

为什么需要： 第一天学习 HTML，先要知道网页不是“画”出来的，而是用标签把文字、图片、链接、音视频等内容组织起来。今日目标是掌握标签基本语法，最终能独立布局文章页。

怎么想： 把网页看成由若干内容块组成：标题、段落、图片、链接、音视频等。HTML 的职责是给这些内容“打标记”，告诉浏览器这是什么、从哪里开始、到哪里结束。

怎么做： 先认识标签语法，再练排版标签，最后做综合案例。本节核心技术点包括网页组成、排版标签、多媒体标签及属性，以及“个人简介”“Vue 简介”两个文章页案例。

易错点： 不要把 HTML 当成普通文字排版工具；浏览器只认标签，代码里直接敲回车和空格通常不会按预期显示。

HTML是什么：超文本与标记

为什么需要： 理解概念后，才知道为什么学 HTML 主要是学标签。

怎么想： HTML 是 HyperText Markup Language，中文叫“超文本标记语言”。“超文本”可简单理解为链接，能从一个页面跳到另一个页面；“标记”就是标签，用尖括号把内容包起来。

怎么做： 例如要让“Vue.js”加粗，就用 strong 标签包住文字：

<strong>Vue.js</strong>

开始标签是 <strong>，结束标签是 </strong>，结束标签比开始标签多一个斜杠。标签名一般统一小写。

易错点： HTML 里使用的是尖括号 <>，不是大括号、中括号；结束标签不能漏斜杠；需要加粗的文字要放在开始和结束标签中间。

HTML骨架与标签关系

为什么需要： 每个 HTML 页面都需要基本骨架，内容要写到正确位置，否则页面结构混乱。

怎么想： 把网页看成人：html 是整体，head 是头部，body 是身体，title 是网页标题，放在 head 里面。VS Code 中输入英文 !，按回车或 Tab 可快速生成骨架。

怎么做：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>第一个网页</title>
</head>
<body>
  很开心，马上月薪过万了
</body>
</html>

标签关系主要两种：父子（嵌套）和兄弟（并列）。父子关系子标签缩进两个空格；兄弟关系对齐。

易错点： 内容要写到 body 里；title 要放在 head 里；嵌套必须完整包住，不能穿插；生成骨架要用英文叹号，中文叹号无效。

注释

为什么需要： 注释用于解释代码，方便自己回顾和同事协作，但不会显示在页面中。

怎么想： 注释是给程序员看的，不是给浏览器页面看的。

怎么做：

<!-- 这是注释，页面中不显示 -->

快捷键是 Ctrl + /。

易错点： 注释不会在浏览器页面显示；不要用注释代替真正的内容标签；快捷键要在英文输入状态下使用。

排版标签：标题、段落、换行、水平线

为什么需要： 文章页需要层级清晰的标题、分段、换行和分隔线。

怎么想： 标题用 h1 到 h6，一级最大，六级最小；段落用 p；换行用 br；水平线用 hr。br 和 hr 是单标签。

怎么做：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>

<p>第一段文字</p>
<p>第二段文字</p>

第一行内容<br>
第二行内容
<hr>

调试时可在 VS Code 中用 Live Server 打开页面，保存后观察效果；代码太长可用 Alt + Z 自动换行。

易错点： 没有 h7；h1 一般一个页面只用一次，常放新闻大标题或 logo 等重点位置；p 独占一行且段间有缝隙；br 换行缝隙较小；代码中直接回车不等于页面换行。

综合案例：从淄博烧烤到文章页

为什么需要： 标签必须落到案例中，才能形成文章页布局能力。

怎么想： 先把所有文字放入 body，再按效果剪切文字，分别套上标题、段落、水平线等标签。案例“淄博烧烤”可按如下结构练习：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>淄博烧烤</title>
</head>
<body>
  <h1>淄博烧烤</h1>
  <hr>
  <p>正文段落内容</p>
  <h4>小标题</h4>
  <p>段落内容</p>
  <p>责任编辑：黑马程序员</p>
</body>
</html>

后续综合案例一“个人简介”和综合案例二“Vue 简介”用于检验文章页布局：

易错点： 不要一个标签一个标签反复复制，先把文字整体拿来，再用 Ctrl + X 剪切、Ctrl + V 粘贴到对应标签中；标题层级要按视觉重要性选择；多媒体标签及属性要结合图片、链接、音视频案例使用，先保证结构正确，再调显示效果。

先认识 HTML 与标签

HTML 是 HyperText Markup Language 的缩写，中文叫“超文本标记语言”。转写稿里反复强调两个词：超文本主要指链接，能把多个网页连起来；标记就是标签，是用尖括号包起来的文本。学习 HTML，核心就是认识和使用标签。

为什么需要：网页里有标题、文字、图片、链接、音视频等内容，需要一种规则告诉浏览器“这是什么、从哪里开始、到哪里结束”。
怎么想：把标签理解成给内容“做记号”，例如告诉浏览器“这段文字要加粗”。
怎么做：先知道 HTML 文件后缀是 .html，在编辑器里新建文件后写标签，保存并用浏览器打开查看效果。
易错点：HTML 里主要用尖括号 < >，不是大括号、中括号；标签名一般写小写英文字母。

标签的基本结构

标签通常要成对出现，中间包裹内容。开始标签如 <strong>，结束标签如 </strong>。结束标签比开始标签多一个 /。尖括号里面放英文字母，也就是标签名。

为什么需要：一篇文章里可能只有几个字要加粗，后面的文字不加粗。必须告诉浏览器“从哪儿开始、到哪儿结束”。
怎么想：标签像一对边界，把需要处理的内容夹在中间。
怎么做：先写开始标签，再写内容，最后写结束标签。
易错点：结束标签的斜杠不能丢；标签名不要随意大写；内容要放在开始标签和结束标签中间。

双标签：以加粗文字为例

笔记中的代码是：

<strong>需要加粗的文字<strong>
<br>
<hr>

这里要特别注意：第二个 <strong> 如果表示结束标签，应写成 </strong>。转写稿中的调试过程是：先在页面里写一段普通文字，浏览器不会自动加粗；用 <strong> 和 </strong> 把“需要加粗的文字”包起来，保存后文字才变粗。若只写开始标签，后面的文字也会继续受影响，所以必须有结束标记。

为什么需要：加粗只是效果，浏览器并不知道你要加粗哪一段，必须用双标签限定范围。
怎么想：先找“要处理的内容”，再用开始标签和结束标签把它包住。
怎么做：写成 <strong>需要加粗的文字</strong>，保存后刷新浏览器观察。
易错点：结束标签少写 /；把内容写在标签外面；以为在代码里按回车或空格就能排版，浏览器并不会按代码里的回车空格显示。

单标签：br 与 hr

标签分双标签和单标签。<br> 表示换行，<hr> 表示水平线，它们只有开始，没有结束标签。

为什么需要：换行和水平线不需要“包裹”一段内容，遇到标签直接产生效果即可。
怎么想：双标签负责“包住内容”，单标签负责“插入一个效果”。
怎么做：在需要换行的位置写 <br>，在需要水平线的位置写 <hr>，保存查看。
易错点：不要写成 </br>；不要给 <br>、<hr> 硬加结束标签；标签名和尖括号要用英文符号。

小结

本节最重要的是三句话：HTML 主要学标签；双标签要成对出现，结束标签多一个 /；单标签只有开始没有结束。写代码时先写内容，再用合适的标签包起来，保存后到浏览器里验证效果。遇到“没生效”，优先检查标签是否闭合、斜杠是否漏写、尖括号是否为英文符号。

先认识骨架：网页像一个人

为什么需要：写 HTML 不能一上来就把文字、图片随便堆进去，每个网页都要先有基本结构。转写稿里把网页比作人：人要有头、有身体，网页也要有“头”和“主体”。这个基本结构就是 HTML 骨架。

怎么想：先记住三层关系：html 表示整个网页；head 是网页头部，放给浏览器看的信息，例如 CSS；body 是网页主体，放给用户看的图片、文字等内容。title 是网页标题，要放在 head 里面，显示在浏览器标签页上。可以想成：html 是整个人，head 是头，body 是身体，title 是头里的“眼睛”。

怎么做：先看本节骨架代码，注意标签的包含关系：

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

易错点：title 不要写到 body 里；用户能看到的正文要写到 body 里；head 与 body 是兄弟关系，应上下对齐，而它们各自被 html 包含。转写稿提醒：如果按道理该嵌套的标签没有缩进、没有完整包住，往往说明标签漏写或位置写错。

用 VS Code 快速生成骨架

为什么需要：每个网页都有这套基本标签，如果每次手写会很麻烦。VS Code 已经集成了快速生成骨架的功能。

怎么想：既然骨架固定，就先用编辑器生成，再只改需要改的地方。不要一开始就手敲全部标签，容易漏结束标签。

怎么做：新建一个后缀为 .html 的文件，例如 01-体验HTML.html；在文件中输入英文叹号 !，再按 Enter 或 Tab 键，就能生成骨架。笔记提示如下：

提示
VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

生成后，把 title 里的文字改成“第一个网页”，把正文写到 body 中。转写稿中的调试过程是：保存文件，用 Live Server 打开页面，修改 title 后浏览器标签页会变化；在 body 中写内容，页面主体会显示。

易错点：! 必须是英文叹号，中文叹号生成不出来；文件后缀必须是 .html；生成后里面可能有一些暂时不认识的 meta，先保留，不要因为不认识就乱删骨架结构。

把内容写对位置：title 与 body

为什么需要：骨架生成后，很多初学者会把标题文字和页面正文写混。写错位置，页面显示效果就不对。

怎么想：先问自己：这段文字是给浏览器标签页看的，还是给用户在页面里看的？给标签页看的写进 title；给用户看的写进 body。

怎么做：例如把网页标题改成“网页标题”，在 body 中写“网页主体”。保存后预览：title 的内容出现在浏览器标签页上，body 的内容出现在页面主体区域。转写稿里还演示了在 body 中写“很开心，马上月薪过万了”，保存后页面就能显示。

易错点：不要把所有文字都塞进 head；head 主要放给浏览器看的信息，例如 CSS 等；正文统一写 body。title 必须被 head 包含，不能和 head 并列。

用标签关系检查骨架是否完整

为什么需要：标签一多，位置容易乱。理解父子关系和兄弟关系，可以快速判断骨架有没有写坏。

怎么想：html 包含 head 和 body，这是父子关系，也叫嵌套关系；head 与 body 是兄弟关系，也叫并列关系。父子关系里，子标签要比父标签缩进两个空格；兄弟关系要对齐，不额外缩进。

怎么做：看骨架时先找最大的 html，再看它里面是否完整包含 head 和 body；再看 head 里是否有 title。如果 head 和 body 没有对齐，或者 body 跑到 head 里面，就回头检查结束标签是否漏写。

易错点：包含关系必须完整包住，不能出现“开始标签在父标签里、结束标签跑到外面”的交叉写法；缩进不是为了好看而已，它能帮助你发现结构错误。转写稿强调：按道理应是父子却没缩进、应是兄弟却没对齐，通常说明标签关系出问题了。

为什么要先分清标签关系

写 HTML 时标签会越写越多，如果每个标签随便放，代码很快会乱：该包含的没包住，该并列的没对齐，后面查错会很痛苦。所以本节的作用是：明确标签的书写位置，让代码格式更整齐。转写稿里反复强调，HTML 里典型就两种关系：父子关系（也叫嵌套关系、包含关系）和兄弟关系（也叫并列关系）。判断方法很简单：看谁包住谁。一个标签完整地包住另一个标签，就是父子；两个标签处在同一层级、谁也不包谁，就是兄弟。

怎么做：先判断包含关系，再决定缩进和对齐。父子关系中，子级标签要换行并缩进；兄弟关系中，兄弟标签换行后要对齐。易错点：不要只看“看起来有没有缩进”，还要看结束标签是否把子级完整包住；如果该嵌套的没缩进、该并列的没对齐，往往说明标签丢了或结束标签位置错了。

父子关系（嵌套关系）

为什么需要：父子关系表示“包含”。例如 html 包含 head 和 body，head 又包含 title。只有把子级完整包在父级里面，结构才正确。笔记要求：子级标签换行且缩进（Tab 键）。

怎么想：父亲先有开始标签，孩子完整地放在父亲内部，最后再有父亲的结束标签。孩子要比父亲往右缩进一层。

怎么做：

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    页面内容
  </body>
</html>

这里 head、body 是 html 的子级，所以缩进；title 是 head 的子级，再缩进一层。

易错点：转写稿里判断过一个错误例子：head 和 title 本该是父子关系，但结束标签位置乱了，没有把 title 完整包起来，形成“穿插”，这就是错的。记住：只要是包含，结束标签一定要在子级完整结束之后；</head> 不能写到 title 还没结束的位置。

兄弟关系（并列关系）

为什么需要：兄弟关系表示同一层级并列。例如 head 和 body 都是 html 的子级，它们互为兄弟；多个 p 段落也常常是兄弟。笔记要求：兄弟标签换行要对齐。

怎么想：先找它们共同的父级，再看它们是不是谁也不包谁。如果是并列，就开始标签同一缩进层级，换行后上下对齐。

怎么做：

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <p>第一段</p>
    <p>第二段</p>
  </body>
</html>

head 和 body 对齐，是兄弟；两个 p 对齐，也是兄弟。

易错点：兄弟标签没有对齐，或者一个兄弟跑进另一个兄弟里面，常见原因是少写了结束标签，比如 </head> 丢了，body 就可能被误认为在 head 里面。转写稿提醒：按道理是兄弟却没对齐，或 body 跑到里面去，就要检查是不是丢了标签。

用标签关系反查格式问题

为什么需要：标签关系不仅是“排版好看”，还能帮助我们排查结构错误。转写稿说，如果该嵌套的没有缩进、该并列的没有对齐，就说明代码可能有问题。

怎么想：先看包含是否完整，再看同级是否对齐。父子看“有没有完整包住”，兄弟看“是不是同一层级”。

怎么做：检查每个开始标签是否有对应结束标签；父子子级换行缩进两个空格或按 Tab；兄弟换行对齐；发现错位先找丢失或放错位置的结束标签。

易错点：缩进只是格式表现，真正决定关系的是标签的包含范围。不要为了对齐而把结束标签乱放；关系正确后，再让格式整齐。

注释是什么：先理解“给程序员看的说明”

为什么需要：代码不只写给自己看，也可能给同事看、给未来的自己看。转写稿里反复强调，注释是对代码的解释和说明，能提高程序的可读性，方便理解、查找代码。比如一段代码实现什么功能、某个区域是“头部首页”还是“首页导航”，写上注释后，别人一看就明白。

怎么想：把注释理解成读书时在旁边写的批注。它不参与页面展示，而是帮助读代码的人理解“这段代码是干什么用的”。转写稿中还提到，打开网页后右击“查看网页源代码”，可以看到页面源码里的注释；但在浏览器正常页面中看不到。也就是说，注释是给程序员看的，不是给页面访客看的。

怎么做：在 HTML 中写注释，使用下面的固定格式：

<!-- 我是 HTML 注释 -->

注释内容放在 <!-- 和 --> 之间。保存后刷新浏览器页面，注释不会显示；但查看网页源代码时可以看到它。

易错点：不要把注释写成中文标点，比如中文叹号、中文短横；也不要漏掉开头的 <!-- 或结尾的 -->。另外，“页面中不显示”不等于“源代码里没有”，调试时可以通过查看源代码确认注释是否写对。

注释的写法与 VS Code 快捷键

为什么需要：手写 <!-- 注释内容 --> 比较麻烦，尤其是注释较多时。VS Code 提供了快捷键，可以提高写代码和改代码的效率。

怎么想：先记住完整写法，再用快捷键提高速度。转写稿中演示时先手写注释，说明它由“尖括号、叹号、两个短横”等部分组成；随后再使用快捷键添加或删除注释。笔记中明确给出：在 VS Code 中，添加 / 删除注释的快捷键是 Ctrl + /。

怎么做：在 VS Code 的 HTML 文件中，选中要注释的内容，或把光标放在要注释的位置，按 Ctrl + /。再次按 Ctrl + / 可以取消注释。手写时仍然使用：

<!-- 我是 HTML 注释 -->

易错点：快捷键是 Ctrl + /，不是中文输入法状态下的其他符号；如果快捷键没有反应，先确认当前文件是 HTML 文件、光标位置正确。转写稿里还提到“斜杠是不是就是问号键那个”，实际按键位置因键盘而异，但操作目标是 / 这个斜杠键。不要因为页面没显示就以为注释没写成功，应查看源代码或看编辑器中的代码。

注释的调试过程：页面不显示，但源代码可见

为什么需要：初学时容易把“注释”和“页面文字”混在一起，以为写了注释页面就应该出现内容。通过调试可以明确：注释不会在浏览器页面中显示，但会保留在源代码里。

怎么想：转写稿中的验证思路是：先在代码里写一段文字，再把它改成注释，保存后观察页面；页面中原先的内容不再显示，说明注释没有作为页面内容渲染。再通过右击“查看网页源代码”，可以看到注释仍然存在。转写稿中还举了网站源代码里出现注释的例子，说明注释是写给程序员看的。

怎么做：在 VS Code 中新建或打开 HTML 文件，在 <body> 中写一段普通文字，保存并在浏览器中打开；再把它改成：

<!-- 我是 HTML 注释 -->

保存刷新，页面不显示这段注释内容；右击页面选择查看网页源代码，可以在源码中看到这行注释。

易错点：不要用“页面是否显示”判断注释是否存在；注释本来就不在页面中展示。也不要把注释内容写到标签外面却漏写注释符号，否则它可能被当成普通文字显示出来。转写稿里强调“注释不会在浏览器中显示”，更准确地说，是不会在浏览器页面中显示，但源代码中仍然可见。

注释的使用习惯与易错点

为什么需要：转写稿提到，学习和工作中关键代码都要加注释，这是一个好习惯。注释能帮助同事快速找到代码位置，也能帮助自己以后回忆代码用途。转写稿里还调侃“程序员最喜欢同事写注释”，说明注释对协作很重要。

怎么想：注释不是越多越好，而是写在需要解释的地方。比如某一块代码的功能、某个区域的用途，可以加简短说明。注释要服务于“理解代码”，不要写成与代码无关的内容。

怎么做：在关键代码上方或旁边写简短注释，例如说明某段结构的作用；修改代码后，如果注释已经不符合代码实际功能，要及时更新或删除。需要临时隐藏一段 HTML 代码时，也可以用注释把它包起来，但要注意不要破坏标签结构。

易错点：第一，注释符号写错，导致注释失效或页面出现多余文字；第二，把注释当成页面内容，误以为用户能看到；第三，注释与代码不一致，反而误导阅读者。记住本节核心：注释是对代码的解释和说明，不会在浏览器页面中显示；VS Code 中添加 / 删除注释的快捷键是 Ctrl + /；HTML 注释写法是：

<!-- 我是 HTML 注释 -->

标题标签的用途：先想清楚“它为什么存在”

标题标签不是用来随便把文字变大的，它承担的是页面结构中的“标题”语义。转写稿里反复举新闻标题、文章标题、网页区域名称、产品名称等例子，并打开小米、京东页面观察：新闻大标题、商品名称、栏目名称都可能是标题。为什么需要它？因为网页不能只靠“加粗、字号大”来表达层级，否则阅读者和后续维护者都难以判断哪一块是主标题、哪一块是分区标题。怎么想？先判断这段文字在页面里是不是“标题”，再判断它在标题层级中大概处于第几级。怎么做？使用 h1 到 h6，数字越小级别越高。易错点：不要把普通正文硬套成标题；标题要写在 body 里，不要写到 head 中，转写稿中特别强调“往网页里写内容统一写到 body 里面”。

六级标题怎么写：保留代码并理解成对标签

本节笔记给出的核心代码是：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

为什么需要成对写？因为开始标签告诉浏览器“从这里开始是标题”，结束标签告诉浏览器“到这里标题结束”。怎么想？h 可以理解为标题的缩写，后面跟 1 到 6 表示级别。怎么做？在 VS Code 中新建 .html 文件，用英文感叹号生成骨架，把标题代码写进 body，保存后用 Live Server 打开观察。转写稿中输入 h1 后按回车或 Tab 自动补全，再用 Shift + Alt + 下箭头 快速复制多行，改成 h2 到 h6。易错点：标签名一般用小写；结束标签比开始标签多一个斜杠；只有 h1 到 h6，没有 h7。转写稿里还提到爱奇艺校招题“最小标题”应选 h6，不能选不存在的 h7。

显示特点：用浏览器验证“加粗、字号递减、独占一行”

为什么需要验证？因为标题标签的效果不能只背结论，要在浏览器里看出差异。怎么想？把六个标题和一段普通文字放在一起对比：普通文字不加粗，标题加粗；一级比二级大，二级比三级大，依次减小；每个标题都单独占一行。怎么做？保存代码后刷新页面，观察六行标题的字号和粗细，再在标题后面写普通文字，看它是否被挤到下一行。转写稿中还提醒：在代码里直接按回车、敲空格，浏览器不会按你的排版显示，HTML 只认标签。易错点：不要以为标题后面的文字会自然跟在同一行；标题本身具有独占一行的显示特点。也不要为了“看起来像标题”而用多个换行或空格凑效果。

h1 与 h2~h6 的使用经验：主标题要克制

为什么要有使用次数经验？因为 h1 是页面最高级标题，滥用会削弱页面结构。转写稿中的经验是：h1 一般在一个网页中只用一次，用来放新闻标题或网页 logo；h2 到 h6 没有使用次数限制。怎么想？如果页面是新闻页，最重要的新闻大标题适合 h1；如果是普通页面，logo 这类最需要被记住的标志也可能用 h1。其他区域标题再按效果图选择 h2、h3、h4 等。怎么做？先确定页面最重要的标题，再让下级标题比上级小。转写稿中小米页面里“手机”等栏目与商品标题大小不同，建议按效果图选择层级，只要保证层级关系合理即可。易错点：不要在一个页面里到处写 h1；也不要机械认为某个数字必须固定给某类内容，h2~h6 要结合页面效果和结构选择。

调试与易错点：从“写出来”到“写正确”

为什么需要调试？转写稿中不是只讲概念，而是新建文件、生成骨架、写标题、保存、用 Live Server 打开，再观察右侧效果。怎么想？如果标题没变大，先检查是不是写到了 head 里，或者标签是否缺了结束标签；如果出现 h7，要立刻意识到不存在。怎么做？按“新建 .html → 英文 ! 生成骨架 → 在 body 中写 h1~h6 → 保存 → 浏览器查看”的顺序练习。易错点还有：标签尖括号要用英文符号；开始和结束标签要配对；标题代码不要和普通段落混淆。把标题标签练熟后，再进入段落、换行、水平线等标签，就能更清楚地理解网页结构。

课件图示

代码示例

示例一：标签语法初体验（双标签 / 单标签 / 注释）

<!DOCTYPE html>
<html>
  <head>
    <title>标签语法体验</title>
  </head>
  <body>
    <!-- 我是 HTML 注释 -->
    <strong>需要加粗的文字</strong>
    <br>
    <hr>
  </body>
</html>

关键行与易错点

• <strong>需要加粗的文字</strong>：双标签必须成对出现，结束标签比开始标签多一个 /。笔记里写成 <strong>需要加粗的文字<strong> 是笔误，照抄会导致“一直加粗不结束”。
• 标签名写在 <> 里，用英文字母，统一小写（strong 而不是 STRONG）。
• <br>、<hr> 是单标签（课上叫“单身狗标签”），只有开始没有结束，也不包裹内容：br 遇到就另起一行，hr 直接画一条水平线。
• <!-- 我是 HTML 注释 --> 不会在浏览器中显示，是给程序员看的；VS Code 中 Ctrl + / 快速添加或删除注释。
• 骨架里 html 是根标签（整个网页），head 放给浏览器看的信息（如 title 网页标题），body 才是给用户看的内容——内容一律写进 body。
• 写 .html 文件后，输入英文 ! 配合 Enter / Tab 可快速生成骨架；输入中文叹号是出不来的。

---

示例二：HTML 骨架 + 标题标签 h1~h6

<!DOCTYPE html>
<html>
  <head>
    <title>标题标签</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    普通文字
  </body>
</html>

关键行与易错点

• 标题标签名统一用 h（head 的缩写），共 6 级：h1 到 h6，都是双标签。
• 显示特点三条：文字加粗、字号逐渐减小、独占一行（一行只能放一个标题，后面的文字自动换行）。
• 没有 h7，只有 h1~h6（爱奇艺校招原题：表示最小标题的是 h6）。
• 使用经验：h1 一个页面只用一次，用来放新闻标题或网页 logo；h2~h6 没有次数限制，按视觉大小挑选即可（“只要你比上面那个小就行”）。
• 骨架的缩进关系：title 在 head 里（父子关系，子级缩进两个空格），head 和 body 是兄弟关系，要顶格对齐；一旦发现该嵌套的没缩进、该对齐的没对齐，多半是少写了结束标签。

---

示例三：综合案例——淄博烧烤（h1 + hr + p 组合）

<!DOCTYPE html>
<html>
  <head>
    <title>淄博烧烤</title>
  </head>
  <body>
    <h1>淄博烧烤</h1>
    <hr>
    <!-- 第一段正文：粘贴群里发的文字素材 -->
    <p>（第一段正文）</p>
    <h4>看看为啥更香</h4>
    <!-- 第二段正文：粘贴群里发的文字素材 -->
    <p>（第二段正文）</p>
    <p>责任编辑：黑马程序员</p>
  </body>
</html>

关键行与易错点

• 结构分析：大标题用 h1 → 分割线用 hr（单标签）→ 正文分段用 p → 小标题用 h4（必须比 h1 小，h3/h4/h5 都行，看效果挑）→ 落款也包一个 p。
• 代码里敲回车和空格，浏览器一律不认，必须用标签“打标记”：分段用 p，只想另起一行且缝隙小一点用 br。
• p 是双标签，特点：独占一行，且段落之间有明显缝隙；br 换行的缝隙小。课上对比京东（用小 p，缝隙大）和小米（用 br，缝隙小）就是这个区别。
• 高效写法：先把全部文字粘进 body（此时是“一坨一坨像一锅粥”），再剪切（Ctrl + X）→ 写标签 → 粘贴（Ctrl + V），不要一个个手打标签名；文字太长出现左右滚动条时按 Alt + Z 自动换行。
• 编辑时用 ! 生成骨架后，只需把文字写进 body，head 里的 meta 暂时不用管。

常见错误

1. 标签原样出现在页面上，或代码全是黑色没有高亮 现象：写完 <strong>文字</strong> 保存刷新，页面直接显示尖括号内容。 原因：用了中文全角符号（＜＞、！、／）或输入法未切英文。 修法：切英文输入法重写；用 VS Code 语法高亮自查——标签名和符号正常时应变色，不变色就是符号错了。

2. 加粗/标题效果"越界"，后面一大段文字全变粗 现象：只想让几个字加粗，结果后面整段都加粗了。 原因：结束标签漏写斜杠（<strong>文字<strong>），等于又开了一个新标签，浏览器一直"加粗下去"。 修法：写完立刻补 </…>；缩进错乱、颜色异常时先怀疑漏斜杠，而不是去改样式。

3. 内容写了却看不见，页面一片空白 现象：文字明明写在文件里，浏览器里什么都没有。 原因：内容写进了 <head>，或写在 </body> 之后。 修法：用户可见内容一律放进 <body>…</body> 之间；head 只放 title、meta 等给浏览器看的信息。

4. 文件建了却打不开 / 没有图标 / 打开是记事本 现象：双击文件用浏览器打开是空白或直接变成文本，Live Server 也点不出来。 原因：扩展名不对或重复，如 01.html.txt、01.htm、01 没有后缀。 修法：资源管理器里打开"文件扩展名"显示，文件名写成 01.html，确认左侧文件树里出现浏览器小图标再写代码。

5. 按回车、敲空格想让文字分段换行，结果挤成一坨 现象：代码里明明分了好几行，页面上还是连在一起。 原因：HTML 里源码的回车和连续空格会被浏览器折叠，不产生任何排版效果。 修法：用 <p> 分段、<br> 强制换行、<hr> 加分割线；需要"缝隙小"用 br，"缝隙大"用 p。

6. 标签嵌套错位，缩进怎么都对不齐 现象：<head> 和 <title> 的结束标签交叉穿插，格式化后结构仍然乱。 原因：父标签在子标签结束前就被闭合了（如 <head><title>…</head></title>）。 修法：把缩进当作自检信号——子标签比父标签多缩进两个空格，兄弟标签左对齐；对不齐就是丢标签了，回去补齐再格式化。

7. 改完代码刷新浏览器没变化 现象：反复刷新页面还是旧效果。 原因：文件未保存（标签页上有小圆点）。 修法：Ctrl + S 保存后再看；养成"改一处、存一次、看一眼"的节奏。

练习

1. 骨架自测：新建 01.html，用 ! 生成骨架，在 title 写"我的第一个网页"，body 里写一句自我介绍，用 Live Server 打开并解释每个标签各自负责页面的哪一部分。

2. 标签关系判断：给出 4 段代码片段（含正确的父子、兄弟，以及 2 处嵌套错误），指出哪几段书写有误、错在哪个标签，并说明你是靠缩进还是靠闭合顺序判断出来的。

3. 对比实验：同一段三行文字，分别用三种方式实现换行——①源码里敲回车 ②<br> ③<p>。截图对比三者的视觉差异，并说明小米官网与京东官网那种间距分别更接近哪一种，为什么。

4. 淄博烧烤页复刻：把提供的文案一次性粘进 body，再按效果图依次用 title / h1 / hr / h2~h6 / p 剪切包裹，要求全程用 Ctrl+X→写标签→Ctrl+V 的方式，不用手抄文字，最后对照效果图检查层级是否合理。

5. 纠错题：给出 5 行有问题的代码（中文叹号、<br></br>、h1 用了三次、内容写在 head 里、h7 标签），逐条说明现象、原因并改正，改完后在浏览器验证。

原视频对照

#	视频	时长
1	html简介	15:09
2	html骨架标签	09:12
3	标签关系	06:11
4	html注释	07:46
5	标题标签	10:34
6	段落标签	06:53
7	水平线标签和段落标签	10:01
8	淄博烧烤	04:12

小结

1. 学 HTML 就是学标签：认得标签、写对标签、放对位置，三件事做到就过关。
2. 所有标签只有两种符号形态——尖括号包裹的标签、成对的双标签与极少数单标签，符号必须是英文。
3. 骨架不用手写，! + Enter/Tab 是每天开工的第一个动作；title 决定浏览器标签页文字，body 决定页面内容。
4. 缩进不是美观问题而是排错工具：父子缩进两空格、兄弟左对齐，对不齐就说明结构错了。
5. 浏览器只认标签不认排版：回车和空格在源码里无效，分段、换行、分割线必须交给 p、br、hr。
6. h1 全页只用一次（新闻大标题或 logo），h2~h6 按视觉层级递减选用，没有 h7。
7. 注释写给人和未来的自己看，页面不显示；关键代码加注释是职业习惯而非可选项。
8. 高效写法是"先贴文字、再切标签、边存边看"，而不是一个标签一个标签地复制重写。