HTML5新元素
一、<canvas>新元素
标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。
相当于一块画布
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
支持内连SVG
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
绘制一个五角星
<!DOCTYPE html><html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
Others
1.拖放:drag and drop
2.获取地理位置(可调用显示地图),可跟踪显示用户移动更新位置
3.新的input输入值:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
二、新多媒体元素
视频<video>
音频<audio>
三、新表单元素
HTML5 有以下新的表单元素:
- <datalist> 元素规定输入域的选项列表。
- <keygen> 元素的作用是提供一种验证用户的可靠方法
- <output> 元素用于不同类型的输出,比如计算或脚本输出,可变值输出
若干语义属性
四、HTML5 其他性能
1. web 存储:使用HTML5可以在本地存储用户的浏览数据。
2. 应用程序缓存:这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问
3. web worker:
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
4. SSE(Server-Sent Event)
Server-Sent 事件指的是网页自动获取来自服务器的更新。