主题
排版标签与文本标签（Day2 2/3）
本页对应 Day02_HTML，共 6 段视频，约 54 分钟。
学习目标
- 能使用
em和strong对段落中的指定词语进行语义强调，并说明二者的默认样式与强调语义。 - 能使用
ins和del标注新增、删除内容，并正确解释其在商品原价/现价场景中的默认表现。 - 能使用
sub和sup编写H₂O、2¹⁰等上下标文本，并准确区分二者。 - 能使用
span包裹行内文字，并结合简单 CSS 演示对局部文字设置样式。 - 能使用
img标签通过src引入图片，设置alt、width、height，并说明单设宽高与同时设置宽高的效果差异。 - 能将 base64 字符串作为
img的src使用，并说明其适用场景与优缺点。
知识点
先分清“排版标签”和“文本标签”
转写稿里先问：“排版标签是不是页面的组成部分？标题、段落是不是大段文字？”接着又说文本标签“一般是对某个词语进行修饰”。这句话是本节的总开关：排版标签负责搭页面骨架，文本标签负责在段落内部修饰某个词。为什么需要这样分？因为网页先要有标题、段落、分割线、换行和布局块，用户才能读；如果一上来只学“强调某个词”，就不知道这些词该放在哪里。怎么想？先写大块，再写小块。怎么做？本节表格里的 h1~h6、p、hr、br、pre、div 都是排版层面；转写稿中讲的 em、strong、ins、del、sub、sup、span、img 属于文本或图片内容，不要混到本节表格里。易错点：转写稿里的“死状/死猪”应纠正为 strong，“DRV”应纠正为 div，“B2”应纠正为 br；不要把文本标签当成页面骨架。
标题与段落：h1~h6、p
为什么需要？标题表达内容层级，段落承载正文。转写稿中新建 02文本标签.html，写 DOCTYPE、html、head、meta charset="UTF-8"、body，然后在 body 里写 h1 表示“我们要学习文本标签”，再写一个 p 放《滕王阁序》的一段文字，刷新后看到的就是“一标题加一段落”。怎么想？标题按层级用 h1~h6，正文大段文字用 p；它们都是双标签、无属性。怎么做？示例：
html
<h1>页面主标题</h1>
<h2>二级标题</h2>
<p>这是一个段落，段落里可以放很多文字。</p>易错点：转写稿提醒“段落里文字很长很正常”，代码里按回车换行，页面显示时不一定换行；代码中的换行不算，真正换行要用 br。另外不要用标题标签单纯调字号，标题的语义是层级。
分割线与换行：hr、br
为什么需要？内容之间要分隔，用 hr；一行文字内部要强制断行，用 br。转写稿中多次说“我得写个 hr 说明一下”“写个 hr 分割开”，用来把不同知识点或图片区域分开；又明确说“代码中的换行不算，br 才是”。怎么想？hr 是分隔线，br 是换行，二者都是单标签、无属性。怎么做？
html
<p>第一行<br>第二行</p>
<hr>
<p>分割线下面的内容</p>易错点：hr 不是段落，br 也不是分段；不要用一堆 br 代替段落。单标签不要误写成双标签。
原格式显示：pre
为什么需要？有些内容要保留源码里的空格和换行，比如代码片段、诗歌排版。笔记给它的语义是“原格式显示”，双标签、无属性。怎么想？普通段落 p 会把源码中的连续空格、换行按 HTML 规则折叠；需要“原样”时用 pre。怎么做？
html
<pre>
第一行
第二行前面有空格
</pre>易错点：pre 不是普通段落的替代品；普通正文仍用 p。转写稿强调“代码中的换行不算，br 才是”，所以不要以为在 p 里敲回车就能得到页面换行。
无语义布局：div
为什么需要？页面需要把内容分成一块一块，方便后续布局。笔记写 div “无语义，用于页面布局”，双标签、无属性。转写稿中把 div 放进段落文字里，发现“自己占了一行”，并说“我们刚刚学的那些排版标签都会自己占一行，这叫独占一行；而文本标签不会”，还提到 div 是“块级”，文本标签是“行内”。怎么想？div 是盒子，不带语义，主要用来划分区域；它默认独占一行。怎么做？
html
<div>
<h1>标题</h1>
<p>段落内容</p>
</div>易错点：div 没有语义，不要所有文字都塞 div；它和 span 的差别是：div 独占一行，span 可和同行文字显示在一行（转写稿中用 span 配合 CSS 改样式，属于文本标签）。还要记住：div 自己不会产生可见文字，布局效果最终还要靠 CSS 展开。
小结与调试方法
把表格记成三列：语义、属性、单双标签。h1~h6、p、pre、div 是双标签；hr、br 是单标签；这一组笔记里都没有属性。调试时按转写稿的方式：新建 HTML 文件，写好文档结构，先放 h1 和 p，刷新看“标题+段落”；再插入 hr 看分割；在文字中插 br 看换行；用 div 包住一块内容，观察它是否独占一行。易错点集中在：代码换行不等于页面换行、单双标签别写反、div 无语义且独占一行、pre 只用于需要保留原格式的内容。这样先搭骨架，再学文本标签修饰词语，顺序就不会乱。
文本标签的定位：修饰“词”，不是搭页面骨架
为什么需要：标题、段落这类排版标签负责页面的“组成部分”，而文本标签常常只处理段落中的某个词语。转写稿里反复强调：文本标签一般是“对某个词语进行修饰”，所以它常写在段落、标题等排版标签内部。
怎么想：先判断你要解决的是“页面结构”还是“词句语义”。比如“人杰地灵”需要被强调，就用强调类标签把它包起来；如果只是想把某几个字变绿、变粗，则应想到 span 配合 CSS，而不是随便选一个“看起来会变样式”的标签。
怎么做：在段落中选中目标词，用双标签包裹。例如：
html
<p>豫章故郡，洪都新府。<em>人杰地灵</em>……</p>易错点：不要把默认样式当成语义目的。em 默认斜体、strong 默认粗体，但 CSS 可以改掉；真正要记的是“它表示什么”。另外，文本标签属于行内元素，能和同行文字显示在一起；div、p 等块级标签会独占一行，这个区别先了解，CSS 阶段会展开。
em 与 strong：都表示强调
为什么需要：页面中有些关键词比其他词更重要，需要告诉浏览器和搜索引擎“这里有强调”。转写稿里说得很直白：强调不只是给用户看，更是给搜索引擎看，被强调的文字权重更高，更利于关键词与页面建立关联。
怎么想：em 和 strong 都表示强调。W3C 的解释里 strong 语气更强、em 稍弱，但转写稿提醒：实际写代码时很难判断“语气强不强”，没有明确标准，所以不必纠结，按习惯用即可，关键是它们都表达强调。
怎么做：
html
<p>我想强调<em>人杰地灵</em>，也想强调<strong>王将军</strong>。</p>刷新页面可观察到：em 中文字默认倾斜，strong 中文字默认加粗。调试时若没变化，先检查标签是否闭合、文字是否真的包在标签内。
易错点：不要为了斜体而用 em，也不要为了粗体而用 strong；斜体、粗体只是默认表现。二者都是双标签，没有本节表格中列出的属性。
ins 与 del：表示增加和删除的内容
为什么需要：有些内容需要表达“新增”或“删除”的语义。转写稿给出的典型场景是商品价格：原价被删除，现价是新增信息。
怎么想：ins 来自表示“插入、增加”的词，del 来自表示“删除”的词。虽然内容已经“删除”，仍要显示出来，是为了让用户和搜索引擎理解价格变化。
怎么做：
html
<p>商品价格：原价 <del>￥9998</del>，现价 <ins>￥1.75</ins></p>刷新后可看到 del 默认带删除线，ins 默认带下划线。转写稿中还提醒：代码里换行不代表页面换行，浏览器会把它们按行内内容排在一行。
易错点：删除线、下划线仍是默认样式，CSS 可以修改或去掉；不要把它们当作纯样式标签。二者都是双标签，本节表格中无属性。
sub 与 sup：下标字和上标字
为什么需要：化学式、数学幂次等文字需要上下标。转写稿用“水”的化学式和“二的十次方”演示。
怎么想：sub 可记作下标，sup 可记作上标。转写稿里用字母圈的位置帮助记忆：b 的圈在下，联想下标；p 的圈在上，联想上标。
怎么做：
html
<p>水的化学式：H<sub>2</sub>O</p>
<p>2<sup>10</sup> = 1024</p>刷新后，2 会下沉为下标，10 会上浮为上标。调试时重点看标签是否包住需要变化的字符。
易错点：不要把 sub、sup 写成单标签；它们是双标签。上下标也只表示语义，默认视觉表现可被 CSS 调整。
span：无语义，但最常配合 CSS
为什么需要：有时只想给段落中某个词设置特殊样式，却没有任何强调、删除等语义。这时需要无默认样式的行内容器。
怎么想：span 和 div 都可理解为“无语义容器”，区别是 div 是块级、独占一行，span 是行内、能和同行文字排在一起。转写稿说它“没有语义，也没有任何样式”，正因为它是一张白纸，才最适合配合 CSS。
怎么做：
html
<p>呜呼！<span>兰亭</span>已矣……</p>只加 span 页面没有变化；配合 CSS 后才能改颜色、粗细、倾斜等。转写稿演示了用 CSS 让“兰亭”变粗、让“登高作赋”变斜、让“滕王高阁”变绿。这里只需体会“配合 CSS 给文字设置样式”，CSS 写法后续专门学。
易错点：不要以为加了 span 就会自动有样式；它的价值在于无默认样式、便于 CSS 精准控制。也不要把它和块级 div 的布局作用混为一谈。
了解类文本标签：看一遍，留印象
为什么需要：实际资料中可能见到 cite、code、q、blockquote 等标签，知道它们存在，阅读别人代码时不至于完全陌生。
怎么想：这些标签本节只要求“作为了解”，不必死记硬背；重点记住常用文本标签的语义、属性、单双标签。转写稿明确说这些不常用标签“不用记，不用背”，看一遍、留一点熟悉感即可。
怎么做：保留本节笔记中的了解清单，遇到时再查：
html
以下文本标签 作为了解
<cite> 用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通 常为斜体字
<dfn> 定义一个定义项目
<code> 定义计算机代码文本
<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们 加以强调的极少情况下，才使用这个标签。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr> 定义缩写 配合title属性 (IE6以上)
<bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<small> 标签定义小型文本（和旁注）
<b> 粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适 时才使用它。
<i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u> 下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用该标签为文本加下划线，用户会把它混淆为一个超链接。
<q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素)
<address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素
<font> H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt> H5已删除 打字机文字
<big> H5已删除 大型字体标签
<strike> H5已删除 添加删除线
<acronym> H5已删除 首字母缩写 请使用<abbr>代替易错点：了解类标签不要和常用标签抢记忆重点；本节真正要掌握的是 em、strong、ins、del、sub、sup、span 的语义、默认表现、双标签特征，以及“样式可被 CSS 改掉”这一原则。
先明确：图片不是“拖进网页”，而是用 img 引入文件
为什么需要：网页里文字之外必须有图片，新闻、商品、头像都离不开图。但图片本身是一个独立文件，网页是另一个文件，不能把图片“塞”进 HTML 里就算完。
怎么想：转写稿里讲师反复强调“图片也是文件”。所以思路是：先有图片文件，再在 HTML 里写一个标签，把图片文件引入进来。
怎么做：图片标签叫 img，它是单标签；用 src 属性写图片地址。若图片和网页在同一目录，直接写文件名即可。
易错点：img 不是双标签，不能写成 <img></img>；src 不是 scr；本节先不展开相对路径、绝对路径，下一节再讲。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<h1>图片</h1>
<img src="雪莉私房照.jpg" alt="雪莉的私房照片">
</body>
</html>src：图片地址是“资源入口”
为什么需要：只写 <img> 浏览器不知道要显示哪张图，必须通过 src 告诉它图片文件在哪里。
怎么想：src 来自 source，可理解为“资源来源”。转写稿中图片和网页放在一块，所以直接写图片名；如果路径不对，浏览器就找不到图。
怎么做：在 src 中写图片文件名，VS Code 会提示补全。刷新页面后，图片按自身尺寸显示；讲师用画图工具把原图调小到约 60 像素宽，再保存，页面显示也随之变小。
易错点：图片本身多大，默认显示就多大；不要以为写了 img 就会自动缩小。文件名、扩展名、大小写都要对上。
alt：图片失败时的替代文字，也是搜索引擎的线索
为什么需要：网络问题、服务端误删、地址写错都可能让图片无法显示；这时用户至少要知道这里本来是什么。搜索引擎爬虫也不能像人一样“看懂”图片，它常依赖 alt 判断图片主题。
怎么想：alt 是替代文字。转写稿中讲师故意把“雪莉私房照”的“房”去掉，制造找不到文件的错误，页面就显示了 alt 里的文字。
怎么做：给图片加 alt，例如 alt="雪莉的私房照片"。正常显示时它不出现；图片加载失败时才出现。
易错点：alt 不是可有可无的装饰；不要写成 al。图片正常时看不到 alt，不要以为它没作用。
html
<img src="雪莉私房照.jpg" alt="雪莉的私房照片">
<img src="雪莉私照.jpg" alt="雪莉的私房照片">width / height：只设一个，另一个按比例自动算
为什么需要：原图可能太大，需要控制显示尺寸。
怎么想：width 管宽，height 管高。转写稿中只写 width="400"，高度会根据原图比例自动计算；只写 height="400"，宽度也会按比例算。
怎么做：值直接写数字，默认单位是像素。像素是屏幕上的小点，前端常用长度单位。调试时可右键“检查元素”，看图片实际宽高。
易错点：同时设置宽高容易让图片拉伸、失真。转写稿中把宽高都设成 400，头像变成“子弹头/鹅蛋”样，就是比例被破坏。要同时设置，必须自己算准比例。
html
<img src="小乐出狱.jpg" alt="小乐出狱" width="400">
<img src="小乐出狱.jpg" alt="小乐出狱" height="400">
<img src="小乐出狱.jpg" alt="小乐出狱" width="400" height="400">base64：把图片编码成一串文本放进 src
为什么需要：常规图片要等网页加载后再按 src 去下载；小图标若编成 base64，可以和网页一起加载。
怎么想：计算机里图片本质是二进制数据，base64 把它编码成文本。使用时仍放在 img 的 src 里，开头常见 data:image/png;base64,。
怎么做：用在线工具上传小图，复制编码串到 src。转写稿中讲师把民歌工作照上传转换，再与普通 src 引入对比，显示效果一样。
易错点：base64 适合小图；大图会极大增加网页体积。自动换行时这一长串会变成“噩梦”，调试时可不自动换行。正式项目里是否使用，要结合工程化工具判断，不能滥用。
html
<img src="data:image/png;base64,……" alt="base64图片示例">调试过程要记住的三件事
第一，代码里换行不等于页面换行；多个 img 可能并排显示。第二，图片显示不出来时，先查文件名和路径，再看 alt 是否出现。第三，调整尺寸时优先只设 width 或只设 height，用检查元素确认比例是否正常。这样从“能显示”到“显示得合适”，才是图片标签的完整用法。
课堂画面
代码示例
示例一：文本标签（强调、增删、上下标、span）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
<style>
/* 下面三条是为了演示 span 配合 CSS 的效果 */
.lan { font-weight: bold; }
.deng { font-style: italic; }
.teng { color: green; }
</style>
</head>
<body>
<h1>文本标签</h1>
<p>
豫章故郡，洪都新府。星分翼轸，地接衡庐。
<em>人杰地灵</em>，徐孺下陈蕃之榻。雄州雾列，俊采星驰。
<strong>王将军</strong>之武库。
</p>
<hr>
<p>商品价格：原价 <del>￥9998</del>，现价 <ins>￥1.75</ins></p>
<hr>
<p>水的化学表达式：H<sub>2</sub>O</p>
<p>2<sup>10</sup> = 1024</p>
<hr>
<p>
<span class="lan">兰亭</span>已矣，
<span class="deng">登高作赋</span>，
<span class="teng">滕王高阁</span>临江渚。
</p>
</body>
</html>关键行与易错点
<em>、<strong>都是“强调”，斜体、粗体只是默认表现，用 CSS 可以把它们改成任意样式；它们真正的价值在于语义（给搜索引擎看，提高关键词权重）。- 二者选哪个？没有硬性标准，随便用哪个都行，别在“语气强弱”上纠结。
<ins>、<del>表示“增加的内容、删除的内容”，默认下划线、删除线；最典型的场景就是商品原价与现价。- 记
<sub>和<sup>：b的圈在下面，所以是下标；p的圈在上面，所以是上标。写成H2O、210就错了。 <span>无语义、无任何默认样式，是一张白纸，专等 CSS 来上色；它和<div>的区别是div独占一行、span可以和同行文字显示在一起。- 以上文本标签都是行内元素，代码里换行不算换行，它们不会自己独占一行；标签全部是双标签，必须成对闭合。
示例二：图片标签 img
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<h1>图片标签</h1>
<!-- 1. 最基本用法：图片和网页放在同一个文件夹，src 直接写文件名 -->
<img src="xiaole.jpg" alt="小乐出狱">
<hr>
<!-- 2. 只设置宽度，高度按比例自动计算 -->
<img src="xiaole.jpg" alt="小乐出狱" width="400">
<hr>
<!-- 3. 只设置高度，宽度按比例自动计算 -->
<img src="xiaole.jpg" alt="小乐出狱" height="400">
<hr>
<!-- 4. 宽高同时设置：容易拉伸失真，慎用 -->
<img src="xiaole.jpg" alt="小乐出狱" width="400" height="400">
<hr>
<!-- 5. 故意写错文件名，观察 alt 文字的作用 -->
<img src="xueli-fang.jpg" alt="雪莉的私房照片">
</body>
</html>关键行与易错点
<img>是单标签，不用闭合；核心属性是src（source，图片地址）。- 图片本身也是一个文件，
src写的就是这个文件的路径；图片与网页同目录时直接写文件名即可（相对路径、绝对路径下节课细讲）。 alt是替代文字，建议每张图都写：图片因网络问题、文件被误删等原因无法显示时，浏览器会显示这段文字；同时搜索引擎搜图时靠它把关键字和图片关联起来。width/height的值只写数字，单位自动是像素（px），不需要写单位。- 只设置宽或只设置高，另一个方向会按原图比例自动计算，不会变形；宽高同时设置容易拉伸失真，除非自己算准比例。
- 注意：图片原图多大，默认就显示多大；图片多张写在一起时，代码里的换行不算换行，它们会挤在同一行。
示例三：base64 图片使用演示
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>base64图片使用演示</title>
</head>
<body>
<h1>base64图片使用演示</h1>
<!-- 传统方式：引入图片文件 -->
<img src="minge.jpg" alt="民哥工作照">
<hr>
<!-- base64 方式：src 里直接放一串编码，开头是 data:image/格式;base64, -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="base64小图标">
</body>
</html>关键行与易错点
- base64 的原理：图片在计算机里本质就是一串二进制数字，把它按 base64 编码成文本，就能直接塞进
src里，不需要图片文件。 - 编码串的开头固定是
data:image/png;base64,（换成 jpg 就是image/jpeg），后面才是编码内容，这一段不能漏。 - 生成方式：把图片上传到在线的“base64 编码工具”，复制结果粘到
src中即可；示例里的编码串请以自己工具生成的结果为准。 - 适用场景：小图标或需要和网页一起加载的图片（编码和网页是一个整体，一起加载）；大图编码后字符串极长，会大幅撑大网页，不合适。
- 易错点：这类代码行非常长，一旦开启编辑器的“自动换行”，整个屏幕都会被它占满，建议关掉自动换行；实际开发中多数仍用图片文件，base64 常见于调试和工程化打包场景。
常见错误
1. 用 b / i / font 代替 strong / em，或反过来把 em 当"斜体按钮"用
- 现象：整篇代码里到处是
<b>、<i>，一改样式就得逐个标签翻；同事问"这个词为什么要斜体"，答不上来。 - 原因：把"默认表现"当成了"标签用途"，选标签时看的是长相而不是语义。
- 修法：选标签只问一句"这个词在语义上是什么"——强调用
em/strong，纯样式用span+ CSS；font/big/tt/strike在 H5 已废弃，一律不用。
2. 在段落或文本标签里塞 div / p，指望它"只变个样式"
- 现象：本来一行文字，中间突然断成两行，段落被硬生生劈开。
- 原因：
div、p是块级元素，独占一行；em、strong、span、ins、del是行内元素，才能和文字待在同一行。 - 修法：修饰句中某个词用行内标签（首选
span），需要整块布局时才用div；嵌套前先判断"这是不是一行里的东西"。
3. img 同时写死 width 和 height，比例没算
- 现象：人物照片被压成"子弹头"或"扁烧饼"，头像变形。
- 原因：两个方向都给了绝对值，浏览器不会替你保比例。
- 修法：只设
width或只设height，另一边按原图比例自动计算；必须两个都设时，先按原图宽高比算准数值。
4. img 不写 alt，或 src 路径随手写
- 现象：图片一挂，页面上只剩一块空白；图片搜索里也搜不到这张图。
- 原因：
alt是图片加载失败时的兜底文字，同时也是搜索引擎判断图片内容的依据；src写的是路径，文件不在同目录或名字打错都会 404。 - 修法：
alt一律写清"这张图是什么"；src先确认图片文件与 HTML 的相对位置，写完刷新验证，用检查元素确认尺寸和路径。
5. 用连续 <br> 撑间距、用 <p> 空标签占位
- 现象：间距在不同屏幕上飘忽不定，后期一改字号全乱。
- 原因：
br的语义是"换行"，不是"留白"；空白属于样式范畴。 - 修法：段落用
p，段落之间的距离交给 CSS 的margin；br只用在诗句、地址这类确实需要强制断行的地方。
6. 把大图转成 base64 塞进 src
- 现象：HTML 文件从几 KB 暴涨到几 MB，编辑器一开就卡，代码一行拉到几万字符。
- 原因：base64 会把二进制转成文本，体积增大约三分之一，且无法被浏览器单独缓存；它适合的是小图标、需要随页面一起加载的小图。
- 修法：大图继续用文件路径引用；只有小图标或调试场景才用 base64，且使用前先关掉编辑器的自动换行。
7. 单双标签混写
- 现象：出现
<br></br>、<hr></hr>、<img src="..."></img>这类写法，结构检查时报错或行为异常。 - 原因：没记清
br、hr、img是单标签（空元素），没有内容也就没有闭合。 - 修法：记住"能包住内容的才是双标签"；
br/hr/img直接写一个，不要闭合。
练习
练习 1（语义选择） 取一段《滕王阁序》文字放进 p 里，完成三件事：把"人杰地灵"标为强调，把"王将军"标为强调（换一个标签），把"俊采星驰"包成可单独设样式的行内片段。写完后回答：三个词分别用了什么标签、为什么，以及去掉所有 CSS 后它们在浏览器里的默认长相是什么。
练习 2（增删语义） 用 del 和 ins 做一行商品价格："原价 ¥9998，现价 ¥1.75"。要求原价被划掉、现价带下划线。再补一个 hr 把这块与上文隔开。思考：如果老板要求"删除线不要了，改成灰色小字"，你改标签还是改 CSS？
练习 3（上下标） 用 sub 和 sup 写出两个式子：水的化学式 H₂O、2¹⁰ = 1024。写完把两个式子放进同一个段落，观察它们是否换行，并解释原因。
练习 4（span + CSS 初体验） 在一段文字中，用 span 分别给三个词加上"加粗""斜体""绿色"三种效果（CSS 直接写在 style 属性里即可）。然后把其中一个 span 换成 div 刷新，记录页面发生了什么变化，并说明为什么。
练习 5（图片三连） 准备一张本地图片，用 img 引入：①只设 width="400"，用检查元素读出实际宽高；②改成只设 height="400"，再读一次；③同时设 width="400" height="400"，对比三次的画面差异，写下结论。最后故意把 src 的文件名写错一位，观察 alt 的表现。
练习 6（base64 取舍） 用在线工具把一张小图标和一张大照片分别转成 base64，写进两个 HTML 文件，比较文件体积与打开速度，给出"什么图该用 base64、什么图不该"的一句话判断标准。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 文本标签-强调 | 11:43 |
| 2 | 文本标签-增加和删除的内容 | 04:41 |
| 3 | 文本标签-上标字和下标字 | 03:07 |
| 4 | 文本标签-span | 05:10 |
| 5 | 图片标签 | 22:55 |
| 6 | base64图片的使用演示 | 06:38 |
小结
- 选标签的第一顺位永远是语义，第二顺位才是长相；长相归 CSS 管，语义归 HTML 管，两者不要互相越界。
- 排版标签和文本标签是两个层级：前者是页面的骨架（块级，独占一行），后者是对某个词的修饰（行内，随文字流动）。层级搞错，页面结构就散。
em与strong的"语气强弱"没有可操作的判断标准，选哪个都不影响搜索引擎的识别，不必纠结，按手感统一即可。del/ins、sub/sup的删除线、下划线、上下位置都只是默认表现，真正不可替代的是它们携带的语义。span与div是一对"无语义双胞胎"，唯一区别是行内与块级；单独写一个span等于什么都没做，它的价值完全由 CSS 兑现。img只需记牢三件事：src指对路径、alt必写、宽高只设一边以保比例。- base64 是图片的另一种存在形式，不是"更高级的用法"；小图随页面加载是优点，大图撑爆文件是灾难。
- 编辑器的自动换行只影响你看到的排版，不影响代码本身；但在 base64 那一行面前，请果断关掉它。