HTML 常用标签 (Common Tags)
HTML 标签有上百个，但实际开发中 90% 的场景只用到其中约 20-30 个。本文将重点梳理这些高频核心标签。
1. 结构与元数据 (Document Structure)
| 标签 | 核心属性 | 描述 |
|---|---|---|
<!DOCTYPE html> | - | 文档类型声明。必须在第一行。触发标准渲染模式。 |
<html> | lang="zh-CN" | 根元素。lang 用于定义页面语言（影响翻译提示、读屏软件）。 |
<head> | - | 存放元数据（CSS链接、标题、字符集），内容不显示在页面中。 |
<meta> | charset="UTF-8"name="viewport" content="..." | 定义字符集（防乱码）和视口设置（移动端适配必写）。 |
<title> | - | 网页标题（显示在浏览器标签页和搜索结果中）。 |
<body> | - | 网页可见内容的主体容器。 |
2. 文本与排版 (Text & Typography)
| 标签 | 描述 | 注意事项 |
|---|---|---|
<h1>~<h6> | 标题 | h1 一个页面建议只用一次（Logo或主标题）。 |
<p> | 段落 | 块级元素，默认有上下间距。不可包裹块级元素（如 div）。 |
<span> | 行内容器 | 用于给一段话中的几个字单独加颜色/样式。 |
<a> | 超链接 | target="_blank" 打开新窗口时，建议加 rel="noopener". |
<strong> | 加粗 (强调) | 比 <b> 语义更重，SEO 权重更高。 |
<em> | 斜体 (语气) | 比 <i> 语义更重。 |
<br> | 换行 | 尽量少用，布局间距请用 CSS margin。 |
<hr> | 分割线 | 语义上的主题转换。 |
3. 嵌入资源 (Embedded Content)
| 标签 | 核心属性 | 描述 |
|---|---|---|
<img> | src: 图片路径alt: 替代文本 (必填)loading="lazy" | 图片。alt 用于图片挂掉时显示，以及 SEO。lazy 开启懒加载。 |
<video> | src, controls (显示控制条), autoplay (自动播放), muted (静音), loop (循环) | 视频播放器。注意：现代浏览器禁止带声音的自动播放，必须配合 muted 才能 autoplay。 |
<audio> | src, controls, loop | 音频播放器。 |
<iframe> | src, frameborder="0" | 内嵌框架。用于在网页里嵌入另一个网页（如 B站视频、地图）。 |
4. 容器与布局 (Containers)
| 标签 | 描述 | 场景 |
|---|---|---|
<div> | 通用容器 (无语义)。 | 仅仅为了布局、加样式时使用。 |
<header> | 页眉。 | Logo、主导航、搜索栏区域。 |
<footer> | 页脚。 | 版权声明、友情链接、联系方式。 |
<nav> | 导航。 | 包裹主菜单链接列表 (<ul>)。 |
<main> | 主体内容。 | 一个页面只能有一个，包裹核心内容。 |
<section> | 章节/区块。 | 文档中的独立部分，通常带有标题 (h2-h6)。 |
<article> | 独立文章。 | 博客文章、新闻卡片、帖子（可独立分发的内容）。 |
<aside> | 侧边栏/相关内容。 | 广告、推荐阅读、目录。 |
5. 列表 (Lists)
| 标签 | 子标签 | 描述 | 场景 |
|---|---|---|---|
<ul> | <li> | 无序列表 (Unordered) | 导航栏、菜单、新闻列表。前面带圆点。 |
<ol> | <li> | 有序列表 (Ordered) | 排行榜、步骤说明。前面带数字 1,2,3。 |
<dl> | <dt>, <dd> | 定义列表 | 术语解释、键值对（问题-答案）。 |
6. 表单 (Forms) —— 用户交互核心
| 标签 | 关键属性 | 描述 |
|---|---|---|
<form> | action, method | 表单域容器。 |
<input> | type="..." | 万能输入框。text (文本), password (密码), checkbox (多选), radio (单选), file (上传), submit (提交)。 |
<textarea> | rows, cols | 多行文本域。 |
<button> | type="button/submit" | 按钮。 |
<label> | for="id" | 标签说明。点击 label 会自动聚焦到对应的 input（提升体验的关键）。 |
<select> | <option> | 下拉选择框。 |
7. 表格 (Tables)
| 标签 | 描述 |
|---|---|
<table> | 表格容器。 |
<thead> | 表头区域。 |
<tbody> | 表体区域。 |
<tr> | 行 (Table Row)。 |
<th> | 表头单元格 (Table Header)，默认加粗居中。 |
<td> | 普通单元格 (Table Data)。 |
8. 常见问题 (FAQ) 与 避坑指南
8.1 <div> 和 <span> 到底有什么区别？
这是面试常考题，也是布局基础。
<div>(Block 块级): 独占一行，宽度默认撑满父容器，可以设置宽高、margin、padding。用于布局。<span>(Inline 行内): 不独占一行，宽度由内容撑开，不能设置宽高（设置了也无效），垂直方向的 margin 无效。用于修饰文字。
8.2 src 和 href 有什么区别？
src(Source): 引入资源。浏览器会下载并替换当前标签的内容（如img,script,video）。解析到 src 时会暂停其他渲染，直到下载完成。href(Hypertext Reference): 建立链接。浏览器会建立当前文档与目标资源的联系（如linkCSS,a标签）。不会阻塞页面渲染。
8.3 为什么我的图片下面有一条莫名其妙的空白缝隙？
现象: div 包裹 img，图片底部会有约 3-5px 的空隙，导致 div 比图片高。
原因: 图片默认是 inline 元素，遵循文字排版规则，底部留空是为了放字母（如 j, g, y）的下伸部分。
解法: 把图片转为块级。 img { display: block; }
8.4 <button> 和 <input type="button"> 选哪个？
推荐 <button>。
<button>提交</button>: 是双标签，中间可以放文字、图标甚至图片，样式更灵活，伪元素更好用。<input type="button" value="提交">: 是单标签，只能通过value属性设置纯文字，样式受限。
8.5 为什么表单里的 radio 单选框可以多选？
原因: 没有给它们设置相同的 name 属性。
解法:
html
<!-- name 必须一样，才是一组 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女8.6 target="_blank" 有安全隐患？
是的。当你在新窗口打开外链时，新页面可以通过 window.opener 控制原页面（例如跳转到钓鱼网站）。
解法: 总是搭配 rel 属性使用。rel="noopener noreferrer"在安全范围内
html
<a href="..." target="_blank" rel="noopener noreferrer">外部链接</a>