JavaScript 概述与JavaScript 基本语法（Day1 1/3）

本页对应 Day01_JavaScript，共 7 段视频，约 2 小时 5 分。

学习目标

能够使用媒体查询与移动优先策略，按 640px、1024px 等阈值编写响应式页面样式，并说明样式覆盖关系。
能够实现响应式导航与响应式图片，比较并选用多图片、背景图、picture/source、srcset 等方案完成适配。
能够完成响应式课程列表案例，使用 Flex 布局、换行、百分比宽度、内边距与容器最大宽度实现一行 1/2/4 项及版心居中。
能够说明 BFC 的含义、常见创建方式，并使用 BFC 解决子元素浮动导致的高度塌陷和父子/兄弟外边距塌陷问题。
能够区分机器语言、汇编语言、高级语言及编译型/解释型语言，并说明 JavaScript 的动态、弱类型、解释型、基于对象、脚本语言等特征。
能够说明浏览器端 JavaScript 由 ECMAScript、DOM、BOM 组成，并使用行内式、内嵌式、外链式三种方式在 HTML 中正确引入和执行 JavaScript。

知识点

以下按正确术语写作：响应式、移动优先、块级格式上下文（BFC）、@media。

响应式布局：`@media`与移动优先

为什么需要：同一页面要在手机、平板、桌面显示不同布局，不能只靠固定宽度。怎么想：先写最小屏默认样式，再用min-width逐级覆盖，也就是移动优先。怎么做：默认样式写媒体查询外，640、1024两个阈值分别覆盖。转写里的“应优先”应理解为“移动优先”，核心是“默认最小屏，够大再改”。易错点：不要写一堆复杂and条件；阈值范围靠覆盖实现，后写的规则覆盖前面的。

css

/* 默认：最小屏 */
@media (min-width: 640px) { /* 平板 */ }
@media (min-width: 1024px) { /* 桌面 */ }

响应式课程列表：间距、列数与版心

为什么需要：课程列表在小屏一项一行，大屏要两项、四项，且项目间要有间距。怎么想：如果间距用margin，width:25%再加外边距会放不下四个；所以把间距做成padding，并给li加box-sizing:border-box。怎么做：先写最小屏，再在640改50%、1024改25%；ul用flex并允许换行。调试时先调大视口看是否换行，发现挤成一行就补flex-wrap:wrap；发现50%加内边距超宽就补box-sizing。易错点：flex要加在ul上，不是加在li上；大屏还要限制版心宽度并居中。

html

<div class="course">
  <ul class="course-list">
    <li class="course-item">
      <div class="course-item-inner">
        <img src="course.jpg" alt="课程图片">
        <div class="course-desc"><h3>课程标题</h3></div>
      </div>
    </li>
  </ul>
</div>

css

.course-item { padding: 10px; }
.course-item img { width: 100%; }
.course-desc h3 { font-size: 1.5em; padding: 20px 0; text-align: center; }

@media (min-width: 640px) {
  .course-list { display: flex; flex-wrap: wrap; }
  .course-item { width: 50%; box-sizing: border-box; }
}
@media (min-width: 1024px) {
  .course-item { width: 25%; }
  .course { max-width: 1200px; margin-left: auto; margin-right: auto; }
}

BFC：用“独立容器”解释布局问题

为什么需要：子元素浮动会让父元素高度塌陷，后面的元素上移重叠；子元素上下外边距也可能“塌”到父元素外面。怎么想：给父元素创建BFC，让它像独立容器，内部布局不影响外部。怎么做：常用overflow:hidden；转写还列了浮动、绝对/固定定位、行内块、表格相关display、伸缩项目、多列容器、column-span等。调试时先不加，看到父高塌陷、后面的P贴上来；给父加overflow:hidden后，父元素能包住浮动子元素。易错点：overflow不是默认visible才创建；用浮动/定位创建BFC自身又脱离文档流，会带来新问题；面试回答可说创建方式和能解决的两个问题，不必硬背模糊定义。

css

