尚硅谷前端 2023 · 教程站

主题

HTML&CSS（Day4 2/3） ​

本页对应 Day04_HTML&CSS，共 7 段视频，约 1 小时 45 分。

学习目标 ​

  • 能使用 iframe 的 name 与超链接、表单的 target 配合，将目标页面或搜索结果加载到指定内联框架中，并说明常见网站禁止被嵌入的限制。
  • 能正确书写  、<、>、& 及数字字符实体，解决页面中连续空格、标签文本和特殊符号的显示问题。
  • 能列举并应用 id、name、class、style、title、lang 等全局属性，说明其作用、适用场景及 lang 的继承关系。
  • 能编写 meta 字符编码、关键字、描述信息、搜索引擎抓取控制、定时刷新与定时跳转配置，并说明各配置的用途。
  • 能安装并使用 Open in Browser、Live Server、Chinese Lorem 等 VS Code 扩展，配置自动保存、字体大小、目录树缩进、目录合并显示及 Emmet 默认语言。
  • 能使用 VS Code 快捷键完成多行缩进/反缩进、复制当前行、代码格式化，并使用 Emmet 快速生成 HTML 基本结构和重复标签。

知识点 ​

为什么需要 iframe ​

普通超链接默认会在当前窗口打开目标页面，或者用 target="_blank" 新开窗口。但有些场景希望“目标页面不要离开当前页，而是显示在当前页面的某个区域里”。这时就需要内联框架标签 iframe。它的作用是把各种类型的文件引入当前页面，相当于在当前页面内部嵌入一个“子窗口”。本节笔记的核心就是：iframe 的基本属性，以及它和 target 配合后，让超链接、表单提交的结果在指定框架内打开。

先理解 iframe 是什么 ​

可以把 iframe 想成嵌在当前页面里的一个小浏览器窗口。它通过 src 指定要引入的目标文件地址；通过 width、height 设置大小；通过 frameborder 控制是否有边框。iframe 是双标签，写成 <iframe></iframe>，不是单标签。笔记表格如下：

标签名功能和语义属性单标签还是双标签
iframe内联框架，将各种类型的文件引入当前页面src：设置目标文件地址。frameborder：设置是否有边框，0 表示没有，其他数字表示有。width：设置宽度。height：设置高度。双标签

基本写法：先看到一个框架 ​

在 VS Code 中新建 02iframe和target.html，先写一个空 src 的 iframe，把宽高设大一点，方便观察：

html
<iframe src="" frameborder="0" width="1200" height="600"></iframe>

这里 frameborder="0" 表示去掉边框；如果不写或写其他数字，默认能看到边框。调试时先不急着放网址，先确认页面上出现了一个大框架，再继续加内容。转写稿中就是先把宽度设到 1000、1200，高度设到 600，打开页面看到“挺大的 iframe”，再写超链接。

用 target 让链接在 iframe 中打开 ​

关键点：给 iframe 设置一个 name，再让超链接的 target 等于这个 name。这样点击链接时，目标页面就会在这个 iframe 里打开，而不是跳走。

html
<a href="https://www.taobao.com" target="xiaole">淘宝</a>
<a href="https://www.163.com" target="xiaole">网易</a>

<iframe name="xiaole" src="" frameborder="0" width="1200" height="600"></iframe>

调试过程是：先写超链接，发现点击后没有进入下面框架，检查 target 是否写对、iframe 的 name 是否一致；一致后点击“淘宝”，页面在下方的 iframe 中打开，再点“网易”，也在同一个框架中打开。也可以把本地页面放进去，例如把简历表格的地址写到 href，target 仍写 xiaole，它同样能在框架内打开。

表单也能提交到 iframe ​

target 不只能用在超链接上，表单也可以指定 target，把提交结果交给 iframe 显示。转写稿中先用百度搜索演示，百度地址的参数名是 wd，但百度会拒绝被 iframe 嵌入，所以页面里不显示。这不是代码写错，而是站点限制。换 360 搜索可以验证，360 的参数名是 q：

html
<form action="https://www.so.com/s" method="get" target="xiaole">
  <input type="text" name="q">
  <button>搜索</button>
</form>

<iframe name="xiaole" src="" frameborder="0" width="1200" height="600"></iframe>

