HTML5新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/yzzky/article/details/44903913

RIA:针对bs开发的，如flex ，silverlight，html5，flash(动画)

html5：优秀学习网站：www.html5cn.org www.html5china.com www.mhtml5.com

html5 大致等于 html+css3+javascript api 总的说html5支持了css3强大的选择器和动画等功能+支持javascript

html5新增功能：

1. <canvas> 标签，这个标签在一定程度上可以替代flash

eg：

//通知浏览器这是html网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>

<body >

<canvas id="test" width="400px" height="300px" style="background-color:red">
</canvas>
<script type="text/javascript">

//得到画布
var canvas1=document.getElementById("test");
//得到绘图上下文(你可以理解是画笔)
var cxt=canvas1.getContext("2d");
cxt.fillRect(10,10,30,30);

</script>
</body>
</html>

2. 增加了header和footer 标签做到内容和结构分里利于seo

<html>

hello,world

</html>

3. 增加音频和视频嵌入功能<video>和<audio>，我们的视频和音频嵌入变得非常容易

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>

<body >

<video src = "D:\xx\2\1.mp4" controls= "controls"
width = "900px" height = "900px" >
</video>

</body>
</html>

4. 增加离线存储功能

传统的方案：传统网站如果不能能上午侧网页就无法正常浏览

支持html5的网站：访问网站的资源，保存url清单文件，通过网络下载下来，存在他内置的数据库，如果断网仍然可以访问数据库中的资源。使用的技术为 web storage apis技术类似于网盘的功能。

5. html语音识别功能

语言识别: http://www.html5china.com/course/20120530_3747.html

实例：http://www.zhangxinxu.com/study/201205/html5-speech-demo.html
图像识别: http://www.html5china.com/course/20120528_3742.html
html5游戏: http://www.html5china.com/game/

6. html5支持css3的各种功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Animations功能使用方法</title>
<style>
div {
background-color: red;
}
@-webkit-keyframes mycolor {
0% {
background-color: red;
}
40% {
background-color: darkblue;
}
70% {
background-color: yellow;
}
100% {
background-color: red;
}
}
div:hover {
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
}
</style>
</head>
<body>
<div>动画文字</div>
</body>
</html>

//间隔显示不同的文字，传统方法是定义两个不同的选择器来实现

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:nth-child(even){color:red;}
</style>
</head>
<p>P One</p>
<p>P Two</p>
<p>P One</p>
<p>P Two</p>
</html>

6. 增加拖放，跨文档消息，浏览器历史管理等

7. 增强各大浏览器的兼容性.

网页设计是最大的困惑不同浏览器同义页面，效果不一样

HTML5在引入新标签的同时，废弃了不少常见元素，大抵分为如下几类。
8. HTML5放弃的标签
第一类：表现性元素
basefont /big/center/font/s/strike/tt/u
建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果
第二类：框架类元素
因框架有很多可用性及可访问性问题，HTML5规范将以下元素移
除。frame/frameset/noframes，但html5支持iframe。
第三类:属性类
很多表现性的属性也被新规范移除，如下：
align/body标签上的link、vlink、alink、text属性/bgcolor /height和width
iframe元素上的scrolling属性/valign/hspace和vspace
table标签上的cellpadding、cellspacing和border属性
header标签上的profile属性
img和iframe元素的longdesc属性
第四类：其他
abbr取代acronym（用于表示缩写）
object取代了applet
ul取代了dir