目录
  1. 1. 用于绘画的 canvas 元素
  2. 2. 用于媒介回放的 video 和 audio 元素
    1. 2.1. video
    2. 2.2. audio
  3. 3. 对本地离线存储的更好的支持
  4. 4. 新的特殊内容元素
    1. 4.1. article
    2. 4.2. footer
    3. 4.3. header
    4. 4.4. nav
    5. 4.5. section
  5. 5. 新的表单控件
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的文本字段。
文章作者: Hyman Choi
文章链接: http://yoursite.com/2018/07/17/HTML5新特性/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 凌晨四点的拖拉机