🌱 HTML 学习笔记（一）——网页到底是怎么来的？> 这是我学习前端的第一天，对 HTML 做了一次系统整理。这篇文

这是我学习前端的第一天，对 HTML 做了一次系统整理。这篇文章不追求“高深”，而是把 网页是什么、HTML 能干嘛、基础标签怎么用 一次性讲清楚，适合刚入门的你，也适合未来的自己回头复习。

一、什么是网页？什么是网站？

很多人一开始就写代码，但其实概念更重要。

1️⃣ 什么是网站？

网站：是在互联网上，根据一定规则，用 HTML 等技术制作的，用来展示特定内容的一组网页集合。

比如：掘金、知乎、B 站，都是网站。

2️⃣ 什么是网页？

网页：是网站中的“一页”，本质上就是一个 HTML 文件。

通常以 .html 或 .htm 结尾
需要通过 浏览器 打开才能看到效果

👉 换句话说：
一个网站 = 很多个 HTML 网页组成的集合

二、网页是由什么组成的？

我们平时看到的网页，通常包含：

文字
图片
超链接
视频 / 音频
表格、表单等

📌 本质总结一句话：

网页 = 一个 .html 文件 + 浏览器解析展示

三、什么是 HTML？

1️⃣ HTML 的全称

HTML（Hyper Text Markup Language）
超文本标记语言

2️⃣ HTML 是不是编程语言？

❌ 不是

HTML 是一种 标记语言（Markup Language）

它不负责逻辑
不负责运算
只负责 描述网页结构

比如：

<h1>这是标题</h1>
<p>这是段落</p>

四、浏览器是干嘛的？

浏览器 = 网页的“翻译官”

它的核心工作是：

读取 HTML / CSS / JS
计算页面结构
把代码渲染成我们看到的网页

常见浏览器

Chrome（谷歌）
Firefox（火狐）
Edge / IE
Safari
Opera

浏览器内核（渲染引擎）

👉 负责真正把代码变成页面的部分

目前主流内核：

Webkit / Blink（Chrome、Edge、360、QQ 浏览器等）

五、为什么需要 Web 标准？

现实情况是：

❌ 不同浏览器，对同一份代码，显示效果可能不一样

所以就需要统一规则。

Web 标准的作用

提高兼容性
方便多人协作
更利于 SEO
页面加载更快
更好维护

Web 标准的三大组成

模块	作用
结构（HTML）	决定网页内容
表现（CSS）	决定网页样式
行为（JavaScript）	决定网页交互

📌 最佳实践：结构、样式、行为相分离

六、HTML 的基本语法规则

1️⃣ 标签结构

<tagname>内容</tagname>

成对出现：双标签
少数单独存在：单标签

例如：

<br />
<img />

2️⃣ 标签之间的关系

包含关系

<head>
  <title></title>
</head>

并列关系

<head></head>
<body></body>

七、HTML 页面骨架（必背）

每一个 HTML 页面，几乎都长这样 👇

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

关键点说明

<!DOCTYPE html>：声明 HTML5
lang：页面语言（影响搜索引擎）
charset="UTF-8"：防止乱码（必须写！ ）

八、什么是语义化标签？

语义化 = 标签用在“该用的地方”

❌ 不推荐：

<div>标题</div>
<div>内容</div>

✅ 推荐：

<h1>标题</h1>
<p>内容</p>

📌 好处：

结构清晰
更利于 SEO
更利于维护

九、常用 HTML 标签总结

1️⃣ 标题标签（h1 ~ h6）

<h1>一级标题</h1>
<h2>二级标题</h2>

特点：

自动加粗
独占一行
h1 最重要

2️⃣ 段落标签 `<p>`

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

特点：

自动换行
段落之间有间距

3️⃣ 换行标签 `<br />`

第一行<br />
第二行

📌 和段落不同：不会产生上下间距

4️⃣ div 和 span

标签	特点
div	块级元素，一行一个
span	行内元素，一行多个

<div>大盒子</div>
<span>小盒子</span>

5️⃣ 图片标签 `<img>`

<img src="image.png" />

src：图片路径（必写）
可写多个属性
属性之间用空格隔开

6️⃣ 路径问题（重点）

相对路径（常用）

<img src="images/a.png">

绝对路径（不推荐）

<img src="D:/web/img/a.png">

7️⃣ 超链接 `<a>`

<a href="https://juejin.cn" target="_blank">掘金</a>

常见类型

外部链接
内部链接
空链接：href="#"
下载链接
锚点链接（页面内跳转）

8️⃣ 注释

<!-- 这是注释 -->

📌 只给程序员看，浏览器不解析

9️⃣ 特殊字符（常用）

显示	写法
空格	` `
<	`<`
`>`

十、总结一下

📌 HTML 学习第一天的核心收获：

网页本质是 HTML 文件
HTML 负责结构，不负责逻辑
浏览器负责解析和展示
标签要用得“有语义”
页面结构比样式更重要

✨ 写在最后

HTML 是前端的地基，地基打得稳，后面的 CSS、JS 才不会学得痛苦。

🌱 HTML 学习笔记（一）——网页到底是怎么来的？