输入“如何一夜暴富”提交后，搜索结果会显示在下方 iframe 中。调试时如果没结果，先检查 form 的 target 是否等于 iframe 的 name，再检查输入框的 name 是否是该搜索站要求的参数名。

易错点 ​

第一，target 的值不是标签名，而是 iframe 的 name，两者必须一致。第二，iframe 是双标签，不能写成单标签。第三，frameborder="0" 才是无边框，其他数字表示有边框。第四，直接拿百度搜索地址做演示可能失败，因为百度拒绝被嵌入，换 360 可验证功能。第五，表单的 target 写在 form 上，不是写在输入框上。转写稿还提到“两个 iframe 同时提交”需要一点 JavaScript，本阶段先不展开，先把一个 iframe 的 src、name、target 配合用熟。

字符实体是什么 ​

为什么需要：在 HTML 里，有些符号不能直接写，或者直接写出来会被浏览器当成标签、被合并、被解析，最终页面上看不到我们想要的内容。字符实体就是用来“把特殊符号当普通文字显示出来”的写法。

怎么想：先判断这个符号在 HTML 中是否有特殊含义。如果有，比如小于号、大于号、和号，就不能硬写；如果没有特殊含义，但直接输入不方便，也可以用实体。转写稿里说得很直白：字符实体是“几个特殊的符号用来表示我们很难在界面中表示出来的一些内容”。

怎么做：本节笔记给出的常用字符实体如下，代码原样保留：

&nbsp;			空格
&lt;			小于号 <
&gt;			大于号 >
&amp;           和好 &

&yen;			人民币符号
&copy;			版权符号
&times;			乘号
&divide;		除号

更多字符实体可参考：https://www.w3cschool.cn/htmltags/html-symbols.html

易错点：实体不是随便写一个英文单词，它有固定语法：以 & 开头，以 ; 结尾，中间是实体名称或实体编号。少写分号、拼错名称，都可能显示成原样文本。

多个空格为什么失效 ​

为什么需要：我们在 HTML 源码里连续敲很多空格，浏览器显示时通常只保留一个空格的间距。转写稿中演示了“小乐”和“水利”之间写很多空格，打开页面后仍然只有一个空格的距离。

怎么想：HTML 会把连续空白做合并处理，所以源码里的空格数量不等于页面上的空格数量。要让多个空格真正显示出来，需要使用空格实体 &nbsp;。

怎么做：在需要多个空格的位置写 &nbsp;，写几个就显示几个。转写稿中还提到可以用实体编号：空格的编号是 160，写成 &#160; 也能表示空格，写多个就是多个空格。

易错点：不要以为在普通 HTML 内容里多按空格键就能撑开距离；也不要和 <pre> 混为一谈。转写稿明确说，&nbsp; 是针对空格的实体写法，和把内容整体放进 <pre> 不是一回事。

小于号和大于号为什么要转义 ​

为什么需要：小于号 < 和大于号 > 在 HTML 中有特殊含义，浏览器会把它们当作标签的一部分来解析。转写稿中举例：想原样显示“学习了 h1 标签，该标签是标题的意思”，如果直接写 <h1>，浏览器会把它解析成标题，而不是显示尖括号文字。

怎么想：只要目标是“让尖括号作为文字出现在页面上”，而不是“让浏览器识别标签”，就应该用实体。小于号用 &lt;，大于号用 &gt;。

怎么做：把要展示的 < 写成 &lt;，把 > 写成 &gt;。转写稿中还提到，实际演示时只改小于号，另一半有时也能显示；但更稳妥、更清晰的写法是成对使用实体。

易错点：不要把 &lt; 写成 <lt;，也不要把 &gt; 写成 >gt;。实体开头必须是 &，结尾必须是 ;。

和号本身怎么显示 ​

为什么需要：& 是字符实体的开头符号，本身也有特殊含义。如果直接在页面里写 &nbsp; 这样的文本，浏览器会把它解析成空格，而不是把“ ”这几个字符原样显示出来。

怎么想：想让和号本身作为文字出现，就要用和号的实体 &amp;。转写稿中举例：想完整显示 &nbsp; 这段字符，需要把开头的 & 换成 &amp;，这样浏览器就不会把它当实体解析。

怎么做：显示和号写 &amp;；如果要显示“ ”这段文字，就把开头的和号转义，写成类似 &amp;nbsp; 的形式。

