HTML 标签
写在前面
HTML 标签
HTML 是一种描述 Web 文档结构和语义的语言；它由元素组成，每个元素可以有一些属性。
网页中的内容通过 HTML 元素标记，如 img、title、p、div 等等。
HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面
网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。
HTML的语言形式为尖括号包围的HTML元素，浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。
我按照标签的功能和字母顺序进行了分类，你可以直接按照自己需要查看
把文档写出了更符合阅读的格式；
内容结构
本文档中的每个 HTML 标签的内容结构一般是下面这个样子的
- 标签功能
- 标签用法
- 标签演示
- 浏览器支持
- 提示和注释 / 注意事项
- HTML4 与 HTML5 之间的差异
- HTML 与 XHTML 之间的差异
- 全局属性
- 事件属性
如果您有什么更好的建议，欢迎告诉我，我对做出优秀的基础文档非常有兴趣！
HTML 的意义
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。
除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。
链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
HTML 标签是什么？
HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。
HTML 标记包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等等等。
本文档就是介绍上面这种标签的
标签使用演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>阿西河前端教程<h1>
</body>
</html>
上面就是 HTML 标签的使用；是一组成对使用；
掌握 HTML 标签的好处
可以更好的驾驭 HTML，HTML 可以说非常简单，但是很多有经验的前端开发都经常翻车；就是因为很多人不屑于研究；
导致很多 HTML 标签能做的时候，因为开发者没有了解过，所以用 JS 写很多代码才实现需求；
掌握 HTML 的所有标签，知道能做哪些事情，是非常有必要的！！！
标签大全
语言规范
| 元素 | 描述 |
|---|---|
| <!DOCTYPE> | 定义文档类型。 |
| <html> | 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。 |
| <!–…–> | 定义注释 |
文档元数据
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如 搜索引擎、浏览器 等等）更好地运用和渲染页面。
对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
| 元素 | 描述 |
|---|---|
| <head> | 代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。 |
| <title> | 定义文档的标题，将显示在浏览器的标题栏或标签页上。 该元素只能包含文本，包含的标签不会被解释。 |
| <base> | 定义页面上相对 URL 的基准 URL,只能有一个 base 元素。 |
| <link> | 用于链接外部资源到该文档。该元素最常用于链接样式表和站点图标 |
| <meta> | 定义其他 HTML元相关元素 无法描述的元数据。 |
| <style> | 用于内联 CSS。 |
脚本
| 元素 | 描述 |
|---|---|
| <script> | 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。 |
| <noscript> | 定义当浏览器不支持脚本时显示的替代文字。 |
<template> 5 |
通过 JavaScript 在运行时实例化内容的容器。 |
<canvas> 5 |
代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。 |
逻辑分类
逻辑分类 允许你将文档内容从逻辑上进行组织划分。
使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，
来为页面内容创建明确的大纲，以便区分各个章节的内容。
| 元素 | 描述 |
|---|---|
| <body> | 代表 HTML 文档的内容。在文档中只能有一个 body 元素,document.body 可以访问文档的 body 元素。 |
<section> 5 |
定义文档中的一个章节。 |
<nav> 5 |
定义只包含导航链接的章节。 |
<article> 5 |
定义可以独立于内容其余部分的完整独立内容块。 |
<aside> 5 |
定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。 |
| <h1> | 标题元素实现了六层文档标题，h1 是最大的标题，h6 是最小的标题。标题元素简要地描述章节的主题。 |
| <hgroup> | 代表一个段的标题。它规定了在文档轮廓里的单一标题是它所属的隐式或显式部分的标题。 |
<header> 5 |
定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。 |
<footer> 5 |
定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。 |
| <address> | 定义包含联系信息的一个章节，比如某个人或某个组织（等等）的联系信息。 |
<main> 5 |
定义文档中主要或重要的内容。 |
组织文本内容
使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。
这些元素能标识内容的宗旨或结构，而这对于 accessibility(无障碍阅读) 和 SEO 很重要。
| 元素 | 描述 |
|---|---|
| <p> | 定义一个段落。 |
| <hr> | 代表章节、文章或其他长内容中段落之间的分隔符。 |
| <pre> | 代表其内容已经预先排版过，格式应当保留 。 |
| <blockquote> | 代表引用自其他来源的内容。 |
| <ol> | 定义一个有序列表。 |
| <ul> | 定义一个无序列表。 |
| <li> | 定义列表中的一个列表项。 |
| <dl> | 定义一个定义列表（一系列术语和其定义）。 |
| <dt> | 代表一个由下一个 dd 定义的术语。 |
| <dd> | 代表出现在它之前术语的定义。 |
| <dir> | 已废弃 HTML 目录元素被作为一个文件和/或文件夹的目录的容器，可能还有 用户代理 应用的样式与图标。 |
<figure> 5 |
代表一个和文档有关的图例。 |
<figcaption> 5 |
代表一个图例的说明。 |
| <div> | 代表一个通用的容器，没有特殊含义。 |
内联文本
使用 HTML 内联文本语义（Inline text semantics）定义一个单词、一行内容，
或任意文字的语义、结构或样式。
| 元素 | 描述 |
|---|---|
| <a> | 代表一个链接到其他资源的超链接 。 |
| <em> | 代表强调 文字。 |
| <strong> | 代表特别重要 文字。 |
| <small> | 代表注释 ，如免责声明、版权声明等，对理解文档不重要。 |
| <s> | 代表不准确或不相关 的内容。 |
| <cite> | 代表作品标题 。 |
| <q> | 代表内联的引用 。 |
| <dfn> | 代表一个术语包含在其最近祖先内容中的定义 。 |
| <abbr> | 代表省略 或缩写 ，其完整内容在 title 属性中。 |
<data> 5 |
关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。 |
<time> 5 |
代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。 |
| <code> | 代表计算机代码 。 |
| <tt> | HTML 电报文本元素 (<tt>) 产生一个内联元素，使用浏览器内置的 monotype 字体展示。这个元素用于给文本排版，使其等宽展示，就像电报那样。 使用 <code> 元素来展示等宽文本可能更加普遍。 |
| <var> | 代表代码中的变量 。 |
| <samp> | 代表程序或电脑的输出 。 |
| <kbd> | 代表用户输入 ，一般从键盘输出，但也可以代表其他输入，如语音输入。 |
| <sub>, <sup> | 分别代表下标 和上标 。 |
| <i> | 代表一段不同性质 的文字，如技术术语、外文短语等。 |
| <b> | 代表一段需要被关注 的文字。 |
| <u> | 代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。 |
<mark> 5 |
代表一段需要被高亮的引用 文字。 |
<ruby> 5 |
代表被 ruby 注释 标记的文本，如中文汉字和它的拼音。 |
<rt> 5 |
代表ruby 注释 ，如中文拼音。 |
| <rb> | HTML Ruby Base（rb）元素用于分隔<ruby>注释的基本文本组件（即正在注释的文本）。一个 <rb>元素应该包装基本文本的每个单独的原子段。 |
<rp> 5 |
代表 ruby 注释两边的额外插入文本 ， 用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。 |
| <rtc> | HTML <rtc> 元素包含文字的语义注解，它们在 <rb> 元素中展示。<rb> 元素可以拥有发音 (<rt>) 和语义(<rtc>) 注解。 |
<bdi> 5 |
代表需要脱离 父元素文本方向的一段文本。 它允许嵌入一段不同或未知文本方向格式的文本。 |
| <bdo> | 指定子元素的文本方向 ，显式地覆盖默认的文本方向。 |
| <span> | 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。 |
| <br> | 代表换行 。 |
<wbr> 5 |
代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符。 |
编辑
这些元素能标示出某个文本被更改过的部分。
| 元素 | 描述 |
|---|---|
| <ins> | 定义 增加 到文档的内容。 |
| <del> | 定义从文档移除 的内容。 |
嵌入内容
| 元素 | 描述 |
|---|---|
| <img> | 代表一张图片 。 |
| <applet> | Applet元素 标志着包含了Java的applet。 |
| <iframe> | 代表一个内联的框架 。 |
| <noembed> | noembed 元素是个废除的和不标准的方式，用于向不支持 <embed> ，或者不支持作者希望的 嵌入式内容 的浏览器提供替代（或者“后备”）内容。 这个元素在 HTML 4.01 起废除，以支持后备 |
<embed> 5 |
代表一个嵌入 的外部资源，如应用程序或交互内容。 |
| <object> | 代表一个外部资源 ，如图片、HTML 子文档、插件等。 |
| <param> | 代表 object 元素所指定的插件的参数 。 |
<video> 5 |
代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。 |
<audio> 5 |
代表一段声音 ，或音频流 。 |
<source> 5 |
为 video 或 audio 这类媒体元素指定媒体源 。 |
| <picture> | 通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在 <img>元素占据的空间中。 |
<track> 5 |
为 video 或 audio 这类媒体元素指定文本轨道（字幕） 。 |
| <map> | 与 area 元素共同定义图像映射 区域。 |
| <area> | 与 map 元素共同定义图像映射 区域。 |
svg 5 |
定义一个嵌入式矢量图 。 |
math 5 |
定义一段数学公式 。 |
表格
这里的元素用于创建和处理表格数据。
| 元素 | 描述 |
|---|---|
| <table> | 定义多维数据 。 |
| <caption> | 代表表格的标题 。 |
| <colgroup> | 代表表格中一组单列或多列 。 |
| <col> | 代表表格中的列 。 |
| <tbody> | 代表表格中一块具体数据 （表格主体）。 |
| <thead> | 代表表格中一块列标签 （表头）。 |
| <tfoot> | 代表表格中一块列摘要 （表尾）。 |
| <tr> | 代表表格中的行 。 |
| <td> | 代表表格中的单元格 。 |
| <th> | 代表表格中的头部单元格 。 |
表单
HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。详情请参阅 HTML 表单指南。
| 元素 | 描述 |
|---|---|
| <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 |
代表一个用户可以(点击)获取额外信息或控件的小部件 。 |
| <dialog> | 表示一个对话框或其他交互式组件，例如一个检查器或者窗口。 |
<summary> 5 |
代表 details 元素的综述 或标题 。 |
<menuitem> 5 |
代表一个用户可以点击的菜单项。 |
<menu> 5 |
代表菜单。 |
Web 组件
Web 组件是一种与 HTML 相关联（HTML-related）的技术，简单来说，它允许开发者创建自定义元素，并如同普通的 HTML 一样使用它们。另外，也可以创建经过自定义的标准 HTML 元素。
| 元素 | 描述 |
|---|---|
| <content> | Web 组件 的技术套件的废弃部分 — 用于 Shadow DOM 内部作为 insertion point，并且不可用于任何正常的 HTML， 现在已被 <slot> 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。 |
| <element> | <element>元素被定义在最新的 HTML DOM 元素中 |
| <shadow> | Web 组件技术套件的废弃部分 — 目的是用作 Shadow DOM insertion point。 如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。在正常的 HTML 没有任何用处。 |
| <slot> | 作为 Web Components 技术套件的一部分， |
| <template> | 是一种用于保存客户端内容机制，该内容在加载页面时不会呈现， 但随后可以(原文为 may be)在运行时使用JavaScript实例化。 |
过时和废弃
警告：下面这些旧的 HTML 元素已被弃用，且不应再被使用。千万不要在新的项目中使用它们，并且要尽快替换旧项目中的残余。在此列出，仅供参考。
| 元素 | 描述 |
|---|---|
| <acronym> | HTML Acronym 元素 (<acronym>) 允许作者明确地声明一个字符序列,，它们构成一个单词的首字母缩写或简略语。 |
| <applet> | HTML中的Applet元素(<applet>) 标志着包含了Java的applet。 |
| <basefont> | HTML标签<basefont>``</basefont>用来设置文档的默认字体大小。使用<font>可以相对于默认字体大小进行变化。 |
| <bgsound> | <bgsound>``</bgsound>是IE浏览器中设置网页背景音乐的元素。 |
| <big> | The HTML Big Element (<big>) 会使字体加大一号（例如从小号(small)到中号(medium)，从大号(large)到加大(x-large)），最大不超过浏览器的最大字体。 |
| <blink> | HTML Blink Element (<blink>)不是标准元素，它会使包含其中的文本闪烁。 |
| <center> | HTML Center 元素 (<center>) 是个 块级元素，可以包含段落，以及其它块级和内联元素。这个元素的整个内容在它的上级元素中水平居中(通常是 <body>)。 |
| <command> | command元素用来表示一个用户可以调用的命令. |
| <content> | HTML <content> 元素— Web 组件 的技术套件的废弃部分 — 用于 Shadow DOM 内部作为 insertion point，并且不可用于任何正常的 HTML，现在已被 <slot> 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。 |
| <dir> | 已废弃的 HTML 目录元素（<dir>）被作为一个文件和/或文件夹的目录的容器，可能还有 用户代理 应用的样式与图标。 |
| <element> | <element>元素被定义在最新的 HTML DOM 元素中。</element> |
| <font> | HTML Font 元素（<font>）定义了该内容的字体大小、顏色与表现。 |
| <frame> | <frame> 是 HTML 元素，它定义了一个特定区域，另一个 HTML 文档可以在里面展示。帧应该在 <frameset> 中使用。 |
| <frameset> | <frameset> 是一个用于包含 <frame> 的 HTML 元素。 |
| <image> | HTML <image>元素曾经是一个试验性的元素，用来显示图片。它从未被实现过，请使用标准的<img>元素。 |
| <isindex> | <isindex>元素的作用是使浏览器显示一个对话框，提示用户输入单行文本。在W3C的规范中建议，<isindex>元素最好被放置在 <head> 标签块内，但是对于浏览器来说，<isindex>标签在页面任何位置都没有关系。 |
| <keygen> | HTML <keygen> 元素是为了方便生成密钥材料和提交作为 HTML form 的一部分的公钥.这种机制被用于设计基于 Web 的证书管理系统。按照预想，<keygen> 元素将用于 HTML 表单与其他的所需信息一起构造一个证书请求，该处理的结果将是一个带有签名的证书。 |
| <listing> | HTML 列表元素 (<listing>) 渲染了开始和结束标签之间的文本，而不会解释 HTML，并使用等宽字体。HTML2 标准建议，当一行不超过 132 个字符时，不应该将其拆开。 |
| <marquee> | HTML marquee 元素（<marquee>） 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。 |
| <menuitem> | 用户可以通过HTML <menuitem> 元素生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。 |
| <multicol> | HTML<multicol> 元素是一个实验元素，旨在允许多列布局。它从来没有任何显着的牵引力，并没有在任何主流浏览器中实现。</multicol> |
| <nextid> | 用于使NeXT网页设计工具为其锚点生成自动的NAME标签。 |
| <nobr> | HTML <nobr> 元素阻止文本自动拆分成新行，所以它展示为长的一行，可能还需要滚动。这个标签不是标准的 HTML，并且不应该使用。反之应该使用 CSS 属性 |
| <noembed> | <noembed> 元素是个废除的和不标准的方式，用于向不支持 <embed> ，或者不支持作者希望的 嵌入式内容 的浏览器提供替代（或者“后备”）内容。这个元素在 HTML 4.01 起废除，以支持后备 |
| <noframes> | <noframes> 是个 HTML 元素，用于支持不支持 <frame> 元素的浏览器，或者这样配置的浏览器。 |
| <plaintext> | HTML 纯文本元素 (<plaintext>) 将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。 |
| <shadow> | HTML <shadow> 元素 — Web 组件技术套件的废弃部分 — 目的是用作 Shadow DOM insertion point。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。在正常的 HTML 没有任何用处。 |
| <spacer> | <spacer> 是过时的 HTML 元素，它可以向页面插入间隔。它由 Netscape 设计，用于实现单像素布局图像的相同效果，Web 设计师用它来向页面添加空白，而不需要实际使用图片。 但是，<spacer> 不再受任何主流浏览器支持，并且相同效果可以简单由 CSS 实现。 |
| <strike> | HTML <strike> 元素（或者 HTML 删除线元素）在文本上放置删除线。 |
| <tt> | HTML 电报文本元素 (<tt>) 产生一个内联元素，使用浏览器内置的 monotype 字体展示。这个元素用于给文本排版，使其等宽展示，就像电报那样。使用 <code> 元素来展示等宽文本可能更加普遍。 |
| <xmp> | <xmp> 标签之间的内容不会被当作文档内容解析，而会被用等宽字体直接呈现。HTML2 规范建议，本标签中的内容应该具有足够容纳每行80个字母的宽度。 |
本文档的阅读建议
建议可以按照右侧整理好的目录进行查找，我已经按照标签的功能/字母顺序进行归类整理了；
这样读者按照功能去学习，同一功能下的标签有对比，有区别，有联系，会让你理解的更深刻；
本文档的参考
本文档参考了下面网站，并且结合了自己的开发和实践，进行了增加，修改，删除，尽力让从没有 HTML 基础的人，能够快速的上手
- w3schools
- w3schools 镜像站
- MDN
扩展
更多HTML全局属性，请参考 HTML全局属性
