HTML - 基础标签
HTML是Web的骨架，掌握基础文档结构和常用标签是前端开发的起点。
文档结构与根元素
| 知识点 | 说明 | 相关标签/属性 |
|---|---|---|
| 文档声明 | DOCTYPE声明，告诉浏览器文档类型 | <!DOCTYPE html> |
| html根元素 | HTML文档的根元素，包含所有其他元素 | html lang |
| head头部 | 包含文档元数据，不显示在页面上 | head title meta |
| body主体 | 包含所有可见的页面内容 | body |
| 字符编码 | 设置文档字符编码，通常使用UTF-8 | charset="UTF-8" |
| 视口设置 | 控制页面在移动设备上的显示 | viewport |
文本标签
| 标签 | 说明 | 使用场景 |
|---|---|---|
h1-h6 |
标题标签，h1最高级，h6最低级 | 文章标题、章节标题 |
p |
段落标签 | 普通文本段落 |
br |
换行标签 | 强制换行 |
hr |
水平分隔线 | 内容分隔 |
pre |
预格式化文本，保留空格和换行 | 代码展示 |
blockquote |
引用文本块 | 引用他人内容 |
格式化标签
| 标签 | 效果 | 语义 |
|---|---|---|
strong |
粗体 | 重要强调（语义化） |
b |
粗体 | 样式粗体（无语义） |
em |
斜体 | 强调（语义化） |
i |
斜体 | 技术术语等（无语义） |
del |
删除内容 | |
ins |
下划线 | 插入内容 |
mark |
高亮 | 标记重点 |
small |
小文本 | 免责声明、版权 |
链接与图像
| 标签 | 属性 | 说明 |
|---|---|---|
<a> |
href |
链接地址 |
<a> |
target |
打开方式（_self/_blank） |
<a> |
rel |
关系（nofollow/noopener） |
<a> |
download |
下载属性 |
<a> |
hreflang |
链接语言 |
<img> |
src |
图像路径 |
<img> |
alt |
替代文本（必填） |
<img> |
width/height |
尺寸 |
<img> |
loading |
加载方式（lazy懒加载） |
<img> |
srcset |
响应式图片 |
列表标签
| 标签 | 说明 | 子元素 |
|---|---|---|
ul |
无序列表 | li |
ol |
有序列表 | li |
li |
列表项 | 可包含其他元素 |
dl |
定义列表 | dt dd |
dt |
定义术语 | - |
dd |
定义描述 | - |
表格标签
| 标签 | 说明 | 属性 |
|---|---|---|
table |
表格容器 | - |
tr |
表格行 | - |
td |
单元格 | colspan rowspan |
th |
表头单元格 | scope colspan |
thead |
表头部分 | - |
tbody |
表格主体 | - |
tfoot |
表脚部分 | - |
caption |
表格标题 | - |