易错点：&amp; 容易被误写成 &amp，少了分号就可能出问题。另一个易错点是：不要把所有 & 都无脑替换，只在需要作为普通文字显示时使用。

常用符号与查表方法 ​

为什么需要：除了空格、尖括号、和号，实际页面还可能需要人民币符号、版权符号、乘号、除号等。它们不一定像 <、>、& 那样必须转义，但用实体写更稳定、更统一。

怎么想：转写稿提到，人民币符号可以直接输入，也可以用输入法输入“人民币”，还可以写 &yen;，页面效果可以一样；但字符实体提供了一种不依赖输入法和键盘的写法。乘号、除号、版权符号也是类似思路。

怎么做：按笔记使用 &yen;、&copy;、&times;、&divide;。更多符号不要死记，按需查表。转写稿也强调：大部分实体用不着，只有不得已或确实需要时才查、才用。

易错点：不要编造实体名称；不确定就查表。还要注意实体名称区分拼写，比如 &times; 不是 &time;，&divide; 不是 &devide;。掌握本节这几个高频实体，其余用时再查即可。

全局属性是什么 ​

全局属性指“所有标签都具有的属性”。本节笔记先列出常见全局属性，课上再通过示例体会它们的作用。注意：全局属性不是“全局样式”，转写稿里说的“全局样式”是口误/同音，实际讨论的是全局属性。

本节笔记中的属性清单如下：

id		唯一标识，可以用作锚点名、可以用作css选择器
name	设置名称标识，对于表单控件用处较大
class	设置类名，用于css选择器
style	用于直接设置css样式
title	设置提示文字，鼠标悬浮在元素上会显示
lang	设置语言，英文：en; 中文：zh-CN

语言参考代码：https://www.w3school.com.cn/tags/html_ref_language_codes.asp

id：唯一标识 ​

为什么需要：页面里有些元素需要被单独定位，比如锚点跳转、CSS 选中某一个元素。
怎么想：id 的核心是“唯一标识”，一句话总结就是唯一标识；它可以作锚点名，也可以作 CSS 选择器。
怎么做：给元素写 id="xxx"，同一个页面里不要重复。课上没有单独演示 id，因为前面锚点已经用过，先记住“唯一”即可。
易错点：id 不是随便起个名字就行，同一页面尽量唯一；不要把它和 name 混为一谈。

name：名称标识 ​

为什么需要：有些元素需要“名称标识”，尤其是表单控件提交数据时要靠 name。
怎么想：name 也是标识，但它不是唯一标识；对大部分标签没什么用，对表单控件用处较大。
怎么做：在表单控件上写 name="xxx"。转写稿明确说：其他标签基本上没什么用，但它是全局属性。
易错点：不要把 name 当成 id 用；name 不要求唯一，id 才强调唯一。

class：类名 ​

为什么需要：CSS 需要批量选中某一类元素，class 就是给元素设置类名。
怎么想：class 的一个作用是用于 CSS 选择器，跟 id 有相似处，但 id 偏唯一，class 偏分类。
怎么做：写 class="类名"，到 CSS 阶段用类选择器选中。转写稿说“类名我们讲 CSS 的时候会用到这个 class”。
易错点：现在还没学 CSS，不要因为“看不到效果”就以为 class 没用；也不要把 class 当唯一标识。

style：直接设置样式 ​

为什么需要：有时想快速给元素加一点样式，直接写在标签上最直观。
怎么想：style 用于直接设置 CSS 样式。课上新建示例文件演示：给一个 div 用 style 设置宽、高、背景色。
怎么做：在标签里写 style="..."，里面写 CSS 代码。课上调试过程是：写完后刷新页面，能看到 div 有宽、有高、有颜色。现在看不懂 CSS 没关系，先看结果。
易错点：style 里写的是 CSS，不是 HTML 属性堆砌；它适合快速演示，正式样式后面会用 CSS 管理。

title：提示文字 ​

为什么需要：有些内容需要鼠标悬浮时给出解释说明。
怎么想：title 是属性，不是“标题”；它的作用是设置提示文字，鼠标悬浮在元素上会显示。
怎么做：给 h1、div、a、img 等元素加 title="提示内容"。课上分别给标题、div、超链接、图片加 title，刷新后把鼠标放上去，就能看到“这是提示文字”。转写稿说图片和超链接用得比较多，可以给图片、链接做解释说明。
易错点：title 不是页面标题；页面标题是 head 里的 title 标签。title 属性是悬浮提示，不要混用。

