HTML标签整合

只看不学

于 2022-12-13 17:51:52 发布

阅读量704

点赞数 1

分类专栏： django 文章标签： html xhtml 前端

本文链接：https://blog.csdn.net/weixin_65784341/article/details/128305631

版权

django 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考文档：https://www.w3schools.com/html/html5_intro.asp

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

原来 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 标签

只看不学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签整合

!-- 本文档为 HTML 5 文档 --> 标签的元素上时，会显示其 title 属性的值无私有属性--提示：如果在内，则它表示文档的联系信息。
复制链接

扫一扫

专栏目录