HTML 概览

这一课你将能做到

1. 说清楚 HTML 在 Web 中的位置和作用
2. 写出第一个完整的 HTML 页面并在浏览器打开
3. 理解标签、元素、属性三者的关系

为什么要学

HTML 是网页的「骨架」。你打开的任何网站——新闻、视频、购物——底层都是 HTML。不会 HTML，CSS 和 JavaScript 都没地方落地。

人话：HTML 就像盖房子的钢筋水泥框架，决定房子里有什么房间、门在哪、窗在哪；CSS 是装修风格，JavaScript 是电器开关。

先建立图像

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个页面</title>
</head>
<body>
    <h1>你好，世界</h1>
    <p>这是第一段文字。</p>
</body>
</html>

浏览器渲染后：

你好，世界           ← 大字号标题
这是第一段文字。     ← 普通段落

跟着做

步骤 1：创建第一个 HTML 文件

在桌面新建文件夹 my-web，在里面新建 index.html，用 VS Code 打开，输入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>我正在学习 HTML。</p>
</body>
</html>

保存后双击文件，浏览器就会打开它。

步骤 2：理解每个部分

<!DOCTYPE html>           <!-- 告诉浏览器这是 HTML5 文档 -->
<html lang="zh-CN">       <!-- 根元素，lang 告诉搜索引擎语言 -->
<head>                    <!-- 头部：不直接显示在页面 -->
    <meta charset="UTF-8"> <!-- 字符编码，必须有，否则中文乱码 -->
    <title>我的主页</title> <!-- 浏览器标签页标题 -->
</head>
<body>                    <!-- 主体：所有可见内容放这里 -->
    <h1>欢迎来到我的网站</h1>
    <p>我正在学习 HTML。</p>
</body>
</html>

步骤 3：标签、元素、属性

<a href="https://example.com" target="_blank">点击访问</a>

• 标签（Tag）：<a> 是开始标签，</a> 是结束标签
• 元素（Element）：整个从开始到结束，包括中间的内容
• 属性（Attribute）：href="..." 和 target="_blank"，给元素附加信息

步骤 4：块级元素 vs 行内元素

<!-- 块级元素：独占一行，可以设置宽高 -->
<div>我是 div</div>
<p>我是段落</p>
<h1>标题</h1>

<!-- 行内元素：不独占一行，宽度由内容决定 -->
<span>我是 span</span>
<a href="#">链接</a>
<strong>加粗</strong>

打开浏览器开发者工具（F12）→ Elements 面板，可以看到每个元素占据的矩形区域。

步骤 5：HTML 注释

<!-- 这是注释，浏览器不显示 -->
<!-- 多行注释
     可以跨越多行 -->
<p>可见内容</p>

注释用来给代码加说明，或临时禁用某段代码。

讲清楚要点

1. HTML 是标记语言，不是编程语言：它描述「这是什么」，不描述「怎么做」。
2. 标签不区分大小写：<P> 和 <p> 等价，但规范用小写。
3. 大多数标签必须成对出现：<div>...</div>；少数自闭合：<img>、<br>、<input>。
4. 属性写在开始标签里：格式 name="value"，多个属性空格分隔。
5. <head> 与 <body> 分工：head 放元数据（不显示），body 放可见内容。

你可能会懵的地方

• HTML、HTML5、XHTML 有什么区别？ HTML5 是当前标准（2014 年定稿），新增了语义化标签、多媒体支持。XHTML 是更严格的 XML 风格写法，已被淘汰。学 HTML5 即可。

• 为什么标签是用尖括号？ 历史沿袭自 SGML（标准通用标记语言），1980 年代定下的规范。

• 属性值要不要加引号？ 规范上不加也能解析，但强烈建议加双引号，避免歧义。

• HTML 文件能直接当网站用吗？ 能，静态网站就是一堆 HTML 文件。但商业网站通常用后端模板动态生成。

• 看不见的标签有用吗？ <title>、<meta> 不显示但对 SEO、社交分享、浏览器行为至关重要。

错法对照

错法	问题	正解
<p>文字 忘加 </p>	嵌套错乱	开始标签都要有结束标签
<img src="a.jpg"></img>	img 是自闭合	<img src="a.jpg"> 或 <img ... />
属性没引号 <a href=x.com>	含特殊字符时出错	始终加双引号
多个 <h1> 当大字用	h1 是页面主标题，唯一	用 CSS 控制字号
用 <br><br><br> 做间距	滥用换行	用 CSS margin

卡点急救

1. 页面空白：F12 看 Console 报错，多半是标签未闭合或文件编码不对（保存时选 UTF-8）。
2. 中文乱码：检查 <meta charset="UTF-8"> 是否在 <head> 最前面。
3. 修改不生效：浏览器缓存，Ctrl+F5 强制刷新。

面试常问

• DOCTYPE 的作用？ 告诉浏览器用标准模式渲染。不写会进入怪异模式（Quirks Mode），不同浏览器解析差异巨大。

• HTML 和 XML 区别？ XML 更严格：必须闭合、区分大小写、属性必须引号。HTML 更宽容，浏览器会容错。

• 语义化标签为什么重要？ SEO、可访问性（屏幕阅读器）、代码可读性。<article> 比 <div class="article"> 更明确。

自测三问

1. 一个完整 HTML 文档必须包含哪几个顶层元素？
2. 块级元素和行内元素的区别？各举 3 个例子。
3. <head> 里通常放什么？

小结一句话

HTML 用标签描述网页结构，是前端一切的起点；掌握文档结构、标签语法、属性规则，就入门了。

延伸

• MDN HTML 基础
• 下一课：HTML 文档结构详解。