HTML 5 <!DOCTYPE> 标签
定义和用法
<!DOCTYPE> 声明是文档中的第一个成分,位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中有 3 个不同的文档类型,在 HTML 5 中只有一个:<!DOCTYPE HTML>。
HTML 5 <a> 标签
定义和用法
<a> 标签定义超链接,它用于从一个页面连接到另一个页面。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中,<a> 标签既可以是超链接,也可以是锚。这取决于是否描述了 href 属性。
在 HTML 5 中,<a> 是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。
HTML 5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。
属性 | 描述 | 4 | 5 |
---|---|---|---|
charset | 不赞成。规定目标 URL 的字符编码。 | 4 |
|
coords | 不赞成。规定适于 shape 属性的坐标,为图像映射定义图像的区域。 | 4 |
|
href | 链接的目标 URL。 | 4 | 5 |
hreflang | 规定目标 URL 的基准语言。仅在 href 属性存在时使用。 | 4 | 5 |
media | 规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用。 |
| 5 |
name | 不赞成。命名一个锚。不支持。使用 id 代替。 | 4 |
|
ping | 由空格分隔的 URL 列表,当用户点击该链接时,这些 URL 会获得通知。 仅在 href 属性存在时使用。 |
| 5 |
rel | 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。 | 4 | 5 |
rev | 不赞成。规定目标 URL 与当前文档之间的关系。 | 4 |
|
shape | 不赞成。为当前 area 标签中的映射定义的地区类型。与 coords 属性一起使用。 | 4 |
|
target | 在何处打开目标 URL。仅在 href 属性存在时使用。 | 4 | 5 |
type | 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。 | 4 | 5 |
HTML 5 <abbr> 标签
定义和用法
表示一个缩写形式,比如 "Inc."、"etc."。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
<abbr title="javascript">JS</abbr>
HTML <address> 标签
浏览器支持
定义和用法
<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
提示和注释
提示:<address> 标签不应该用于描述通讯地址,除非它是联系信息的一部分。
提示:<address> 元素通常连同其他信息被包含在 <footer> 元素中。
<adress>
write by:<a href="http://www.baidu.com">"gavin"</a>
</adress>
HTML <applet> 标签(applet java的程序)
定义和用法
HTML5 中不支持 <applet> 标签。请使用 object 元素 标签代替。
HTML 4.01 中不赞成使用 <applet> 元素。
<applet> 标签定义嵌入的 applet。
必需的属性
属性 | 值 | 描述 |
---|---|---|
code | URL | 规定 Java applet 的文件名。 |
object | name | 定义了包含该 applet 的一系列版本的资源名称。 |
HTML <area> 标签
浏览器支持
所有主流浏览器都支持 <area> 标签。HTML <article> 标签
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p> </article>
Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <article> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <article> 标签。
定义和用法
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源:
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
HTML <aside> 标签
浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <aside> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <aside> 标签。
定义和用法
<aside> 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
提示和注释:
提示:<aside> 的内容可用作文章的侧栏。
HTML <audio> 标签 音频标签
实例
一段简单的 HTML 5 音频:
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。</audio>
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <audio> 标签。
HTML5的新标签属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 规定视频输出应该被静音。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
HTML <b> 标签
提示和注释
注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。
提示:您也能够使用 CSS "font-weight" 属性来设置粗体文本。
HTML <base> 标签
定义和用法
<base> 标签为页面上的所有链接规定默认地址或默认目标。(在head中填写)
通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
HTML <bdi> 标签
html5的新标签,浏览器支持有限:定义和用法
bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时,该标签很有用。
属性
属性 | 值 | 描述 |
---|---|---|
dir |
| 可选。规定 <bdi> 元素内的文本的文本方向。默认值:auto。 |
HTML <bdo> 标签
定义和用法
bdo 元素可覆盖默认的文本方向。
可选的属性
属性 | 值 | 描述 |
---|---|---|
dir |
| 定义文字的方向 |
HTML <big> 标签
定义和用法
<big> 标签呈现大号字体效果。
使用 <big> 标签可以很容易地放大字体。这简直不能再简单了:浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时,其字体比周围的文字要大一号。但是,如果文字已经是最大号字体,这个 <big> 标签将不起任何作用。
更妙的是,可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号,直到上限 7 号文本,正如字体模型所定义的那样。
但是使用 <big> 标签的时候还是要小心,因为浏览器总是很宽大地试图去理解各种标签,对于那些不支持 <big> 标签的浏览器来说,它经常将其认为是粗体字标签。
HTML <blockquote> 标签(块级引用)
定义和用法
<blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
HTML <button> 标签
实例
以下代码标记了一个按钮:
<button type="button">Click Me!</button>浏览器支持:
所有主流浏览器都支持 <button> 标签。
重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input元素来创建按钮。
定义和用法
<button> 标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按 钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
autofocus | autofocus | 规定当页面加载时按钮应当自动地获得焦点。 |
disabled | disabled | 规定应该禁用该按钮。 |
form | form_name | 规定按钮属于一个或多个表单。 |
formaction | url | 覆盖 form 元素的 action 属性。 注释:该属性与 type="submit" 配合使用。 |
formenctype | 见注释 | 覆盖 form 元素的 enctype 属性。 注释:该属性与 type="submit" 配合使用。 |
formmethod |
| 覆盖 form 元素的 method 属性。 注释:该属性与 type="submit" 配合使用。 |
formnovalidate | formnovalidate | 覆盖 form 元素的 novalidate 属性。 注释:该属性与 type="submit" 配合使用。 |
formtarget |
| 覆盖 form 元素的 target 属性。 注释:该属性与 type="submit" 配合使用。 |
name | button_name | 规定按钮的名称。 |
type |
| 规定按钮的类型。 |
value | text | 规定按钮的初始值。可由脚本进行修改。 |
注释:formenctype 属性可能的值:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
HTML <canvas> 标签(画布)
浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。
定义和用法
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
<canvas id="canvas" height="500" width="500"></canvas>具体情况参照api
<script>
var content;
window.onload = function(){
var canvas = document.getElementById("canvas");
content = canvas.getContext("2d");
draw();
};
function draw(){
content.fillStyle="blue";
content.fillRect(100,100,300,300)
}
</script>
HTML <caption> 标签
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
定义表单的标题
定义和用法
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签
定义和用法
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。
我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。
<em> | 把文本定义为强调的内容。 |
<strong> | 把文本定义为语气更强的强调的内容。 |
<dfn> | 定义一个定义项目。 |
<code> | 定义计算机代码文本。 |
<samp> | 定义样本文本。 |
<kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var> | 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |
<cite> | 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。 |
HTML <command> 标签 命令
<menu> <command οnclick="alert('Hello World')"> Click Me!</command> </menu>浏览器支持:
定义和用法
command 元素表示用户能够调用的命令。
<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。
只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
checked | checked | 定义是否被选中。仅用于 radio 或 checkbox 类型。 |
disabled | disabled | 定义 command 是否可用。 |
icon | url | 定义作为 command 来显示的图像的 url。 |
label | text | 为 command 定义可见的 label。 |
radiogroup | groupname | 定义 command 所属的组名。仅在类型为 radio 时使用。 |
type |
| 定义该 command 的类型。默认是 "command"。 |
HTML <datalist> 标签 new lable in HTML5
定义和用法
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
<input list="cars">注意:input 的list特性是用来绑定datalist的,datalist是不会单独显示的,只有在input里输入的相似的值时会做提示作用。
<datalist id="cars">
<option>banz</option>
<option>bmw</option>
<option>长安</option>
</datalist>
浏览器支持
所有主流浏览器都支持 <datalist> 标签,除了 Internet Explorer 和 Safari。
HTML <del> 标签
定义和用法
定义文档中已被删除的文本。
a dozen is <del>20</del>
12 pieces
在浏览器上的效果是被标记的文字会显示一条删除线。
提示和注释:
注释:请与 <ins> 标签配合使用,来描述文档中的更新和修正。
可选的属性
属性 | 值 | 描述 |
---|---|---|
cite | URL | 指向另外一个文档的 URL,此文档可解释文本被删除的原因。 |
datetime | YYYYMMDD | 定义文本被删除的日期和时间。 |
HTML <details> 标签 new lable in HTML5
浏览器支持
目前只有 Chrome 和 Safari 6 支持 <details> 标签。
定义和用法
<details> 标签用于描述文档或文档某个部分的细节。
提示和注释
提示:与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
open | open | 定义 details 是否可见。 |
HTML 5 <dialog> 标签
定义和用法
<dialog> 标签定义对话,比如交谈。
提示和注释
提示:对话中的每个句子都必须属于 <dt> 标签所定义的部分。请看下面的例子。
<dialog open>属性:open控制是否可见。
<dt>老师</dt>
<dd>2+2 等于?</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了!</dd>
HTML <embed> 标签
定义和用法
<embed> 标签定义嵌入的内容,比如插件。(定义外部内容及插件)
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
height | pixels | 设置嵌入内容的高度。 |
src | url | 嵌入内容的 URL。 |
type | type | 定义嵌入内容的类型。 |
width | pixels | 设置嵌入内容的宽度。 |
HTML <fieldset> 标签
定义围绕表单中元素的边框。定义和用法
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。
HTML <figcaption> 标签
定义图片的标题,放在<figure>内<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="">
</figure>
浏览器支持:IE9以上和现代主流的浏览器都支持这个标签
HTML <figure> 标签
定义媒介内容的分组,以及他们的标题。定义和用法
<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。
figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
提示和注释
提示:请使用 <figcaption> 元素为 figure 添加标题(caption)。
HTML <footer> 标签
定义section或者page的页脚定义和用法
<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
HTML <form> 标签
表单标签<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /></form>
定义和用法
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
accept | MIME_type | HTML 5 中不支持。 |
accept-charset | charset_list | 规定服务器可处理的表单数据字符集。 |
action | URL | 规定当提交表单时向何处发送表单数据。 |
autocomplete |
| 规定是否启用表单的自动完成功能。 |
enctype | 见说明 | 规定在发送表单数据之前如何对其进行编码。 |
method |
| 规定用于发送 form-data 的 HTTP 方法。 |
name | form_name | 规定表单的名称。 |
novalidate | novalidate | 如果使用该属性,则提交表单时不进行验证。 |
target |
| 规定在何处打开 action URL。 |
说明
enctype 属性可能的值:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
HTML <frame> 标签
定义窗口集或者框架<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
定义了一个三列的框架,宽度分别是25% 50% 25%
定义和用法
<frame> 标签定义 frameset 中的一个特定的窗口(框架)。
frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。
提示和注释:
注释:如果您希望验证包含框架的页面,请确保 doctype 被设置为 "Frameset DTD"。阅读更多有关 DOCTYPE 的内容。
重要事项:您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过,如果您需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!
可选的属性
属性 | 值 | 描述 |
---|---|---|
frameborder |
| 规定是否显示框架周围的边框。 |
longdesc | URL | 规定一个包含有关框架内容的长描述的页面。 |
marginheight | pixels | 定义框架的上方和下方的边距。 |
marginwidth | pixels | 定义框架的左侧和右侧的边距。 |
name | name | 规定框架的名称。 |
noresize | noresize | 规定无法调整框架的大小。 |
scrolling |
| 规定是否在框架中显示滚动条。 |
src | URL | 规定在框架中显示的文档的 URL。 |
HTML <header> 标签
定义section或者page的页眉Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <header> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <header> 标签。
定义和用法
<header> 标签定义文档的页眉(介绍信息)。
HTML <iframe> 标签
定义内联框架属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
align |
| 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 |
frameborder |
| 规定是否显示框架周围的边框。 |
height |
| 规定 iframe 的高度。 |
longdesc | URL | 规定一个页面,该页面包含了有关 iframe 的较长描述。 |
marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
name | frame_name | 规定 iframe 的名称。 |
sandbox |
| 启用一系列对 <iframe> 中内容的额外限制。 |
scrolling |
| 规定是否在 iframe 中显示滚动条。 |
seamless | seamless | 规定 <iframe> 看上去像是包含文档的一部分。 |
src | URL | 规定在 iframe 中显示的文档的 URL。 |
srcdoc | HTML_code | 规定在 <iframe> 中显示的页面的 HTML 内容。 |
width |
| 定义 iframe 的宽度。 |
HTML <img> 标签
定义图像定义和用法
img 元素向网页中嵌入一幅图像。
请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性:src 属性 和 alt 属性。
HTML <input> 标签
文本输入框定义和用法
<input> 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
align |
| 不赞成使用。规定图像输入的对齐方式。 |
alt | text | 定义图像输入的替代文本。 |
autocomplete |
| 规定是否使用输入字段的自动完成功能。 |
autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。 (不适用于 type="hidden") |
checked | checked | 规定此 input 元素首次加载时应当被选中。 |
disabled | disabled | 当 input 元素加载时禁用此元素。 |
form | formname | 规定输入字段所属的一个或多个表单。 |
formaction | URL | 覆盖表单的 action 属性。 (适用于 type="submit" 和 type="image") |
formenctype | 见注释 | 覆盖表单的 enctype 属性。 (适用于 type="submit" 和 type="image") |
formmethod |
| 覆盖表单的 method 属性。 (适用于 type="submit" 和 type="image") |
formnovalidate | formnovalidate | 覆盖表单的 novalidate 属性。 如果使用该属性,则提交表单时不进行验证。 |
formtarget |
| 覆盖表单的 target 属性。 (适用于 type="submit" 和 type="image") |
height |
| 定义 input 字段的高度。(适用于 type="image") |
list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
max |
| 规定输入字段的最大值。 请与 "min" 属性配合使用,来创建合法值的范围。 |
maxlength | number | 规定输入字段中的字符的最大长度。 |
min |
| 规定输入字段的最小值。 请与 "max" 属性配合使用,来创建合法值的范围。 |
multiple | multiple | 如果使用该属性,则允许一个以上的值。 |
name | field_name | 定义 input 元素的名称。 |
pattern | regexp_pattern | 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
placeholder | text | 规定帮助用户填写输入字段的提示。 |
readonly | readonly | 规定输入字段为只读。 |
required | required | 指示输入字段的值是必需的。 |
size | number_of_char | 定义输入字段的宽度。 |
src | URL | 定义以提交按钮形式显示的图像的 URL。 |
step | number | 规定输入字的的合法数字间隔。 |
type |
| 规定 input 元素的类型。 |
value | value | 规定 input 元素的值。 |
width |
| 定义 input 字段的宽度。(适用于 type="image") |
HTML <keygen> 标签
定义和用法
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时,私钥存储在本地,公钥发送到服务器。
<form>
username:<input type="text" name="user-name">
Encryption:<keygen name="keygen"></keygen>
<input type="submit">
</form>
浏览器支持
所有主流浏览器都支持 <keygen> 标签,除了 Internet Explorer 和 Safari。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
autofocus | autofocus | 使 keygen 字段在页面加载时获得焦点。 |
challenge | challenge | 如果使用,则将 keygen 的值设置为在提交时询问。 |
disabled | disabled | 禁用 keytag 字段。 |
form | formname | 定义该 keygen 字段所属的一个或多个表单。 |
keytype | rsa | 定义 keytype。rsa 生成 RSA 密钥。 |
name | fieldname | 定义 keygen 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。 |
HTML <label> 标签
定义input元素的标注<form>注意:做相关联的时候,lable的for一定要和input的ID值一致才能匹配<label for="male">Male</label>
<input type="radio" name="sex" id="male" /> <br /><label for="female">Female</label>
<input type="radio" name="sex" id="female" /> </form>
定义和用法
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
HTML <legend> 标签
定义fileset标签的标题<form>
<fieldset>
<legend>info</legend>
<label for="xman">man</label>
<input type="radio" id="xman" name="sex">
<label for="xwoman">woman</label>
<input type="radio" id="xwoman" name="sex">
身高:<input type="text" class="person-height">
体重:<input type="text" class="person-weight">
</fieldset>
</form>
HTML <map> 标签
实例
带有可点击区域的图像映射:
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /></map>
定义和用法
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
提示和注释:
注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
注释:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
必需的属性
属性 | 值 | 描述 |
---|---|---|
id | unique_name | 为 map 标签定义唯一的名称。 |
HTML <mark> 标签
马克笔的的效果突出显示部分文本:
<p>Do not forget to buy <mark>milk</mark>
today.</p>
浏览器支持
定义和用法
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
HTML <menu> 标签
定义命令列表或者菜单实例
带有两个菜单按钮 ("File" 和 "Edit") 的工具栏,每个按钮都包含带有一系列选项的下拉列表:
浏览器支持:<menu type="toolbar">
<li> <menu label="File"> <button type="button" οnclick="file_new()">New...</button> <button type="button" οnclick="file_open()">Open...</button> <button type="button" οnclick="file_save()">Save</button> </menu> </li> <li> <menu label="Edit"> <button type="button" οnclick="edit_cut()">Cut</button> <button type="button" οnclick="edit_copy()">Copy</button> <button type="button" οnclick="edit_paste()">Paste</button> </menu> </li></menu>
HTML <menuitem> 标签
实例
包含不同 <menuitem> 元素的上下文菜单:
<menu type="context" id="mymenu"> <menuitem label="Refresh" οnclick="window.location.reload();" icon="ico_reload.png"> </menuitem> <menu label="Share on..."> <menuitem label="Twitter" icon="ico_twitter.png" οnclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);"> </menuitem> <menuitem label="Facebook" icon="ico_facebook.png" οnclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);"> </menuitem> </menu> <menuitem label="Email This Page" οnclick="window.location='mailto:?body='+window.location.href;"></menuitem> </menu>
HTML <meter> 标签
预定义度量值(进度条的量度)新标签<meter value="10" min="0" max="100"></meter>进度条的长短是通过计算value值在max中占的百分比来显示长度的
定义和用法
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。
例子:磁盘用量、查询结果的相关性,等等。
注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
form | form_id | 规定 <meter> 元素所属的一个或多个表单。 |
high | number | 规定被视作高的值的范围。 |
low | number | 规定被视作低的值的范围。 |
max | number | 规定范围的最大值。 |
min | number | 规定范围的最小值。 |
optimum | number | 规定度量的优化值。 |
value | number | 必需。规定度量的当前值。 |
HTML <nav> 标签
定义导航链接,代替使用<div class="nav">定义和用法
<nav> 标签定义导航链接的部分。
HTML <ol> 标签
HTML <optgroup> 标签
定义选择列表中相应的组。<form>浏览器支持:
<select>
<optgroup label="lady">
<option>sherry</option>
<option>marry</option>
</optgroup>
<optgroup label="gentle">
<option>轿车</option>
<option>跑车</option>
</optgroup>
</select>
</form>
HTML <option> 标签
下拉选择框里的选项标签。定义和用法
option 元素定义下拉列表中的一个选项(一个条目)。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。
可选的属性
属性 | 值 | 描述 |
---|---|---|
disabled | disabled | 规定此选项应在首次加载时被禁用。 |
label | text | 定义当使用 <optgroup> 时所使用的标注。 |
selected | selected | 规定选项(在首次显示在列表中时)表现为选中状态。 |
value | text | 定义送往服务器的选项值。 |
HTML <output> 标签
定义一些输出类型定义和用法
<output> 标签定义不同类型的输出,比如脚本的输出。
实例:
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">
<span>0</span>
<input type="range" id="a" value="50">
<span>100</span>
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
for | element_id | 定义输出域相关的一个或多个元素。 |
form | form_id | 定义输入字段所属的一个或多个表单。 |
name | name | 定义对象的唯一名称。(表单提交时使用) |
HTML <progress> 标签
进度标签(新标签)提示和注释
提示:请结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。
注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。
<progress class="progress" value="0" max="100"></progress>JS:
function addProgress(){
var p =$(".progress");
var number = parseInt(p.attr("value"));
if(number<100){
number+=10;
p.attr("value",number);
}else{
alert("you finish is job")
window.clearInterval(timer);
}
HTML <rp> 标签
实例
一个 ruby 注释:
<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>浏览器支持:
定义和用法
<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
ruby 注释是中文注音或字符。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
HTML <summary> 标签
为 <details> 元素定义可见的标题。定义和用法
<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。
HTML <section> 标签
实例
文档中的区段,解释了 PRC:
<section>
<h1>PRC</h1> <p>The People's Republic of China was born in 1949...</p></section>
定义和用法
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
HTML <source> 标签
定义媒介源实例
拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件(如果有的话):
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>浏览器支持:
定义和用法
<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
media | media query | 规定媒体资源的类型。 |
src | url | 规定媒体文件的 URL。 |
type | numeric value | 规定媒体资源的 MIME 类型。 |
HTML <tbody> 标签
<table>
<thead>
<tr >
<th>month</th>
<th>day</th>
</tr>
</thead>
<tbody>
<tr>
<td>6</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>data</td>
<td>hour</td>
</tr>
</tfoot>
</table>
定义和用法
<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。
详细描述
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有 能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
提示和注释:
注释:<thead> 内部必须拥有 <tr> 标签!
注释:<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。假如您使用 Internet Explorer 5.0 或更新的浏览器,可以在我们的 XML 教程中查看一个例子。
HTML <time> 标签
定义时间:不会有任何的特殊效果,知识具有语义的标签定义和用法
<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
datetime | datetime | 规定日期 / 时间。否则,由元素的内容给定日期 / 时间。 |
pubdate | pubdate | 指示 <time> 元素中的日期 / 时间是文档(或 <article> 元素)的发布日期。 |
HTML <track> 标签
定义用在媒体播放器中的文本轨道。实例
播放带有字幕的视频:
浏览器支持:
Internet Explorer 10, Chrome 以及 Opera 支持 <track> 标签。
目前所有主流浏览器都不支持 <track> 标签。
实例
<video width="320" height="240" controls="controls"> <source src="forrest_gump.mp4" type="video/mp4" /> <source src="forrest_gump.ogg" type="video/ogg" /> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> </video>
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
default | default | 规定该轨道是默认的,假如没有选择任何轨道。 |
kind |
| 表示轨道属于什么文本类型。 |
label | label | 轨道的标签或标题。 |
src | url | 轨道的 URL。 |
srclang | language_code | 轨道的语言,若 kind 属性值是 "subtitles",则该属性必需的。 |