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 中的措辞内容类别，不过除了这两个还有其他类别。

了解更多 >> MDN： HTML 块级元素 MDN： HTML 行内元素 W3C：HTML 4.01 - 块级元素与行内元素


分组元素DIV和SPAN

<div>和<span>元素用于向文档添加结构，

了解更多 >> W3C：HTML 4.01 - 分组元素DIV和SPAN


属性

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

属性列表(除事件属性)

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

属性名 元素 描述 值 示例
abbr <th> 表头单元格中内容的缩写版本。 文本*
accept <form>, <input> 服务器接受内容或文件类型的列表。 MIME 类型 或 audio/*, video/*, image/*。使用逗号分隔。 accept=".doc,.docx"
accept-charset <form> 支持的字符集列表。 ASCII case-insensitive match for "UTF-8"
accesskey 全局属性 定义键盘快捷键来激活或者聚焦元素 必须包含一个可打印字符。 accesskey="s"
action <form> 表单信息提交的url地址，指向进行处理的程序。 有效的非空URL。
align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> 设置元素的水平对齐。
allow <iframe> Specifies a feature-policy for the iframe.
alt <applet>, <area>, <img>, <input> 在图片无法呈现时的替代文本。
async <script> 表示该脚本应该异步执行。
autocapitalize 全局属性 Sets whether input is automatically capitalized when entered by user
autocomplete <form>, <input>, <select>, <textarea> 表示该表单中是否可以由浏览器自动完成填值。
autofocus <button>, <input>, <keygen>, <select>, <textarea> 在网页加载后该元素应该自动聚焦。
autoplay <audio>, <video> audio或video应该自动播放
background <body>, <table>, <td>, <th> Specifies the URL of an image file.
Note: Although browsers and email clients may still support this attribute, it is obsolete. Use CSS background-image instead.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> 元素的背景颜色。
NOTE：这是一个遗留属性，请使用css{“background-color":}代替。
border <img>, <object>, <table> 边框宽度。
Note:这是遗留属性，请使用 CSS border 属性代替。
buffered <audio>, <video> 包含已缓存媒体的时间范围。
capture <input> From the HTML Media Capture
The definition of 'media capture' in that specification.spec, specifies a new file can be captured.
challenge <keygen> 与公钥一起提交的挑战字符。
charset <meta>, <script> 申明该页面或脚本的字符编码。
checked <command>, <input> 指出该元素在页面加载后是否处于选中状态。
cite <blockquote>, <del>, <ins>, <q> 包含一个URI，用来指明引用或修改的源地址。
class 全局属性 经常和CSS一起配合使用来修饰元素。
code <applet> 标明被加载和执行的applet类文件的URL。
codebase <applet> 指出存放applet类文件基本URL地址(绝对或相对)，这些文件由code属性标明。
color <basefont>, <font>, <hr> 此属性可用于指定颜色, 颜色值一般有两种表示:
1. 以`#`号开头的RGB十六进制数,如#112233, 其中11表示的是R(红),22表示的是G绿(),33表示的是B(蓝)
2. 颜色的英文单词名,如`red`表示红色
cols <textarea> 定义一个textarea中包含多少列。
colspan <td>, <th> 该属性一般用在td标签中,用于指定一个单元格占用多少列,例如:<td colspan='2'>表示占用一个单元格占2列.
content <meta> A value associated with http-equiv or name depending on the context.
contenteditable 全局属性 指出该元素的内容是否可以被编辑。
contextmenu 全局属性 Defines the ID of a <menu> element which will serve as the element's context menu.
controls <audio>, <video> 指出浏览器是否对用户显示播放控制台(前进或回退)
coords <area> A set of values specifying the coordinates of the hot-spot region.
crossorigin <audio>, <img>, <link>, <script>, <video> How the element handles cross-origin requests
csp <iframe> Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.
data <object> 资源URL地址
data-* 全局属性 允许你对于一个HTML元素绑定自定义的属性。
datetime <del>, <ins>, <time> Indicates the date and time associated with the element.
decoding <img> Indicates the preferred method to decode the image.
default <track> Indicates that the track should be enabled unless the user's preferences indicate something different.
defer <script> Indicates that the script should be executed after the page has been parsed.
dir 全局属性 Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname <input>, <textarea>
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Indicates whether the user can interact with the element.
download <a>, <area> Indicates that the hyperlink is to be used for downloading a resource.
draggable 全局属性 Defines whether the element can be dragged.
dropzone 全局属性 Indicates that the element accept the dropping of content on it.
enctype <form> Defines the content type of the form date when the method is POST.
enterkeyhint <input>, <textarea>, contenteditable The enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
for <label>, <output> 描述与当前元素绑定的元素。
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
formaction <input>, <button> Indicates the action of the element, overriding the action defined in the <form>.
headers <td>, <th> IDs of the <th> elements which applies to this element.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> 注意：在某些情况下，例如
，这是一个遗留属性，在这种情况下应该使用CSS height属性。 在其他情况下，例如<canvas>，必须使用此属性指定高度。
hidden 全局属性 Indicates the relevance of an element.
high <meter> Indicates the lower bound of the upper range.
href <a>, <area>, <base>, <link> 关联资源的URL。
hreflang <a>, <area>, <link> Specifies the language of the linked resource.
http-equiv <meta>
icon <command> Specifies a picture which represents the command.
id 全局属性 Often used with CSS to style a specific element. The value of this attribute must be unique.
ismap <img> Indicatesthat the image is part of a server-side image map.
itemprop 全局属性
keytype <keygen> Specifies the type of key generated.
kind <track> Specifies the kind of text track.
label <track> Specifies a user-readable title of the text track.
lang 全局属性 Defines the language used in the element.
language <script> Defines the script language used in the element.
list <input> Identifies a list of pre-defined options to suggest to the user.
loop <audio>, <bgsound>, <marquee>, <video> Indicates whether the media should start playing from the start when it's finished.
low <meter> Indicates the upper bound of the lower range.
manifest <html> Specifies the URL of the document's cache manifest.
max <input>, <meter>, <progress> Indicates the maximum value allowed.
maxlength <input>, <textarea> Defines the maximum number of characters allowed in the element.
media <a>, <area>, <link>, <source>, <style> Specifies a hint of the media for which the linked resource was designed.
method <form> Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min <input>, <meter> Indicates the minimum value allowed.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Name of the element. For example used by the server to identify the fields in form submits.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
open <details> Indicates whether the details will be shown on page load.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
ping <a>, <area>
placeholder <input>, <textarea> Provides a hint to the user of what can be entered in the field.
poster <video> A URL indicating a poster frame to show until the user plays or seeks.
preload <audio>, <video> Indicates whether the whole resource, parts of it or nothing should be preloaded.
pubdate <time> Indicates whether this date and time is the date of the nearest <article> ancestor element.
radiogroup <command>
readonly <input>, <textarea> Indicates whether the element can be edited.
rel <a>, <area>, <link> Specifies the relationship of the target object to the link object.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
reversed <ol> Indicates whether the list should be displayed in a descending order instead of a ascending.
rows <textarea> Defines the number of rows in a textarea.
rowspan <td>, <th> Defines the number of rows a table cell should span over.
sandbox <iframe>
spellcheck 全局属性 Indicates whether spell checking is allowed for the element.
scope <th>
scoped <style>
seamless <iframe>
selected <option> Defines a value which will be selected on page load.
shape <a>, <area>
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes <link>
span <col>, <colgroup>
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> The URL of the embeddable content.
srcdoc <iframe>
srclang <track>
start <ol> Defines the first number if other than 1.
step <input>
style 全局属性 定义CSS样式，这些样式会覆盖之前设置的样式。
summary <table>
tabindex 全局属性 Overrides the browser's default tab order and follows the one specified instead.
target <a>, <area>, <base>, <form>
title 全局属性 当鼠标悬停在元素上面时，提示框显示的文本。
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> 定义元素的类型。
usemap <img>, <input>, <object>
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> 定义页面加载时，在元素内显示的默认值。
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In some instances, such as
, this is a legacy attribute, in which case the CSS width property should be used instead. In other cases, such as <canvas>, the width must be specified with this attribute.
wrap <textarea> Indicates whether the text should be wrapped.

事件属性列表

了解更多 >> MDN：HTML 属性参考 WHATWG：HTML 属性列表


HTML用法

文档头部

一个HTML文档分两个部分 HTML 头部和 HTML 主体。HTML 头部是包含在<head> 元素里面的内容, HTML 主体是包含在<body> 元素里面的内容。

head 里面的内容不会在浏览器页面中显示，它的作用是包含一些页面的元数据。它包含了像文档的<title>(标题) ,CSS(如果你选择用 CSS 来为 HTML 内容添加样式)，指向自定义图标的链接和其他的元数据(描述HTML的数据，比如，作者，和描述文档的重要关键词)。要查看网页的 head 的内容，可以在打开浏览器，按键盘F12键调出开发者工具栏，在Elements栏可以HTML查看代码。

了解更多 >> MDN：HTML <head>标签里有什么? Metadata-HTML中的元数据


头部示例

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

标题 title

给 html 文档添加标题使用<title>。你可能会将它和给 <body> 添加标题的 <hi>元素混淆，有些时候 <h1> 也会被称作网页标题。但是它们是不同的。

  • <title>元素出现在浏览器标签页上，不会出现页面中。<hi>元只出现在页面中。收藏网页时，默认书签名<title>元素内容
  • 元素 <title> 是用来表示整个HTML文档标题的元数据（不是文档的内容）。

示例如下： 

<title>My test page</title>

元数据 meta

站点图标

CSS和JavaScript

文档主体

资源

官网

相关网站

参考资料

取自“https://zxdd.com/index.php?title=HTML&oldid=62”