一、知识回顾（读完直接做下面的实践题）#

1. 网页由 文字、图片、视频、音频、超链接 等部分组成；网页背后的本质是程序员写的前端代码
2. 前端代码通过浏览器转换成用户看到的网页；浏览器里对代码进行解析渲染的部分称为浏览器内核
3. 不同浏览器内核不同，对相同的前端代码解析的效果可能会存在差异
4. Web 标准（网页标准）由一系列标准组成，大部分由 W3C（World Wide Web Consortium，万维网联盟）负责制定
5. Web 标准的三个组成部分及其职责：HTML 负责网页的结构（页面元素和内容）、CSS 负责网页的表现（外观、位置等样式，如颜色、大小）、JavaScript 负责网页的行为（交互效果）
6. 前端课程分两段：Web 前端基础（HTML + CSS + JS，Vue3 + Ajax，2 天）和 Web 前端实战（Vue 工程化 + ElementPlus + Vue3 案例，4 天）
7. 记忆类比：HTML＝毛坯房（结构）、CSS＝装修（表现）、JavaScript＝电器（行为）
8. 浏览器兼容问题的根源是内核不同：Chrome/新版 Edge 用 Blink、Safari 用 WebKit、Firefox 用 Gecko（PPT 未展开，属补充常识）

二、概念自测#

• 2-1 一个网页由哪几个部分组成？各自的职责是什么？ 要求：三部分都要说出”名字 + 一句话职责”，不要只说缩写。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：想想”结构、表现、行为”这六个字分别对哪门语言 二级 · 角度：内容归谁管？颜色大小位置归谁管？点击后的反应归谁管？

  参考答案（做完再点开）

  2-1 三部分：HTML 负责网页的结构（页面元素和内容）；CSS 负责网页的表现（元素的外观、位置等样式，如颜色、大小）；JavaScript 负责网页的行为（交互效果）。

• 2-2 同样一段 HTML，在 Chrome 和 Safari 里看起来不太一样，可能是哪一环出了问题？ 要求：用”内核”这个词解释，并说出为什么这是前端必须考虑的事。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：你写的前端代码是交给谁”翻译”的？不同的翻译者，结果会一样吗

  参考答案（做完再点开）

  2-2 出在浏览器内核上：浏览器对代码进行解析渲染的部分叫内核，不同浏览器的内核不同，所以同一份前端代码的解析效果可能存在差异。写页面时按 Web 标准来写、别依赖某个浏览器的私有行为，才能让页面在各浏览器里都正常。

• 2-3 判断并说明理由：只要 HTML 写得漂亮，页面就好看、也点得动。 要求：分别指出”好看”和”点得动”归谁管。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：把”好看”和”点得动”分别对到三件套的职责上——结构和样式是两回事

  参考答案（做完再点开）

  2-3 不对。HTML 只管结构（页面元素和内容）；“好看”要交给 CSS（表现：颜色、大小、位置）；“点得动、有反应”要交给 JavaScript（行为：交互效果）。三件套各管一摊，谁也不能代替谁。

• 2-4 如果老师只给你一张网页截图，你能从截图里分出哪部分可能是 HTML、哪部分可能是 CSS 做的吗？ 要求：各举 1 个本页图片里能看到的具体例子。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：先分清”内容”和”样式”：文字、图片、链接属于内容；字号、颜色、位置属于样式

  参考答案（做完再点开）

  2-4 能。内容本身是 HTML——新闻标题文字、正文段落、图片、“央视网”这类链接；这些内容长什么样是 CSS——标题的字号、正文的颜色（灰）、行高、页面的左右留白与居中（截图里标题的字号明显大于正文、正文字色偏灰）。属于行为的（点击播放、点赞变色）则要看 JavaScript。