zoukankan html css js c++ java

HTML5 W3C 标签学习笔记

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 的属性。

例子：

<a href="http://www.baidu.com">点击到百度</a>

属性	描述	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."。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

表示定义的缩写形式，如下代码所示，在部分浏览器上如果设置了title属性，那么在用户光标焦点在abbr标签上的时候会显示title的值。

<abbr title="javascript">JS</abbr>

HTML <address> 标签

浏览器支持

所有浏览器都支持 <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> 标签。

定义和用法

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。（在图像上用此标签定义的部分区域是可以点击的，点击之后可以单独出来显示。）

area 元素总是嵌套在 <map> 标签中。

注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

提示和注释：

注释：<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。

必需的属性

属性	值	描述
alt	text	定义此区域的替换文本。

可选的属性

属性	值	描述
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标。
href	URL	定义此区域的目标 URL。
nohref	nohref	从图像映射排除某个区域。
shape	default rect circ poly	定义区域的形状。
target	_blank _parent _self _top	规定在何处打开 href 属性指定的目标 URL。

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全局属性

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的新标签，浏览器支持有限：

现在只有firefox 和chrome 浏览器支持这个标签。

定义和用法

bdi 指的是 bidi 隔离。

<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时，该标签很有用。

属性

属性	值	描述
dir	ltr rtl auto	可选。规定 <bdi> 元素内的文本的文本方向。默认值：auto。

属性值值描述 ltr 默认。从左向右的文本方向。 rtl 从右向左的文本方向。

HTML <bdo> 标签

定义和用法

bdo 元素可覆盖默认的文本方向。

浏览器兼容：

所有浏览器都支持这个标签

可选的属性

属性	值	描述
dir	ltr rtl	定义文字的方向

（l在哪里就代表是从哪里开始）

HTML <big> 标签

定义和用法

<big> 标签呈现大号字体效果。

使用 <big> 标签可以很容易地放大字体。这简直不能再简单了：浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big> 标签将不起任何作用。

更妙的是，可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号，直到上限 7 号文本，正如字体模型所定义的那样。

但是使用 <big> 标签的时候还是要小心，因为浏览器总是很宽大地试图去理解各种标签，对于那些不支持 <big> 标签的浏览器来说，它经常将其认为是粗体字标签。

浏览器兼容：

所有浏览器都支持这个标签

HTML <blockquote> 标签（块级引用）

定义和用法

<blockquote> 标签定义块引用。

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

代码：

<html>

<body>

Here comes a long quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

</blockquote>

请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。

</body>

</html>

提示和注释：

提示：请使用 q 元素来标记短的引用。

注释：如需把页面作为 strict XHTML 进行验证，那么 <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	get post	覆盖 form 元素的 method 属性。注释：该属性与 type="submit" 配合使用。
formnovalidate	formnovalidate	覆盖 form 元素的 novalidate 属性。注释：该属性与 type="submit" 配合使用。
formtarget	_blank _self _parent _top framename	覆盖 form 元素的 target 属性。注释：该属性与 type="submit" 配合使用。
name	button_name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
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>
<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>

具体情况参照api

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 onclick="alert('Hello World')">
Click Me!</command>
</menu>

浏览器支持：

只有IE9能支持这个标签

定义和用法

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	checkbox command radio	定义该 command 的类型。默认是 "command"。

HTML <datalist> 标签 new lable in HTML5

定义和用法

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

<input list="cars">
<datalist id="cars">
    <option>banz</option>
    <option>bmw</option>
    <option>长安</option>
</datalist>

注意:input 的list特性是用来绑定datalist的，datalist是不会单独显示的，只有在input里输入的相似的值时会做提示作用。

浏览器支持

所有主流浏览器都支持 <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>
    <dt>老师</dt>
    <dd>2+2 等于？</dd>
    <dt>学生</dt>
    <dd>4</dd>
    <dt>老师</dt>
    <dd>答对了！</dd>

属性：open控制是否可见。

HTML <embed> 标签

定义和用法

属性

new : HTML5 中的新属性。

属性	值	描述
height	pixels	设置嵌入内容的高度。
src	url	嵌入内容的 URL。
type	type	定义嵌入内容的类型。
width	pixels	设置嵌入内容的宽度。

HTML <fieldset> 标签

定义围绕表单中元素的边框。

所有浏览器都支持这个标签

<form>

身高：<input type="text" />

体重：<input type="text" />

</fieldset>

</form>

定义和用法

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

HTML <figcaption> 标签

定义图片的标题，放在<figure>内

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="">
</figure>

浏览器支持：IE9以上和现代主流的浏览器都支持这个标签

定义和用法

<figcaption> 标签定义 figure 元素的标题（caption）。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

HTML <figure> 标签

定义媒介内容的分组，以及他们的标题。

所有主流浏览器都支持这个标签。

定义和用法

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

提示和注释

提示：请使用 <figcaption> 元素为 figure 添加标题（caption）。

HTML <footer> 标签

定义section或者page的页脚

IE8之前的浏览器不支持。

定义和用法

<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	on off	规定是否启用表单的自动完成功能。
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
method	get post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top framename	规定在何处打开 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	0 1	规定是否显示框架周围的边框。
longdesc	URL	规定一个包含有关框架内容的长描述的页面。
marginheight	pixels	定义框架的上方和下方的边距。
marginwidth	pixels	定义框架的左侧和右侧的边距。
name	name	规定框架的名称。
noresize	noresize	规定无法调整框架的大小。
scrolling	yes no auto	规定是否在框架中显示滚动条。
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	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。
width	pixels %	定义 iframe 的宽度。

HTML <img> 标签

定义图像

定义和用法

img 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性：src 属性和 alt 属性。

HTML <input> 标签

