HTML 到底有多少标签(HTML tag)?

参考文档:w3schools.com/html/html


历时三天,对着菜鸟教程总结,一个一个手敲,统计出了:

原来 HTML 有 110 个标签啊!!!!!!


一、基础标签

1:<!DOCTYPE>:定义文档类型

<!-- 本文档为 HTML 5 文档 -->
<!DOCTYPE html>

<!-- 本文档为 HTML 4.01 文档 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- 本文档为 XHTML 1.0 文档 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2:<html>:定义一个 HTML 文档

manifest:规定文档的缓存 manifest 的位置
// https://www.runoob.com/html/html5-app-cache.html

3:<title>:为文档定义一个标题

无私有属性

4:<body>:定义文档的主体

无私有属性

5~10:<h1> to <h6>:定义 HTML 标题

无私有属性

11:<p>:定义一个段落

无私有属性

12:<br>:定义简单的折行

无私有属性

13:<hr>:定义水平线

无私有属性

14:<!--...-->:定义一个注释

无私有属性、无标准属性

二、格式标签

15:<abbr>:定义一个缩写

无私有属性
--
提示:把鼠标移到 <abbr> 标签的元素上时,会显示其 title 属性的值

16:<address>:定义文档作者或拥有者的联系信息

无私有属性
--
提示:<address> 如果在 <body> 内,则它表示文档的联系信息
     <address> 如果在 <article> 内,则它表示文章的联系信息

17:<b>:定义粗体文本

无私有属性
--
提示:<b> 标签应该作为最后的选择,只有在没有其他标记比较合适的时候才使用它。
如标题应该用 <h1>-<h6> 标签表示;被强调的文本应该用 <em> 标签标示;
重要的文本应该用 <strong> 标签表示;被标记的的文本应该用 <mark> 标签标示;

*18:<bdi>:允许您设置一段文本,使其脱离其父元素的文本方向设置。

dir:ltr | rtl | auto - 规定 <bdi> 元素内的文本的文本方向,默认 auto。
--
极少使用

*19:<bdo>:定义文本的方向

dir:ltr | rtl | auto - 规定 <bdi> 元素内的文本的文本方向,默认 auto。
--
极少使用

20:<blockquote>:定义块引用

cite: URL - 规定引用的来源

21:<cite>:定义作品的标题

无私有属性

22:<code>:定义计算机代码文本【短语标签 1 / 7】

无私有属性

23:<del>:定义被删除的文本

cite: URL - 规定一个解释了文本被删除的原因的文档的 URL
datetime:YYYY-MM-DDThh:mm:ssTZD - 规定文本被删除的日期和时间
--
<del> 与 <ins> 一般一起使用,描述文档中的更新与修正。

24:<dfn>:定义一个定义项目【短语标签 2 / 7】

无私有属性

25:<em>:定义强调文本【短语标签 3 / 7】

无私有属性

26:<i>:定义斜体文本

无私有属性

27:<ins>:定义被插入文档中的文本

cite: URL - 规定一个文档的 URL,该文档解释了文本被插入的原因
datetime:YYYY-MM-DDThh:mm:ssTZD - 规定文本被插入的日期和时间
--
<del> 与 <ins> 一般一起使用,描述文档中的更新与修正。

28:<kbd>:定义键盘文本【短语标签 4 / 7】

无私有属性

29:<mark>:定义带有记号的文本

无私有属性

30:<meter>:度量衡

详情见:https://www.runoob.com/tags/tag-meter.html
--
提示:度量衡可以用作表示磁盘使用情况

31:<pre>:预格式化文本

无私有属性
--
提示:<pre> 标签内的文本,会保留空格和换行,同时文本会呈现为等款字体。
经常用作代码的展示。(<code>???)

32:<progress>:定义运行中的任务进度

max: number - 规定需要完成的值
value: number - 规定进程的当前值

33:<q>:定义短的引用(自动加引号)

cite:URL - 规定饮用的源 URL

*34:<rp>:定义不支持 ruby 元素的浏览器所显示的内容【汉语拼音 1 / 3】

无私有属性

*35:<rt>:定义字符的解释或发音【汉语拼音 2 / 3】

无私有属性

*36:<ruby>:定义 ruby 注释【汉语拼音 3 / 3】

无私有属性
--
提示:使用示例
<ruby><rp>(</rp><rt>Han</rt><rp>)</rp><rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

37:<s>:定义加删除线的文本(和 <del> 的区别?)

无私有属性
--
<s> 与 <del> 的区别?
<s> 标签对那些不正确、不准确或者没有用的文本进行标识
<s> 标签不应该用来定义替换的或者删除的文本。

