查看“HTML”的源代码

HTML（HyperText Markup Language），超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与[[CSS]]、[[JavaScript]]一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。现在由[[WHATWG]]和[[W3C]]共同制定标准，由[[WHATWG]]维护。

==简介==
===时间轴===
*1995年11月24日，HTML 2.0作为IETF RFC 1866发布。
*1997年1月14日，HTML 3.2作为[[W3C]]推荐标准发布。
*1997年12月18日，HTML 4.0作为[[W3C]]推荐标准发布。
*2014年10月28日，HTML 5作为[[W3C]]推荐标准发布。

===简单示例===
以下是一个经典的Hello World程序的例子，：
 <nowiki><!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html></nowiki>

==标签 Tag==
===根标签===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><html></nowiki>
|
| 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
|-
|}
===文档元数据===
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如 搜索引擎、浏览器 等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><head></nowiki>
| 
| 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
|-
| <nowiki><title></nowiki>
| 
| 定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。
|-
| <nowiki><base></nowiki>
| 
| 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。
|-
| <nowiki><link></nowiki>
| 
| 用于链接外部资源到该文档。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。
|-
| <nowiki><meta></nowiki>
| 
| 定义其他 HTML 元素无法描述的元数据。
|-
| <nowiki><style></nowiki>
| 
| 包含文档的样式信息或者文档的部分内容。通常用于内联 CSS。
|-
|}

===章节===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><body></nowiki>
|
| 代表 HTML 文档的内容。在文档中只能有一个 <body> 元素。
|-
| <nowiki><section></nowiki>
| 5+
| 定义文档中的一个章节。
|-
| [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav <nowiki><nav></nowiki>]
| 5+
| 定义只包含导航链接的章节。
|-
| [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article <nowiki><article></nowiki>]
| 5+
| 定义可以独立于内容其余部分的完整独立内容块。
|-
| [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside <nowiki><aside></nowiki>]
| 5+
| 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
|-
| <nowiki><html></nowiki>
| 5+
| 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
|-
| <nowiki><h1>,<h2>,<h3>,<h4>,<h5>,<h6></nowiki>
|
| 标题元素实现了六层文档标题，<nowiki><h1> 是最大的标题，<h6></nowiki>是最小的标题。标题元素简要地描述章节的主题。
|-
| <nowiki><header></nowiki>
| 5+
| 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
|-
| <nowiki><footer></nowiki>
| 5+
| 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
|-
| <nowiki><address></nowiki>
|
| 定义包含联系信息的一个章节。
|-
| <nowiki><main></nowiki>
| 5+
| 定义文档中主要或重要的内容。
|-
|}

===组织内容===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><p></nowiki>
|
| 定义一个段落。
|-
| <nowiki><hr></nowiki>
|
| 代表章节、文章或其他长内容中段落之间的分隔符。
|-
| <nowiki><pre></nowiki>
|
| 代表其内容已经预先排版过，格式应当保留 。
|-
| <nowiki><blockquote></nowiki>
|
| 代表引用自其他来源的内容。
|-
| <nowiki><ol></nowiki>
|
| 定义一个有序列表。
|-
| <nowiki><ul></nowiki>
|
| 定义一个无序列表。
|-
| <nowiki><menu></nowiki>
| -4.01 5+
| [不建议使用] 定义一个工具栏，其形式为无序的项目列表（由li元素表示），每个项目代表一个用户可以执行或激活的命令。
|-
| <nowiki><li></nowiki>
|
| 定义列表中的一个列表项。
|-
| <nowiki><dl></nowiki>
|
| 定义一个定义列表（一系列术语和其定义）。
|-
| <nowiki><dt></nowiki>
|
| 代表一个由下一个 <nowiki><dd></nowiki> 定义的术语。
|-
| <nowiki><dd></nowiki>
|
| 代表出现在它之前术语的定义。
|-
| <nowiki><figure></nowiki>
| 5+
| 代表一个和文档有关的图例。
|-
| <nowiki><figcaption></nowiki>
| 5+
| 代表一个图例的说明。
|-
| <nowiki><main></nowiki>
| 5+
| 用于指定文档的主体内容。
|-
| <nowiki><div></nowiki>
| 
| 代表一个通用的容器，没有特殊含义。
|-
|}