lang：设置语言 ​

为什么需要：告诉浏览器页面或某段内容是什么语言，旧版浏览器会据此判断要不要提示翻译。
怎么想：英文写 en，中文写 zh-CN。转写稿解释：以前 Chrome 主要看浏览器安装语言版本和网页 lang 是否对不上，对不上就提示翻译；现在新版 Chrome 会分析网页内容，lang 的作用降低了，但为了稳妥仍建议设置。
怎么做：通常只给 html 设置 lang，里面的元素继承；如果某个标签语言特殊，可以单独设置。中文一般写 zh-CN，转写稿说 zh、cn、zh-CN 等写法不区分大小写，但 zh-CN 更常见。调试时把 html 的 lang 改成 en，旧版浏览器会提示翻译；新版更多按内容判断。
易错点：不要给每个标签都重复设置 lang，通常给 html 即可；lang 不是“浪”，是 language 的缩写；中文网站要和实际语言保持一致。

一、meta 元信息是什么：先建立“给浏览器和搜索引擎看”的意识 ​

为什么需要：页面里肉眼可见的内容用标签写，但字符编码、关键词、描述、移动端视口、刷新跳转等信息，用户看不见，却会影响浏览器如何解析页面、搜索引擎如何理解页面。转写里把“meta 元信息”口误成“metata 云信息”，这里统一按 meta 元信息 理解。

怎么想：先记住 meta 写在 head 里，是“关于页面的信息”。本节笔记里的代码就是一组典型写法，先整体保留：

html
<!-- 字符集编码 -->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 设置完美视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 设置网页刷新 -->
<!-- <meta http-equiv="refresh" content="3"> -->
<!-- 定时跳转 -->
<meta http-equiv="refresh" content="10,url=http://www.atguigu.com">
<title>Document</title>

怎么做：在 VS Code 里输入 ! 再按 Tab，可生成基本页面结构；转写里提到它会带几个 meta。我们只需在 head 中按需求补充或修改。

易错点：meta 不是页面正文，不要写到 body 里；不要背所有 meta，知道含义、需要时复制改内容即可。

二、字符集编码：让浏览器别把中文解析乱 ​

为什么需要：如果浏览器不知道页面用什么编码，中文可能乱码。转写里反复口误“字符机编码/支付几电码”，正确是 字符集编码。

怎么想：编码声明要尽早出现。笔记给了两种写法：简短的 charset 和较老的 http-equiv="content-type"。转写说实际开发一般选简短写法。

怎么做：

html
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

易错点：两种写法选一种即可，别混着重复写；UTF-8 不要拼错；charset 尽量靠前。

三、keywords 与 description：给搜索引擎看的摘要 ​

为什么需要：转写里说这两个主要给搜索引擎看，告诉搜索引擎页面关键词和描述。工作中常见场景是 SEO 人员说“把关键字设置成这几个、描述设置成这句话”，前端就把 meta 加上。

怎么想：keywords 是多个词，用英文逗号隔开，笔记要求 8–12 个；description 是 80 字以内、与网站内容相关的一段话。具体写什么通常不由前端决定。

怎么做：

html
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
<meta name="description" content="80字以内的一段话，与网站内容相关">

易错点：keywords 别用中文逗号；description 别写成关键词堆砌；这两个不是页面可见文字，别指望用户直接看到。

四、viewport：移动端“完美视口”先会写 ​

为什么需要：转写里说这是专门针对移动端的设置，本意叫“设置完美视口”。现在先会写，后面讲响应式布局再展开。

怎么想：移动端要让视口宽度等于设备宽度，初始缩放为 1.0。转写里也提醒：现在不理解“视口”没关系，先记住代码。

怎么做：

html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

易错点：width=device-width 和 initial-scale=1.0 用英文逗号分隔；不要写成中文标点；不要以为写了它就自动完成响应式布局。

五、refresh：网页刷新与定时跳转 ​

为什么需要：转写里演示了支付成功页等场景会定时跳转。meta refresh 可以让页面每隔几秒刷新，或若干秒后跳到指定 URL。

