zzxworld

HTML 标签大全和语义说明 - 2022

HTML 是一门比较简单的标记语言,简单易懂,又容易使用。但有时候我会觉得它很复杂,复杂的我只想用 div 标签来应付一切。但我也清楚,要真正掌握 HTML,一定离不开语义化的使用方式。所以决定还是花时间整理一份 HTML 标签大全和语义说明,用作为日后使用的参考。

我在本文的标题后加了个年份,这是打算每年更新一次,就看能不能坚持下来。这些 HTML 标签我按状态分成了有效和废弃两张表。废弃状态的标签表放在最后。

有效的 HTML 标签

标签名称 用途
<a> 定义一个超链接。
<abbr> 对一串缩写字符进行标记。
<address> 对一段联系信息进行标记。
<area> 定义一块可点击区域。
<article> 对一段独立内容进行标记。
<aside> 标记和主内容无关的内容。
<audio> 定义一段音频内容。
<b> 定义要粗体显示的文本内容。
<base> 为页面链接定义基础地址。
<bdi> 标记一段文本使其脱离其父元素的文本方向。
<bdo> 标记一段文本的显示方向。
<blockquote> 定义引用文本。
<body> 定义页面的内容主体。
<br> 在文本中插入换行点。
<button> 定义一个按钮。
<canvas> 定义绘图的图形容器。
<caption> 定义表格标题。
<cite> 标记引用文本。
<code> 定义代码文本内容。
<col> 按列定义表格内容的显示样式。
<colgroup> 给表格分组并定义内容的显示样式。
<data> 定义并映射机器可读的文本内容。
<datalist> 定义数据选项列表。
<dd> 搭配 dl 定义条目中的列表内容。
<del> 标记删除文本。
<details> 定义细节描述性的数据和内容。
<dfn> 定义特殊的术语或短语内容。
<dialog> 定义对话窗口。
<div> 定义分区内容块。
<dl> 定义列表内容。
<dt> 搭配 dl 定义条目中的列表术语。
<em> 标记要强调的文本内容。
<embed> 定义要嵌入的插件内容。
<fieldset> 定义字段组合。
<figure> 定义独立的内容流。
<figcaption> 配合 <figure> 标签的说明性内容,可以是标题或是描述。
<footer> 定义内容页脚。
<form> 定义交互式表单。
<h1> 定义标题文本。支持 6 个级别的定义,从 <h1> 一直到 <h6>
<head> 定义 HTML 页面的元数据组。
<header> 定义内容页头。
<hgroup> 定义内容标题组。
<hr> 分割大块内容中不同话题的内容。
<html> 定义 HTML 内容的文档根。
<i> 标记要区分的文本内容。
<iframe> 创建嵌套其他 HTML 内容的容器。
<img> 定义一个图片。
<input> 定义交互输入控件。
<ins> 标记插入内容。
<kbd> 标记键盘按键。
<label> 标记内容说明文本。
<legend> 配合 <fieldset> 标签定义内容标题。
<li> 定义条目元素。
<link> 定义外部链接资源。
<main> 定义主体内容。
<map> 包裹 <area> 元素定义可点击区域。
<mark> 标记要突出显示的内容。
<menu> 定义菜单内容。
<meta> 定义 HTML 文档的元数据。
<meter> 显示度量标记元素。
<nav> 显示导航内容元素。
<noscript> 定义无法执行脚本代码环境下要显示的内容。
<object> 引用外部对象资源。
<ol> 定义带编号的有序条目列表。
<optgroup> <option> 选项元素创建分组。
<option> 定义可选列表元素。
<output> 定义计算或是操作后输出的文本内容。
<p> 标记段落内容。
<picture> 定义多个图像的适配显示空间。
<pre> 定义预定义格式的文本,比如代码。
<progress> 定义进度条元素。
<q> 标记行内引用文本。
<rp> 定义注解内容括号。
<rt> 定义注解内容。
<ruby> 注解内容的容器标签。
<s> 标记不相关或是不确定的文本。
<samp> 标记计算或是操作后输出性的文本内容。
<script> 嵌入或引用可执行脚本。
<section> 定义独立的章节内容。
<select> 定义一个可操作的选项元素。
<slot> Web Components 的占位符。
<small> 降低文字的显示大小。
<source> 配合 <picture>, <audio> 或是 <video> 标签引用媒体资源。
<span> 通用的行内文本容器元素。
<strong> 标记十分重要的文本内容。
<style> 定义 CSS 样式。
<sub> 标记需要低位显示的特殊文本。
<summary> 搭配 <details> 元素显示摘要信息。
<sup> 标记需要高位显示的特殊文本。
<table> 表格容器定义元素。
<tbody> 标记表格的主体内容。
<td> 定义表格单元格。
<template> 定义模版内容。
<textarea> 定义可输入内容的多行文本表单元素。
<tfoot> 定义表格的尾部内容。
<th> 定义表格的表头单元格。
<thead> 定义表格的表头内容。
<time> 定义表示时间的内容元素。
<title> 定义在浏览器标题栏显示的文本内容。
<tr> 定义表格中的行。
<track> 配合 <audio><video> 标签定义时序数据,比如字幕。
<u> 标记非文本注释内容,默认以下划线来显示。
<ul> 定义无序列表内容。
<var> 标记编程或数学用途的变量内容。
<video> 定义视频内容。
<wbr> 定义文本中的可换行位置。

废弃的 HTML 标签

标签名称 用途
<acronym> 对一串缩写字符进行标记,跟 <abbr> 用途类似,可以用这个替代。
<applet> 定义 Java 嵌入式小程序。
<bgsound> 定义背景音乐。
<big> 放大文本显示样式。
<blink> 标记可闪烁的文本。
<center> 标记文本居中显示。
<content> 定义 Web Components 的占位符,使用 <slot> 标签替代。
<dir> 标记文件或目录位置。
<font> 定义内容字体样式。
<frame> 引用其他 HTML 文档。
<frameset> 定义 <frame> 标签组。
<image> 定义图片展示内容。
<keygen> 定义密钥字段。
<marquee> 定义可滚动显示的内容区域。
<menuitem> 定义菜单元素。
<nobr> 标记不允许换行的内容。
<noembed> 定义不支持嵌入环境下的替代内容。
<noframes> 定义不支持嵌套环境下的替代内容。
<param> 配合 <object> 标签定义参数。
<plaintext> 定义要以纯文本显示的内容。
<rb> 定义注解分割位置。
<rtc> 定义语义注解内容。
<shadow> 定义 Web Components 的 Shadow DOM。
<spacer> 定义页面间隔区域。
<strike> 在文本上标记水平删除线。
<tt> 标记电报文本元素。