HTML 完整知识点总结
一、基础核心
- 定义：超文本标记语言（HyperText Markup Language），用于描述网页结构和内容语义
- 文档声明：
<!DOCTYPE html>（HTML5标准，必须置于最前） - 基本结构：
<html> <!-- 根元素 --><head> <!-- 元数据区（非可视化） --><meta charset="UTF-8"> <!-- 字符编码，确保中文正常显示 --><title>页面标题</title> <!-- 浏览器标签页标题，SEO核心 --></head><body> <!-- 可视化内容区域 --><!-- 页面内容 --></body> </html>
二、文本与基础内容标签
- 标题：
<h1>-<h6>（1级到6级，重要性递减） - 段落：
<p>（自动换行，区分内容块） - 文本格式化：
<strong>：重要内容加粗<em>：强调内容斜体<u>：下划线文本<s>：删除线文本<sup>：上标（如x²）<sub>：下标（如H₂O）
- 换行与分隔：
<br>：强制换行（单标签）<hr>：水平线分隔（单标签）
三、容器与语义化标签
- 通用容器：
<div>：块级容器（独占一行）<span>：行内容器（不换行，包裹部分文本）
- HTML5语义化标签：
<header>：页头或区块头部（包含标题、logo等）<nav>：导航区域（主导航、侧边栏导航）<main>：页面主要内容（唯一，包含核心内容）<article>：独立完整内容（文章、评论、商品卡片）<section>：主题性区块（章节、不同主题内容）<aside>：辅助内容（侧边栏、广告、相关推荐）<footer>：页脚或区块底部（版权、联系方式）<figure>：媒体内容组合（图片+说明）<figcaption>：媒体内容的说明文字（配合figure使用）
四、链接与导航
- 外部链接：
<a rel="nofollow" href="URL" target="_blank">链接文本</a>href：目标地址target="_blank"：新窗口打开
- 锚点链接：
<a rel="nofollow" href="#id名">（跳转到页面内对应id的元素） - 功能链接：
- 邮件：
<a rel="nofollow" href="mailto:邮箱地址"> - 电话：
<a rel="nofollow" href="tel:电话号码">
- 邮件：
五、媒体内容
- 图片：
<img src="路径" alt="描述文字">src：图片路径（本地或网络）alt：图片描述（必设，无障碍和加载失败时显示）
- 视频：
<video src="路径" controls>controls：显示播放控件- 可选属性：
autoplay（自动播放）、loop（循环）、poster（封面图）
- 音频：
<|FunctionCallBegin|> src="路径" controls>- 可选属性：
autoplay、loop
- 可选属性：
- 嵌入内容：
<iframe src="URL" width="宽度" height="高度">（嵌入外部网页）
六、列表
- 无序列表：
<ul><li>列表项1</li><li>列表项2</li> </ul> - 有序列表：
<ol><li>第一步</li><li>第二步</li> </ol>
七、表格
- 基本结构：
<table><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> - 单元格合并：
colspan="n"：跨列合并（合并n列）rowspan="n"：跨行合并（合并n行）
八、表单
- 表单容器：
<form action="提交地址" method="get/post">action：数据提交的目标地址method：提交方式（get显式，post隐式安全）
- 常用控件：
- 文本输入：
<input type="text" name="字段名"> - 密码：
<input type="password"> - 单选按钮：
<input type="radio" name="组名">（同组互斥） - 复选框：
<input type="checkbox"> - 下拉选择：
<select name="字段名"><option value="值">选项1</option> </select> - 多行文本：
<textarea rows="行数" cols="列数"></textarea> - 按钮：
type="submit"（提交）、reset（重置）、button（普通）
- 文本输入：
- HTML5新增控件：
email（邮箱验证）、date（日期）、color（颜色）、range（滑块） - 验证属性：
required（必填）、pattern（正则验证）、min/max（范围限制）
九、元数据与头部配置（head区域）
- 视口设置（移动端适配）：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - SEO相关：
<meta name="keywords" content="关键词1,关键词2"> <meta name="description" content="页面描述"> - 网站图标：
<link rel="icon" href="favicon.ico"> - 自动刷新/跳转：
<meta http-equiv="refresh" content="秒数;url=目标地址">
十、全局属性（所有标签通用）
id：唯一标识（用于锚点、JS操作）class：类名（用于CSS样式分组）style：行内CSS样式（如style="color:red"）title：鼠标悬停时的提示文本hidden：隐藏元素（不显示）lang：内容语言（如lang="zh-CN"表示中文）data-*：自定义数据属性（如data-id="123"，供JS使用）
十一、特殊字符与注释
- 字符实体：
<→<，>→>- 空格 →
，& →&
- 注释：
<!-- 注释内容 -->（不显示，用于代码说明）
十二、最佳实践
- 语义优先：用正确标签描述内容本质
- 无障碍：图片加
alt，表单用<label>关联 - 兼容性：注意旧浏览器对HTML5新特性的支持
- 代码规范：标签小写，正确嵌套，避免废弃标签（如
<font>、<center>）