HTML标签选择思维导图
1. 文本内容组织
文本内容
├── 标题
│ ├── h1-h6 (主标题到子标题)
│ └── header (标题容器)
├── 段落
│ ├── p (普通段落)
│ ├── div (通用容器)
│ └── section (内容区块)
├── 引用
│ ├── blockquote (长引用)
│ └── q (短引用)
└── 列表
├── ul (无序列表)
├── ol (有序列表)
└── dl (定义列表)
2. 导航与链接
导航链接
├── 主导航
│ ├── nav + ul + li + a
│ └── nav + a (简单导航)
├── 页面内链接
│ └── a[href="#section"]
├── 外部链接
│ └── a[href="http://..."]
└── 功能链接
├── a[href="mailto:..."] (邮件)
├── a[href="tel:..."] (电话)
└── button (按钮功能)
3. 表单与用户输入
表单元素
├── 表单容器
│ └── form
├── 输入控件
│ ├── input[type="text"] (文本输入)
│ ├── input[type="email"] (邮箱)
│ ├── input[type="password"] (密码)
│ ├── textarea (多行文本)
│ ├── select + option (下拉选择)
│ ├── input[type="radio"] (单选)
│ ├── input[type="checkbox"] (复选)
│ └── input[type="file"] (文件上传)
├── 提交按钮
│ ├── input[type="submit"]
│ └── button[type="submit"]
└── 表单布局
├── fieldset + legend (分组)
└── label (标签关联)
4. 媒体内容
媒体元素
├── 图片
│ ├── img (简单图片)
│ ├── figure + img + figcaption (带说明)
│ └── picture (响应式图片)
├── 音频
│ └── audio
├── 视频
│ └── video
└── 嵌入内容
├── iframe (外部内容)
└── embed/object (插件内容)
5. 表格数据
表格结构
├── 基本框架
│ ├── table
│ ├── thead (表头)
│ ├── tbody (表体)
│ └── tfoot (表尾)
├── 行列结构
│ ├── tr (行)
│ ├── th (表头单元格)
│ └── td (数据单元格)
└── 语义化
├── caption (表格标题)
└── colgroup + col (列分组)
6. 页面结构
页面布局
├── 文档结构
│ ├── html
│ ├── head
│ └── body
├── 语义化区域
│ ├── header (页头)
│ ├── nav (导航)
│ ├── main (主要内容)
│ ├── article (文章)
│ ├── section (章节)
│ ├── aside (侧边栏)
│ └── footer (页脚)
└── 通用容器
├── div (无语义容器)
└── span (行内容器)
7. 特殊功能
特殊用途
├── 交互元素
│ ├── details + summary (可展开详情)
│ ├── dialog (对话框)
│ └── menu + menuitem (菜单)
├── 进度状态
│ ├── progress (进度条)
│ └── meter (度量器)
├── 时间日期
│ └── time
└── 代码展示
├── code (行内代码)
├── pre (预格式化文本)
└── samp (程序输出)
选择原则
语义化优先
- 优先选择具有明确语义的标签
- div/span 仅在无合适语义标签时使用
可访问性考虑
- 使用语义化标签提升屏幕阅读器体验
- 正确使用 heading 层级结构
SEO友好
- 合理使用 h1-h6 标题层级
- 使用 article、section 等结构化标签
功能匹配
- 表单使用 form 及相关 input 标签
- 导航使用 nav 标签
- 主内容使用 main 标签
这个思维导图可以帮助开发者根据具体的应用场景快速选择合适的HTML标签组合。