怎么想：content="3" 表示每 3 秒刷新一次；content="10,url=..." 表示 10 秒后跳转。转写里在浏览器中观察刷新和倒计时跳转来验证。

怎么做：

html
<!-- 设置网页刷新 -->
<!-- <meta http-equiv="refresh" content="3"> -->
<!-- 定时跳转 -->
<meta http-equiv="refresh" content="10,url=http://www.atguigu.com">

易错点：定时跳转里 url= 后写完整地址；10,url=... 的逗号别丢；刷新和跳转不要同时启用造成干扰；实际项目是否使用要听需求，不要自己乱加。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

1. iframe + target：让链接和表单在指定内联框架中打开 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>iframe 和 target</title>
</head>
<body>
  <!-- 超链接的 target 指向 iframe 的 name -->
  <a href="https://www.taobao.com" target="xiaole">淘宝</a>
  <a href="https://www.163.com" target="xiaole">网易</a>
  <!-- 本地页面同样可以引入 -->
  <a href="./简历表格.html" target="xiaole">简历表格</a>

  <!-- 表单提交的结果也显示在同一个 iframe 里 -->
  <form action="https://www.so.com/s" target="xiaole">
    <input type="text" name="q">
    <button>搜索</button>
  </form>

  <!-- 双标签，src 可以先空着；name 是自己取的名字，供 target 使用 -->
  <iframe src="" name="xiaole" frameborder="1" width="1200" height="600"></iframe>
</body>
</html>

要点解释：

  • iframe 的 name="xiaole" 是“子窗口的名字”，target="xiaole" 必须和它完全一致，写错一个字就会新开窗口打开。
  • target 的值只写名字，不要加 #（# 是页内锚点的写法）。
  • frameborder：0 无边框，其他数字有边框，不写默认就有边框；width、height 控制框架大小。
  • iframe 是双标签，src 留空也能正常渲染出一个空白框架。
  • 表单里 name="q" 是 360 搜索的参数名（百度是 wd，且百度拒绝被 iframe 嵌入，演示时换 360 更容易看到效果）。

2. HTML 字符实体：空格与特殊符号 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>字符实体</title>
</head>
<body>
  <!-- 源码里敲多少个空格，页面都只显示一个 -->
  <p>小乐      水利</p>
  <!-- 用实体表示空格，写几个就是几个 -->
  <p>小乐&nbsp;&nbsp;&nbsp;&nbsp;水利</p>
  <!-- 编号写法：&nbsp; 的编号是 160 -->
  <p>小乐&#160;&#160;&#160;&#160;水利</p>

  <hr>

  <!-- 想让 <h1> 作为文字显示，必须把尖括号转义 -->
  <p>今天我们学习了 &lt;h1&gt; 标签，它是标题的意思</p>
  <!-- 只改左半边也能显示 -->
  <p>今天我们学习了 &lt;h1 标签</p>

  <hr>

  <!-- 想把 &nbsp; 原样显示出来，就要转义 & 本身 -->
  <p>&amp;nbsp; 是一个表示空格的字符实体</p>

  <p>&yen; 100 &nbsp;&nbsp; &copy; 2024 &nbsp;&nbsp; 3 &times; 5 = 15 &nbsp;&nbsp; 10 &divide; 2 = 5</p>
</body>
</html>

要点解释：

  • 语法固定为：& 开头 + 实体名称 + ; 结尾，分号不能省；也可以用 &#编号; 的写法，如 &#160; 等价于 &nbsp;。
  • 手敲的连续空格会被浏览器压缩成一个，只有 &nbsp; 能真正拉开间距；<pre> 是另一套机制，只针对空格并不能替代实体。
  • &lt; &gt; &amp; 这三个是不可替代的：< > 会被浏览器当标签解析，& 会被当成实体开头。
  • 只把左半边 < 写成 &lt;，右半边写 > 也能正常显示，但规范写法是两边都转义。
  • &yen;（¥）、&copy;（©）、&times;（×）、&divide;（÷）属于习惯用法，能直接输入时不必强行用实体。