===文本形式===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><a></nowiki>
|
| 代表一个链接到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
|-
| <nowiki><em></nowiki>
|
| 代表强调文字。 <nowiki><em></nowiki> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
|-
| <nowiki><strong></nowiki>
|
| 代表特别重要的文字，一般用粗体显示。
|-
| <nowiki><small></nowiki>
|
| 將使文本的字体变小一号。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本，对理解文档不重要。
|-
| <nowiki><s></nowiki>
|
| 使用删除线来渲染文本。表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 <nowiki><s> </nowiki>，提倡使用 <nowiki><del> </nowiki>和 <nowiki><ins></nowiki> 元素。
|-
| <nowiki><cite></nowiki>
|
| HTML引用（ Citation）标签 (<nowiki><cite></nowiki>) 表示一个作品的引用。它必须包含引用作品的符合简写格式的标题或者URL，它可能是一个根据添加引用元数据的约定的简写形式。
|-
| <nowiki><q></nowiki>
|
| HTML引用标签 (<nowiki><q></nowiki>)表示一个封闭的并且是短的行内引用的文本，所以不要引入换行符。对于长的文本的引用请使用 <nowiki><blockquote></nowiki> 替代。
|-
| <nowiki><dfn></nowiki>
|
| 表示术语的一个定义。
|-
| <nowiki><abbr></nowiki>
|
| 用于展示缩写，并且可以通过可选的 title 属性提供完整的描述。
|-
| <nowiki><data></nowiki> 
| 5+
| 关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。
|-
| <nowiki><time></nowiki> 
| 5+
| 代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。
|-
| <nowiki><code></nowiki>
|
| 表示一段计算机代码。默认情况下, 它以浏览器的默认等宽字体显示。
|-
| <nowiki><var></nowiki>
|
| Variable元素（<nowiki><var></nowiki>）表示数学表达式或编程上下文中的变量名称。通常斜体形式显示。
|-
| <nowiki><samp></nowiki>
|
| 用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。
|-
| <nowiki><kbd></nowiki>
|
| 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。
|-
| <nowiki><sub>,<sup></nowiki>
|
| 分别代表下标 和上标 。
|-
| <nowiki><i></nowiki>
|
| 代表一段不同性质 的文字，如技术术语、外文短语等。它的内容通常以斜体显示。
|-
| <nowiki><b></nowiki>
|
| 代表一段需要被关注的文字，多数浏览器显示为粗体。对于显示粗体文字，可以使用 CSS font-weight 属性来创建粗体文字。
|-
| <nowiki><u></nowiki>
|
| 代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。
|-
| <nowiki><mark></nowiki> 
| 5+
| 代表一段需要被高亮的引用文字或符号。
|-
| <nowiki><ruby></nowiki> 
| 5+
| 用来展示东亚文字注音或字符注释，如中文汉字和它的拼音。
|-
| <nowiki><rt></nowiki> 
| 5+
| 位于 <nowiki><ruby></nowiki> 元素内，描述东亚字符的发音 ，如中文拼音。
|-
| <nowiki><rp></nowiki>
| 5+
| 位于 <nowiki><ruby></nowiki>元素内，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
|-
| <nowiki><bdi></nowiki>
| 5+
| 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。
|-
| <nowiki><bdo></nowiki>
|
| 指定子元素的文本方向 ，显式地覆盖默认的文本方向。
|-
| <nowiki><span></nowiki>
|
| 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。
|-
| <nowiki><br></nowiki>
|
| 代表换行 。
|-
| <nowiki><wbr></nowiki>
| 5+
| 代表建议换行 (Word Break Opportunity) ，浏览器可以选择在此处换行。
|}

===编辑===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><ins></nowiki>
|
| 定义增加到文档的内容。
|-
| <nowiki><del></nowiki>
|
| 定义从文档移除 的内容。
|-
|}

===嵌入内容===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><img></nowiki>
|
|  代表一张图片 。
|-
| <nowiki><iframe></nowiki>
|
| 代表一个内联的框架 。
|-
| <nowiki><embed></nowiki> 
| 5+
| 代表一个嵌入 的外部资源，如应用程序或交互内容。
|-
| <nowiki><object></nowiki>
|
| 代表一个外部资源 ，如图片、HTML 子文档、插件等。
|-
| <nowiki><param></nowiki>
|
| 代表 <nowiki><object></nowiki> 元素所指定的插件的参数 。
|-
| <nowiki><video></nowiki> 
| 5+
| 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。
|-
| <nowiki><audio></nowiki> 
| 5+
| 代表一段声音 ，或音频流 。
|-
| <nowiki><source></nowiki> 
| 5+
| 为<nowiki> <video></nowiki> 或 <nowiki><audio></nowiki> 这类媒体元素指定媒体源 。
|-
| <nowiki><track></nowiki> 
| 5+
| 为 <nowiki><video></nowiki> 或 <nowiki><audio></nowiki> 这类媒体元素指定文本轨道（字幕） 。
|-
| <nowiki><canvas></nowiki> 
| 5+
| 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
|-
| <nowiki><map></nowiki>
|
| 与 <nowiki><area></nowiki> 元素共同定义图像映射区域(一个可点击的链接区域)。
|-
| <nowiki><area></nowiki>
|
| 在图片上定义一个热点区域，可以关联一个超链接。<nowiki><area></nowiki>元素仅在<nowiki><map></nowiki>元素内部使用。
|-
| <nowiki><svg></nowiki> 
| 5+
| 定义一个嵌入式矢量图 。
|-
| <nowiki><math></nowiki>
| 5+
| 定义一段数学公式 。
|}

