四天学完前端基础三件套（HTML篇）

HTML 入门详解：从网页骨架到常用标签

往期回顾

指针合集
 c语言基础
 数据结构与算法

前言
[一、HTML 到底是什么？](#一、HTML 到底是什么？)
[二、HTML 和常见编程语言有什么区别？](#二、HTML 和常见编程语言有什么区别？)
[三、HTML、CSS、JavaScript 三者是什么关系？](#三、HTML、CSS、JavaScript 三者是什么关系？)
[四、HTML 的发展历史：从超文本文档到现代 Web 标准](#四、HTML 的发展历史：从超文本文档到现代 Web 标准)
[五、HTML 文件的基本结构](#五、HTML 文件的基本结构)
[六、认识 HTML 标签：双标签、单标签和属性](#六、认识 HTML 标签：双标签、单标签和属性)
[七、HTML 标签的层次结构：父子关系、兄弟关系和 DOM 树](#七、HTML 标签的层次结构：父子关系、兄弟关系和 DOM 树)
[八、快速生成 HTML 代码框架](#八、快速生成 HTML 代码框架)
[九、HTML 常见文本标签](#九、HTML 常见文本标签)
[十、HTML 中的空格、换行和段落规则](#十、HTML 中的空格、换行和段落规则)
十一、格式化标签：加粗、倾斜、删除线和下划线
[十二、图片标签 img：让网页显示图片](#十二、图片标签 img：让网页显示图片)
十三、路径问题：相对路径和绝对路径
[十四、超链接标签 a：网页之间如何跳转](#十四、超链接标签 a：网页之间如何跳转)
[十五、表格标签 table：如何展示结构化数据](#十五、表格标签 table：如何展示结构化数据)
十六、列表标签：无序、有序和自定义列表
十七、表单标签：让用户输入信息
[十八、无语义标签 div 和 span：网页布局的基础盒子](#十八、无语义标签 div 和 span：网页布局的基础盒子)
[十九、语义化标签：为什么不要满屏都是 div？](#十九、语义化标签：为什么不要满屏都是 div？)
[二十、Emmet 快捷键：提高 HTML 编写效率](#二十、Emmet 快捷键：提高 HTML 编写效率)
[二十一、HTML 特殊字符](#二十一、HTML 特殊字符)
[二十二、HTML 学习路线建议](#二十二、HTML 学习路线建议)
二十三、参考资料与推荐链接
全文总结

前言

一般我们接触前端时，通常会从 HTML 开始。

原因很简单：

因为HTML 是网页的骨架。

我们平时打开浏览器看到的网页，虽然看起来有文字、图片、按钮、表格、输入框、链接、视频等各种内容，但它们最基础的结构，大多都要靠 HTML 来描述。

如果把一个网页比作一个人：

text 复制代码

HTML：骨架，决定页面有什么内容
CSS：外观，决定页面长什么样
JavaScript：行为，决定页面能做什么交互

所以学习 HTML，是为了理解：

浏览器到底是如何根据一份 HTML 文档，构建出一个网页结构的。

这篇文章会从 0 开始系统梳理 HTML：

HTML 是什么
HTML 和编程语言有什么区别
HTML 的发展历史
HTML 文件基本结构
常见标签的使用
表格、列表、表单、图片、超链接
div 和 span
语义化标签
特殊字符
推荐学习资料

一、HTML 到底是什么？

HTML 的全称是：

text 复制代码

HyperText Markup Language
超文本标记语言

拆开来看：

1. HyperText：超文本

普通文本只能展示文字。

而超文本可以包含：

text 复制代码

文字
图片
链接
音频
视频
表格
表单
页面跳转

其中最有代表性的就是超链接，比如说：

html 复制代码

<a href="https://www.baidu.com">跳转到百度</a>

这就是超链接。

网页之所以能够从一个页面跳到另一个页面，就是因为 HTML 支持"超文本"。

2. Markup：标记

HTML 不是靠普通文本来表达结构，而是靠"标签"来标记内容。

比如：

html 复制代码

<h1>这是一级标题</h1>
<p>这是一个段落</p>
<a href="https://www.baidu.com">这是一个链接</a>

这些 <h1>、<p>、<a> 就是 HTML 标签。

浏览器看到这些标签后，就知道：

text 复制代码

h1：这是标题
p：这是段落
a：这是链接

3. Language：语言

HTML 是一种"标记语言"。

它有自己的语法规则，但它和 C、C++、Java、Python 这种编程语言不完全一样。

HTML 是一种所见即所得的语言，因为它只为了告诉浏览器：

这里有一个标题，这里有一段文字，这里有一张图片，这里有一个表单。

二、HTML 和常见编程语言有什么区别？

很多初学者会问：

HTML 算不算编程语言？

严格来说，HTML 通常不被认为是传统意义上的编程语言，而是一种标记语言。

为什么？

因为 HTML 主要负责描述页面结构，不负责复杂逻辑计算。

1. 编程语言通常能做什么？

以 C 语言、Java、Python 为例，它们通常可以：

text 复制代码

定义变量
进行运算
写 if 判断
写 for/while 循环
定义函数
操作数据结构
处理输入输出
实现算法逻辑

比如 C 语言：

c 复制代码

int a = 10;
int b = 20;

if (a < b)
{
    printf("a 小于 b\n");
}

这里有变量、判断和执行逻辑。

2. HTML 主要做什么？

HTML 主要做的是"描述内容结构"。

比如：

html 复制代码

<h1>我的博客</h1>
<p>今天学习 HTML。</p>
<img src="logo.png" alt="网站 Logo">

这段 HTML 并没有在做计算，也没有判断条件。

它只是在告诉浏览器：

text 复制代码

这里是标题
这里是段落
这里是一张图片

3. 对比总结

对比项	HTML	C / Java / Python 等编程语言
类型	标记语言	编程语言
核心作用	描述网页结构	实现逻辑和算法
是否有变量	HTML 本身没有传统变量	有
是否有循环判断	HTML 本身没有	有
是否能独立实现复杂交互	不能，通常需要 JS	可以
浏览器如何理解	解析标签，构建页面结构	需要解释或编译执行逻辑

总结：

HTML 负责告诉浏览器"页面里有什么"，编程语言负责告诉计算机"接下来怎么做"。

三、HTML、CSS、JavaScript 三者是什么关系？

Web 前端最基础的三件套是：

text 复制代码

HTML
CSS
JavaScript

它们各自分工不同。

1. HTML：页面结构

HTML 负责内容和结构。

比如：

html 复制代码

<h1>个人博客</h1>
<p>这是我的第一篇文章。</p>
<button>点我</button>

它决定页面上有什么。

2. CSS：页面样式

CSS 负责美化页面。

比如：

css 复制代码

h1 {
    color: red;
    font-size: 32px;
}

它决定页面长什么样。

3. JavaScript：页面行为

JavaScript 负责交互逻辑。

比如：

javascript 复制代码

document.querySelector("button").onclick = function () {
    alert("你点击了按钮");
};

它决定页面能做什么。

4.总结

同学们可以这样理解：

text 复制代码

HTML：房子的主体结构和骨架
CSS：装修风格
JavaScript：电器、开关和智能控制系统

如果只有 HTML，网页能显示内容，但很朴素。

如果加上 CSS，网页会变得好看。

如果加上 JavaScript，网页就可以响应用户操作。

四、HTML 的发展历史：从超文本文档到现代 Web 标准

HTML 的发展和 World Wide Web 的发展密切相关。

1. HTML 的早期阶段

HTML 最初是为了在互联网上共享和链接文档而设计的。

早期的 HTML 更像是"带链接的科学文档格式"。

它的重点不是炫酷页面，也不是复杂应用，而是：

text 复制代码

描述文档结构
支持超链接
方便不同文档之间跳转

2. 1990---1995：HTML 快速演进

在 Web 早期，HTML 经历了多次修订和扩展。

当时浏览器厂商、标准组织、开发者都在不断推动 HTML 发展。

这也导致 HTML 的标准化道路并不是一开始就非常顺利。

3. W3C 阶段

随着 W3C 的成立，HTML 的标准化逐步进入更规范的阶段。

比较重要的版本包括：

text 复制代码

HTML 3.2
HTML 4
XHTML
HTML5

HTML 3.2 在 1997 年完成，HTML4 随后在 1997 年快速跟进并在 1998 年完成。

4. HTML5 阶段

HTML5 是 HTML 发展史上的重要阶段。

它不仅仅是新增几个标签，而是让 HTML 更适合构建现代 Web 应用。

HTML5 引入或强化了很多能力，比如：

text 复制代码

语义化标签
音视频支持
Canvas
表单增强
本地存储相关能力
更清晰的浏览器兼容规则

W3C 在 2014 年发布 HTML5 Recommendation。

5. Living Standard：持续演进的 HTML

现在我们常说的 HTML 标准，更多是 WHATWG 维护的 HTML Living Standard。

Living Standard 的意思是：

HTML 不再像传统软件那样隔几年发布一个大版本，而是持续更新、持续演进。

这也符合现代 Web 的特点：

text 复制代码

浏览器在更新
网页能力在增强
用户设备在变化
开发者需求也在变化

五、HTML 文件的基本结构

一个最基本的 HTML 文件通常长这样：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个页面</title>
</head>
<body>
    hello world
</body>
</html>

下面逐个解释。

1. `<!DOCTYPE html>`

html 复制代码

<!DOCTYPE html>

它表示当前文档使用 HTML5 标准。

它不是普通 HTML 标签，而是文档类型声明。

作用是告诉浏览器：

请按照现代 HTML 标准来解析这个页面。

2. `<html>`

html 复制代码

<html lang="zh-CN">

html 是整个 HTML 文档的根标签。

也就是说，页面中的其他内容基本都写在 <html> 内部。

lang="zh-CN" 表示当前页面主要语言是中文。

3. `<head>`

html 复制代码

<head>
    ...
</head>

head 中主要放页面的元信息。

比如：

text 复制代码

字符编码
页面标题
移动端适配信息
CSS 引入
SEO 相关信息

注意：head 里的内容大多数不会直接显示在页面主体中。

4. `<meta charset="UTF-8">`

html 复制代码

<meta charset="UTF-8">

它表示页面使用 UTF-8 编码。

如果缺少这行，中文页面可能会出现乱码。

5. viewport

html 复制代码

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

它和移动端适配有关。

简单理解：

text 复制代码

width=device-width：页面宽度等于设备宽度
initial-scale=1.0：页面初始缩放比例为 1

现代网页一般都会写上这行。

6. `<title>`

html 复制代码

<title>我的第一个页面</title>

title 表示页面标题。

它通常显示在浏览器标签页上。

7. `<body>`

html 复制代码

<body>
    hello world
</body>

body 中写的是网页中真正显示给用户看的内容。

比如：

text 复制代码

标题
段落
图片
链接
按钮
表格
表单

六、认识 HTML 标签：双标签、单标签和属性

HTML 代码主要由标签组成。

1. 双标签

大部分 HTML 标签成对出现。

例如：

html 复制代码

<body>hello</body>
<p>这是一个段落</p>
<h1>这是一级标题</h1>

结构是：

text 复制代码

开始标签 + 内容 + 结束标签

比如：

html 复制代码

<p>这是一个段落</p>

其中：

text 复制代码

<p> 是开始标签
</p> 是结束标签
中间是标签内容

2. 单标签

少数标签不需要结束标签。

例如：

html 复制代码

<br>
<img src="logo.png" alt="logo">
<input type="text">
<meta charset="UTF-8">

这类标签通常称为单标签。

3. 标签属性

有些标签可以带属性。

例如：

html 复制代码

<body id="main">hello</body>
<img src="rose.jpg" alt="鲜花">
<a href="https://www.baidu.com">百度</a>

属性通常写在开始标签里。

基本格式是：

html 复制代码

标签名 属性名="属性值"

比如：

html 复制代码

<img src="rose.jpg" alt="鲜花">

其中：

text 复制代码

src：图片路径
alt：图片无法显示时的替代文本

4. 属性书写注意事项

text 复制代码

1. 属性写在开始标签中
2. 属性可以有多个
3. 属性之间用空格分隔
4. 属性一般使用键值对格式
5. 属性顺序通常不影响最终效果

示例：

html 复制代码

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="300">

七、HTML 标签的层次结构：父子关系、兄弟关系和 DOM 树

HTML 标签之间存在层次关系。

例如：

html 复制代码

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

1. 父子关系

在上面的结构中：

text 复制代码

html 是 head 和 body 的父标签
head 和 body 是 html 的子标签
head 是 title 的父标签
title 是 head 的子标签

2. 兄弟关系

同一级的标签之间是兄弟关系。

比如：

text 复制代码

head 和 body 是兄弟关系

3. DOM 树

浏览器解析 HTML 后，会把页面构造成一个树形结构。

这棵树叫：

text 复制代码

DOM 树
Document Object Model
文档对象模型

可以画成这样：

text 复制代码

html
├── head
│   └── title
└── body
    ├── h1
    ├── p
    └── img

DOM 树非常重要。

因为后面学习 JavaScript 时，我们就是通过 DOM 来操作页面元素。

4. 使用浏览器开发者工具查看 DOM

在一般的浏览器中我们都可通过按下F12

来可以看到当前网页的 DOM 结构。

这对学习 HTML 非常有帮助。

八、快速生成 HTML 代码框架

在 VS Code、IDEA 等编辑器中，可以使用 Emmet 快速生成 HTML 基础结构。

输入：

text 复制代码

然后按：

text 复制代码

Tab

会自动生成类似代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

建议初学者先手打熟悉每一行的含义，不要只会快捷生成。

九、HTML 常见文本标签

1. 注释标签

HTML 注释写法：

html 复制代码

<!-- 我是注释 -->

注释不会显示在页面上。

注释原则：

text 复制代码

1. 和代码逻辑一致
2. 尽量写清楚为什么这么做
3. 不要写无意义或负面内容(因为这部分内容用户可以直接在浏览器上看到)

2. 标题标签 h1-h6

HTML 提供 6 级标题：

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

一般来说：

text 复制代码

h1 最大，表示页面最重要标题
h6 最小，表示层级较低标题

注意：

不要只为了字体大小乱用标题标签，标题标签本身有语义。

比如一篇文章通常只有一个主标题 h1，小节标题用 h2，小节内部再用 h3。

3. 段落标签 p

段落使用 <p> 标签：

html 复制代码

<p>这是第一段内容。</p>
<p>这是第二段内容。</p>

浏览器会自动在段落之间添加一定间距。

p 标签适合包裹一整段文本。

十、HTML 中的空格、换行和段落规则

HTML 中有几个非常重要的显示规则。

1. 多个空格会被合并

例如：

html 复制代码

<p>hello        world</p>

浏览器显示时，中间多个空格通常只会显示成一个空格。

2. 直接换行不会真正换行

例如：

html 复制代码

<p>
hello
world
</p>

浏览器不会因为源码换行就自动换行显示。

它一般会把换行当成空白处理。

3. 真正换行使用 br

html 复制代码

<p>
    第一行<br>
    第二行<br>
    第三行
</p>

br 是 break 的缩写，表示换行。

注意：

text 复制代码

br 是单标签
br 不会像 p 标签那样产生明显段落间距

4. 段落用 p，换行用 br

建议：

text 复制代码

一段完整文字：用 p
段内强制换行：用 br

不要整篇文章都靠 <br> 换行。

十一、格式化标签：加粗、倾斜、删除线和下划线

HTML 中有一些常见格式化标签。

1. 加粗

html 复制代码

<strong>重要内容</strong>
<b>加粗内容</b>

推荐优先使用 strong，因为它不仅有加粗效果，还表示内容重要。

2. 倾斜

html 复制代码

<em>强调内容</em>
<i>倾斜内容</i>

推荐优先使用 em，因为它表示强调。

3. 删除线

html 复制代码

<del>已删除内容</del>
<s>删除线内容</s>

4. 下划线

html 复制代码

<ins>插入内容</ins>
<u>下划线内容</u>

5. 实际开发建议

虽然 HTML 有这些格式化标签，但实际开发中：

text 复制代码

结构语义交给 HTML
视觉样式更多交给 CSS

比如想让一段文字变红、变大、加粗，通常会用 CSS 控制。

十二、图片标签 img：让网页显示图片

图片使用 <img> 标签。

基本写法：

html 复制代码

<img src="rose.jpg" alt="鲜花">

1. src 属性

src 表示图片路径。

html 复制代码

<img src="rose.jpg">

如果图片和 HTML 文件在同一级目录，可以直接写文件名。

2. alt 属性

alt 表示替代文本。

当图片加载失败时，会显示 alt 文本。

html 复制代码

<img src="rose.jpg" alt="一朵玫瑰花">

alt 也有利于搜索引擎理解图片内容，并能提升无障碍访问体验。

3. title 属性

title 表示提示文本。

鼠标放到图片上时，可能显示提示信息：

html 复制代码

<img src="rose.jpg" title="这是一朵鲜花">

4. width 和 height

html 复制代码

<img src="rose.jpg" width="300">

一般建议只设置宽度或高度中的一个。

如果同时设置宽高，比例不对可能导致图片变形。

5. border 属性

早期 HTML 可以通过 border 设置边框。

html 复制代码

<img src="rose.jpg" border="5">

但实际开发中更推荐使用 CSS 设置边框。

十三、路径问题：相对路径和绝对路径

图片、链接、CSS、JS 文件都涉及路径问题。

路径分为两类：

text 复制代码

相对路径
绝对路径

1. 相对路径

相对路径是以当前 HTML 文件所在位置为基准。

同级路径

html 复制代码

<img src="rose.jpg">

表示图片和 HTML 文件在同一个目录。

下一级路径

html 复制代码

<img src="image/rose.jpg">

表示图片在当前目录下的 image 文件夹中。

上一级路径

html 复制代码

<img src="../rose.jpg">

../ 表示返回上一级目录。

2. 绝对路径

绝对路径可以是完整磁盘路径，也可以是网络路径。

html 复制代码

<img src="D:/image/rose.jpg">

或：

html 复制代码

<img src="https://example.com/image/rose.jpg">

实际开发中，网络资源常用 URL。

本地项目中，更推荐使用相对路径，方便项目迁移。

十四、超链接标签 a：网页之间如何跳转

超链接使用 <a> 标签。

基本写法：

html 复制代码

<a href="https://www.baidu.com">百度</a>

1. href 属性

href 表示点击后跳转到哪里。

html 复制代码

<a href="https://www.baidu.com">外部链接</a>

2. target 属性

target 表示打开方式。

html 复制代码

<a href="https://www.baidu.com" target="_blank">新标签页打开</a>

常见值：

text 复制代码

_self：当前页面打开，默认值
_blank：新标签页打开

3. 外部链接

html 复制代码

<a href="https://www.baidu.com">百度</a>

跳转到其他网站。

4. 内部链接

网站内部页面跳转可以使用相对路径。

html 复制代码

<a href="about.html">关于我们</a>

5. 空链接

html 复制代码

<a href="#">暂时不跳转</a>

常用于占位。

6. 下载链接

html 复制代码

<a href="test.zip">下载文件</a>

当 href 指向一个文件时，浏览器可能触发下载或打开文件。

7. 图片链接

可以把图片放进 a 标签中：

html 复制代码

<a href="https://www.sogou.com">
    <img src="logo.png" alt="搜狗">
</a>

这样点击图片就能跳转。

8. 锚点链接

锚点可以快速跳转到页面中的某个位置。

html 复制代码

<a href="#part1">跳转到第一部分</a>

<h2 id="part1">第一部分</h2>

这也是 CSDN 博客目录跳转常用的原理。

十五、表格标签 table：如何展示结构化数据

表格适合展示二维结构数据。

1. 基本标签

标签	作用
`table`	整个表格
`tr`	表格的一行
`td`	普通单元格
`th`	表头单元格，通常加粗居中
`thead`	表格头部区域
`tbody`	表格主体区域

2. 基本示例

html 复制代码

<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>19</td>
    </tr>
</table>

3. 常见表格属性

text 复制代码

border：边框
cellpadding：内容和边框之间的距离
cellspacing：单元格之间的距离
width / height：宽度和高度
align：表格相对于周围元素的对齐方式

不过现代开发中，表格样式一般使用 CSS 设置。

4. 合并单元格

跨列合并

html 复制代码

<td colspan="2">跨两列</td>

跨行合并

html 复制代码

<td rowspan="2">跨两行</td>

合并单元格步骤：

text 复制代码

1. 判断是跨行还是跨列
2. 找到目标单元格
3. 给目标单元格添加 rowspan 或 colspan
4. 删除多余单元格

十六、列表标签：无序、有序和自定义列表

列表用于展示一组结构相似的内容。

1. 无序列表 ul + li

html 复制代码

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

默认通常显示小圆点。

无序列表非常常用，比如导航栏、商品列表等。

2. 有序列表 ol + li

html 复制代码

<ol>
    <li>打开编辑器</li>
    <li>创建 HTML 文件</li>
    <li>编写页面结构</li>
</ol>

默认显示数字编号。

3. 自定义列表 dl + dt + dd

html 复制代码

<dl>
    <dt>前端三件套</dt>
    <dd>HTML：页面结构</dd>
    <dd>CSS：页面样式</dd>
    <dd>JavaScript：页面行为</dd>
</dl>

其中：

text 复制代码

dl：自定义列表整体
dt：列表标题
dd：围绕标题展开的说明

4. 列表使用注意事项

text 复制代码

ul / ol 中通常直接放 li
li 中可以继续放其他标签
dl 中放 dt 和 dd
列表自带默认样式，可以用 CSS 修改

十七、表单标签：让用户输入信息

表单是网页收集用户输入的重要方式。

常见场景：

text 复制代码

登录
注册
搜索
评论
发布文章
填写简历
提交订单

1. form 标签

form 表示表单区域。

html 复制代码

<form action="submit.html">
    ...
</form>

action 表示提交到哪个地址。

表单真正和服务器交互时，还会涉及 HTTP、后端接口等知识。这里不过多展开

2. input 标签

input 是最常见的表单控件。

文本框

html 复制代码

<input type="text" name="username">

密码框

html 复制代码

<input type="password" name="password">

单选框

html 复制代码

<input type="radio" name="sex" id="male">
<label for="male">男</label>

<input type="radio" name="sex" id="female">
<label for="female">女</label>

注意：

单选框要实现"多选一"，必须使用相同的 name。

复选框

html 复制代码

<input type="checkbox" id="html">
<label for="html">HTML</label>

<input type="checkbox" id="css">
<label for="css">CSS</label>

普通按钮

html 复制代码

<input type="button" value="普通按钮">

普通按钮本身没有提交功能，一般配合 JavaScript 使用。

提交按钮

html 复制代码

<input type="submit" value="提交">

提交按钮通常放在 form 内。

重置按钮

html 复制代码

<input type="reset" value="清空">

点击后会清空或还原当前表单中的输入内容。

文件选择

html 复制代码

<input type="file">

点击后可以选择本地文件。

3. label 标签

label 常用于提升表单体验。

html 复制代码

<label for="username">用户名：</label>
<input type="text" id="username">

当 label 的 for 和 input 的 id 对应时，点击文字也能聚焦输入框或选中单选框。

4. select 下拉菜单

html 复制代码

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
    <option>广州</option>
</select>

selected 表示默认选中。

5. textarea 文本域

html 复制代码

<textarea rows="5" cols="30">请输入内容</textarea>

用于输入多行文本。

比如：

text 复制代码

评论
个人简介
项目经历
留言内容

实际开发中，文本域大小一般用 CSS 控制。

十八、无语义标签 div 和 span：网页布局的基础盒子

div 和 span 是两个非常常见的无语义标签。

1. div 标签

div 是 division 的缩写，可以理解为"分区"。

html 复制代码

<div>
    <h2>文章标题</h2>
    <p>文章内容</p>
</div>

特点：

text 复制代码

独占一行
常用于页面布局
可以看成一个大盒子

2. span 标签

span 可以理解成"小范围包裹"。

html 复制代码

<p>这是一个 <span>重点词</span>。</p>

特点：

text 复制代码

不独占一行
常用于包裹一小段文字
可以看成一个小盒子

3. div 和 span 对比

标签	是否独占一行	常见用途
div	是	页面分区、布局容器
span	否	行内小范围文本包裹

示例：

html 复制代码

<div>
    <span>HTML</span>
    <span>CSS</span>
    <span>JavaScript</span>
</div>

十九、语义化标签：为什么不要满屏都是 div？

HTML5 提供了很多语义化标签。

比如：

html 复制代码

<header>页面头部</header>
<nav>导航区域</nav>
<main>页面主体</main>
<article>文章内容</article>
<section>章节区域</section>
<aside>侧边栏</aside>
<footer>页面底部</footer>

1. 什么是语义化？

语义化就是：

用合适的标签表达合适的内容含义。

比如：

html 复制代码

<h1>文章标题</h1>
<p>文章段落</p>
<nav>导航菜单</nav>
<footer>页面底部</footer>

这些标签不仅能显示内容，还能表达内容的意义。

2. 为什么语义化重要？

语义化有几个好处：

text 复制代码

1. 代码结构更清晰
2. 搜索引擎更容易理解页面
3. 屏幕阅读器等辅助工具更容易识别内容
4. 后期维护更方便
5. 团队协作时更容易读懂代码

3. div 不是不能用

div 依然非常常用。

只是不要所有区域都无脑写 div。

因此我们会更推荐：

text 复制代码

有明确语义时，用语义化标签
只是为了布局时，可以用 div

二十、Emmet 快捷键：提高 HTML 编写效率

Emmet 是前端开发中非常实用的快捷输入工具。

1. 快速生成 input

text 复制代码

input

按 Tab 后：

html 复制代码

<input type="text">

2. 生成多个标签

text 复制代码

div*3

生成：

html 复制代码

<div></div>
<div></div>
<div></div>

3. 标签带 id

text 复制代码

div#app

生成：

html 复制代码

<div id="app"></div>

4. 标签带类名

text 复制代码

div.box

生成：

html 复制代码

<div class="box"></div>

5. 标签带子元素

text 复制代码

ul>li*3

生成：

html 复制代码

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

6. 标签带兄弟元素

text 复制代码

span+span

生成：

html 复制代码

<span></span><span></span>

7. 标签带内容

text 复制代码

div{hello}

生成：

html 复制代码

<div>hello</div>

8. 标签带编号

text 复制代码

div{$.hello}*3

生成：

html 复制代码

<div>1.hello</div>
<div>2.hello</div>
<div>3.hello</div>

Emmet 实际是不用记背的大家平时写代码时慢慢积累即可。

二十一、HTML 特殊字符

有些字符在 HTML 中不能直接随便写。

比如：

text 复制代码

<
>
&
多个连续空格

因为 HTML 标签本身就是用 < > 表示的。

如果内容中也直接写 < 和 >，可能会和标签混淆。

常见特殊字符

字符	HTML 写法
空格	` `
小于号 `<`	`<`
大于号 `>`	`>`
按位与 / and 符号 `&`	`&`

示例：

html 复制代码

<p>HTML 标签通常写成：&lt;p&gt;这是段落&lt;/p&gt;</p>

浏览器显示：

text 复制代码

HTML 标签通常写成：<p>这是段落</p>

二十二、HTML 学习路线建议

如果你刚开始学 HTML，建议按下面顺序来：

第一步：理解 HTML 的角色

先搞清楚：

text 复制代码

HTML：结构
CSS：样式
JavaScript：行为

不要把 HTML 当成 C 语言那样的逻辑编程语言。

第二步：掌握基本结构

必须熟悉：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

第三步：掌握常见标签

重点掌握：

text 复制代码

h1-h6
p
br
img
a
table
ul/ol/li
form
input
select
textarea
div
span

第四步：理解路径和链接

重点掌握：

text 复制代码

相对路径
绝对路径
外部链接
内部链接
锚点链接
图片路径

第五步：开始学习 CSS

HTML 只负责结构。

真正想让页面好看，就必须继续学习 CSS。

第六步：继续学习 JavaScript

想让页面能交互，比如点击按钮弹窗、表单校验、动态更新页面，就需要学习 JavaScript。

二十三、参考资料与推荐链接

下面这些链接可以继续帮助你完善 HTML 学习。

总结

HTML 是前是一种标记语言。

它主要负责：

text 复制代码

描述网页结构
组织网页内容
建立页面之间的链接
为 CSS 和 JavaScript 提供操作基础

本文系统梳理了：

text 复制代码

HTML 是什么
HTML 和编程语言的区别
HTML 的发展历史
HTML 文件基本结构
常见文本标签
图片标签
超链接标签
表格标签
列表标签
表单标签
div 和 span
语义化标签
Emmet 快捷键
HTML 特殊字符

字符	HTML 写法
空格	` `
小于号 `<`	`<`
大于号 `>`	`>`
按位与 / and 符号 `&`	`&`

字符	HTML 写法
空格	` `
小于号 `<`	`<`
大于号 `>`	`>`
按位与 / and 符号 `&`	`&`

四天学完前端基础三件套（HTML篇）

HTML 入门详解：从网页骨架到常用标签

往期回顾

目录

前言

一、HTML 到底是什么？

1. HyperText：超文本

2. Markup：标记

3. Language：语言

二、HTML 和常见编程语言有什么区别？

1. 编程语言通常能做什么？

2. HTML 主要做什么？

3. 对比总结

三、HTML、CSS、JavaScript 三者是什么关系？

1. HTML：页面结构

2. CSS：页面样式

3. JavaScript：页面行为

4.总结

四、HTML 的发展历史：从超文本文档到现代 Web 标准

1. HTML 的早期阶段

2. 1990---1995：HTML 快速演进

3. W3C 阶段

4. HTML5 阶段

5. Living Standard：持续演进的 HTML

五、HTML 文件的基本结构

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="UTF-8">

5. viewport

6. <title>

7. <body>

六、认识 HTML 标签：双标签、单标签和属性

1. 双标签

2. 单标签

3. 标签属性

4. 属性书写注意事项

七、HTML 标签的层次结构：父子关系、兄弟关系和 DOM 树

1. 父子关系

2. 兄弟关系

3. DOM 树

4. 使用浏览器开发者工具查看 DOM

八、快速生成 HTML 代码框架

九、HTML 常见文本标签

1. 注释标签

2. 标题标签 h1-h6

3. 段落标签 p

十、HTML 中的空格、换行和段落规则

1. 多个空格会被合并

2. 直接换行不会真正换行

3. 真正换行使用 br

4. 段落用 p，换行用 br

十一、格式化标签：加粗、倾斜、删除线和下划线

1. 加粗

2. 倾斜

3. 删除线

4. 下划线

5. 实际开发建议

十二、图片标签 img：让网页显示图片

1. src 属性

2. alt 属性

3. title 属性

4. width 和 height

5. border 属性

十三、路径问题：相对路径和绝对路径

1. 相对路径

同级路径

下一级路径

上一级路径

2. 绝对路径

十四、超链接标签 a：网页之间如何跳转

1. href 属性

2. target 属性

3. 外部链接

4. 内部链接

5. 空链接

6. 下载链接

7. 图片链接

8. 锚点链接

十五、表格标签 table：如何展示结构化数据

1. `<!DOCTYPE html>`

2. `<html>`

3. `<head>`

4. `<meta charset="UTF-8">`

6. `<title>`

7. `<body>`

字符	HTML 写法
空格	` `
小于号 `<`	`<`
大于号 `>`	`>`
按位与 / and 符号 `&`	`&`