3. 全局属性 + meta 元信息 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 字符集编码，写在 head 最前面 -->
  <meta charset="UTF-8">
  <!-- <meta http-equiv="content-type" content="text/html;charset=utf-8"> 另一种等价写法 -->

  <!-- 网页关键字：8~12 个以英文逗号隔开的词 -->
  <meta name="keywords" content="HTML,字符实体,全局属性,meta,前端">

  <!-- 网页描述信息：80 字以内，与网站内容相关 -->
  <meta name="description" content="本节讲解 iframe 内联框架、HTML 字符实体、全局属性与 meta 元信息。">

  <!-- 完美视口，移动端必备 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 每 3 秒刷新一次（先注释，避免演示时页面狂刷） -->
  <!-- <meta http-equiv="refresh" content="3"> -->
  <!-- 10 秒后定时跳转 -->
  <!-- <meta http-equiv="refresh" content="10,url=http://www.atguigu.com"> -->

  <title>全局属性与 meta</title>
  <style>
    .box { width: 200px; height: 100px; background-color: skyblue; }
  </style>
</head>
<body>
  <!-- id：唯一标识，可做锚点名、CSS 选择器 -->
  <h1 id="top" title="全局样式">全局属性</h1>

  <!-- class：类名；style：直接写 CSS；title：鼠标悬浮提示 -->
  <div id="box1" class="box" style="background-color: pink;" title="hello world">这是一个 div</div>

  <!-- title 常用于给图片、链接做解释说明 -->
  <img src="./assets/xiaole.jpg" alt="图片" title="小乐的幸福生活">

  <a href="#top" title="这是一个小链接">回到顶部</a>

  <!-- lang：单独给某个元素设置语言，就不继承 html 上的 zh-CN -->
  <a href="https://www.baidu.com" lang="en" title="这是英文链接">English Link</a>
</body>
</html>

要点解释：

  • id 全局唯一，可作锚点名和 CSS 选择器；name 不是唯一的，主要对表单控件有用；class 只服务于 CSS 选择器。
  • style 里写的是 CSS 代码，是“行内样式”，优先级高但不利于维护；title 是提示文字不是标题，鼠标悬浮才显示，图片和链接上用得最多。
  • lang 一般只给 <html> 设一次，内部元素自动继承；个别元素（如上面的英文链接）可单独设置覆盖。中文常用 zh-CN，不区分大小写；设置语言的目的是让浏览器判断是否需要提示翻译。
  • meta charset 必须尽早出现，否则中文可能乱码；keywords 用英文逗号分隔，description 控制在一句话内，这两项主要给搜索引擎看。
  • refresh 的定时跳转写法是 content="10,url=地址"，url 前用逗号隔开；调试期间建议先注释掉，否则页面会不停刷新或跳走。
  • viewport 内容固定为 width=device-width, initial-scale=1.0，写错属性值移动端缩放会失效。

常见错误 ​

  1. 超链接点了没反应 / 还是在新窗口打开 现象：<a target="xiaole"> 写了，但点击后目标页跑到新标签页，iframe 里一片空白。 原因：target 的值必须和某个 iframe 的 name 属性值完全一致，而 name 不是 id；另外 target 拼错、iframe 忘记写 name 都会静默失效。 修法：给 iframe 加 name="xiaole"，超链接写 target="xiaole"，两者逐字符对照；用浏览器审查元素确认 iframe 的 name 确实生效。

  2. iframe 里引入大站首页（如百度、淘宝）显示空白 现象：本地示例能打开，换成百度/淘宝就白屏，控制台报拒绝显示。 原因：目标站点通过响应头 X-Frame-Options / CSP 禁止被其他页面嵌套，这是对方服务器的策略，不是你代码写错。 修法：换一个允许被嵌套的站点验证功能，或改为引入本地页面；不要在这类站点上死磕。

  3. 写了七八个空格，页面只显示一个 现象：源码里空格敲了一长串，渲染出来只缩进一点点。 原因：HTML 会把连续空白字符折叠成一个。 修法：用 &nbsp;（可重复写多个）；更规范的做法是交给 CSS 的 margin / padding 处理间距。

  4. 想在页面上"演示"一段标签代码，结果标签真的生效了 现象：想显示 <h1>是标题</h1> 这行字，页面上却出现了又黑又大的标题。 原因：< > 在 HTML 中有语法含义，浏览器直接当标签解析了。 修法：把左尖括号写成 &lt;（右尖括号可写可不写，但建议成对写成 &gt;）。

  5. 想显示 &nbsp; 这串字符本身，结果变成一个空格 现象：页面里只出现空白，看不到 &nbsp; 字样。 原因：& 是实体的起始符，被浏览器解析掉了。 修法：把 & 写成 &amp;，即 &amp;nbsp;。

  6. 中文页面出现乱码 / 编辑器正常浏览器乱码 现象：浏览器里中文全是方块或问号。 原因：<meta charset="UTF-8"> 缺失、写错，或文件实际保存的编码与声明不一致。 修法：确认 charset 写在 <head> 内靠前位置，并在编辑器里把文件另存为 UTF-8。

  7. Emmet 一键生成的模板每次都是 lang="en" 现象：中文页面，浏览器仍弹出"是否翻译此页面"。 原因：! + Tab 生成的模板默认语言是 en，与页面实际语言不符。 修法：在设置里搜索 emmet 的语言变量，把 lang 的值改为 zh-CN，再重新生成模板。

  8. Live Server 打不开某个 HTML 文件 现象：右键 Open with Live Server 无反应或 404。 原因：Live Server 以你打开的文件夹作为 Web 根目录，根目录之外的文件访问不到。 修法：先把整个项目文件夹拖进编辑器，再在项目内打开该文件；仅需快速预览时改用 Open in Default Browser。

