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程序的例子，：

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

标签 Tag

根标签

标签	版本	描述
<html>		代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。

文档元数据

元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如搜索引擎、浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。

标签	版本	描述
<head>		规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<title>		定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。
<base>		指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。
<link>		用于链接外部资源到该文档。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。
<meta>		定义其他 HTML 元素无法描述的元数据。
<style>		包含文档的样式信息或者文档的部分内容。通常用于内联 CSS。

章节

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

组织内容

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

文本形式

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

编辑

标签	版本	描述
<ins>		定义增加到文档的内容。
<del>		定义从文档移除的内容。

嵌入内容

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

表格

标签	版本	描述
<table>		一个表格。
<caption>		表格的标题。
<colgroup>		表格中一组单列或多列。
<col>		表格中的列。
<tbody>		表格中一块具体数据（表格主体）。
<thead>		表格中一块列标签（表头）。
<tfoot>		表格中一块列摘要（表尾）。
<tr>		表格中的行。
<td>		表格中的单元格。
<th>		表格中的头部单元格。

表单

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

交互元素

标签	版本	描述
<details>	5+	一个用户可以(点击)获取额外信息或控件的小部件。
<summary>	5+	<details> 元素的综述或标题。
<dialog>	5+	定义对话框或窗口。

脚本

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

了解更多 >> MDN： HTML5 标签列表 WHATWG：HTML元素

元素 Element

块级元素与行内元素

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

HTML中的块级元素：

<address>
<article>
<aside>
<audio>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<header>
<hgroup>
<hr>

HTML中的行内元素：

<a>
<abbr>
<acronym>
<audio> (if it has visible controls)
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>

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

属性

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