主题
HTML 基础（二）
本页对应 HTML 基础，共 8 段视频，约 1 小时 18 分。
学习目标
- 能区分并正确使用
strong、em、ins、del等文本格式化标签，为指定文字添加加粗、倾斜、下划线、删除线效果，且不产生换行。 - 能独立完成“淄博烧烤”案例，按需求使用文本格式化标签突出显示指定文字，并说明优先使用
strong、em的原因。 - 能使用
img标签及src属性在页面中插入图片，并通过alt、title、width、height属性控制替换文本、提示文本和图片尺寸。 - 能使用相对路径（如
./、images/）正确引用同目录或子文件夹中的图片，并能说明绝对路径的含义及适用局限。 - 能使用
a标签和href属性创建外部链接，使用target="_blank"在新窗口打开链接，使用#创建空链接。
知识点
标题标签的用途：为什么需要 → 怎么想 → 怎么做 → 易错点
网页里需要有层级：新闻标题、文章标题、网页区域名称、产品名称等，都要比普通正文更醒目。为什么需要？因为用户先扫标题再读正文，标题能快速建立内容结构。怎么想？先判断这段文字是不是“这一块内容的标题”，如果是，就选 h1～h6；如果只是正文里某几个字想加粗，就不要用标题标签。怎么做？用 <h1> 到 <h6> 包裹标题文字。易错点：标题标签会“独占一行”，不是只把文字变粗。转写稿里反复纠正：有同学想给普通文字加粗，问能不能用标题，指出“标题独占一行”，一用标题，下面的文字就另起一行，达不到“只加粗、不换行”的效果；这种需求应使用文本格式化标签，例如 strong。这里要注意同音字：是“独占一行”，不是“主占银行”；是“加粗”，不是“加速/加说”；是“换行”，不是“画行”。
六级标题的写法与显示特点：为什么需要 → 怎么想 → 怎么做 → 易错点
为什么需要？内容有主次，一级标题最重要，六级标题层级最低，字号依次减小，读者能看出结构。怎么想？按内容层级选级别：大标题用 h1，下面分区用 h2，再细分用 h3……不要为了字号大小随意跳级。怎么做？本节笔记代码保留如下：
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>显示特点是：文字加粗；字号逐渐减小；独占一行（换行）。易错点：不要以为 h3 比 h2 大，转写稿复习时明确问“H3 大还是 H2 大”，答案是 H2 大，因为 h1～h6 依次变小；也不要拿标题标签当“加粗标签”用，否则会破坏行内排版。
h1 与 h2～h6 的使用次数：为什么需要 → 怎么想 → 怎么做 → 易错点
为什么需要？h1 代表页面最高层级，通常用于新闻标题或网页 logo，重复使用会让页面结构混乱。怎么想？先确定页面唯一的主标题，再安排分区标题。怎么做？经验是：h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo；h2～h6 没有使用次数的限制。易错点：不要把每个区域都写成 h1；也不要把 h1 只当成“字最大”的样式工具，它的语义是页面主标题。调试时先看结构：主标题是否唯一，分区标题是否按层级递减。
调试过程：先判断“标题”还是“加粗”
转写稿中的调试思路很关键：学生看到一段文字想加粗，第一反应是用标题标签，马上问“他是标题吗？不是标题呀”，并解释标题会独占一行，会把下面文字另起一行。于是推导出：只想加粗不换行 → 不用标题标签 → 用 strong 等文本格式化标签。这一步不是背标签，而是先判断需求：要结构层级，用 h1～h6；只要局部强调，用文本格式化标签。易错点仍是把“显示效果”和“标签语义”混在一起。
段落标签的用途：把“文章段落”标记出来
为什么需要：网页里经常出现新闻段落、文章段落、产品描述信息。这些文字不是标题，也不是零散的一句话，而是成段阅读的内容，需要用段落标签把语义标出来。
怎么想：看到“成段说明文字”，先想 p 标签；看到标题才用 h1—h6；只是想换行才用 br。转写稿里反复强调：标题会独占一行，如果只想让某几个字加粗、不换行，就不能用标题标签。
怎么做：段落标签是成对的双标签，原笔记代码是：
html
<p>段落</p>把文章段落放进开始标签和结束标签之间即可。
易错点：不要把 p 当标题用；不要用多个 br 硬凑段落；p 是双标签，开始和结束要成对。
显示特点：独占一行，段落之间存在间隙
为什么需要：阅读文章时，段落之间要分开，否则大段文字挤在一起，层次不清楚。
怎么想：p 的显示特点是“独占一行”，并且“段落之间存在间隙”。所以两个 p 写在一起，不会像 strong 那样继续排在同一行，而是各占一行并留出间隔。
怎么做：写两个段落，保存后刷新页面观察：
html
<p>第一段文字</p>
<p>第二段文字</p>易错点：不要以为 p 里的文字会自动加粗；p 只负责段落语义和分行显示。转写稿里说的“画行标签”应理解为“换行标签”，p 不是用来代替 br 的。
段落里做局部强调：p 与 strong 的嵌套
为什么需要：一段话里往往只有几个词重要，比如“淄博烧烤爆火”中的“淄博烧烤”。整段变标题会换行，不合适；只给关键词加粗更合适。
怎么想：标题标签会独占一行，不能拿来只做加粗；应在段落内部嵌套文本格式化标签。转写稿明确说 strong 和 p 是父子/嵌套关系，p 与 p 是并列/兄弟关系。
怎么做：在 p 内部用 strong 包住关键词：
html
<p>今年春节<strong>淄博烧烤</strong>爆火</p>保存后看效果：整段仍是段落，只有关键词加粗，不会因为加粗而另起一行。
易错点：标签要成对；strong 不要拼错。转写稿里“s状/strongong”都是口误或同音问题，统一写作 strong。在编辑器里没提示时，可先把光标移到文字与标签之间，保证左右不粘连，再写标签。
段落和图片、换行的配合
为什么需要：文章段落下面常配图，图片通常要单独显示。转写稿在讲图像标签时提醒：图片“不要包到 p 里面去了”，因为图片要单独一行。
怎么想：段落负责文字成段；图片用 img 单独插入；需要强制换行才用 br。
怎么做：先写段落，再在段落外写图片标签。不要把 img 塞进 p 里。
易错点：不要把“段落之间的间隙”误认为需要手写很多空格；也不要用 p 包图片来制造换行。转写稿中“屁”是 p 的口语说法，统一按 p 标签理解。
先把“换行”这件事说清楚
前面已经学过标题标签和段落标签，它们有一个共同特点：一行只能放一个，写完就自动换行。今天要补的换行标签 br 和水平线标签 hr，同样属于“会换行”的这一类，但它们和 h、p 有一个关键区别：它们是单标签，没有结束标签。
所以本节真正要建立的认知不是“又背两个单词”，而是：哪些标签会换行、哪些标签在一行里能放多个。
br：让内容在当前位置折到下一行
为什么需要：p 会独占一行，而且段落之间“中间有缝隙”。如果只想让文字在当前位置断开、折到下一行，用 p 会把本来一段的内容拆成两段，间距变大，不是想要的效果。
怎么想：p 负责“分段”，br 负责“折行”。分段会带来段间距，折行不会。
怎么做：在需要断开的位置写一个 <br>。
易错点：br 是单标签，不要写成 </br>；也不要以为它像 p 一样会把后面的内容包起来。
hr：画一条水平分割线
为什么需要：一段内容讲完了，需要一条横线把上下文隔开，转写稿里把它叫“水平线”，也叫“分割线”。
怎么想：它和 br 一样，属于“插入一个东西就完事”的标签，不需要包住任何文字。
怎么做：写一个 <hr> 即可。
html
<br>
<hr>易错点：hr 同样是单标签；写完后它自己就占一行，不要试图在里面塞文字。
会换行的一类，和不换行的一类
转写稿里反复强调的对比是：h、p、br、hr 这四个都是“一行只能放一个”；而文本格式化标签（strong、em、ins、del 等）不会自动换行，除非一行显示不开才换行，所以在同一行里可以放多个。
这条对比很重要，因为它决定了你选标签时的思路：我要的是“另起一行”，还是“就在这行里把某个词突出一下”？前者用会换行的标签，后者用格式化标签。
顺带把单标签和双标签分清
转写稿在复习时明确提到：标签分类分两类，单标签和双标签。今天接触到的单标签有三个：br、hr、img（图像标签后面才细讲）。其余成对出现的，都是双标签。
标签之间的关系也分两种：嵌套（父子） 和 并列（兄弟）。比如 h 和 p 是并列关系；而 strong 写在 p 里面，就是嵌套关系。写代码时先想清楚“谁在谁里面”，比背单词更重要。
易错点小结
br、hr都是单标签，没有结束标签。br只折行，不产生段落间距；要分段还是用p。hr自己就占一行，不要往里放内容。- 别把“会换行的标签”和“格式化标签”混用：想让文字变粗又不想换行，就不能用
h。
文本格式化标签的作用与整体思路
本节笔记的作用是：为文本添加特殊格式，以突出重点。常见格式有加粗、倾斜、下划线、删除线等。它们和标题标签不同：标题会独占一行，而文本格式化标签通常只改变文字样式，不会主动换行。
为什么需要： 页面里有些词需要“突出显示”，但又不能像标题那样另起一行。
怎么想： 先判断是“整行结构”还是“行内强调”。标题、段落、换行、水平线会换行；文本格式化标签在一行内使用。
怎么做： 用双标签包住要强调的文字，如 <strong>文字</strong>。
易错点： 不要用标题标签代替加粗，否则文字会独占一行，达不到“只加粗不换行”的效果。
加粗：strong 与 b
为什么需要： 想让某个词更醒目，但不能破坏原有段落行文。
怎么想： 加粗有两组写法：strong 和 b。转写稿里“s状/死装/时状”都应纠正为 strong；b 来自 bold，也表示加粗。
怎么做： 用 strong 包住文字；b 也能实现同样视觉效果。
易错点： 两者效果相似，但 strong 自带强调含义，开发中优先用 strong；b 主要作为了解。
html
<strong>强壮的哥哥</strong>
<b>强壮的哥哥</b>倾斜：em 与 i
为什么需要： 有时需要让文字略微倾斜，表示语气或强调。
怎么想： 倾斜有 em 和 i。转写稿里的“请斜/警捷”应纠正为“倾斜”；i 是 italic。
怎么做： 用 <em>文字</em> 或 <i>文字</i>。
易错点： 优先用 em，因为它有强调语义；i 更多是样式效果。开发中倾斜文字用得相对少，后续学 CSS 后还可能把它改回正常。
html
<em>脉动回来</em>
<i>脉动回来</i>下划线与删除线：ins/u、del/s
为什么需要： 下划线可标注补充或重点，删除线可表示原价、删除内容。
怎么想： 下划线有 ins 和 u；删除线有 del 和 s。转写稿里的“按死/N次/IS”是 ins，“得勒/DL/比例”是 del。
怎么做： 下划线用 <ins>文字</ins>；删除线用 <del>文字</del>。
易错点： 优先用 ins、del，它们自带语义；u、s 作为了解。标签要成对闭合，拼写不要少字母。
html
<ins>口感</ins>
<u>口感</u>
<del>1888</del>
<s>1888</s>语义优先、换行差异与调试过程
为什么需要： 同样能加粗或倾斜，为什么还分两组？因为 strong、em、ins、del 不只是样式，还带“强调、重要”的含义。
怎么想： 左侧一组优先，右侧一组了解；开发中最常用的是 strong 和 em，其他忘了可以回来查。
怎么做： 在句子中直接包住关键词。注意这些标签不会主动换行，只有显示不开时才换行。
易错点： 在文字中间直接写标签时，编辑器可能没有提示，因为标签和文字粘在一起。转写稿里的调试方法是：先在文字两侧留空格，或先 Ctrl+X 剪切文字，让光标左右不粘连，再输入 <strong>、<del>、<ins>，最后把文字粘贴回去。
烧烤案例：把标签写进句子
为什么需要： 通过案例把“突出显示”落到真实句子中。
怎么想： “淄博烧烤爆火”“火”要加粗；原价“1888”要删除线；“口感”可加下划线。
怎么做： 先剪切文字，再写标签并粘贴，避免标签与文字粘连导致无提示。
易错点： 不要用标题标签做行内加粗；标签必须闭合；多个格式分别包住对应文字，不要包错范围。
html
<p>今年春节<strong>淄博烧烤爆火</strong>，谁能拒绝吃一顿<del>1888</del>只要188的烧烤呢？</p>
<p><strong>火</strong>，不同的烹饪方式会产生不同的<ins>口感</ins>。</p>图像标签的基本作用
为什么需要：网页里经常要放图片，俗话说“一图胜千言”，电商页面更是靠图片吸引人。但图片不能像在 Word 里那样直接拖进网页，必须通过标签插入。
怎么想：插入图片用 <img>，它是单标签，没有结束标签。
怎么做：
html
<img src="图片的 URL">易错点：img 不是双标签；src 是必须属性，不写 src 图片标签不生效。
src：图片从哪里来
为什么需要：一个页面可能有很多图，必须告诉浏览器到底显示哪一张。
怎么想：src 可以理解为“来源”，用于指定图像的位置和名称。
怎么做：先把图片素材放到写 HTML 的文件夹里，再写 img，回车后默认带 src，输入 ./ 可利用编辑器提示选择图片。保存后刷新页面检查。
易错点：图片不要乱放，要和 HTML 文件放在一起；文件名、文件夹名写错就不显示。转写稿里就出现过把 imgs 写成 imags 导致图片不显示，改回来后保存即可恢复。
图像属性总览
为什么需要：图片加载失败时要告诉用户这里是什么图；鼠标经过时要有提示；图片大小也需要控制。
怎么想：常见属性有 alt 替换文本、title 提示文本、width 宽、height 高。
怎么做：多个属性写在标签名后面，用空格隔开。
易错点：alt 不是转写稿里口误的“out”；title 是属性，不要和 <title> 标签混为一谈；多个属性不能连写。
属性语法
为什么需要：只写标签名信息不够，需要用属性补充说明。
怎么想：属性采用“属性名="属性值"”的形式，写在尖括号里面、标签名后面。
怎么做：
html
<img src="1.jpg" alt="淄博烧烤图片" title="淄博烧烤" width="800">易错点：属性之间要用空格隔开；属性不区分先后顺序；不要写到尖括号外面。
alt 与 title 的调试
为什么需要：alt 用于图片无法显示时显示文字，也便于搜索引擎理解图片；title 用于鼠标经过并停留时显示提示。
怎么想：能正常显示时看不到 alt，把图片名故意写错，出现裂图时就能看到替换文字；title 要把鼠标停在图片上等一会儿才出现。
怎么做：给图片加 alt="淄博烧烤图片"、title="淄博烧烤"，保存刷新，分别测试裂图提示和鼠标悬停提示。
易错点：鼠标晃来晃去时提示可能不出现，要停一下；title 不是图片加载失败时显示的文字。
width 与 height：控制大小和等比缩放
为什么需要：多张图片大小不一致时，页面看起来不整齐。
怎么想：width 控制宽，height 控制高，单位是像素；一般只改宽或只改高，另一个会等比例缩放。
怎么做：例如统一设置 width="800"，不写高度，图片会按比例缩放。
易错点：同时强行设置宽和高，可能把图片压扁或拉变形；除非需求明确要求，否则不要随意同时改两个值。
路径是什么：从起点到终点的路线
为什么需要：网页里的图片、文件并不是凭空出现的，浏览器必须知道“去哪里找”。路径就是查找文件时，从起点到终点经过的路线。
怎么想：先判断起点是谁——是从当前 HTML 文件所在位置出发，还是从电脑盘符/根目录出发。起点不同，写法就不同。
怎么做：路径分两类：相对路径、绝对路径。相对路径从当前文件位置出发；绝对路径在 Windows 从盘符出发，在 Mac 从根目录 / 出发。
易错点：不要把“相对”和“绝对”混用；写路径前先确认图片到底放在哪个文件夹里。
相对路径：从当前文件位置出发
为什么需要：开发中图片往往和 HTML 文件放在同一个项目里，用相对路径最方便，也便于项目整体移动。
怎么想：把 HTML 文件当作“我”，从“我”所在的位置出发去找目标文件。目标在同级目录，就写当前目录；目标在某个文件夹里，就先进入文件夹。
怎么做：记住三个特殊符号：
/表示进入某个文件夹里面 →文件夹名/.表示当前文件所在文件夹 →./..表示当前文件的上一级文件夹 →../
例如图片统一放在 images 文件夹里，HTML 和 images 同级，就可以写 ./images/1.jpg。写 ./ 后，在 VS Code 里通常会出现文件名提示，可以直接选择，减少手写错误。
易错点：转写稿里出现过图片不显示，原因是文件夹名写成了 imags，而实际叫 imgs，路径对不上图片就裂开。图片多时先把图片复制到代码文件夹，再建 images 文件夹统一存放；不要一会儿图片、一会儿 HTML 混在一起。路径中的文件夹名必须和真实名称完全一致。
绝对路径：从盘符或根目录出发
为什么需要：有时需要表示文件在本机中的完整位置，或者引用网络上的图片地址。
怎么想：绝对路径不依赖“当前文件在哪”，而是直接给出完整起点。Windows 从盘符出发，Mac 从根目录 / 出发。
怎么做：Windows 本机图片可以写成：
html
<img src="C:\images\mao.jpg">
转写稿中演示过：把桌面图片的地址复制出来，通常会得到类似 C:\Users\...\photo.jpg 的完整路径，粘贴到 src 里可以显示。还有一种“特殊的绝对路径”是文件的在线网址，例如 https://www.itheima.com/images/logo.png，常见应用场景是网页底部友情链接。
易错点：Windows 默认用 \，其他系统用 /，建议统一写成 /；本机绝对路径换一台电脑很可能失效，因为盘符、用户名不同，所以开发中重点掌握相对路径，绝对路径作了解。在线图片地址也要注意：如果对方换了图，地址可能失效。
路径选择与调试建议
为什么需要：路径写错时页面往往只显示裂图，必须会排查。
怎么想：先看图片和 HTML 的相对位置，再看代码里的路径是否逐级对应。
怎么做：图片多时统一放 images 文件夹；相对路径从 ./ 开始利用提示选择；本机绝对路径只用于临时验证；网络图片可右击复制图片地址。
易错点：/ 在相对路径中表示“进入文件夹”，不是随便当分隔符；../ 是上一级，不要多写或漏写；路径中的大小写、文件夹名、扩展名都要一致。
课件图示
代码示例
示例一：排版标签 + 文本格式化标签（淄博烧烤案例）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>淄博烧烤</title>
</head>
<body>
<h1>淄博烧烤</h1>
<p>
<strong>今年春节淄博烧烤爆火</strong>，
<em>谁能拒绝</em>吃一顿<del>1888</del>只要188的烧烤呢？
</p>
<hr>
<h2>特色吃法</h2>
<p>
<strong>不同的烹饪方式</strong>会产生<ins>不同的口感</ins>，<br>
小饼卷肉才是灵魂。
</p>
<h3>小提示</h3>
<p>肉要烤到滋滋冒油，再撒上孜然。</p>
</body>
</html>要点解释：
h1～h6：文字加粗、字号依次减小、独占一行；h1一个页面只用一次，h2～h6不限次数。p段落独占一行，段落之间有间隙；br只是换行，不产生段落间隙；hr是水平线（单标签）。strong加粗、em倾斜、ins下划线、del删除线，这四个自带强调语义，提倡使用；b/i/u/s只是效果，不提倡。- 易错点：想给文字加粗不要用标题标签，标题会独占一行，把后面的文字挤到下一行；格式化标签是行内标签，不会自动换行（除非一行显示不开）。
示例二：图像标签 + 属性 + 相对路径
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<h1>淄博烧烤</h1>
<p>带五花肉的烧烤：</p>
<img src="./imgs/1.jpg" alt="淄博烧烤" title="淄博烧烤" width="800">
<p>小饼卷肉：</p>
<img src="./imgs/2.jpg" alt="淄博烧烤" title="五花肉烧烤" width="800">
<p>烤炉全景：</p>
<img src="./imgs/3.jpg" alt="淄博烧烤" title="淄博烧烤" width="800">
<hr>
<img src="./imgs/photo.jpg" alt="图片加载失败时显示这段文字" width="300">
</body>
</html>要点解释：
img是单标签，src是必须属性，用于指定图片的位置和名称，没有src图片不生效。alt：图片无法显示时（图片被删、网络没加载出来）显示的文字，方便搜索引擎爬取。title：鼠标停在图片上不动时才显示提示文字，鼠标晃来晃去是看不到的。width/height：单位是像素，不写单位；只写宽或只写高，另一个会等比例缩放，两个都写容易把图片压扁。- 属性语法：
属性名="属性值"，写在尖括号内、标签名后面，多个属性之间用空格隔开，不区分先后顺序。 - 路径：
./表示当前文件所在文件夹，文件夹名/表示进入某个文件夹；/表示进入下一级，../表示上一级。图片要先放到和 HTML 文件同一目录（或imgs文件夹）里再写路径。
易错点：多个属性之间不能连着写、不能用逗号；Windows 默认反斜杠 \，建议统一写 /；绝对路径（C:\images\mao.jpg）换台电脑就失效，只作了解，重点掌握相对路径。
示例三：链接标签（外链 + 新窗口 + 空链接）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<h1>淄博烧烤</h1>
<p>今年春节淄博烧烤爆火，<strong>谁能拒绝</strong>吃一顿烧烤呢？</p>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<br>
<a href="http://www.jd.com" target="_blank">京东</a>
<br>
<a href="#">新闻</a>
</body>
</html>要点解释：
a是双标签，href是必须属性，表示“去往哪个地方”；外部链接要把协议写全：http://或https://。target="_blank"：在新窗口（空白窗口）打开链接，原来的页面还留着；不加这个属性默认在当前窗口跳转，会把原页面覆盖掉。href="#"是空链接，页面还没准备好时先占位；点击会刷新页面并跳到顶部。- 易错点：
href不能只写www.baidu.com，少了http://就不是完整地址；title是属性，<title>是标签，两者不要混用。
常见错误
想让某几个字加粗，结果整段被顶到下一行 现象：句子中间突然断行，后面的文字跑到新的一行。 原因：拿
<h1>～<h6>当"加粗工具"用，标题天生独占一行。 修法：局部加粗只用strong（语义加粗），标题只留给真正的标题层级。<img>写了，页面只显示一个裂开的小图标 现象：图片位置是空白或裂图，浏览器里看不到图。 原因：路径写错——图片不在项目文件夹里、文件名大小写不符、扩展名写错（.jpg 写成 .png）。 修法：先把图片复制到代码所在目录（或imgs/里），输入./让编辑器给出提示去选，别手打文件名。图片被拉扁/拉长，人脸变形 现象：只改了宽度，图片比例却不对。 原因：
width和height同时写死了固定值，两个值不成原图比例。 修法：只写width或只写height其中一个，另一个交给浏览器等比缩放。属性写了却没生效，甚至整段标签"失灵" 现象：
alt、title、width中某一个完全不起作用，或者标签被当成普通文字显示出来。 原因：属性之间没打空格、用了中文引号/中文等号，或标签名和属性粘在一起。 修法：属性之间必须用一个空格隔开，=和引号一律用英文半角。在已有文字中间直接插标签，编辑器不出提示，标签被当文字 现象：输入
str没有任何补全，写完后页面原样显示<strong>。 原因：光标左边紧贴着中文字符，编辑器把"字 + 标签"识别成一个整体，不认作标签。 修法：先剪切文字或先敲几个空格，让光标左右都不是紧连的文字，再写标签。超链接点了跳到自己的项目目录，而不是百度 现象：地址栏变成类似
.../www.baidu.com，页面 404。 原因：href里只写了www.baidu.com，没写协议，浏览器按相对路径处理。 修法：外链必须写全https://www.baidu.com。点一下链接，自己辛苦写的页面被顶掉了 现象：跳转后原页面消失，回退才能看到。 原因：
<a>默认在当前窗口打开。 修法：加target="_blank"，让它在空白新窗口打开。图片用绝对路径，发到别人电脑上全变裂图 现象：本机好好的，换台电脑或打包发给同学后图片全没了。 原因：写的是
C:\Users\...\xxx.jpg这类本机盘符路径。 修法：一律改成相对路径，图片跟着项目文件夹一起走。
练习
练习 1（标签选择） 写一段"淄博烧烤"新闻：一个主标题 + 三个小标题 + 三段正文；正文中把"爆火"加粗、把"1888"加删除线、把"五花肉"加下划线。 验收：全文只有 1 个 h1；任何一处强调都没有造成额外换行。
练习 2（图片 + 属性） 在项目里新建 imgs 文件夹，把 3 张图移进去，用相对路径插入到三个段落下方。 验收：宽度统一 800，高度不写；每张图都有 alt 和 title；鼠标悬停出现提示文字；把某张图临时改名，验证 alt 文字能顶上来。
练习 3（排错） 下面这行代码有三处问题，找出并修好，说明每处的后果： <img src="imgs/1.JPG" width="300" height="100"alt="烧烤">
练习 4（链接） 在页面底部加三个链接：①"百度一下"，点击在新窗口打开；②"新闻"，暂时没想好去哪；③"回到首页"，跳到同目录下的 index.html。 验收：①不覆盖当前页；②点击不报错、不跳到奇怪路径；③能正确跳到同目录文件。
练习 5（综合组装） 把练习 1～4 合成一个完整页面，然后按顺序自查：所有双标签是否都闭合 → 所有属性之间是否有空格 → 所有图片路径是否都在项目内 → 所有外链是否带协议。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 文本格式化标签 | 12:50 |
| 2 | 烧烤案例 | 03:46 |
| 3 | 图像标签 | 09:31 |
| 4 | 图像标签属性 | 11:58 |
| 5 | 相对路径 | 11:22 |
| 6 | 复习 | 13:33 |
| 7 | 绝对路径 | 05:08 |
| 8 | 链接标签 | 09:50 |
小结
- 选标签先问"这段内容是什么"，再问"它长什么样"；反过来选，就会出现"用标题加粗"这类结构性错误。
- 会不会换行是标签的固有属性，不是靠加
br硬凑出来的；排版问题要换标签，不是加符号。 - 一个页面只讲一个主标题，其余层级按内容包含关系往下走，不按"我想让它大一点"来挑。
- 图片要过三关：路径对（能显示）、
alt写清（显示不出来也看得懂）、尺寸只写一边（不变形）。 - 路径默认用相对路径，绝对路径只作临时调试；凡是写进代码的路径，都要假设"这个项目会被搬到别的电脑上"。
- 属性越多，出错概率越高；
=、引号、空格这三处是最容易翻车的地方，写的时候慢半秒比调试半小时划算。 - 链接就是"去哪（
href）+ 怎么去（target）"两件事，没想好目的地就用#占位，别留空字符串。 - 页面不对时按固定顺序排查：文件在不在 → 名字对不对 → 属性写没写全 → 标签闭没闭合，不要一上来就乱改代码。