练习 ​

  1. 双 iframe 聚合搜索：页面上下各放一个 iframe（分别命名 left、right），上方放两个超链接，点击后分别把 360 搜索和搜狗搜索加载到指定的 iframe 中。要求点击左边链接只刷新左边 iframe，右边不受影响。

  2. 表单提交到 iframe：写一个搜索表单，action 指向 360 搜索地址、输入框 name="q"，用 target 把提交结果渲染到下方 iframe 内。完成后回答：如果把 target 去掉会发生什么？

  3. 实体字符练习页：在一个页面中实现以下四项，每项旁边用注释说明用了哪个实体： ① 两个词之间隔开约 8 个字符宽度的空白； ② 原样显示字符串 <div>我是一个容器</div>； ③ 原样显示字符串 &nbsp;； ④ 显示一行价签：￥99 × 3 ÷ 3 = ￥99 © 小乐。

  4. 全局属性综合练习：给页面中的标题、图片、超链接、一段文字分别加上 title，鼠标悬浮验证效果；给图片加 id 与 class，再用 style 给它设置一个边框；把整页 lang 设为中文，只让某一个超链接单独设为英文。

  5. meta 实操：给页面补齐 charset、keywords（8 个词，英文逗号分隔）、description（80 字以内）、viewport，并额外做一个"支付成功，10 秒后跳回商城首页"的页面。

原视频对照 ​

#视频时长
1iframe和target10:57
2字符实体17:51
3全局属性15:51
4meta元信息13:31
5vscode扩展23:46
6vscode相关设置12:32
7vscode快捷键11:06

小结 ​

  1. iframe 本质是嵌在当前页面里的一个"子窗口"，name 是它被 target 定位的唯一凭据，这是它和超链接、表单联动的关键。
  2. iframe 能否加载某个外部站点，取决于对方的嵌套策略，不是你的代码能决定的，遇到白屏先怀疑 X-Frame-Options。
  3. 字符实体只在"有特殊语法含义、或键盘打不出来"时才用，记住 &nbsp; &lt; &gt; &amp; 这四个不可替代的即可，其余查表。
  4. 所有实体都是 & 开头、; 结尾，中间写名称（或 #编号），名称更好记，实际开发优先用名称。
  5. 全局属性的价值在于"任何标签都能用"：id 管唯一标识、class 管批量归类、style 管临时样式、title 管悬浮提示、lang 管语言归属。
  6. lang 一般只写在 <html> 上让全页继承，个别元素语言不同才单独覆盖；中文写 zh-CN，且要与页面实际内容保持一致。
  7. meta 是"给浏览器和搜索引擎看的说明"，charset 必写，keywords / description 按 SEO 要求填，viewport 是移动端适配的前提，refresh 可做定时刷新与跳转。
  8. 开发环境上，Live Server 会启动一个本地 Web 服务器，比双击打开更接近真实上线环境，但它的作用范围被限制在你打开的文件夹内。