01认识 HTML

HTML（HyperText Markup Language，超文本标记语言）不是编程语言，而是给内容贴标签的标记语言：告诉浏览器「这段是标题、那段是段落、这里是图片」。先掌握文档骨架，再谈其它。

约 12 分钟 2 个动手实验 HTML 第一课

一、网页是怎么显示出来的

浏览器打开一个网页的过程：下载 HTML 文件 → 解析成标签树（DOM）→ 一边解析一边渲染。 HTML 负责结构和内容，CSS 负责样式，JavaScript 负责行为——三者各司其职。

类比一栋房子：HTML 是砖瓦钢筋（结构），CSS 是油漆装修（样式）， JavaScript 是水电智能（行为）。先有结构，才有装修。

解析得到的「标签树」专业名叫 DOM 树：每个标签是一个节点，嵌套关系变成父子关系。后面学 CSS 选择器和 JS 操作页面，用的都是这棵树。

前端三件套：谁管结构、谁管样式、谁管行为
语言	职责	房子的比喻	负责的东西
HTML	结构 + 内容	砖瓦钢筋	标题、段落、图片、链接、表单
CSS	样式 + 外观	油漆装修	颜色、字体、边框、布局、动画
JavaScript	行为 + 交互	水电智能	点击响应、数据请求、动态更新页面

<html> ─ 根节点

<head>

<title> 我的第一个页面

<body>

<h1> 你好，世界！ ─ 当前选中节点

<p> 这是我的第一个 <a>网页</a>。

上面这段就是把 HTML 变成标签树的样子。下面动手看「标记 → 渲染」到底发生了什么：

一个最小的 HTML 页面：把 <h1> 里的文字改一改，右边立刻重渲染

二、文档骨架：每个页面都长这样

任何 HTML 页面都由这五部分组成。<!DOCTYPE html> 声明文档类型（必须是第一行）， <html> 是根元素，<head> 放「给浏览器看的」配置信息， <body> 放「给用户看的」页面内容。

把上面代码复制到编辑器里改改看（改 h1 文字试试）：

骨架五件套渲染出的页面：改 <h1>、<p>，或加一段 <img> 看结构如何长出来

骨架五件套：谁负责什么、能不能省略
骨架部分	作用	能省略吗
`<!DOCTYPE html>`	声明这是 HTML5 文档	不能，省略会触发怪异模式
`<html lang="zh-CN">`	根元素；lang 声明语言（利于翻译、读屏）	建议写全
`<head>`	配置区：编码、标题、样式、SEO 信息	内容不会显示在页面上
`<meta charset="UTF-8">`	字符编码，防中文乱码	不能省
`<body>`	内容区：用户看到的一切都放这里	页面主体

三、head 里的常用元素

<head> 里都是「幕后工作者」：告诉浏览器页面叫什么、用什么编码、手机上怎么缩放、要加载哪些样式和脚本。

head 与 body 的分工（左边是看不见的配置，右边是看见的内容）：

head（浏览器看的） <title> 标签页标题 · <meta charset> 编码 · <meta viewport> 移动端缩放 · <link> 外部样式 · <style> 内部样式 · <script> 脚本

body（用户看的） <h1> 标题 · <p> 段落 · <img> 图片 · <a> 链接 · <ul> 列表 · <table> 表格 …

head 元素速查：每个幕后工作者管什么
head 元素	关键属性	说明
`<title>`	无	标签页标题，也是搜索结果的大标题
`<meta charset>`	`charset="UTF-8"`	字符编码，防乱码
`<meta viewport>`	`name` + `content`	移动端适配必备：`width=device-width, initial-scale=1.0`
`<meta description>`	`name="description"`	页面描述，显示在搜索结果里
`<link>`	`rel` / `href`	引入外部 CSS：`rel="stylesheet" href="..."`
`<style>`	`media`	内部样式表，写在标签对之间
`<script>`	`src` / `defer` / `async`	`defer`：下载不阻塞，DOM 就绪后执行
`<base>`	`href`	统一页面相对路径基准（少用）

四、注释与书写规范

注释是给自己和同事看的，浏览器不会渲染。规范能让代码更可读：标签名小写、属性值加引号、嵌套对齐缩进、结束标签不遗漏。

页面上只能看到这段文字。 （上面代码里的注释完全不可见）

书写规范：好习惯 vs 坏习惯
做法	好习惯（要）	坏习惯（别）
标签名	`<div>` 全小写	`<DIV>` 大写
属性值	`class="card"` 加引号	`class=card` 裸写
嵌套	子标签缩进对齐	全挤一行、层级靠猜
闭合	每个结束标签都不漏	漏掉 `</p>`、`</div>`

VS Code 中按 Ctrl + / 快速注释/取消注释当前行。注释不能嵌套注释： --> 是错的。

五、HTML 的前世今生

HTML 从 1991 年诞生至今经历了几次大版本更替。今天说的「HTML」默认指 HTML5（2014 年定稿的现行标准）——标签更简洁、语义更丰富、还自带视频音频画布等能力。看懂这张演进表，读老代码时就不会懵。

1991HTML 1.0 初代：只有 18 个标签，纯文本 + 链接

1997HTML 3.2 / 4.0 加入表格、表单、样式支持，页面开始「好看」

2000XHTML 1.0 严格版 HTML：标签必须小写、必须闭合（老教程常见）

2014HTML5（现行） DOCTYPE 一行搞定；新增语义标签 / 视频 / 音频 / 画布

看旧教程时认准区别：XHTML 时代的 <br/> 自闭合写法，在 HTML5 里简写为 <br> 即可；本路线全部按 HTML5 标准书写。

六、动手环境：编辑器与 DevTools

写 HTML 只需要两样东西：一个文本编辑器 + 一个浏览器。推荐组合是 VS Code（编辑）+ Chrome/Edge（预览调试）。文件保存为 .html 后双击即可打开；改完代码按 Ctrl + S 保存，再回浏览器按 F5 刷新。

入门三件套：编辑器 / Live Server / DevTools
工具	用途	关键操作
VS Code	写代码：语法高亮、自动补全、格式化	`!` + Tab 快速生成骨架；`Alt + Shift + F` 格式化
Live Server 插件	保存即自动刷新浏览器，免手动 F5	右下角 `Go Live` / 右键 `Open with Live Server`
浏览器 DevTools	看 DOM、查样式、找错	`F12` 打开；`Ctrl + Shift + C` 点选元素

F12 打开后 Elements 面板长这样（点左上角箭头可选中页面元素）：

ElementsConsoleSourcesNetwork

<body>

<p class="intro">这是我的第一个网页。</p>

</body>

└─ 虚线框 = 被选中的元素，右下角可看它的盒模型与样式

现在就试试：在这个页面按 F12，用左上角的箭头点一下本页任意文字—— Elements 面板会跳到对应标签，这就是「代码 ↔ 页面」的实时对照。

七、本章小结

HTML 是标记语言：标签 + 内容 = 网页结构；浏览器解析成 DOM 树再渲染。
骨架五件套：DOCTYPE → html → head → meta charset → body。
head 给浏览器看（title / meta / link / style / script），body 给用户看。
现行标准是 HTML5：DOCTYPE 一行、标签可简写、语义更丰富。
环境就绪：VS Code 写 + 浏览器看，F12 DevTools 是终身的调试伙伴。
规范书写：小写标签、双引号、缩进嵌套。

动手作业：新建 hello.html，在 VS Code 里输入 ! + Tab 生成骨架，在 body 里放一个 h1 标题和一段自我介绍，双击用浏览器打开，再按 F12 找到你写的那行代码。