下面给你一份 非常清晰、结构化、可打印、适合快速复习的《HTML 总结》。
内容涵盖基础 → 进阶 → 实战 → 最新标准，一份搞定 HTML 全面知识。
🌐 HTML 总结（完整复习版）
1️⃣ HTML 基础概念
- HTML（HyperText Markup Language）：构建网页结构的标记语言
- HTML 文档结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
2️⃣ 常用标签分类
📄 文本结构标签
<h1> ~ <h6>—— 标题<p>—— 段落<br>—— 换行<hr>—— 水平线<span>—— 行内标签<div>—— 块级标签
🔗 链接与资源
<a href="">—— 超链接<img src="">—— 图片<link>—— 引入外部 CSS<script>—— 引入 JS
📦 列表
<ul>—— 无序列表<ol>—— 有序列表<li>—— 列表项<dl><dt><dd>—— 定义列表（词条/解释）
📝 表单
<form>—— 表单总容器<input>—— 文本、复选、单选等<textarea>—— 多行输入<select><option>—— 下拉框<button>—— 按钮<label>—— 与输入绑定（accessibility 友好）
📊 表格
<table>—— 表格<tr>—— 行<th>—— 表头<td>—— 单元格<thead><tbody><tfoot>—— 布局结构化
3️⃣ HTML5 新增常用语义化标签
🏷 布局相关（语义更强）
<header>—— 页眉<nav>—— 导航<section>—— 章节<article>—— 独立文章<aside>—— 侧边信息<footer>—— 页脚<main>—— 主体部分
🎬 多媒体
<audio>—— 音频播放<video>—— 视频播放<source>—— 多格式支持
📦 表单增强
<input type="email"><input type="date"><input type="number"><input type="range"><input type="file"><datalist>—— 自动补全
4️⃣ HTML 属性（Attributes）
常用属性：
| 属性 | 用途 |
|---|---|
id | 唯一标识 |
class | CSS/JS 选择器 |
style | 行内样式 |
title | 鼠标悬浮提示 |
alt | 图片加载失败替代文本 |
href | 链接目的地 |
src | 图片/脚本路径 |
target="_blank" | 新窗口打开 |
placeholder | 输入框提示 |
disabled | 禁用输入 |
5️⃣ 块级元素与行内元素
📦 块级元素 Block
特点：
- 独占一行
- 可设置宽高
例：div, h1, p, ul, li, table
✨ 行内元素 Inline
特点：
- 不换行
- 宽高不可设置（大部分情况）
例：span, a, img, strong, em, label
6️⃣ HTML 语义化要点（重要）
为什么语义化很重要？
- SEO 更友好
- 屏幕阅读器更好支持
- 代码结构更清晰
原则：
- 标题用
<h1>→<h6> - 导航用
<nav> - 主体内容用
<main> - 文章内容用
<article> - 不用
<div>填满整个页面
7️⃣ HTML 中常见问题
✔ 空标签
如 <br>, <hr>, <img>, <input>
✔ 标签必须成对出现
<p>text</p> 正确<p>text ❌
✔ 不要嵌套不合理标签
例如：
<p><div></div></p> <!-- 错误 -->
8️⃣ SEO 基础标签（非常重要）
在 <head> 中：
<meta name="description" content="网页描述">
<meta name="keywords" content="关键字1, 关键字2">
<meta name="author" content="作者名">
<title>页面标题</title>
<link rel="canonical" href="标准链接">
9️⃣ HTML + CSS + JS 的关系
| 技术 | 作用 |
|---|---|
| HTML | 结构 |
| CSS | 样式 |
| JavaScript | 行为、交互 |
它们构成网页三件套。
🔟 最常见的 HTML 模版（收藏）
框架基础模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>你好，HTML！</h1>
</body>
</html>
发表回复