HTML5 学习笔记（2）

来源：互联网发布：有关网络暴力的法律编辑：程序博客网时间：2024/06/06 06:52

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
email
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 事件指的是网页自动获取来自服务器的更新。

0 0

HTML5 学习笔记 （2）

HTML5 学习笔记（2）