===表格===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><table></nowiki>
| 
| 一个表格 。
|-
| <nowiki><caption></nowiki>
| 
| 表格的标题 。
|-
| <nowiki><colgroup></nowiki>
| 
| 表格中一组单列或多列 。
|-
| <nowiki><col></nowiki>
| 
| 表格中的列 。
|-
| <nowiki><tbody></nowiki>
| 
| 表格中一块具体数据 （表格主体）。
|-
| <nowiki><thead></nowiki>
| 
| 表格中一块列标签 （表头）。
|-
| <nowiki><tfoot></nowiki>
| 
| 表格中一块列摘要 （表尾）。
|-
| <nowiki><tr></nowiki>
| 
| 表格中的行 。
|-
| <nowiki><td></nowiki>
| 
| 表格中的单元格 。
|-
| <nowiki><th></nowiki>
| 
| 表格中的头部单元格 。
|}

===表单===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><form></nowiki>
| 
|  一个表单 ，由控件组成。
|-
| <nowiki><fieldset></nowiki>
| 
|  控件组 。
|-
| <nowiki><legend></nowiki>
| 
|  <nowiki><fieldset></nowiki> 控件组的标题 。
|-
| <nowiki><label></nowiki>
| 
|  表单控件的标题 。
|-
| <nowiki><input></nowiki>
| 
|  代表允许用户编辑数据的数据区 （文本框、单选框、复选框等）。
|-
| <nowiki><button></nowiki>
| 
|  按钮 。
|-
| <nowiki><select></nowiki>
| 
|  下拉框 。
|-
| <nowiki><datalist></nowiki>
| 5+
| 代表提供给其他控件的一组预定义选项 。
|-
| <nowiki><optgroup></nowiki>
| 
|  一个选项分组 。
|-
| <nowiki><option></nowiki>
| 
|  <nowiki><select></nowiki> 元素或<nowiki> <datalist></nowiki> 元素中的一个选项
|-
| <nowiki><textarea></nowiki>
| 
|  多行文本框 。
|-
| <nowiki><keygen></nowiki>
| 5+
| 一个密钥对生成器控件。
|-
| <nowiki><output></nowiki>
| 5+
| 计算值 。
|-
| <nowiki><progress></nowiki>
| 5+
| 进度条 。
|-
| <nowiki><meter></nowiki>
| 5+
| 滑动条 。
|}

===交互元素===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
| <nowiki><details></nowiki>
| 5+
| 一个用户可以(点击)获取额外信息或控件的小部件 。
|-
| <nowiki><summary></nowiki>
| 5+
| <nowiki><details></nowiki> 元素的综述 或标题 。
|-
| <nowiki><dialog></nowiki>
| 5+
| 定义对话框或窗口。
|-
|}

===脚本===
{|class = "wikitable" style="width:100%"
|-
!标签
!版本
!描述
|-
|  <nowiki><script></nowiki>
|
| 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。
|-
|  <nowiki><noscript></nowiki>
|
| 定义当浏览器不支持脚本时显示的替代文字。
|-
|  <nowiki><template></nowiki>
| 5+
| 通过 JavaScript 在运行时实例化内容的容器。
|-
|  <nowiki><slot></nowiki>
| 5+
|
|-
|  <nowiki><canvas></nowiki>
| 5+
| 可被用来通过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。
|}