38:<samp>:定义计算机代码样本【短语标签 5 / 7】

无私有属性

39:<small>:定义小号文本

无私有属性
--
提示:用来定义旁注

40:<strong>:定义语气更为强烈的强调文本【短语标签 6 / 7】

无私有属性

41:<sub>:定义下标文本(下标文本可以用来表示化学公式)

无私有属性

42:<sup>:定义上标文本(上标文本可以用来添加脚注)

无私有属性

43:<time>:定义一个日期 / 时间

datetime: datetime - 规定日期/时间。另一种方式,则是由元素的内容给定日期/时间。
--
提示:该元素能够以机器刻度的方式对日期和时间进行编码。

44:<u>:定义下划线文本

无私有属性

45:<var>:定义文本的变量部分【短语标签 7 / 7】

无私有属性

46:<wbr>:规定文本中的何处适合添加换行符

无私有属性

三、表单标签

47:<form>:定义一个 HTML 表单,用于用户输入

accept-charset: character_set - 规定服务器可处理的表单数据字符集
action: URL - 规定当前提交表单时向何处发送表单数据
autocomplete: on|off - 规定是否启用表单的自动完成功能
enctype:application/x-www-form-urlencoded|multipart/form-data|text/plain - 规定在向服务器发送表单数据之前如何对其进行编码。
method: get|post - 规定用于发送表单数据的 HTTP 方法
name: text - 规定表单的名称
novalidate: novalidate - 如果使用该属性,则提交表单时不进行验证
target:_blank|_self|_parent|_top - 规定在何处打开 action URL
--
提示:<form> 元素包含一个或多个表单元素。

48:<input>:定义一个输入控件

accept: audio|* video|* image|* MIME_type - 规定通过文件上传来提交的文件的类型(只针对 type="file")
alt: text - 定义图像输入的替代文本(只针对 type="image")
autocomplete: on|off - autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能
autofocus: autofocus - 属性规定当页面加载时 <input> 元素应该自动获得焦点
checked: checked - checked 属性规定在页面加载时应该被预先选定的 <input> 元素(只针对 type="checkbox"或者type="radio")
disable:disabled - disabled 属性规定应该禁用的 <input> 元素
form: form_id - form 属性规定 <input> 元素所属的一个或多个表单
formaction: URL - 属性规定当表单提交时处理输入控件的文本的 URL(只针对 type="submit" 和 type="image")
formenctype: application/x-www-form-urlencoded|multipart/form-data|text/plain - 属性规定当前表单提交到服务器时如何编码(只针对 type="submit" 和 type="image")
formmethod: get|post - 定义发送表单数据到 action URL 的 HTTP 方法。(只适合 type="submit" 和 type="image")
formnovaliadate: formnovalidate - 覆盖 <form> 元素的 novalidate 属性
formtarget: _blank|_self|_parent|_top - 规定表示提交表单后在那里显示接收到相应的名称或关键词(只适合 type="submit" 和 type="image")
height: pixels - 规定 <input> 元素的高度。(只针对 type="image")
list: datalist_id - 属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项
max: number date - 属性规定 <input> 元素的最大值
maxlength: number - 属性规定 <input> 元素中允许的最大字符数
min: number date - 属性规定 <input> 元素的最小值
multiple: multiple - 属性规定允许用户输入到 <input> 元素的多个值
name: text - 属性规定 <input> 元素的名称
pattern: regexp - 属性规定用于验证 <input> 元素值的正则表达式
placeholder: text - 属性规定可描述输入 <input> 字段预期值的简短的提示信息
readonly: readonly - 属性规定输入字段是只读的
required: required - 属性规定必须在提交表单之前填写输入字段
size: number - 属性规定以字符数计的 <input> 元素的可见宽度
src: URL - 属性规定显示为提交按钮的图像的 URL(只针对 type="image")
step: numnber - 属性规定 <input> 元素的合法数字间隔
type:
  button
  checkbox
  color
  date
  datetime
  datetime-local
  email
  file
  hidden
  image
  month
  number
  password
  radio
  range
  reset
  search
  submit
  tel
  text
  time 
  url
  week
value: text - 指定 <input> 元素 value 的值
width: pixels - 属性规定 <input> 元素的宽度(只针对 type="image")
问题:input 的 value、name 属性都有什么用?
答:value 在不同的 type 下表示不同的意思:
对于 "button"、"reset"、"submit" - 定义按钮上的文本;
对于 "text"、"password"、"hidden" - 定义输入字段的默认值
对于 "checkbox"、"radio"、"image" - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL

