H5笔记（二）

HTML5的元素(在HTML4元素的基础上增加的）

结构元素
header：示页面中一个内容区块或整个页面的标题
footer： 表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息
section：表示页面中的一个内容区块，如章节、页眉、页脚或页面中的其他部分。它可以与h1~h6等元素结合使用，标识文档结构
article：表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章
aside：表示article元素的内容之外的、与article的内容相关的辅助信息
nav：表示页面中的导航链接的部分
main：表示网页中的主要内容。主要内容区域指向与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容
figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。可以使用figcaption元素为figure元素组添加标题

功能元素
hgroup:用于对整个页面或页面中的一个内容区块的标题进行组合。
<hgroup>...</hgroup> H4中表示为 <div>...</div>

video:定义视频，比如电影片段或其他视频流。
<video src="movie.ogg" controls="controls">video元素</video>
H4中表示为
object type="video/ogg" data="movie.ogv">
<param name="src" value="movie.ogv">
</object>

audio:定义音频，比如音乐或其他音频流。
audio src="someaudio.wav">audio元素</audio>
H4中表示为
object type="application/ogg" data="someaudio.wav">
<param name="src" value="someaudio.wav">
</object>

embed:用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。
<mbed src="horse.wav" />
H4中表示为
object data="flash.swf" type="application/x-shockwave-flash"></object>

mark:主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。
<mark></mark> H4中表示为 <span></span>

dialog:定义对话框或窗口。
<dialog open>这是打开的对话窗口</dialog>
H4中表示为
<div id="dialog">这是打开的对话窗口</div>

bdi (Bi-directional Isolation):定义文本的文本方向，使其脱离其周围文本的方向设置
<ul>
<li>Username <bdi>Bill</bdi>:82 points</li>
<li>Username <bdi>Steve</bdi>:78 points</li>
</ul>

figcaption:定义figure元素的标题。
<figure>
<figcaption>黄埔江上的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
H4中表示为
<div id="figure">
<h2>黄埔江上的卢浦大桥</h2>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</div>

time:表示日期或时间，也可以同时表示两者。
<time></time> H4中表示为 <span></span>

canvas:表示图形，如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。
<canvas id="myCanvas" width="200" height="200"></canvas>
H4中表示为
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

output:表示不同类型的输出，比如脚本的输出。
<output></output> H4中表示为 <span></span>

source:为媒介元素（比如和）定义媒介资源。
<source> H4中表示为 <param>

menu:表示菜单列表。当希望列出表单控件时使用该标签。
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

ruby:表示ruby注释（中文注音或字符）
<ruby>汉<rt><rp>(</rp>——'<rp>)</rp></rt></ruby>

rt:表示字符（中文注音或字符）的解释或发音。
<ruby>汉<rt>——'</rt></ruby>

rp:在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。
<ruby>汉<rt><rp>(</rp>——'<rp>)</rp></rt></ruby>

wbr (weak break):表示软换行。wbr元素与br元素的区别：br表示此处必须换行；而wbr元素表示没必要换行时不换行，而当宽度不够时，主动换行。

command:表示命令按钮，如单选按钮，复选框或按钮。
<command onclick="cut()" label="cut">

details:表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或者图例。标题是可见的，用户单击标题时，会显示细节信息。summary元素应该是details元素的第一个子元素
<details>
<summary>HTML5</summary>
Fot the latest updates from the HTML WG,。。。
</details>

summary: 为details元素定义可见的标题。

datalist:datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。
<datalist></datalist>

datagrid:表示可选数据的列表，它以树形列表的形式来显示。
<datagrid></datagrid>

keygen (key generate):表示生成密匙。
<keygen>

progress:表示运行中的进程，可以使用progress元素来显示JavaScript中耗费时间的函数的进程。
<progress></progress>

meter:度量给定范围（gauge）内的数据
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>

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>

表单元素

tel: ,表示必须输入电话号码的文本框
search: ,表示搜索文本框
url: ,表示必须输入URL地址的文本框
email: ,表示必须输入电子邮件地址的文本框
datetime: ,表示日期和时间文本框
date: ,表示日期文本框
month: ,表示月份文本框
week: ,表示周几文本框
time: ,表示时间文本框
datetime-local:,表示本地日期和时间文本框
number: ,表示必须输入数字的文本框
range: ,表示范围文本框
color: ,表示颜色文本框

HTML5属性（H5增加和废除了很多属性）

表单属性
为input(type=text)、select、textarea与button元素新增加autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点。
为input(type=text)、与textarea元素新增加placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。
为input、output、select、textarea、button与fieldset新增加form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内
为input元素（type=text）与textarea元素新增加required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容
为input元素增加autocomplete、min、max、multiple、pattern和step属性。同时还有一个新的list元素与datalist配合使用。datalist元素与autocomplete属性配合使用。multiple属性允许在上传文件时一次上传多个文件
为input元素与button元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget，他们可以重载form元素的action、enctype、method、novalidate与target属性。为fieldset元素增加了disabled属性，可以把它的子元素设为disabled（无效）状态
为input元素、button元素、form元素增加了novalidate属性，该属性可以取消提交时?进行的有关检查，表单可以被无条件地提交。

链接属性
为a与area元素增加了media属性，该属性规定了目标URL是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用
为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素的一致
为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标(icon元素)的大小
为base元素增加了target属性，主要目的是保持与a元素的一致性

其它属性
为ol元素增加属性reversed，它指定列表倒序显示
为meta元素增加了charset属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的指定提供了一种比较良好的方式
为menu元素增加了两个新属性—type与label。label属性为菜单定义了一个可见的标注，type属性让菜单可以上下文菜单、工具条与列表菜单3种形式出现
为style元素增加了scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用
为script元素增加async属性，它定义脚本是否异步执行
为html元素增加属性manifest，开发离线web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息
为iframe元素增加3个属性，即sandbox、seamless、与srcdoc，用来提高页面安全性，防止不信任的Web页面执行某些操作

HTML5全局属性
contentEditable:是否允许在线编辑，含有隐藏状态inherit状态
contextmenu(只有firefox支持）:
data-*：
draggable:是否可以拖动(IE9+、Firefox、Opera、Chrome和Safari）
hidden:(IE不支持）
spellcheck:定义是否对元素进行拼写和语法检查