下面给你整理一篇 HTML 总结大全，涵盖基础语法、标签分类、表单、语义化、常见属性以及现代 HTML5 特性，非常适合前端入门复习、笔记整理或面试备考。
HTML 总结
一、HTML 基础概念
- HTML（HyperText Markup Language）是 超文本标记语言
- 作用：用于描述网页结构和内容
- 浏览器根据 HTML 渲染页面
- HTML 是 标记语言，而非编程语言
HTML 文档结构示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 示例</title>
</head>
<body>
<h1>标题</h1>
<p>段落内容</p>
</body>
</html>
二、常用 HTML 标签分类
1️⃣ 文本标签
| 标签 | 作用 |
|---|
<h1> ~ <h6> | 标题 |
<p> | 段落 |
<span> | 行内文本容器 |
<strong> / <b> | 加粗，语义不同 |
<em> / <i> | 斜体，语义不同 |
<br> | 换行 |
<hr> | 水平线 |
2️⃣ 列表标签
| 标签 | 说明 |
|---|
<ul> | 无序列表 |
<ol> | 有序列表 |
<li> | 列表项 |
<dl> / <dt> / <dd> | 定义列表（描述列表） |
3️⃣ 超链接与多媒体
| 标签 | 说明 |
|---|
<a> | 超链接，href 指定目标 |
<img> | 图片，src 属性指定图片路径 |
<audio> | 音频播放 |
<video> | 视频播放 |
<iframe> | 内嵌网页 |
4️⃣ 表格标签
| 标签 | 说明 |
|---|
<table> | 表格容器 |
<tr> | 表格行 |
<td> | 表格单元格 |
<th> | 表头单元格 |
<caption> | 表格标题 |
5️⃣ 表单标签
| 标签 | 说明 |
|---|
<form> | 表单容器 |
<input> | 输入控件（text, password, radio, checkbox, submit…） |
<textarea> | 多行文本输入 |
<select> / <option> | 下拉选择 |
<button> | 按钮 |
<label> | 标签关联输入控件 |
三、HTML 属性总结
- 全局属性（可用于任意标签）：
id：唯一标识class：样式类style：内联样式title：鼠标悬停提示hidden：隐藏元素data-*：自定义数据属性
- 常用事件属性：
onclick、onmouseover、onchange、oninput 等
- 表单相关属性：
name：表单控件名value：控件值placeholder：占位提示checked：选中状态（radio/checkbox）disabled：禁用
四、HTML5 新特性标签
1️⃣ 语义化标签
| 标签 | 说明 |
|---|
<header> | 页眉 |
<footer> | 页脚 |
<nav> | 导航 |
<section> | 区块 |
<article> | 独立文章 |
<aside> | 侧边栏 |
<main> | 主要内容 |
2️⃣ 表单新控件
<input type="email">、<input type="url">、<input type="date"><datalist>：下拉建议列表<output>：表单计算结果
3️⃣ 多媒体
<audio>、<video>、<source><canvas>：绘图、游戏、可视化
4️⃣ 本地存储
localStorage、sessionStorage 配合 JS 使用
五、HTML 语义化原则
- 用 语义化标签 表示页面结构，增强可读性
- 有利于 SEO 和 辅助设备访问（屏幕阅读器）
- 例子：
<header>网站头部</header> <nav>导航</nav> <main> <article>文章内容</article> <aside>侧边栏</aside> </main> <footer>页脚信息</footer>
六、常见注意事项
- 标签必须正确嵌套
<p><a>text</a></p> ✅<a><p>text</p></a> ❌
- 图片必须有 alt 属性（无障碍设计）
- 避免滥用
<div> 与 <span>，尽量使用语义化标签
- HTML 与 CSS / JS 分离
七、总结
- HTML 是 网页结构核心，CSS 负责样式，JS 负责行为
- 掌握 基础标签 + 属性 + HTML5 语义化标签
- 对应现代开发：
- 响应式布局 → HTML + CSS
- 交互行为 → HTML + JS / Ajax
- SEO & 可访问性 → HTML 语义化
如果你需要，我可以帮你整理一份 “HTML 标签速查表 + 语义化图示 + 属性大全 PDF”，便于 收藏和面试快速复习。
你希望我整理吗？