name 属性用于在 JavaScript 中引用元素,或者在表单提交后引用表单数据

49:<textarea>:定义多行文本输入控件

autofocus: autofocus - 规定当前页面加载时,文本区域自动获得焦点
cols: number - 规定文本区域内的可见的宽度
disabled: disabled - 规定禁用文本区域
form: form_id - 定义文本区域所属的一个或多个表单
maxlength: number - 规定文本区域允许的最大字符数
name: text - 规定文本区域的名称
placeholder: text - 规定一个简短的提示,描述文本区域期望的输入值
readonly: readonly - 规定文本区域为只读
required: required - 规定文本区域是必须的/必填的
rows: number - 规定文本区域内可见的行数
wrap: hard|soft - 规定当提交表单时,文本区域中的文本应该怎么换行

50:<button>:定义按钮

autofocus: autofocus - 规定当页面加载时按钮应当自动地获得焦点
disabled: disabled - 规定应该禁用该按钮
form: form_id - 规定按钮属于一个或多个表单
formaction: URL - 属性规定当表单提交时处理输入控件的文本的 URL(只针对 type="submit" 和 type="image")
formenctype: application/x-www-form-urlencoded|multipart/form-data|text/plain - 属性规定当前表单提交到服务器时如何编码(只针对 type="submit" 和 type="image")
formmethod: get|post - 定义发送表单数据到 action URL 的 HTTP 方法。(只适合 type="submit" 和 type="image")
formnovaliadate: formnovalidate - 覆盖 <form> 元素的 novalidate 属性
formtarget: _blank|_self|_parent|_top - 规定表示提交表单后在那里显示接收到相应的名称或关键词(只适合 type="submit" 和 type="image")
name: name - 规定按钮的名称
type: button|reset|submit - 规定按钮的类型
value: text - 规定按钮的初始值。可由脚本进行修改
--
问题:<button> 与 <input type="button"> 有什么区别?
答:如果都在普通标签中使用,两者没有区别。
如果在 <form> 表单中使用,<input type="button"> 不会提交表单,而 <button type="submit"> 会提交表单
<button> 比 <input> 能放更多的内容在按钮上

51:<select>:定义选择列表(下拉列表)【下拉列表 1 / 3】

autofocus
disabled
form
multiple: multiple - 当该属性为 true 时,可以选择多个选项
name
required
size:number - 规定下拉列表中可见选项的数目
--
提示:<select> 元素中的 <option> 标签定义了列表中的可用选项
multiple 可以说是史上最没用的多选了,要按住 ctrl/command 才可以多选

52:<optgroup>:定义选择列表中相关选项的组合【下拉列表 2 / 3】

disabled
label: text - 为选项组规定描述

53:<option>:定义选择列表中的选项【下拉列表 3 / 3】

disabled
label: text - 定义当使用 <optgroup> 时所使用的标注(也就是会替换本标签的元素内容)
selected: selected - 规定选项(在首次显示在列表中时)表现为选中状态
value: text - 定义送往服务器的选项值

54:<label>:定义 input 元素的标注

for: element_id - 规定 label 与哪个表单元素绑定(与相关元素的 id 属性相同)
form
--
提示:
label 元素不会向用户呈现任何特殊效果,但是它为鼠标用户改进了可用性,如果您在 label 元素内点击文本,就会触发此控件。

55:<fieldset>:定义围绕表单中元素的边框【边框 1 / 2】

disabled
form
name
--
<legend> 标签为 <fieldset> 元素定义标题

56:<legend>:定义 fieldset 元素的标题【边框 2 / 2 】

无私有属性

57:<datalist>:规定了 input 元素可能的选项列表

无私有属性
--
datalist 被用来在为 <input> 元素提供“自动完成“的特性(有些像 Element 的 <el-autocomplete>)

58:<output>:定义一个计算的结果

详见:https://www.runoob.com/tags/tag-output.html

四、框架标签

59:<iframe>:定义内联框架

name
sandbox: ""|allow-forms|allow-same-origin|allow-scripts|allow-top-navigation - 对内容定义一系列额外的限制
seamless: seamless - 规定 <iframe> 看起来像是父文档中的一部分
src: URL - 规定在 <iframe> 中显示的文档的 URL
scrdoc: HTML_code - 规定页面中的 HTML 内容显示在 <iframe> 中
width: pixels - 规定 <iframe> 的宽度
--
提示:一个内联框架被用来在当前 HTML 文档中嵌入另一个文档

五、图像

60:<img>:定义图像

