HTML5读书笔记（三）

三HTML5标签

本次就主要记录一下ＨＴＭＬ５那些新的标签，对于老的哪些用法都一样。

<article>标签

<article><a href="http://www.baidu.com">baidu</a></article>

<article>标签的内容独立于文档的其余部分。

<aside>标签

<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

<aside>标签定义所处内容之外的内容，也就是说aside标签里的内容应该与附近的内容有关。

<audio>标签

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

<audio>标签定义音频文件。

其属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

<bdi>标签

<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

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

其属性

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

<canvas>标签

<canvas id="myCanvas"></canvas>

<canvas>标签定义画布，为图形容器。

其属性

属性	值	描述
height	pixels	设置 canvas 的高度。
width	pixels	设置 canvas 的宽度。

<command>标签

<menu>
<command οnclick="alert('Hello World')">
Click Me!</command>
</menu>

<command>标签可以定义命令按钮，比如单选按钮，复选框或按钮。（该标签只有位于menu元素内时，该元素才是可见的。） 目前只有 Internet Explorer 支持 <command> 标签。

属性

属性	值	描述
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"。

<datalist>标签

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

<datalist> 与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

<details>标签

<details>
<summary>程序入门</summary>
<p>hello world!!</p>
</details>

<details>标签描述文档或文档某个部分的细节。目前只有Chrome支持此标签。

属性

属性	值	描述
open	open	定义 details 是否可见。

<embed>标签

<embed src="helloworld.swf" />

<embed> 标签定义嵌入的内容，比如插件。

属性

new : HTML5 中的新属性。

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

<figure>标签

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

<figure>标签规定独立的流内容。

<figcaption>标签

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

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

<footer>标签

<footer>This document was written in 2010</footer>

<footer> 标签定义 section 或 document 的页脚。

<hgroup>标签

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

<keygen>标签

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

<keygen>标签规定用于表单的密 钥对生成器字段，但提交表单是，私钥储存在本地，公钥发送到服务器。

属性

new : HTML5 中的新属性。

属性	值	描述
autofocus	autofocus	使 keygen 字段在页面加载时获得焦点。
challenge	challenge	如果使用，则将 keygen 的值设置为在提交时询问。
disabled	disabled	禁用 keytag 字段。
form	formname	定义该 keygen 字段所属的一个或多个表单。
keytype	rsa	定义 keytype。rsa 生成 RSA 密钥。
name	fieldname	定义 keygen 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。

<mark>标签

<p>Do not forget to buy <mark>milk</mark> today.</p>

<mark>标签定义带有记号的文本，以便于突出显示。

<meter>标签

<meter min="0" max="20">5</meter>

<meter>2 out of 10</meter>

<meter>30%</meter>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

属性

属性	值	描述
high	number	定义度量的值位于哪个点，被界定为高的值。
low	number	定义度量的值位于哪个点，被界定为低的值。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。 如果该值高于 "high" 属性，则意味着值越高越好。 如果该值低于 "low" 属性的值，则意味着值越低越好。
value	number	定义度量的值。

<outPut>标签

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

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

属性

属性	值	描述
for	id of another element	定义输出域相关的一个或多个元素。
form	formname	定义输入字段所属的一个或多个表单。
name	unique name	定义对象的唯一名称。（表单提交时使用）

<progress>标签

对象的下载进度：
<progress>
<span id="objprogress">85</span>%
</progress>

<progress>定义运行中的进度。

属性

属性	值	描述
max	number	定义完成的值。
value	number	定义进程的当前值。

<section>标签

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

<section>定义文档中的节。比如章节，页眉，页脚或文档中的其他部分。

属性

属性	值	描述
cite	URL	section 的 URL，假如 section 摘自 web 的话。

<source>标签

<source>标签媒介元素定义媒介资源。

属性

属性	值	描述
media	media query	定义媒介资源的类型，供浏览器决定是否下载。
src	url	媒介的 URL。
type	numeric value	定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。

<smmary>标签

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

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

<time>标签

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

<time>标签定义公历的时间或日期，时间和时区偏移是可选的。

属性

属性	值	描述
datetime	datetime	规定日期 / 时间。否则，由元素的内容给定日期 / 时间。
pubdate	pubdate	指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。

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

<track>标签为诸如video元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。目前主流浏览器都不支持<track>。

属性

new : HTML5 中的新属性。

属性	值	描述
default	default	规定该轨道是默认的，假如没有选择任何轨道。
kind	captions chapters descriptions metadata subtitles	表示轨道属于什么文本类型。
label	label	轨道的标签或标题。
src	url	轨道的 URL。
srclang	language_code	轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的。

<video>标签

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

<video>标签定义视频，比如电影片段。

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

(ps:这东西整理的蛋疼，感觉不会再爱了 )