文本输入框

定义和用法

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

属性

new : HTML5 中的新属性。

属性	值	描述
accept	mime_type	规定通过文件上传来提交的文件的类型。
align	left right top middle bottom	不赞成使用。规定图像输入的对齐方式。
alt	text	定义图像输入的替代文本。
autocomplete	on off	规定是否使用输入字段的自动完成功能。
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	get post	覆盖表单的 method 属性。（适用于 type="submit" 和 type="image"）
formnovalidate	formnovalidate	覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。
formtarget	_blank _self _parent _top framename	覆盖表单的 target 属性。（适用于 type="submit" 和 type="image"）
height	pixels %	定义 input 字段的高度。（适用于 type="image"）
list	datalist-id	引用包含输入字段的预定义选项的 datalist 。
max	number date	规定输入字段的最大值。请与 "min" 属性配合使用，来创建合法值的范围。
maxlength	number	规定输入字段中的字符的最大长度。
min	number date	规定输入字段的最小值。请与 "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	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。
value	value	规定 input 元素的值。
width	pixels %	定义 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>
  <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>

注意：做相关联的时候，lable的for一定要和input的ID值一致才能匹配

定义和用法

<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>

浏览器支持

Internet Explorer 8 以及更早的版本不支持 <mark> 标签。

定义和用法

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

HTML <menu> 标签

定义命令列表或者菜单

实例

带有两个菜单按钮（"File" 和 "Edit"）的工具栏，每个按钮都包含带有一系列选项的下拉列表：

<menu type="toolbar">
 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...</button>
 <button type="button" onclick="file_open()">Open...</button>
 <button type="button" onclick="file_save()">Save</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cut</button>
 <button type="button" onclick="edit_copy()">Copy</button>
 <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
 </li>
</menu>

浏览器支持：

目前所有浏览器都不支持这个标签。

HTML <menuitem> 标签

定义用户可以通过鼠标右键调用的菜单项目

实例

包含不同 <menuitem> 元素的上下文菜单：

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

HTML <meter> 标签

预定义度量值（进度条的量度）新标签

<meter value="10" min="0" max="100"></meter>

进度条的长短是通过计算value值在max中占的百分比来显示长度的

浏览器支持：

除了IE之外的主流浏览器都支持这个标签

定义和用法

<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">

浏览器支持，IE8及更早的版本不支持这个标签。

定义和用法

<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> 标签

定义一些输出类型

浏览器支持：

IE不支持这个标签

定义和用法

<output> 标签定义不同类型的输出，比如脚本的输出。

实例：

<form oninput="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> 标签

进度标签（新标签）

浏览器支持：

IE9之前的版本不支持这个标签

提示和注释

提示：请结合 <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>

浏览器支持：

IE8及之前的浏览器不支持。

定义和用法

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

ruby 注释是中文注音或字符。

在东亚使用，显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用：

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

HTML <summary> 标签

为 <details> 元素定义可见的标题。

定义和用法

<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

提示和注释

提示：请与 <details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。

注释："summary" 元素应该是 "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>

浏览器支持：

IE8及之前的浏览器不支持这个标签

定义和用法

<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	captions chapters descriptions metadata subtitles	表示轨道属于什么文本类型。
label	label	轨道的标签或标题。
src	url	轨道的 URL。
srclang	language_code	轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的。

查看全文

相关阅读:
C#网络编程之Http请求
 使用 pdf.js 在网页中加载 pdf 文件
 程序员转型技术管理，这几本书不能错过
 HTTPS小结、TSL、SSL
clipboard 在 vue 项目中，on 事件监听回调多次执行
 Vue 引入 .md 文件，解析markdown语法
 Vue cli4.0 代理配置
 npm publish 一直报错 404
JSON 多层对象获取键值
 Tomcat8配置Https协议，Tomcat配置Https安全访问，Tomcat Https配置

原文地址：https://www.cnblogs.com/gavinzzh-firstday/p/5564240.html

HTML5 W3C 标签学习笔记

HTML 5 <!DOCTYPE> 标签

定义和用法

HTML 4.01 与 HTML 5 之间的差异

HTML 5 <a> 标签

定义和用法

HTML 4.01 与 HTML 5 之间的差异

HTML 5 <abbr> 标签

定义和用法

HTML <address> 标签

浏览器支持

定义和用法

提示和注释

HTML <applet> 标签（applet java的程序）

定义和用法

必需的属性

HTML <area> 标签

浏览器支持

定义和用法

提示和注释：

必需的属性

可选的属性

HTML <article> 标签

定义和用法

HTML <aside> 标签

定义和用法

提示和注释：

HTML <audio> 标签 音频标签

实例

属性

HTML <b> 标签

提示和注释

HTML <base> 标签

定义和用法

HTML <bdi> 标签

定义和用法

属性

HTML <bdo> 标签

定义和用法

可选的属性

HTML <big> 标签

定义和用法

HTML <blockquote> 标签（块级引用）

定义和用法

提示和注释：

HTML <button> 标签

实例

定义和用法

属性

HTML <canvas> 标签（画布）

定义和用法

HTML <caption> 标签

定义和用法

HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签

定义和用法

HTML <command> 标签 命令

定义和用法

属性

HTML <datalist> 标签 new lable in HTML5

定义和用法

浏览器支持

HTML <del> 标签

定义和用法

提示和注释：

可选的属性

HTML <details> 标签 new lable in HTML5

浏览器支持

定义和用法

提示和注释

属性

HTML 5 <dialog> 标签

定义和用法

提示和注释

HTML <embed> 标签

定义和用法

属性

HTML <fieldset> 标签

定义和用法

HTML <figcaption> 标签

定义和用法

HTML <audio> 标签音频标签

HTML <command> 标签命令