.wrapper { border: 4px dashed #000; }
.box { float: left; width: 200px; height: 100px; background: #ccc; }
.wrapper { overflow: hidden; } /* 创建BFC，包住浮动子元素 */

编程语言与JavaScript的定位

为什么需要：先分清HTML/CSS与编程语言。怎么想：编程语言要能计算、能逻辑判断，满足图灵完备；HTML是标记语言，CSS是样式表语言。怎么做：按发展看机器语言、汇编语言、高级语言；JS属于高级语言，且是动态、弱类型、解释型、基于对象、脚本语言。易错点：Java和JavaScript没关系，类似“雷锋和雷锋塔”；“弱类型”不是强弱高低，而是类型约束方式不同。

浏览器端JS的组成与运行环境

为什么需要：JS代码要在环境里执行，环境不同，能调用的接口不同。怎么想：ECMAScript规定语法本身；浏览器额外提供BOM和DOM接口。怎么做：本阶段学ECMAScript语法，再学浏览器API；浏览器内置解释器如V8，Node.js让JS脱离浏览器运行。易错点：ECMAScript是标准/语法，JavaScript是常用叫法；不要以为会语法就会所有领域，换环境还要学对应API。

在HTML中使用JS的三种方式

为什么需要：JS要嵌入HTML执行。怎么想：对应CSS的行内、内嵌、外链。怎么做：行内写事件属性，如onclick；内嵌用<script>；外链用<script src="01.js">，外部文件只写JS，不再写<script>。调试：script放head时按钮还没加载，获取不到元素；放到body末尾即可。易错点：外链标签内不要再夹代码；内嵌和外链都建议放其他元素后面，避免阻塞和获取不到元素。

html

<button onclick="alert('好疼')">点我</button>
<script>
  alert('hello');
</script>
<script src="01.js"></script>

一、JavaScript 是什么：先记住五个关键词

为什么需要： 初学 JavaScript，最容易把它和 Java 混在一起，也容易把“弱类型”“解释型”理解成“语言不强”“不用编译”。所以先把 JavaScript 的身份说清楚，后面学数据类型、对象、运行环境时才不会乱。

怎么想： 笔记给的定义是：JavaScript 是一门动态的、弱类型的、解释型的、基于对象的脚本语言。这五个词分别对应不同侧面：动态和弱类型跟“数据类型”有关；解释型跟“代码怎么运行”有关；基于对象跟“对象机制”有关；脚本跟“嵌在其他语言/环境中执行”有关。转写稿里反复说：动态、弱类型现在干讲不容易懂，等讲到数据类型再展开；基于对象也要等讲对象机制时再解释。这里先建立框架，不硬背。

怎么做： 可以先把定义拆成一句话：JavaScript 是主要嵌在浏览器等宿主环境中执行、运行时才确定数据类型、类型可自动转换、边编译边运行的脚本语言。注意“弱类型”不是“强弱”的强弱，只是类型表示方式；“解释型”也不是完全不编译，而是边编译边运行，开发反馈更快。笔记里“编译型：边编译，边运行”这一句与转写稿讲解不一致，按转写稿应理解为：编译型是先编译再运行，解释型是边编译边运行。

易错点： 第一，Java 和 JavaScript 没有关系，不要因为名字像就当成一门语言。第二，不要把“弱类型”理解成“语言不厉害”。第三，不要把“解释型”理解成“没有编译过程”。第四，基于对象先记住术语，不要提前编造“面向对象”的完整结论，等对象机制再学。

二、JavaScript 的运行环境：解释器在哪里，代码就在哪里跑

为什么需要： 写好的 JavaScript 代码不能凭空执行，必须有“解释器/运行环境”把它翻译成计算机能认识的东西。知道运行环境，才知道自己写的代码到底跑在浏览器里，还是跑在 Node.js 里。

怎么想： 笔记列了两个运行环境：

1. 浏览器，如Chrome浏览器中的V8引擎
2. Node.js

浏览器里的 V8 引擎是 JavaScript 的解释器；Node.js 也是 JavaScript 的运行环境。转写稿强调：Node.js 不是 JavaScript 框架，它跟浏览器是对标关系，让 JavaScript 可以摆脱浏览器执行，所以 JavaScript 不只可以做前端，也可以在 Node.js 帮助下做后端。但要注意：换运行环境，语言本身还是 JavaScript，运行环境提供的 API 会变。

怎么做： 现阶段先记住两个名字：浏览器中的 V8 引擎、Node.js。写浏览器端代码，就在浏览器环境里运行；以后学 Node.js，再学它提供的 API。转写稿还提到，JavaScript 入门快的一个原因是浏览器自带解释器，不需要像 Java、Python 那样先额外安装运行环境。

易错点： 不要把 Node.js 当成“JavaScript 的某个框架”；它是运行环境。也不要以为会了浏览器端 JavaScript，就自动会 Node.js 后端开发——语法相同，但运行环境提供的接口和业务场景不同。

三、浏览器端 JavaScript 的组成部分：语言本身 + 浏览器给的 API

为什么需要： 很多初学者以为“JavaScript 就是一门语言”，但浏览器端能操作页面、弹窗、打开窗口，并不全是 ECMAScript 语法本身，还依赖浏览器和文档提供的 API。分清组成，后面才知道 BOM、DOM 为什么单独学。

怎么想： 笔记写得很清楚：

1. 基本代码语法， ECMAScript，ECMA指定
2. BOM， 浏览器提供的API，W3C指定
3. DOM， 文档提供的API，W3C指定

ECMAScript 是代码语法本身，由 ECMA 指定；BOM 是浏览器提供的 API，DOM 是文档提供的 API，二者由 W3C 指定。转写稿用了一个比喻：ECMAScript 像“人”的基本功能，浏览器像交通工具，BOM/DOM 像驾驶技能和操作接口；换到 Node.js，就像换了一种交通工具，接口不一样。关于 ECMAScript 和 JavaScript 的区别，转写稿建议不要纠结“标准/实现”那种绕法，更准确的理解是：JavaScript 就是别名，ECMAScript 指语言标准/语法本身。

怎么做： 学习时分两层：先学 ECMAScript 基本语法，再学浏览器提供的 BOM、DOM API。判断一个东西属于哪部分：语言本身的变量、类型、流程控制属于 ECMAScript；操作浏览器窗口、地址栏等属于 BOM；操作页面文档结构属于 DOM。

易错点： 不要把 BOM、DOM 当成 ECMAScript 语法；也不要因为 ECMAScript 和 JavaScript 名称不同，就以为它们是两门语言。转写稿里还提醒：不同运行环境 API 不同，浏览器端会 DOM/BOM，不等于自动会 Node.js 的 API。

先明确本节边界：从页面布局走向脚本

上一节解决的是响应式页面、媒体查询、移动优先以及 BFC 等问题；本节开始进入 JavaScript 基本语法。先建立一个判断：HTML 和 CSS 是计算机语言，但不是严格意义上的编程语言。HTML 是标记语言，CSS 是样式表语言，它们缺少“计算”和“逻辑判断”。编程语言的核心是能计算、能带逻辑，满足图灵完备性。网页为什么需要 JavaScript？课堂举的例子很典型：登录或注册时校验邮箱格式，如果只有 HTML/CSS，只能提交到后端再判断；网速慢时用户等很久才被告知格式错误。于是需要一种能在浏览器端执行的程序，先做简单验证和交互。

怎么想：JavaScript 是解释型高级语言，浏览器内置解释器即可运行；它还是动态、弱类型、基于对象的脚本语言。这里的“弱类型”不是“强弱”的强弱，而是类型表示方式，后续讲数据类型再展开。
怎么做：先学 ECMAScript 基础语法，再学 ES6 之后新增语法；二者有差异，课堂强调要分开学，避免混在一起蒙掉。
易错点：JavaScript 和 Java 没有关系，不是“Java 脚本”；ECMAScript 是标准名，JavaScript 是更常用的名字/别名，不要把“标准与实现”简单绝对化。

浏览器端 JavaScript 由什么组成

为什么需要：只学语法，代码仍不知道怎么操作窗口、文档、按钮。
怎么想：JavaScript 由两部分构成：一是 ECMAScript 语法本身，规定代码怎么执行；二是宿主环境提供的 API。浏览器端主要是 BOM 和 DOM。ECMAScript 不规定代码在哪里执行，浏览器、Node.js 都可以作为运行环境。
怎么做：本阶段先学浏览器端 JavaScript：ECMAScript 基础 + 浏览器 API。浏览器里的解释器典型是 V8；Node.js 则让 JavaScript 脱离浏览器执行。
易错点：语法会了不等于会用 API；浏览器 API 和 Node.js API 不一样，就像同一个人开汽车和骑摩托，基本能力相同，但操作接口不同。

行内式：把事件当属性写

为什么需要：快速演示“用户点击后执行代码”。
怎么想：onclick 既是 HTML 属性，又是 JavaScript 事件；属性值里写 JavaScript 代码。
怎么做：

html

<button onclick="alert('好疼!')">点我</button>
<p onclick="alert('好痒'); alert('特别痒')">段落</p>

课堂调试时，打开页面不会弹框，点击按钮才弹“好疼”；点击段落会先弹“好痒”，再弹“特别痒”。还可以用 ondblclick 演示双击，用 oncontextmenu 演示右键。
易错点：不要把它和 CSS 的 style 属性混淆；不同事件触发条件不同；属性值里可以写多条语句；行内式只适合少量演示，代码一多结构会乱。

内嵌式：`script` 标签与执行位置

为什么需要：不依赖某个元素事件，让页面打开就执行。
怎么做：

html

<script>
  alert('hello');
</script>

课堂演示中，这段代码放在页面里，一打开就弹“hello”。它也可以放在 HTML 任意位置，但建议放在所有元素后面。为什么？课堂调试过一个典型问题：在 head 里先写获取 button 并绑定点击的代码，页面打开能弹“hello”，但点按钮没反应；原因是 HTML 按顺序加载，脚本执行时 button 还没加载，选择器取到空。把脚本移到元素后面就好使。
易错点：脚本可能阻塞后续页面解析；需要获取元素时，要保证元素已经加载；不要以为“代码没执行”，很多时候是“元素没取到”。

外链式：用 `src` 引入独立 JS 文件

为什么需要：结构、样式、行为分离，便于复用和维护。
怎么做：新建独立 .js 文件，里面直接写 JavaScript，不再写 <script> 标签；HTML 中这样引入：

html

<script src="js/03.js"></script>

易错点：外链文件里不能再包一层 <script>；src 写相对路径或绝对路径均可；外链脚本的位置同样建议放在元素后，原因和内嵌式一致——避免阻塞、避免取不到元素。

三种方式怎么选，调试怎么排

行内式适合极小演示；内嵌式适合单页小段逻辑；外链式适合正式项目。调试顺序可以固定为：先看脚本是否执行（弹框/控制台），再查元素是否已经加载，再查事件是否绑定，最后查 src 路径。课堂反复强调的“位置”问题，本质是 HTML 顺序加载与脚本阻塞；把这一点想清楚，三种引入方式就不容易混。

课堂画面

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例

示例一：行内式（内联脚本）与内嵌式（嵌入脚本）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>行内式与内嵌式脚本</title>
  <style>
    p { width: 600px; }
  </style>
</head>
<body>
  <h1>JavaScript</h1>

  <!-- 行内式：事件以 HTML 属性的形式写在元素上，属性值里写 JS 代码 -->
  <button onclick="alert('好疼！')">点我</button>
  <button ondblclick="alert('疼死了！')">双击我</button>
  <button oncontextmenu="alert('右键也疼！')">右键我</button>
  <p onclick="alert('好痒'); alert('特别痒')">点我一下试试</p>

  <!-- 内嵌式：script 标签内部直接写 JS，不加 src -->
  <script>
    alert('hello 高亮');

    var btn = document.querySelector('#btn');
    btn.onclick = function () {
      alert('好痒');
    };
  </script>
</body>
</html>

关键行与易错点：

onclick、ondblclick、oncontextmenu 是 HTML 属性，同时也是 JS 事件；属性值里写的是 JS 代码，多条语句用分号隔开。
行内式不需要等页面加载完，用户触发对应事件时才执行；内嵌式里的 alert('hello 高亮') 是页面一打开就立即执行。
script 标签放在 body 末尾，是为了保证按钮已经加载，querySelector 能取到元素。若放到 head 里，元素还没加载，取到的是 null，绑定会失败。
易错点：转写稿中演示用的是 document.querySelector('button')，它会选中第一个按钮并覆盖该按钮行内写的 onclick。这里改用 #btn 精确选中目标按钮，避免覆盖。
易错点：script 标签内部不能再写 HTML 标签，直接写 JS 代码即可。

示例二：外链式（外部脚本）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外链式脚本</title>
</head>
<body>
  <h1>JavaScript</h1>
  <button id="btn">点我</button>

  <!-- 通过 src 引入外部 JS 文件 -->
  <script src="./script.js"></script>
</body>
</html>

// script.js
alert('hello 高亮');

var btn = document.querySelector('#btn');
btn.onclick = function () {
  alert('好痒');
};

关键行与易错点：

外链式和内嵌式用的是同一个 script 标签，区别只在于有没有 src 属性：有 src 就是外部脚本，没有 src 才是内嵌脚本。
src 写的是 JS 文件的路径，相对路径、绝对路径都可以。
有 src 的 script 标签内部不要再写代码，写了也不会执行——这点和 CSS 的 link 引入类似，不能像 style 标签那样在标签内部写内容。
外链式同样建议放在 body 末尾，避免阻塞后续元素渲染，也保证能获取到前面的元素。
易错点：文件名后缀必须是 .js，路径写错会 404，页面看起来“没反应”。

示例三：BFC 解决子元素浮动导致的高度塌陷

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>BFC 解决子元素浮动高度塌陷</title>
  <style>
    .wiper {
      width: 1000px;
      border: 4px dashed #333;
      /* 创建 BFC：overflow 只要不是默认的 visible 即可 */
      overflow: hidden;
    }

    .box {
      width: 200px;
      padding: 20px;
      margin: 0 10px;
      background: #ccc;
      float: left;
    }

    p {
      width: 800px;
      margin: 20px 0;
      background: #099;
    }
  </style>
</head>
<body>
  <div class="wiper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
  <p>我是后面的 P，父元素没有 BFC 时我会跑上来和浮动元素重叠</p>
</body>
</html>

关键行与易错点：

.wiper 没有设置高度，靠子元素撑开；三个 .box 设置 float: left 后脱离文档流，父元素高度塌陷，后面的 p 会顶上来与浮动元素重叠。
给父元素 .wiper 加 overflow: hidden 就创建了 BFC，父元素会重新包裹浮动子元素，高度被撑开，后面的 p 回到正常位置。
创建 BFC 的方式不止 overflow: hidden：float、绝对/固定定位、display: inline-block、表格单元格/行/标题、伸缩项目、多列容器、column-span: all 等都可以（转写稿列举了九种，能记住五六种即可）。
易错点：overflow: hidden 的本意是裁剪溢出内容，用来创建 BFC 属于“附带功能”；如果不想改变 overflow 的表现，可以用 display: flow-root 或 column-span: all（转写稿称后者是“更甜的语法糖”）。
易错点：给父元素加边框或 padding 也能让高度“看起来”正常，但那是隔离了外边距，并不是真正创建 BFC。

常见错误

1. 手机端媒体查询完全不触发 现象：桌面浏览器拖动窗口时断点正常，真机或 DevTools 手机模式下样式全乱。原因：页面缺少 viewport 声明，移动端按 980px 虚拟视口渲染，min-width 判断的宽度不是你看到的宽度。修法：在 <head> 中补 <meta name="viewport" content="width=device-width, initial-scale=1">，再验证断点。

2. 断点写了但大屏样式被小屏覆盖 现象：≥1024 的规则不生效，或时好时坏。原因：移动优先却混用了 max-width，或 min-width 未按 640 → 1024 升序书写，后写的规则覆盖面被前面的同优先级规则抢走。修法：统一只用 min-width 且从小到大排列；同一断点的样式集中写在该媒体查询内，不要散落到文件各处。

3. 一行四张卡片放不下 / 页面出现横向滚动条 现象：width:25% 之后只排下 3 个，或整体被撑出横向滚动。原因：间距用 margin 或 padding 追加在百分比宽度之外，未改盒模型；25%×4 + 间距 > 100%。修法：卡片外层 box-sizing: border-box，间距用 padding 做在内层；父容器 display:flex; flex-wrap:wrap，li 只负责宽度百分比。

4. 卡片全部挤在一行、被压成细条 现象：给 li 设了 width:50%，结果 8 个并排且每个都极窄。原因：父元素 ul 设了 display:flex 但没设 flex-wrap，默认 nowrap 且子项可收缩。修法：ul { display:flex; flex-wrap:wrap }，并确认 li 有 flex-shrink:0 或足够明确的宽度。

5. 大屏下版心被无限拉伸 现象：宽屏上图片和文字被拉得极大，一行内容横贯全屏。原因：只给容器设了 width，没有 max-width 上限。修法：max-width:1200px（或按设计稿）配合左右 auto 居中；小屏不设宽度，自然跟随父容器。

6. 设置居中后，之前的 margin-top 消失 现象：加上居中后顶部间距没了，或反过来。原因：用 margin: 0 auto 复合属性覆盖了先前单独写的 margin-top。修法：改用 margin-left:auto; margin-right:auto，只动需要动的方向。

7. 用 overflow:hidden 创建 BFC 后，下拉菜单/阴影被裁掉 现象：高度塌陷修好了，但子元素溢出部分（下拉面板、box-shadow、tooltip）看不见了。原因：overflow 的本意仍在生效，BFC 只是它的"顺带"效果。修法：换成不影响裁切的创建方式（如 display: flow-root、display: table、column-span: all），把 overflow:hidden 留给真正需要裁剪的场景。

8. 用 float 或 absolute 创建 BFC，结果父元素自己跑了 现象：塌陷解决了，但父容器脱离文档流，后面的元素和它重叠。原因：浮动与绝对定位本身就是"问题制造者"，属于顺带创建 BFC，副作用未消除。修法：区分"顺带创建"与"特意创建"——只为解决布局问题时，选无副作用的方案；面试表述时说清这一层。

9. 脚本写在 <head> 里，点击按钮没反应 现象：控制台报 Cannot read properties of null，或事件绑定无效果。原因：HTML 按顺序解析，脚本执行时目标元素还没被解析出来，querySelector 取到 null。修法：脚本移到 </body> 前；或给 <script> 加 defer；或在 DOMContentLoaded 回调中执行。

10. 外链 script 标签里写的代码不执行 现象：<script src="a.js"> alert(1) </script> 中的 alert 毫无反应。原因：带 src 的 script 会忽略标签内部内容。修法：外部脚本只保留 src，内嵌代码另起一个 <script> 标签。

11. 行内事件里引号嵌套出错 现象：onclick="alert("hello")" 点击无反应或语法错误。原因：外层双引号与内层双引号提前闭合了属性值。修法：外层双引号、内层单引号：onclick="alert('hello')"。

练习

练习 1 · 断点重构 给出一段用 max-width: 1024px / max-width: 640px 从大到小写的媒体查询，改写为移动优先的 min-width 升序版本，并写 3 行注释说明：为什么两套方向不能混写在同一份样式表里。

练习 2 · 响应式卡片列表 用 8 个卡片实现：<640 一行 1 个、≥640 一行 2 个、≥1024 一行 4 个；卡片间距必须用内边距实现，不允许用外边距；≥1024 时整体版心 max-width: 1200px 并居中。验收：任意宽度下不出现横向滚动条；打开 DevTools 检查每张卡片的 offsetWidth 之和不超过容器宽度。

练习 3 · BFC 副作用对比 构造两个 demo：①父元素高度塌陷；②子元素上下外边距溢出到父元素外面。每个 demo 分别用至少 3 种方式创建 BFC 修复（含 overflow:hidden、display:flow-root、float 或 position:absolute），列表对比每种方式带来的新问题。

练习 4 · 三种引入方式 用同一个功能（点击按钮弹出一句话），分别写成内联脚本、内嵌脚本、外部脚本三个文件。然后： ①把内嵌版放到 <head> 中，复现"取不到元素"的报错并记录报错原文； ②用 defer 或移到 </body> 前修复； ③在外链 script 标签内部再写一行代码，观察结果并解释。

练习 5 · 找错 下面 4 行代码各有一处问题，指出问题与修法：

<script src="main.js"> console.log('a') </script>
<button onclick="alert("hi")">点我</button>
@media (max-width: 640px) { ... } 写在 @media (min-width:1024px) { ... } 之后
.wrap { margin: 30px 0 0; } 后面又写了 .wrap { margin: 0 auto; }

原视频对照

#	视频	时长
1	响应式页面总结	06:00
2	响应式页面案例-课程列表	15:22
3	BFC	31:20
4	编程语言介绍	27:14
5	JS介绍	21:07
6	浏览器端JS的组成	07:08
7	在HTML中使用JS的三种方式	16:55

小结

移动优先 = 默认样式承担最小屏 + 只用 min-width 升序覆盖；方向一旦确定就不要再混 max-width，否则覆盖关系不可控。
卡片间距的通用解法是"外层宽度百分比 + 内层 padding + box-sizing: border-box"，配合父容器 flex-wrap: wrap，百分比才能真正整除。
版心约束靠 max-width + 左右 auto；居中时避开 margin 复合属性，防止覆盖已写的单方向外边距。
BFC 不必死磕定义，按"能创建它的 5~6 种方式 + 能解决的两类问题（子元素浮动、外边距塌陷）"来记忆和表述即可。
创建 BFC 要区分"顺带"与"特意"：float、absolute、overflow 都带副作用，优先选 flow-root、display: table、column-span: all 这类不影响原意的方案。
JavaScript 是动态、弱类型、解释型、基于对象的脚本语言，与 Java 没有关系；它的"弱"只是类型表示方式，不是能力强弱。
浏览器端 JS = ECMAScript（语法，ECMA 制定）+ BOM + DOM（API，W3C 制定）；换运行环境（如 Node.js）语法不变，要换的是那套 API。
三种引入方式共用 script 标签，区别只在有无 src；位置统一放 </body> 之前，既避免阻塞渲染，也避免取不到元素。

JavaScript 概述与JavaScript 基本语法（Day1 1/3） ​

学习目标 ​

知识点 ​

响应式布局：@media与移动优先 ​

响应式课程列表：间距、列数与版心 ​

BFC：用“独立容器”解释布局问题 ​

编程语言与JavaScript的定位 ​

浏览器端JS的组成与运行环境 ​

在HTML中使用JS的三种方式 ​

一、JavaScript 是什么：先记住五个关键词 ​

二、JavaScript 的运行环境：解释器在哪里，代码就在哪里跑 ​

三、浏览器端 JavaScript 的组成部分：语言本身 + 浏览器给的 API ​

先明确本节边界：从页面布局走向脚本 ​

浏览器端 JavaScript 由什么组成 ​

行内式：把事件当属性写 ​

内嵌式：script 标签与执行位置 ​

外链式：用 src 引入独立 JS 文件 ​

三种方式怎么选，调试怎么排 ​

课堂画面 ​

代码示例 ​

示例一：行内式（内联脚本）与内嵌式（嵌入脚本） ​

示例二：外链式（外部脚本） ​

示例三：BFC 解决子元素浮动导致的高度塌陷 ​

常见错误 ​

练习 ​

原视频对照 ​

小结 ​

JavaScript 概述与JavaScript 基本语法（Day1 1/3）

学习目标

知识点

响应式布局：`@media`与移动优先

响应式课程列表：间距、列数与版心

BFC：用“独立容器”解释布局问题

编程语言与JavaScript的定位

浏览器端JS的组成与运行环境

在HTML中使用JS的三种方式

一、JavaScript 是什么：先记住五个关键词

二、JavaScript 的运行环境：解释器在哪里，代码就在哪里跑

三、浏览器端 JavaScript 的组成部分：语言本身 + 浏览器给的 API

先明确本节边界：从页面布局走向脚本

浏览器端 JavaScript 由什么组成

行内式：把事件当属性写

内嵌式：`script` 标签与执行位置

外链式：用 `src` 引入独立 JS 文件

三种方式怎么选，调试怎么排

课堂画面

代码示例

示例一：行内式（内联脚本）与内嵌式（嵌入脚本）

示例二：外链式（外部脚本）

示例三：BFC 解决子元素浮动导致的高度塌陷

常见错误

练习

原视频对照

小结