HTML 标签大全

常用元素速查表 · 每个标签都配可运行示例

01文档结构与布局

页面顶部的页头区域
header
导航链接区域
nav
页面的主要内容（一个页面只应有一个）
main
具有独立主题的区块
section
可独立使用的文章内容
article
与正文相关但可分离的旁支内容
aside
页面底部的页脚区域
footer
块级容器，常用于布局
div
行内容器，用来包裹一小段文字
span
示例图片
figcaption：图片说明
figure / figcaption

02标题与段落

主标题

h1

副标题

h2

三级标题

h3

四级标题

h4
五级标题
h5
六级标题
h6

这是一个段落，标题和段落都会自动换行。

p
水平线
分隔上下内容
hr
第一行
第二行（br 强制换行）
br
很长很长很长很长很长很长很长的文字可以在这里换行
wbr

03链接与媒体

示例图片
img
picture 示例
picture / source
video
audio
iframe
canvas
svg
可点击区域的图片 点击跳转
map / area

04文本格式化

HTML：鼠标悬停查看全称
abbr
加粗文本
b
斜体文本
i
H2O 与 x2
sub / sup
高亮文本
mark
删除线文本
del
下划线文本
ins
下划线文本
u
强调文本
strong
强调文本（斜体）
em
小号文本
small
大号文本
big（已废弃） 
预格式化文本
  保留空格与
    换行结构
pre
行内代码：console.log("Hi")
code
这是一段引用内容。
blockquote
他说：短引用会自动加引号
q
联系信息：srmz.cn
address
《HTML 标准》：引用来源
cite
定义术语：表示被定义的词
dfn
请按 Ctrl + S 保存
kbd
程序输出：Error: 404
samp
变量：x = 1
var
删除线文本
s
用户输入：إيان（双向隔离）
bdi
这段文字从右往左排列
bdo
发布于
time
漢hàn字zì：注音
ruby / rt / rp
下载进度
progress
内存占用
meter

05表单元素

form / label / button
input（各种 type）
textarea
select / optgroup / option
datalist / option
性别
fieldset / legend

06列表

  • 无序列表项
  • 无序列表项
  • 无序列表项
ul / li
  1. 有序列表项
  2. 有序列表项
  3. 有序列表项
ol / li
HTML
超文本标记语言
CSS
层叠样式表
dl / dt / dd
  • 菜单项一
  • 菜单项二
    •
    menu / li
    menuitem 曾用于 menu 内部，现已被现代标准废弃。
    menuitem（已废弃）

    07表格

    caption：学生成绩表
    姓名（th） 科目（th） 分数（th）
    张三（td） HTML 95
    李四（td） CSS 88
    tfoot：以上为示例数据
    table / caption / colgroup / col / thead / tbody / tfoot / tr / th / td

    08交互与其他

    点击展开 / 收起

    这里是 details 展开后显示的内容。

    details / summary
    dialog
    这段文字可以直接点击编辑
    contenteditable（全局属性）
    试着拖动我
    draggable（全局属性）
    这里有一个 data-* 自定义属性
    data-*（全局属性）
    template

    script 用于引入脚本，noscript 提供降级提示。

    script / noscript
    script（内联与外部）

    这是一个 dialog 对话框