根元素
| 元素 | 描述 |
|---|---|
| <html> | HTML <html> 元素 表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。 |
HTML
属性
元素包含 全局属性。
示例
<!DOCTYPE html>
<html lang="zh">
<head>...</head>
<body>...</body>
</html>
注意事项
- 尽管在HTML里<html>元素不是必需的，可以是隐含的，但是在XHTML里必须明确给出它的开标签和闭标签。
- 严格意义上，标签是指开始标签（例如 <p> 标签）或结束标签（例如 </p> 标签）；元素（例如 p 元素或者称为<p>元素）则包括开始标签（自然也包括标签中定义的属性）、结束标签以及中间的内容（Content）。
文档元数据
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件 (如搜索引擎，浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件
| 元素 | 描述 |
|---|---|
| <link> |
HTML中<link>元素规定了外部资源与当前文档的关系。 这个元素可用来为导航定义一个关系框架。这个元素最常于链接样式表。 |
| <meta> |
HTML<meta>元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息。 |
| <style> |
HTML的<style>元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。 |
| <title> |
HTML<title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。 |
link
示例
<link href="style.css" rel="stylesheet">
注意事项
- <link> 标签只能出现在head元素中，然而可以出现多个<link>标签。
- HTML 3.2只为link元素定义了href, methods, rel，rev，title，和urn属性。
- HTML 2为link标签定义了 href, methods，rel，rev，title，和 urn 属性，methods 和 urn随后从规范中移除。
- HTML和XHTML规范为link定义了事件处理，但是并不清楚它们将会怎样被使用。
- 在XHTML 1.0中，空元素link要求有尾随斜线，像这样<link />。
meta
属性
charset
此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。此特性的值必须是一个符合由IANA所定义的字符编码首选MIME 名称（preferred MIME name ）之一。尽管标准不要求必须使用某些特定的字符编码，但它还是给出了一些建议：
- 鼓励使用 UTF-8；
- 不应该使用不兼容ASCII的编码规范， 以避免不必要的安全风险：浏览器不支持他们(这些不规范的编码)可能会导致浏览器渲染html出错. 比如JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB,ISO-2022 系列,EBCDIC系列 等文字。
style
属性
type
该属性以MIME类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 text/css。
title
指定可选的样式表。
示例
<style type="text/css">
body {
color:red;
}
</style>
title
示例
<title>Awesome page title </title>
内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
| 元素 | 描述 |
|---|---|
| <address> |
HTML 的<address>元素可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下，它应用于整个文档。 |
| <article> |
<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。 |
| <aside> |
<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。 |
| <footer> |
HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 |
| <header> |
<header>元素表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。 |
| <h1> ~ <h6> |
HTML <h1>–<h6> 标题(Heading)元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用，例如，自动构造某个文档中的内容表（就像本文档右边浮动栏一样）。 |
| <main> |
HTML <main>元素呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。 |
| <nav> |
HTML导航栏<nav>元素描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。 |
| <section> |
HTML<section>元素表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6>) 作为子节点 来 辨识每一个<section>。 |
address
属性
这个元素只有全局属性。
示例
<address>
You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
</address>
上面的HTML的输出如下：
虽然<address>元素使用<i>或者<em>元素的默认样式渲染文本，但是当处理联系信息时使用<address>元素更合适，因为它表达了额外的语义信息。
文本内容
使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。
| 元素 | 描述 |
|---|---|
| <dd> |
HTML <dd>元素（HTML 描述元素）用来指明一个描述列表(<dl>)元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 <dt> 元素。 |
| <div> |
HTML<div>元素(或 HTML 文档分区元素) 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用 (比如 <article> 或 <nav>) 。 |
| <dl> |
HTML<dl>元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。 |
| <dt> |
HTML <dt> 元素（或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素， 然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义。 |
| <li> |
HTML <li> 元素 (或者 HTML 列表条目元素) 用于表示列表里的条目。它必须被包含在一个父元素里：一个有顺序的列表(<ol>)，一个无顺序的列表(<ul>)，或者一个菜单 (<menu>)。在菜单或者无顺序的列表里，列表条目通常用点排列显示。在有顺序的列表里，列表条目通常是在左边有按升序排列计数的显示，例如数字或者字母。 |
| <main> |
HTML <main>元素呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。 |
| <ol> |
HTML <ol> 元素表示多个有序列表项，通常渲染为有带编号的列表。 |
| <p> |
HTML<p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p>是块级元素。 |
| <ul> |
HTML <ul> 元素 ( 或 HTML 无序列表元素） 代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性。 |
内联文本语义
使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字。
| 元素 | 描述 |
|---|---|
| <a> |
HTML <a>元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。 |
| <br> |
HTML <br> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。 |
| <span> |
HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div>元素很相似，但 <div>是一个块元素而<span> 则是行内元素。 |
| <strong> |
<strong>元素表示文本十分重要，一般用粗体显示。 |
图片和多媒体
HTML 支持各种多媒体资源，例如图像，音频和视频。
| 元素 | 描述 |
|---|---|
| <audio> |
HTML <audio> 元素用于在文档中表示音频内容。 <audio> 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。 |
| <img> |
HTML <img> 元素代表文档中的一个图像。 |
| <video> |
HTML <video> 元素用于在HTML或者XHTML文档中嵌入视频内容。 |
audio
属性
autoplay
布尔属性；如果指定（默认值为"false"！）；指定后，音频会马上自动开始播放，不会停下来等着数据载入结束。
buffered
你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。
controls
如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
loop
布尔属性；如果指定，将循环播放音频。
muted
表示是否静音的布尔值。默认值为false，表示有声音。
preload
枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：
- none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
- metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
- auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。
- 空字符串 : 等效于auto属性。
- 假如不设置，默认值就是浏览器定义的了（不同浏览器会选择自己的默认值）， 即使规范建议设置为 metadata。
src
嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用 <source> 元素来替代该属性指定嵌入的音频。
volume
音频播放的音量。值从0.0 (无声) 到 1.0 (最大声)。
img
属性
src
图像的 URL，这个属性对<img> 元素来说是必需的。在支持 srcset 的浏览器中，src 被当做拥有一个像素密度的描述符 1x 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 'w' 描述符中定义了。
height
图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中可以是像素也可以是百分比。
alt
这个属性定义了描述图像的替换文本。用户将看到这个显示，如果图像的URL是错误的，该图像不在 支持的格式 列表中，或者如果图像还没有被下载。
- 使用说明： 省略这个属性表明该图像是内容的关键部分，但没有等效的文本可用。把这个属性设置为空字符串，表明该图像不是内容的关键部分，非可视化浏览器在渲染的时候可能会忽略它。
width
图像的宽度，在 HTML5 中单位是 CSS 像素， 在 HTML 4 中可以是像素也可以是百分比。
支持的图像格式
HTML 标准并没有给出必须支持的图像格式的列表，因此每个用户代理支持一组不同的格式。 Gecko 支持：
- JPEG
- GIF，包括动态的GIFs
- PNG
- APNG
- SVG
- BMP
- BMP ICO
- PNG ICO
video
属性
autoplay
布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。
buffered
这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。
controls
加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
height
视频展示区域的高度，单位是CSS像素。
loop
布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方。
muted
布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。
played
一个 TimeRanges 对象，指明了视频已经播放的所有范围。
preload
该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一：
- none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
- metadata: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
- auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
空字符串：也就代指 auto 值。 - 假如不设置，默认值就是浏览器定义的了 （即，不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。
src
要嵌到页面的视频的URL。可选；你也可以使用video块内的 <source> 元素来指定需要嵌到页面的视频。
width
视频显示区域的宽度，单位是CSS像素。
内嵌内容
除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互。
| 元素 | 描述 |
|---|---|
| <iframe> |
HTML内联框架元素 <iframe>表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，但不能包含正文和框架集。但是，<iframe>可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。 |
属性
frameborder | HTML 4 only
取值为1时（默认值），告诉浏览器在当前iframe与其他iframe之间绘制边框，取0时则无需绘制此边框。
height
以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的高度。
name
嵌入的浏览上下文（框架）的名称。该名称可以用作<a>标签，<form>标签的target属性值，或<input> 标签和 <button>标签的formtaget属性值。
src
嵌套页面的URL地址。使用遵守同源策略的 'about:blank' 来嵌套空白页。
width
以CSS像素格式HTML5，或以像素格式HTML 4.01，或以百分比格式指定frame的宽度。
脚本
为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。某些元素支持此功能。
| 元素 | 描述 |
|---|---|
| <canvas> |
<canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。 |
| <script> |
HTML <script> 元素用于嵌入或引用可执行脚本。 |
canvas
注意事项
- 不同于 <img> 元素,
<canvas>元素需要有闭合标签 (</canvas>`)。 - 可以通过CSS来控制
<canvas>的大小。在渲染的过程中<canvas>元素中的内容会根据情况缩放来适应需要的大小。如果您发现<canvas>元素中展示的内容变形，您可以通过<canvas>自带的height和width属性进行相关设置，而不要使用CSS。
表格元素
这里的元素用于创建和处理表格数据。
元素在一个 元素中可以出现一个或者更多。
| 元素 | 描述 |
|---|---|
| <table > |
HTML的 <table> 元素表示表格数据 — 即通过二维数据表表示的信息。 |
| <th> |
HTML <th> 元素 scope and headers 属性。 |
| <tr> |
HTML <tr> 元素定义表格中的行。<tr>包含了<th>和<td>元素。 |
| <td> |
HTML <td> 元素定义表格中的最小单位。 |
表单
HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。
| 元素 | 描述 |
|---|---|
| <button> |
HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。 |
| <form> |
HTML <form> 元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。 |
| <input> |
HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。 |
| <label> |
HTML <label> 元素表示用户界面中项目的标题。 |
| <select> | **HTML <select>元素是一种表单控件，可创建选项菜单。菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。 |
| <textarea> |
HTML <textarea> 元素表示一个多行纯文本编辑控件。 |
button
属性
autofocus | HTML5
一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。
disabled
此布尔属性表示用户不能与button交互。如果属性值未指定，button继承包含元素，例如<fieldset>；如果没有设置disabled属性的包含元素，button将可交互。
不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态。使用autocomplete属性可控制此特性。
name
button的名称，与表单数据一起提交。
type
button的类型。可选值：
- submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
- reset: 此按钮重置所有组件为初始值。
- button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
- menu: 此按钮打开一个由指定
<menu>元素进行定义的弹出菜单。
value
button的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。
input
属性
type
- button：无缺省行为按钮。
- checkbox： 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。
- color：| HTML5 用于指定颜色的控件。
- date：| HTML5 用于输入日期的控件（年，月，日，不包括时间）。
- datetime：| HTML5 基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
- file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
- hidden：不显示在页面上的控件，但它的值会被提交到服务器。
- password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。
- radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
- reset：用于将表单所内容设置为缺省值的按钮。
- search：| HTML5 用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
- submit：用于提交表单的按钮。
- text：单行字段；换行会将自动从输入的值中移除。
网友评论