HTML5新特性

发表于 | 分类于

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

用于绘画的 canvas 元素

canvas标签定义图形，比如图表和其他图像。
canvas标签只是图形容器，您必须使用脚本来绘制图形。

1
2
3
4
5
6
7
8
9
10
<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

用于媒介回放的 video 和 audio 元素

video

video元素支持三种视频格式：MP4,WebM和Ogg:
MP4 = 带有H.264视频编码和AAC音频编码的MPEG4文件
WebM = 带有VP8视频编码和Vorbis音频编码的WebM文件
Ogg = 带有Theora视频编码和Vorbis音频编码的Ogg文件

1
2
3
4
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

audio

audio元素支持三种音频格式文件:MP3,Wav和Ogg:
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

1
2
3
4
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

对本地离线存储的更好的支持

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

1
2
3
4
5
6
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
内容
</body>
</html>

新的特殊内容元素

article

article标签定义外部的内容。
外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

1
2
3
4
5
<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, 
Apple announced the release of Safari 5 for Windows and Mac......
</article>

footer标签定义文档或节的页脚。
footer元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个footer元素。

1
2
3
4
<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

header标签定义文档的页眉（介绍信息）

1
2
3
4
5
6
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

<p>The rest of my home page...</p>

nav标签定义导航链接的部分。

1
2
3
4
5
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

section

section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

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

新的表单控件

值 描述
button 定义可点击的按钮（大多与JavaScript使用来启动脚本）
checkbox 定义复选框。
color 5 定义拾色器。
date 5 定义日期字段（带有calendar控件）
datetime 5 定义日期字段（带有calendar和time控件）
datetime-local 5 定义日期字段（带有calendar和time控件）
month 5 定义日期字段的月（带有calendar控件）
week 5 定义日期字段的周（带有calendar控件）
time 5 定义日期字段的时、分、秒（带有time控件）
email 5 定义用于e-mail地址的文本字段
file 定义输入字段和”浏览…”按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 5 定义带有spinner控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 5 定义带有slider控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 5 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 5 定义用于电话号码的文本字段。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是20个字符。
url 5 定义用于URL的文本字段。