{{了解更多
|[https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list MDN： HTML5 标签列表]
|[https://html.spec.whatwg.org/multipage/semantics.html#semantics WHATWG：HTML元素]
}}

==元素 Element==

===块级元素与行内元素===
HTML中元素大多数都是块级元素（block-level element）或行内元素（inline element）。默认情况下，块级元素以新行来开始和结束，而行内元素和其他元素在一行上。

HTML中的块级元素：
<div style="column-count:5;-moz-column-count:5;-webkit-column-count:5">
* <nowiki><address></nowiki>
* <nowiki><article></nowiki>
* <nowiki><aside></nowiki>
* <nowiki><audio></nowiki>
* <nowiki><blockquote></nowiki>
* <nowiki><canvas></nowiki>
* <nowiki><dd></nowiki>
* <nowiki><div></nowiki>
* <nowiki><dl></nowiki>
* <nowiki><fieldset></nowiki>
* <nowiki><figcaption></nowiki>
* <nowiki><figure></nowiki>
* <nowiki><footer></nowiki>
* <nowiki><form></nowiki>
* <nowiki><h1>, <h2>, <h3>, <h4>, <h5>, <h6></nowiki>
* <nowiki><header></nowiki>
* <nowiki><hgroup></nowiki>
* <nowiki><hr></nowiki>
</div>


HTML中的行内元素：
<div style="column-count:5;-moz-column-count:5;-webkit-column-count:5">
* <nowiki><a></nowiki>
* <nowiki><abbr></nowiki>
* <nowiki><acronym></nowiki>
* <nowiki><audio></nowiki> (if it has visible controls)
* <nowiki></nowiki>
* <nowiki><bdi></nowiki>
* <nowiki><bdo></nowiki>
* <nowiki><big></nowiki>
* <nowiki><br></nowiki>
* <nowiki><button></nowiki>
* <nowiki><canvas></nowiki>
* <nowiki><cite></nowiki>
* <nowiki><code></nowiki>
* <nowiki><data></nowiki>
* <nowiki><datalist></nowiki>
* <nowiki><del></nowiki>
* <nowiki><dfn></nowiki>
* <nowiki><em></nowiki>
* <nowiki><embed></nowiki>
* <nowiki><i></nowiki>
* <nowiki><iframe></nowiki>
* <nowiki><img></nowiki>
* <nowiki><input></nowiki>
* <nowiki><ins></nowiki>
* <nowiki><kbd></nowiki>
* <nowiki><label></nowiki>
* <nowiki><map></nowiki>
* <nowiki><mark></nowiki>
* <nowiki><meter></nowiki>
* <nowiki><noscript></nowiki>
* <nowiki><object></nowiki>
* <nowiki><output></nowiki>
* <nowiki><picture></nowiki>
* <nowiki><progress></nowiki>
* <nowiki><q></nowiki>
* <nowiki><ruby></nowiki>
* <nowiki><s></nowiki>
* <nowiki><samp></nowiki>
* <nowiki><script></nowiki>
* <nowiki><select></nowiki>
* <nowiki><slot></nowiki>
* <nowiki><small></nowiki>
* <nowiki><span></nowiki>
* <nowiki><strong></nowiki>
* <nowiki><sub></nowiki>
* <nowiki><sup></nowiki>
* <nowiki><svg></nowiki>
* <nowiki><template></nowiki>
* <nowiki><textarea></nowiki>
* <nowiki><time></nowiki>
* <nowiki><u></nowiki>
* <nowiki><tt></nowiki>
* <nowiki><var></nowiki>
* <nowiki><video></nowiki>
* <nowiki><wbr></nowiki>
</div>

HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别，而”行内“类别相当于 HTML5 中的措辞内容类别，不过除了这两个还有其他类别。

{{了解更多
|[https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements MDN： HTML 块级元素]
|[https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements MDN： HTML 行内元素]
|[https://www.w3.org/TR/2018/SPSD-html401-20180327/struct/global.html#h-7.5.3 W3C：HTML 4.01 - 块级元素与行内元素 ]
}}

==属性==
HTML中的元素拥有属性（attribute）。这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

===属性列表===


{{了解更多
| [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes MDN：HTML 属性参考]
}}
==资源==
===官网===
* [https://html.spec.whatwg.org/ WHATWG：HTML]
* [https://www.w3.org/html/ W3C：HTML]
* [https://www.w3.org/TR/html401/ W3C：HTML 4.01]
* [https://www.w3.org/TR/html52/ W3C：HTML 5.2]
===相关网站===



==参考资料==
*[https://zh.wikipedia.org/wiki/HTML 维基百科：HTML]
*[https://developer.mozilla.org/zh-CN/docs/learn/HTML MDN：HTML教程]
*[https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/ W3C 博客：W3C和WHATWG合作推进开放的WEB平台]