30
社区成员
发帖
与我相关
我的任务
分享HTML全套知识点整理
HTML 全套知识点整理
开发工具：VS Code + Live Server
整理时间：2026年7月27日
整理人：张育豪
目录
一、HTML 简介
1.1 什么是 HTML？
- 全称：HyperText Markup Language（超文本标记语言）
- 超文本：比普通文本内容更丰富，可包含图片、链接、音频等
- 标记：通过标签（标记符号）对文本进行"升级"
- 语言：标记的写法、规则构成了一门标记语言
1.2 网页相关概念
| 概念 | 说明 |
|---|---|
| 网址 | 浏览器地址栏输入的地址 |
| 网页 | 浏览器呈现的每一个页面 |
| 网站 | 多个网页构成的整体 |
1.3 Web 标准
Web 标准由 W3C（万维网联盟）制定，主要包括三部分：
- HTML：结构（骨架）
- CSS：表现（样式）
- JavaScript：行为（交互）
二、HTML 入门
2.1 标签
- 标签又称元素，是 HTML 的基本组成单位
- 分为双标签和单标签，绝大多数是双标签
- 标签名不区分大小写，但推荐小写
<!-- 双标签 -->
<marquee>内容</marquee>
<!-- 单标签 -->
<input>
2.2 标签属性
- 用于给标签提供附加信息
- 写在起始标签或单标签中
- 有些特殊属性只有属性值，没有属性名（如
disabled）
<marquee loop="1" bgcolor="orange">滚动一次</marquee>
<input type="password">
<input disabled>
注意点：
- 属性名和属性值不区分大小写，但推荐小写
- 属性值推荐用双引号包裹
- 不同标签有不同属性，也有通用属性（全局属性）
2.3 HTML 基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!-- 网页内容写在这里 -->
</body>
</html>
head中的内容不会出现在网页上title指定网页标题body中写想要呈现的内容
VSCode 快捷键：输入
!然后回车，可快速生成标准结构
2.4 注释
<!-- 这是注释，浏览器会忽略 -->
- 注释不可嵌套
- 常用于解释代码、标注版权等
2.5 文档声明（DOCTYPE）
<!DOCTYPE html>
- 告诉浏览器当前网页使用 HTML5 版本
- 必须写在网页第一行，且在
html标签外侧
2.6 字符编码
计算机对数据：
- 存储时：编码
- 读取时：解码
常见字符集：
| 字符集 | 说明 |
|---|---|
| ASCII | 128个字符（英文字母、数字、符号） |
| ISO 8859-1 | 256个字符（扩展欧洲字符） |
| GB2312 | 6763个常用汉字 |
| GBK | 20000+汉字，支持繁体 |
| UTF-8 | 包含全球所有语言文字（最常用） |
黄金原则： 编解码必须使用同一字符集，否则乱码！
通过 meta 标签指定编码：
<meta charset="UTF-8">
2.7 设置语言
<html lang="zh-CN">
主要作用：
- 浏览器翻译提示
- 搜索引擎优化（SEO）
三、排版标签
排版标签都是块级元素（独占一行）。
| 标签 | 含义 | 类型 | 注意事项 |
|---|---|---|---|
<h1>~<h6> | 标题 | 双标签 | h1 最好只有一个；各级标题不能互相嵌套 |
<p> | 段落 | 双标签 | p 中不能写 h1~h6、p、div |
<div> | 无语义，整体布局容器 | 双标签 | 相当于"大包装袋"，用于分组 |
语义化标签核心理念：
标签的默认效果不重要（后期 CSS 可随意改），语义才最重要！
优势：
- 代码结构清晰、可读性强
- 有利于 SEO（搜索引擎优化）
- 方便设备解析（屏幕阅读器、盲人阅读器等）
块级元素 vs 行内元素
| 类型 | 特点 | 举例 |
|---|---|---|
| 块级元素 | 独占一行 | h1~h6、p、div |
| 行内元素 | 不独占一行 | span、input、em、strong |
嵌套规则：
- 块级元素中几乎什么都能写（块级 + 行内）
- 行内元素只能写行内元素，不能写块级元素
- 特殊规则： h1~h6 不能互相嵌套；p 中不要写块级元素
四、文本标签
文本标签通常都是行内元素，写在排版标签内部。
4.1 常用文本标签（必掌握）
| 标签 | 语义 | 说明 |
|---|---|---|
<em> | 着重阅读 | 默认斜体 |
<strong> | 非常重要 | 语气比 em 更强，默认加粗 |
<span> | 无语义，通用行内容器 | "小包装袋"，常配合 CSS 使用 |
<p>请安装<em>国家反诈中心app</em></p>
<p>出门记得带<strong>钥匙</strong>！</p>
<p>前端框架：<span>Angular, React, Vue</span></p>
4.2 不常用文本标签（了解即可）
| 标签 | 语义 | 补充 |
|---|---|---|
<cite> | 作品标题（书籍、电影等） | 行内 |
<dfn> | 特殊术语定义 | 行内 |
<del> / <ins> | 删除/插入的文本 | 行内 |
<sub> / <sup> | 下标/上标 | 行内 |
<code> | 代码片段 | 行内 |
<abbr> | 缩写，配合 title 属性 | 行内 |
<bdo> | 文本方向，配合 dir 属性 | 行内 |
<blockquote> | 长引用 | 块级 |
<address> | 地址信息 | 块级 |
记忆重点： 优先掌握
h1~h6、p、div、em、strong、span
五、图片标签
5.1 基本使用
<img src="图片路径" alt="图片描述" width="200" height="150">
| 属性 | 说明 |
|---|---|
src | 图片路径（必填） |
alt | 图片描述（SEO核心、无障碍阅读） |
width | 宽度（像素），只设一项时另一项等比例缩放 |
height | 高度（像素） |
- 尽量不同时修改宽和高，避免比例失调
- 通常只缩小，不放大
- img 属于行内块元素
5.2 路径
| 类型 | 说明 | 示例 |
|---|---|---|
| 相对路径 | 以当前文件为参考 | ./图片.jpg（同级）、../图片.jpg（上级） |
| 绝对路径-本地 | 从盘符出发 | D:/a/b/c/图片.jpg（很少用） |
| 绝对路径-网络 | 完整URL | https://example.com/img/logo.png |
相对路径符号速记：
| 符号 | 含义 | 示例 |
|---|---|---|
./ | 同级（可省略） | ./怪兽.jpg |
/ | 下一级 | ./a/喜羊羊.jpg |
../ | 上一级 | ../奥特曼.jpg |
5.3 常见图片格式对比
| 格式 | 压缩 | 透明背景 | 动图 | 占用 | 使用场景 |
|---|---|---|---|---|---|
| jpg/jpeg | 有损 | ❌ | ❌ | 小 | 产品宣传图（最常用） |
| png | 无损 | ✅ | ❌ | 略大 | Logo、重要配图、需要透明背景 |
| bmp | 不压缩 | ❌ | ❌ | 极大 | 游戏图片（网页少用） |
| gif | — | 简单支持 | ✅ | — | 网页动态图 |
| webp | 优秀 | ✅ | ✅ | 小 | 优点最多，但需注意兼容性 |
| base64 | — | — | — | — | 小图片，嵌入网页，不受路径限制 |
WebP 是谷歌推出的网页专用格式，集合了上述格式的优点，使用时务必解决兼容性问题。
六、超链接
6.1 基本语法
<a href="目标地址" target="打开方式">链接文字</a>
| 属性 | 说明 |
|---|---|
href | 跳转目标（必填） |
target | _self（本窗口，默认）/ _blank（新窗口） |
rel | 配合 target="_blank" 使用：noopener noreferrer |
title | 鼠标悬停提示 |
6.2 四种跳转方式
① 跳转到页面
<a href="https://www.bilibili.com/" target="_blank">去B站</a>
<a href="./index.html" target="_self">本地页面</a>
② 跳转到文件
浏览器能打开（.jpg、.mp4、.pdf 等）→ 直接打开；不能打开（.zip 等）→ 引导下载。
<a href="./图片.png">打开图片</a>
<a href="./资源.zip">下载压缩包</a>
<!-- 强制触发下载 -->
<a href="./视频.mp4" download="电影.mp4">下载视频</a>
③ 跳转到锚点
<!-- 设置锚点（两种方式） -->
<a name="anchor1"></a>
<h2 id="anchor2">标题位置</h2>
<!-- 跳转锚点 -->
<a href="#anchor1">跳到锚点1</a>
<a href="#">回到顶部</a>
<a href="other.html#anchor2">跨页面跳锚点</a>
④ 唤起应用
<a href="tel:10086">拨号</a>
<a href="mailto:xxx@qq.com">发邮件</a>
<a href="sms:10086">发短信</a>
6.3 注意点
a标签虽然是行内元素，但可以包裹除自身外的任何元素- 多个空格/回车会被浏览器解析为一个空格
_blank必须配合rel="noopener noreferrer"（安全原因）
七、列表
7.1 有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
7.2 无序列表
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
</ul>
7.3 列表嵌套
<ul>
<li>洛阳
<ul>
<li>白马寺</li>
<li>龙门石窟</li>
</ul>
</li>
</ul>
嵌套时务必把结构写完整，
<li>标签最好写在ul或ol中，不要单独使用。
7.4 自定义列表
<dl>
<dt>术语名称</dt>
<dd>术语描述1</dd>
<dd>术语描述2</dd>
</dl>
dl：一个自定义列表dt：一个术语名称dd：术语描述（可多个）
八、表格
8.1 基本结构
<table border="1">
<caption>表格标题</caption>
<thead>
<tr><th>表头1</th><th>表头2</th></tr>
</thead>
<tbody>
<tr><td>数据1</td><td>数据2</td></tr>
</tbody>
<tfoot>
<tr><td>脚注1</td><td>脚注2</td></tr>
</tfoot>
</table>
| 标签 | 含义 |
|---|---|
<table> | 表格 |
<caption> | 表格标题 |
<thead> | 表格头部 |
<tbody> | 表格主体 |
<tfoot> | 表格脚注（可选） |
<tr> | 一行 |
<th> | 表头单元格（加粗居中） |
<td> | 普通单元格 |
8.2 常用属性
| 属性 | 作用 | 适用标签 |
|---|---|---|
width | 宽度 | table、th、td |
height | 高度/最小高度 | table、thead、tbody、tfoot、tr、th、td |
border | 表格外侧边框宽度 | table |
cellspacing | 单元格间距（0 时边框重叠但不合并） | table |
align | 水平对齐：left/center/right | thead、tbody、tfoot、tr、th、td |
valign | 垂直对齐：top/middle/bottom | thead、tbody、tfoot、tr、th、td |
rowspan | 跨行合并（纵向合并） | th、td |
colspan | 跨列合并（横向合并） | th、td |
8.3 跨行跨列
<!-- 跨3列（横向合并3个单元格） -->
<td colspan="3">合并列</td>
<!-- 跨2行（纵向合并2个单元格） -->
<td rowspan="2">合并行</td>
注意：
- 给某个
th/td设宽度 → 整列受影响 - 给某个
th/td设高度 → 整行受影响 border只控制表格最外侧边框，单元格边框的精细化控制要靠 CSS
九、表单
9.1 基本结构
<form action="提交地址" target="_self" method="get">
<!-- 表单控件 -->
</form>
| 属性 | 说明 |
|---|---|
action | 表单提交地址（需与后端沟通） |
target | _self（本窗口）/ _blank（新窗口） |
method | get（默认）/ post（后续 Ajax 详解） |
9.2 常用表单控件
① 文本输入框
<input type="text" name="account" value="默认值" maxlength="10">
② 密码输入框
<input type="password" name="pwd" maxlength="6">
③ 单选框
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女
name相同才能单选；务必写value，否则无法提交数据；checked表示默认选中。
④ 复选框
<input type="checkbox" name="hobby" value="smoke" checked> 抽烟
<input type="checkbox" name="hobby" value="drink"> 喝酒
⑤ 隐藏域
<input type="hidden" name="tag" value="100">
用户不可见，提交表单时携带固定数据。
⑥ 提交按钮
<button type="submit">提交</button>
<input type="submit" value="提交">
button的type默认值就是submit，不要指定name属性。
⑦ 重置按钮
<button type="reset">重置</button>
<input type="reset" value="重置">
⑧ 普通按钮
<button type="button">检测</button>
<input type="button" value="检测">
若不写
type="button"，button默认为submit，会触发表单提交！
⑨ 文本域
<textarea name="other" rows="3" cols="20">默认内容</textarea>
不能写
type属性；rows影响高度，cols影响宽度。
⑩ 下拉框
<select name="place">
<option value="冀">河北</option>
<option value="粤" selected>广东</option>
</select>
建议每个
option都设置value；selected表示默认选中。
9.3 禁用表单控件
给表单控件添加 disabled 属性即可禁用：
<input disabled type="text" name="account">
input、textarea、button、select、option 均可使用 disabled。
9.4 label 标签
label 与表单控件关联后，点击文字即可聚焦控件。两种方式：
<!-- 方式一：for + id -->
<label for="username">用户名：</label>
<input id="username" type="text">
<!-- 方式二：包裹 -->
<label>用户名：<input type="text"></label>
9.5 fieldset 与 legend
fieldset 为表单分组，legend 为分组标题：
<fieldset>
<legend>主要信息</legend>
<!-- 表单控件 -->
</fieldset>
9.6 补充标签
| 标签 | 说明 | 类型 |
|---|---|---|
<br> | 换行 | 单标签 |
<hr> | 分隔线 | 单标签 |
<pre> | 按原文格式显示（嵌入代码） | 双标签 |
- 不要用
<br>来增加段落间距，应使用 CSSmargin<hr>语义是分隔，只想画线应使用 CSS
十、框架标签（iframe）
在网页中嵌入其他文件。
<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>
| 属性 | 说明 |
|---|---|
name | 框架名字，可与 target 配合 |
width / height | 框架尺寸 |
frameborder | 是否显示边框（0 或 1） |
实际应用：
- 嵌入广告
- 与超链接或表单的
target配合，在框架内展示内容
<a href="https://www.bilibili.com" target="myFrame">看B站</a>
<iframe name="myFrame" width="400" height="300" frameborder="0"></iframe>
十一、字符实体
在 HTML 中，特殊符号（如 <、>）需要用字符实体表示，否则会被当作标签解析。
格式：&实体名; 或 &#实体编号;
常用字符实体速查
| 描述 | 实体名称 | 实体编号 | 显示 |
|---|---|---|---|
| 空格 | |   | （空格） |
| 小于号 | < | < | < |
| 大于号 | > | > | > |
| 和号 | & | & | & |
| 引号 | " | " | " |
| 人民币 | ¥ | ¥ | ¥ |
| 版权 | © | © | © |
| 乘号 | × | × | × |
| 除号 | ÷ | ÷ | ÷ |
十二、全局属性
全局属性：所有 HTML 标签都能使用的属性。
| 属性 | 作用 |
|---|---|
id | 唯一标识（不能重复），用于 CSS/JS/label 关联 |
class | 类名，用于 CSS 样式设置 |
style | 直接写 CSS 样式 |
dir | 文本方向：ltr（左→右）/ rtl（右→左） |
title | 鼠标悬停提示文字 |
lang | 指定标签内语言 |
<div id="box1" class="red" style="color:green" title="提示文字">内容</div>
<bdo dir="rtl">你是年少的欢喜</bdo> <!-- 输出：欢喜的年少是你 -->
十三、meta 元信息
meta 标签放在 <head> 中，提供页面的元信息。
常用 meta 配置
<!-- 1. 字符编码 -->
<meta charset="UTF-8">
<!-- 2. IE兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 3. 移动端视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 4. 网页关键字（SEO） -->
<meta name="keywords" content="网上购物,电商,数码产品">
<!-- 5. 网页描述（SEO） -->
<meta name="description" content="京东购物网，品质保障">
<!-- 6. 搜索引擎爬虫控制 -->
<meta name="robots" content="index,follow">
<!-- 7. 网页作者 -->
<meta name="author" content="Totolmi">
<!-- 8. 生成工具 -->
<meta name="generator" content="Visual Studio Code">
<!-- 9. 版权信息 -->
<meta name="copyright" content="2026-2027©版权所有">
<!-- 10. 自动刷新/跳转 -->
<meta http-equiv="refresh" content="3;url=https://www.bilibili.com/">
robots 属性值说明
| 值 | 含义 |
|---|---|
index | 允许爬虫索引此页面 |
noindex | 不允许索引此页面 |
follow | 允许爬虫跟踪链接 |
nofollow | 不允许跟踪链接 |
all | 等同于 index, follow |
none | 等同于 noindex, nofollow |
总结
HTML 重点掌握以下核心标签和概念：
✅ 基本结构：<!DOCTYPE html>、<html>、<head>、<body>
✅ 排版标签：h1~h6、p、div
✅ 文本标签：em、strong、span
✅ 图片：img（src、alt、相对路径/绝对路径）
✅ 超链接：a（href、target、锚点、唤起应用）
✅ 列表：ol、ul、dl
✅ 表格：table、thead、tbody、tr、th、td、跨行跨列
✅ 表单：form、input（text/password/radio/checkbox/submit/reset）、select、textarea、label、fieldset
✅ 字符实体： 、<、>、&
✅ 全局属性：id、class、style
✅ meta 元信息：charset、keywords、description、viewport
💡 核心原则：语义化 > 默认样式。 标签的默认外观不重要（CSS 可以随意改），选择标签的唯一标准是语义！
本文为 HTML 阶段学习笔记整理，仅供学习交流。如有错误欢迎指正。
...全文
请发表友善的回复…
发表回复
技术星河 满级人类 07-28 17:59
- 打赏
- 举报
非常棒，格式排版很好，说明md文档学的很不错👍
