HTML零基础通俗易懂手册（纯干货入门）

一、HTML 是什么？（直白通俗解释）

1.1 官方全称

HTML：HyperText Markup Language 超文本标记语言

1.2 人话翻译

1. 不是编程语言：没有逻辑、没有变量、没有判断、不能运算；

2. 是标记语言：用来给网页做骨架、排版、摆放内容；

3. 作用：决定网页哪里放文字、哪里放图片、哪里放按钮。

1.3 通俗比喻

• HTML = 房子骨架（墙、门、窗户、结构）

• CSS = 装修美化（颜色、大小、布局、好看）

• JS = 电器智能（交互、点击、动态效果）

二、HTML 核心特点

1. 纯文本文件：后缀.html / .htm，记事本都能写；

2. 浏览器解析运行：不需要编译器，双击直接打开；

3. 标签嵌套结构：层层包裹，有头有尾；

4. 不区分大小写：

   和

   效果一样，规范全部小写；

5. 容错性极高：写错标签不会报错，只会错乱显示（新手最大坑）。

三、HTML 标准基础骨架（必背）

3.1 最简完整代码骨架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <!-- 网页所有可见内容写在这里 -->
</body>
</html>

3.2 逐行通俗解释

代码	作用解释
<!DOCTYPE html>	文档声明，告诉浏览器：这是HTML5网页（必须写在第一行）
<html>	网页最大根标签，包裹全部代码
<head>	网页头部，存放配置、编码、标题（看不见）
<meta charset="UTF-8">	设置编码，防止中文乱码（必写）
<title>	浏览器标签页标题
<body>	网页身体，所有看得见的内容全部放这里

四、HTML 语法规则（新手硬性规范）

4.1 标签分类

1、双标签（闭合标签）

有开始、有结束，中间包裹内容

<div>我是内容</div>

2、单标签（自闭合标签）

单个标签，不需要包裹内容，用来占位、功能

<br> <hr> <img>

4.2 属性书写规范

• 写在开始标签里面；

• 格式：属性名="属性值"；

• 属性值建议双引号包裹；

• 多个属性用空格隔开。

<div id="box" class="demo">测试内容</div>

4.3 嵌套规则（重点）

1. 标签可以互相嵌套；

2. 不能交叉嵌套；

3. 嵌套遵循：先开后闭，后开先闭。

<!-- 正确 -->
<div><p>文字</p></div>

<!-- 错误（交叉嵌套） -->
<div><p>文字</div></p>

五、常用基础标签（通俗易懂分类）

5.1 排版标签

<h1~h6>标题标签（h1最大，h6最小）
<p>段落标签
<br>强制换行
<hr>水平分割线

5.2 文本格式化标签

<b>加粗
<i>斜体
<u>下划线
<s>删除线

5.3 容器标签（布局核心）

<div>大容器，独占一行（块级）
<span>小容器，同行显示（行内）

5.4 媒体标签

<img src="图片路径" alt="图片描述">
<a href="网址">超链接</a>

六、HTML 注释写法

6.1 注释语法

<!-- 这里是注释，浏览器不会显示 -->

6.2 注释作用

1. 给自己写备注；

2. 屏蔽无效代码；

3. 团队开发看懂代码逻辑。

七、HTML 实体字符（转义字符）

网页中部分符号被HTML占用，不能直接写，需要转义。

显示符号	转义代码	说明
空格	 	网页专用空格
<		小于号
>		大于号
		和符号

八、文件命名规范（硬性要求）

1. 全部使用：英文、小写、下划线、数字；

2. 禁止中文、禁止空格、禁止特殊符号；

3. 首页统一命名：index.html；

4. 路径尽量使用相对路径。

九、新手常见坑（重点避雷）

1. 忘记设置charset：中文乱码；

2. 标签不闭合：HTML容错高，不会报错，页面错乱；

3. 路径写错：图片、链接打不开；

4. 混用大小写：虽然不报错，不符合企业规范；

5. 大量空格换行：浏览器自动压缩空白，无意义。