Warning:
This wiki has been archived and is now read-only.
HTML5/semantics
HTML元素
根元素
html元素
- 分类：
- 无
- 使用场景：
- 做为文档的根元素
在复合文档中允许子文档的位置 - 内容模型：
- 一个
head元素后跟一个body元素 - 允许的属性：
- 全局属性
manifest - DOM接口：
- interface HTMLHtmlElement : HTMLElement {};
如果存在的话，manifest属性给出文档的应用程序缓存清单的地址。如果这个属性存在，这个属性的值必需是一个合法的非空URL,URL的首尾允许添加额外的空格。
manifest属性只有在文档先期加载时会产生效果。动态改变这个属性不会生效（所以也没有DOM API为这个属性提供出来）。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping Songs</title>
</head>
<body>
<h1>Swapping Songs</h1>
<p>Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.</p>
</body>
</html>
文档元数据
head元素
- 分类：
- 无
- 使用场景：
- 做为html元素中的第一个元素
- 内容模型：
- 如果文档是一个iframe的源文档或者标题信息已经由更高层的协议提供，则为0个或者多个元数据式内容
否则是为一个或者多个元数据式内容，其中恰好有一个为title元素 - 允许的属性：
- 全局属性
- DOM接口：
- interface HTMLHeadElement : HTMLElement {};
head元素表示一个文档元数据的集合。
在head元素中的元数据集合可大可小，下面是一个非常短的示例：
<!doctype html> <html> <head> <title>A document with a short head</title> </head> <body> ...
这里有个长一点的例子:
<!DOCTYPE HTML> <HTML> <HEAD> <META CHARSET="UTF-8"> <BASE HREF="http://www.example.com/"> <TITLE>An application with a long head</TITLE> <LINK REL="STYLESHEET" HREF="default.css"> <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"> <SCRIPT SRC="support.js"></SCRIPT> <META NAME="APPLICATION-NAME" CONTENT="Long headed application"> </HEAD> <BODY> ...
title元素
- 分类：
- 元数据式内容
- 使用场景：
- 在一个不包含其它
title的head元素中 - 内容模型：
- 文本
- 允许的属性：
- 全局属性
- DOM接口：
- interface HTMLTitleElement : HTMLElement { attribute DOMString text; };
title元素表示文档的标题或者名称。编写者应该使用即使不在上下文中也能标识他们文档的标题，例如在用户的历史或者标签，抑或是在搜索结果当中。文档的title经常会与它的第一个heading不同，因第一个heading没有被拿出上下文之后的独立性要求。
每个文档中至多有一个title元素。
返回元素的内容, 忽略非文本节点的子节点。
可以被赋值, 以指定的值替换元素的子元素。IDL属性 text 必须返回一个由所有title元素的直接子文本节点按DOM树顺序连接而成的字符串(忽略所有其它节点如注释或者元素)。在被赋值时,它应该采取与IDL属性textContent相同的行为。
<title>Introduction to The Mating Rituals of Bees</title>
...
<h1>Introduction</h1>
<p>This companion guide to the highly successful
<cite>Introduction to Medieval Bee-Keeping</cite> book is...
下一页可能是同一个网站的另一部分，注意标题如何把主要事项清楚地描述出来，而第一个heading默认读者已经知道上下文，所以并不会困惑舞是Salsa还是Waltz。
<title>Dances used during bee mating rituals</title>
...
<h1>The Dances</h1>用来当作文档的标题的字符串由IDL属性document.title提供。
用户代理在将文档展现到它们的UI时，应该使用文档的标题。当一个title元素以这种方式被使用时，title元素的方向性应该用于设置用户界面上文档标题的方向性。
base元素
- 分类：
- 元数据式内容
- 使用场景：
- 在一个不包含其它
base的head元素中 - 内容模型：
- 空
- 允许的属性：
- 全局属性
hreftarget - DOM接口：
- interface HTMLBaseElement : HTMLElement { attribute DOMString href; attribute DOMString target; };
base元素允许编写者指定文档基址URL用于计算相对地址URL, 以及默认的浏览上下文的名字用于接下来的超链接。这个元素不表示此信息之外的任何内容。
每个文档中最多只能出现一个base元素。
一个base元素要至少要有href属性和target属性两者其一，或者全都有也可。
如果href属性被设定了的话，则它必须包含一个合法的URL，前后允许有多余的空格。
一个base元素，如果有href属性的话，则必需出现在DOM树中其它任何有URL型属性的元素之前，html元素除外（它的manifest属性不受base元素影响）。
如果target属性被设定了的话，则它必须包含一个合法的浏览上下文名称或者关键字，这个名称或者关键字指明了当文档中的超链接和表单造成页面跳转时，哪一浏览上下文应该被用作默认。
一个base元素，如果有target属性的话，则必须出现在DOM树中任何表示超链接的元素之前。
IDL属性href，在get时应该返回文档基址URL，在set时则将href属性写入新的值。
target属性则完全反射同名属性。
<!DOCTYPE html>
<html>
<head>
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the <a href="archives.html">archives</a>.</p>
</body>
</html>
上面例子中的超链接将会链接到"http://www.example.com/news/archives.html"。link元素
- 分类：
- 元数据式内容
- 使用场景：
- 期望出现元数据式内容处。
在做为head元素孩子的noscript元素内。 - 内容模型：
- 空
- 允许的属性：
- 全局属性
hrefrelmediahreflangtypesizes
此外，title属性在此元素上具有特别语义。 - DOM接口：
- interface HTMLLinkElement : HTMLElement { attribute boolean disabled; attribute DOMString href; attribute DOMString rel; readonly attribute DOMTokenList relList; attribute DOMString media; attribute DOMString hreflang; attribute DOMString type; [PutForwards=value] readonly attribute DOMSettableTokenList sizes; }; HTMLLinkElement implements LinkStyle;
link元素允许使用者将他们的文档链接到其它资源。
link的目标由href属性指定，它的值必须表示并且包含一个有效非空的URL（允许前后有空格）。如果没有href属性，那么这个元素则没有定义一个链接。
link元素必须有rel属性。
link表示的类型由rel属性的值给出，这个值如果存在的话，则应该由一组空格分开的token组成。后文将会描述允许的关键字以及它们的意义。如果rel属性不存在、没有关键字或者没有任何一个关键字根据此文档是被允许的，那么元素不会创建任何链接。
使用link元素，可以创建两个类型的链接：到外部资源的链接和超链接。链接类型一节定义了一个指定的链接究竟是一个外部资源还是超链接。一个链接元素可以创建多个链接（其中可能某些是外部资源，某些是超链接）。具体创建多少个、哪一种链接取决于rek属性给出的关键字。用户代理必须逐个链接来处理，不能逐个元素处理。
具体的到外部资源的链接的行为取决于具体的关系,由相关链接类型来定义。一些属性控制外部资源发生作用与否（如下文定义）。
对于那些能够在DOM中表示的外部资源（比如，样式表），即使资源没有发生作用，DOM表示也应该生效。
用户代理应该采用以下步骤获取一个资源：
- 如果href属性的值是空字符串，取消这些步骤
- 解析href属性给出的URL相对路径
- 如果前面步骤失败，中断这些步骤
- 获取结果的绝对URL地址
用户代理可以选择当需要时尝试去获取这些资源，而不是在它们发生作用前主动获取所有的外部资源。
获取资源是应当遵循所使用的协议(如 HTTP)的语义。（例如重定向应该生效，404响应结果应该导致外部资源无法生效）
在尝试获取资源及其关键子资源完成时，如果加载成功，用户代理应该将以下任务排入隊列：在link元素上触发一个名为load的简单事件，如果资源或者它的一个关键子资源因为任何原因没能完全加载（如DNS错误，HTTP 404响应，链接过早断开，不支持的Content-Type），将以下任务排入隊列：在link元素上触发一个名为error的简单事件，处理资源及子资源时的非网络的错误（如CSS解析错误、PNG解码错误）不在本段描述的错误之列。
这些任务的task source是DOM manipulation task source
元素必须延迟元素的document的load事件至所有获取资源及其关键子资源的尝试完成。（用户代理没有尝试获取的资源，如等待需要时加载的资源，不会延迟load事件。）
交互式的用户代理可能在他们的界面上提供给用户一些触发由link元素创建的超链接的方法。本标准没有确切地规定用户界面，但是可以以某种形式（可能是比较简单的），对于每个由link元素创建的超链接给出以下信息（由元素属性获得）：
- 文档和资源之间的关系（由rel属性给出）
- 资源的标题（由title属性给出）
- 资源的地址（由href属性给出）
- 资源的语言（由hreflang属性给出）
- 资源的适合媒体（由media属性给出）
用户代理也可以包含其它信息，比如资源的类型（由type属性给出）。
media属性说明了资源作用于何种媒体，它的值必须是合法的媒体查询。
如果链接是超链接，那么media属性纯是建议，描述了问题中的文档为何种媒体设计。
然而，如果链接是外部资源链接的话，media属性就是规定，用户代理仅当media属性匹配环境并且其它相关条件满足时才会使资源生效，其它情况下不会生效。
如果media属性被省略，则默认为"all"，意即链接默认作用于所有媒体类型。
link元素的hreflang属性跟a与area元素的hreflang属性有语义完全相同。
对于外部资源链接，type属性用于提示用户代理，以使它们避免获取不支持的资源。如果这个属性被设置，那么用户代理必须确认资源就是给出的类型（即使它不是一个合法的MIME类型，如空字符串）。如果属性被省略，但是外部资源链接类型有定义默认类型，用户代理也必须确认资源就是这个的类型。如果用户代理不支持指定链接关系的指定MIME类型，则用户代理不应该获取这个资源。如果用户代理支持指定链接关系的指定MIME类型，则用户代理应该按照外部资源链接的特定类型所指定，在适当的时候获取资源。如果属性被忽略并且外部资源链接类型没有默认类型，但如果资源的类型是已知的并且支持的，用户代理还是应该当作它能够被支持并获取资源。
如果外部资源链接类型定义了处理资源的内容类型元数据的规则，这些规则应生效。否则，假如资源预计是图片，用户代理可以使用图片探测规则，with the official type being the type determined from the resource's Content-Type metadata，并且把探测资源得出的结果当作它时实际类型。否则，如果所有条件都不生效或者如果用户代理选择不去使用图片探测规则，那么用户代理必须使用内容类型元数据去检查资源的类型，如果没有类型元信息，但是外部资源链接类型有定义默认类型，那么用户代理需要确认资源就是这个类型。
用户代理一经确认资源的类型，如果它是支持的类型并且其它有关条件满足，用户代理必须使资源生效，其它情况则应忽略资源。
<link rel="stylesheet" href="A" type="text/plain"> <link rel="stylesheet" href="B" type="text/css"> <link rel="stylesheet" href="C">
...那么一个符合规范的用户代理假如只支持CSS样式表将会获取B和C文件，并且屏蔽A文件（因为text/plain不是CSS样式表的MIME类型。）
对文件B和C而言，它之后将会检查服务端返回的实际类型。对于那些发送text/css的，将会使style生效，但对于标记为text/plain或者其它类型的，则不会。
如果两个文件之一返回时没有带内容类型元数据，或者带有一个语法错误的类型如Content-Type: "null"，那么stylesheet链接的的默认类型将会被替换进来。因默认类型是text/css，样式表将会仍旧生效。title属性给出了链接的标题。只有一个例外，它纯是建议。它的值为text。例外就是对于样式表链接，这里的title属性定义了可选得样式表集合。
sizes属性与icon这一link类型一起使用。这个属性不能被rel中没有指定icon关键字的link元素使用。
HTTP link:如果支持的话，header必须被认为出现在任何链接之前，这样的话他们就由HTTP实体header给出。（在这些header中的URL将会被根据相关文档的规则被处理和解析，本文档不包含这些规则。[HTTP] [WEBLINK]
IDL属性href, rel, media, hreflang, 以及type, 以及sizes，每一个都将反射各自同名的内容属性。
IDL属性relList应反射rel内容属性。
IDL属性disabled只做用于样式表链接。当link元素定义了一个样式表链接时，disabled属性跟为可选择样式表DOM定义的表现相同。对所有其它的link元素它总是返回false，并且设置时不做任何事情。
LinkStyle接口也被这个元素实现了，样式处理模型定义了方式。[CSSOM]
<!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- the preferred alternate style sheet --> <link rel="stylesheet" href="green.css" title="Green styles"> <!-- some alternate style sheets --> <link rel="alternate stylesheet" href="contrast.css" title="High contrast"> <link rel="alternate stylesheet" href="big.css" title="Big fonts"> <link rel="alternate stylesheet" href="wide.css" title="Wide screen">
<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"> <link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"> <link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"> <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"> <link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"> <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">
meta元素
- 分类：
- 元数据式内容
- 使用场景：
- 如果有
charset属性出现，或者如果元素的http-equiv属性在编码声明状态：在一个head元素里。
如果元素具有http-equiv属性并且不在在编码声明状态：在一个head元素里。
如果元素具有http-equiv属性并且不在在编码声明状态：在一个做为head元素子节点的noscript元素里。
如果name属性出现：任何期望出现元数据式内容的位置 - 内容模型：
- 空
- 允许的属性：
- 全局属性
namehttp-equivcontentcharset - DOM接口：
- interface HTMLMetaElement : HTMLElement { attribute DOMString name; attribute DOMString httpEquiv; attribute DOMString content; };
meta元素用来表示那些不能被title, base, link, style和script这些元素描述的各种元数据。
meta元素可以用name属性表示文档级元数据，以http-equiv属性表示编程指示，以及charset属性用来表示HTML文档序列化为字符串而成的文件的字符编码声明。（比如为了在网络上传输或者磁盘存储）
name, http-equiv 和 charset三属性其一必须被声明。
如果name或者http-equiv被指定了，那么content属性一定要被指定，否则它必不能出现。
charset属性指定了文档使用的字符编码。这是一个字符编码声明。如果属性表示一个XML文档，它的值必须是与"UTF-8"相匹配，大小写可以不敏感。（于是文档就会被强制使用UTF-8作为编码方式）
style元素
- 分类：
- 元数据式内容
如果具有scoped属性: 流式内容 - 使用场景：
- 如果元素不具有
scoped属性：在一个head元素里。
如果元素不具有scoped属性：在一个做为head元素子节点的noscript元素里。
如果元素具有scoped属性：在期望流式内容处，但必须出现在所有除style元素或者元素内空格以外的流式内容之前。 - 内容模型：
- 空
- 允许的属性：
- 全局属性
mediascopedtype
此外，title属性在此元素上有特殊语意 - DOM接口：
- interface HTMLStyleElement : HTMLElement { attribute boolean disabled; attribute DOMString media; attribute DOMString type; attribute boolean scoped; }; HTMLStyleElement implements LinkStyle;