alt: text - 规定图像的替代文本
crossorigin: anonymous use-credentials - 设置图像的跨域属性
height: pixels - 规定图像的高度
ismap: ismap - 将图像规定为服务器端图像映射
src: URL - 规定显示图像的 URL
usemap: #mapname - 将图像定义为客户端图像映射
width: pixels - 规定图像的宽度

61:<map>:定义图像映射

name: mapname - 必需。为 image-map 规定的名称

62:<area>:定义图像地图内部的区域

alt: text - 规定区域的替代文本。如果使用 href 属性,则该属性是必须的
coords: coordinates - 规定区域的坐标。
href: URL - 规定区域的目标 URL。
hreflang: language_code - 规定目标 URL 的语言
media: media query - 规定目标 URL 是为何种媒介/设备优化的。默认:all
rel: 
  alternate
  author
  bookmark
  help
  license
  next
  nofollow
  noreferrer
  prefetch
  prev
  search
  tag - 规定当前文档与目标 URL 之间的关系
shape: default|rect|circle|poly - 规定区域的形状
target: _blank|_parent|_self|_top - 规定在何处打开目标 URL
type: MIME_type - 规定目标 URL 的 MIME 类型

63:<canvas>:通过 JavaScript 来绘制图形

height: pixels - 规定画布的高度
width: pixels - 规定画布的宽度
--
参考文档:https://www.runoob.com/tags/ref-canvas.html

64:<figcaption>:定义一个 caption for a <figure> element

无私有属性

65:<figure>:用于对元素进行组合

无私有属性

六、音频 | 视频

66:<audio>:定义声音,比如音乐或其它音频流

autoplay: autoplay - 如果出现该属性,则音频在就绪后马上播放
controls: controls - 如果出现该属性,则向用户显示音频控件(播放暂停按钮)
loop: loop - 每当音频结束时重新开始播放
muted: muted - 音频输出为静音
preload: auto|metadata|none - 音频是否默认被加载以及如何被加载
src: URL - 规定音频文件的 URL

67:<source>:定义 media 元素的媒体资源

media:media_query - 规定媒体资源的类型,供浏览器决定是否下载
src: URL - 规定媒体文件的 URL
type: MIME_type - 规定媒体资源的 MIME 类型

68:<track>:为媒体元素定义外部文本轨道

default: default - 
kind: captions|chapters|descriptions|metadata|subtitles - 规定文本轨道的文本类型
label: text - 规定文本轨道的标签和标题
src: URL - 必须,规定文本轨道的 URL
srclang: language_code - 规定轨道文本数据的语言。如果 kind 属性值是 "subtitles",则该属性是必须的

69:<video>:定义一个音频或者视频

autoplay
controls
height
loop
muted
poster: URL - 规定视频正在下载时显示的图像,直到用户点击播放按钮
preload: auto|metadata|none - 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
src
width

七、链接

70:<a>:定义一个链接

download: filename - 指定下载链接
href: URL - 规定链接的目标 URL
hreflang: language_code - 规定目标 URL 的基准语言。尽在 href 属性存在时使用
media: media_query - 规定目标 URL 的媒介类型。默认值 all。
rel: 
  alternate
  author
  bookmark
  help
  license
  next
  nofollow
  noreferrer
  prefetch
  prev
  search
  tag - 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
target: _blank|_parent|_self|_top - 规定在何处打开目标 URL
type: MIME_type - 规定目标 URL 的 MIME 类型

71:<link>:定义文档与外部资源的关系

href: URL - 定义被链接文档的位置
hreflang: language_code - 定义被链接文档中文本的语言
media: media_query - 规定被链接文档将显示在什么设备上
rel: alternate|archives|author|bookmark|external|first|help|icon|last|license|next|nofollow|noreferrner|pingback|prefetch|prev|search|sidebar|stylesheet|tag|up - 必须。定义当前文档与被链接文档之间的关系。
sizes: HeightxWidth - 定义了链接属性大小,只对属性 rel:"icon" 起作用
type: MIME_type - 规定被链接文档的 MIME 类型
-- 
提示:<link> 一般用于链接外部样式文档

72:<nav>:定义导航链接

无私有属性
--
提示:一般配合 <a> 使用,也是语义化标签

八、列表

73:<ul>:定义一个无序列表

无私有属性
--
提示:将 <ul> 标签与 <li> 标签一起使用,创建无序列表

74:<ol>:定义一个有序列表

reversed: reversed - 制定列表倒序
--
提示:将 <ol> 标签与 <li> 标签一起使用,创建有序列表

75:<li>:定义一个列表项

无私有属性
--
提示:<li> 可用在 <ol> <ul> <menu> 中

76:<dl>:定义一个定义列表

无私有属性
--
<dl> 标签与 <dt> (定义项目/名字)和 <dd> (描述每一个项目/名字)一起使用

77:<dt>:定义一个定义列表中的项目

无私有属性

78:<dd>:定义定义列表中项目的描述

无私有属性

79:<menu>:定义菜单列表

目前所有主流浏览器都不支持 <menu> 标签

80:<commend>:定义用户可能调用的命令

目前所有主流浏览器都不支持 <commend> 标签

九、表格

81:<table>:定义一个表格

border:1|"" - 规定表格单元是否拥有边框

82:<caption>:定义表格的标题

无私有属性

83:<th>:定义表格中的表头单元格

colspan: number - 规定表头单元格可横跨的列数
headers: header_id - 规定与表头单元格相关联的一个或多个表头单元格
rowspan: number - 规定表头单元格可横跨的行数
scope: col|colgroup|row|rowgroup - 规定表头单元格是否是行、列、行组或列祖的头部

84:<tr>:定义表格中的行

无私有属性

85:<td>:定义表格中的单元

colspan: number - 规定单元格可横跨的列数
headers: header_id - 规定与单元格相关联的一个或多个表头单元格
rowspan: number - 设置单元格可横跨的行数

86:<thead>:定义表格中的表头数据

无私有属性

87:<tbody>:定义表格中的主体内容

无私有属性

88:<tfoot>:定义表格中的表注内容

无私有属性

89:<col>:定义表格中一个或多个列的属性值

span: number - 规定 <col> 元素应该横跨的列数

90:<colgroup>:定义表格中供格式化的列组

span: number - 规定列组应该横跨的列数

十、样式/节

91:<style>:定义文档的样式信息

media: media_query - 为样式表规定不同的媒体类型
scoped: scoped - 如果使用该属性,则样式仅仅应用到 style 元素的夫元素及其子元素
type: text/css - 规定样式表的 MIME 类型

92:<div>:定义文档中的节

无私有属性

93:<span>:定义文档中的节

无私有属性

94:<header>:定义一个文档头部部分

无私有属性

95:<footer>:定义一个文档底部

无私有属性

96:<section>:定义了文档的某个区域

无私有属性

97:<article>:定义了一个文章内容

无私有属性

98:<aside>:定义其所处内容之外的内容

无私有属性

99:<details>:定义了用户可见的或者隐藏的需求的补充细节

opem: open - 规定 details 是否可见

100:<dialog>:定义一个对话框或者窗口

open: open - 规定 dialog 元素是有效的,用户可以与它进行交互

101:<summary>:定义一个可见的标题。当用户点击标题时会显示出详细信息。

无私有属性

十一、元信息

102:<head>:定义关于文档的信息

无私有属性

103:<meta>:定义关于 HTML 文档的元信息

charset: character_set - 定义文档的字符编码
content: text - 定义与 http-equiv 或 name 属性相关的元信息。
http-equiv: content-type|default-style|refresh - 把 content 属性关联到 HTTP 头部
name: application-name|author|description|generator|keywords - 把 content 属性关联到一个名称

104:<base>:定义页面中所有链接的默认地址或默认目标

href: URL - 规定页面中所有相对链接的基准 URL
target: _blank|_parent|_self|_top|framename - 规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。

十二、程序

105:<script>:定义客户端脚本

async: async - 规定异步执行脚本
charset: charset - 规定在脚本中使用字符编码
defer: defer - 规定当页面完成解析后,执行脚本
src: URL - 规定外部脚本的 URL
type: MIME-type - 规定脚本的 MIME 类型

106:<noscript>:定义针对不支持客户端脚本的用户的替代内容

无私有属性

107:<embed>:定义了一个容器,用来嵌入外部应用或者互动程序

height: pixels - 规定嵌入内容的高度
src: URL - 规定被嵌入内容的 URL
type: MIME_type - 规定嵌入内容的 MIME 类型
width: pixels - 规定嵌入内容的宽度

108:<object>:定义嵌入的对象

data: URL - 规定对象使用的资源的 URL
form: form_id - 规定对象所属的一个或多个表单
height: pixels - 规定对象的高度
name: name - 为对象规定名称
type: MIME_type - 规定 data 属性中规定的数据的 MIME 类型
usemap: #mapname - 规定与对象一同使用的客户端图像映射的名称
width: pixels - 规定对象的宽度

109:<param>:定义对象的参数

name: name - 定义参数的名称
value: value - 描述参数值


十三、补充

110:<main>:定义文档的主要内容

无私有属性
--
提示:一个 HTML 文档只允许出现一个 main 标签

编辑于 02-03

文章被以下专栏收录