HTML5

来源：互联网发布：淘宝访客数编辑：程序博客网时间：2024/06/05 16:33

HTML5 视频
<video></video>元素来包含视频的标准方法
支持格式：Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
示例：
<!DOCTYPE HTML>
<html>
<body>

</body>
</html>

<video>属性
autoplay autoplay 拥有此属性，视频在就绪后就马上播放
controls controls 此属性向用户显示控件(播放，音量等)
height  PIXELS  视频播放器高度
loop  loop  拥有此属性，视频播放完成后再次播放
preload  preload  视频在页面加载时进行加载并预备播放
src  URL  播放视频的URL
width  PIXELS  设置播放器宽度

HTML5 音频
<audio>元素能够播放声音文件或音频流
支持格式:Ogg Vorbis、MP3、Wav

<audio>属性
autoplay autoplay 音频就绪后马上播放
controls controls 向用户显示控件
loop  loop  音频结束后再次播放
preload  preload  页面加载时加载，并预备播放
src  URL  音频URL

HTML5 拖放（Drag和drop）
抓取对象以后拖到另一个位置（HTML5中任何元素都能够拖放）
示例：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{ //3.ondragover事件规定在何处放置被拖动的数据。因为默认无法将数据/元素放置到其他元素中，所以调用 event.preventDefault()方法阻止默认处理方式。
ev.preventDefault();
}

function drag(ev)
{ //2.ondragstart属性调用此函数，规定被拖动的数据。dataTransfer.setData()方法设置被拖动数据类型和值。
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{ //4.进行放置。放置被拖数据时发生drop事件，ondrop属性调用一个drop(ev)函数
ev.preventDefault(); //阻止默认处理方式
var data=ev.dataTransfer.getData("Text"); //获取被拖数据
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>请把示例图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/示例.gif" draggable="true" ondragstart="drag(event)" />
//1.首先要设置元素为可拖动,draggable属性设置为true
</body>
</html>

HTML5 画布（Canvas）

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建Canvas元素
<canvas id="myCanvas" width="200" height="100"></canvas>

通过JavaScript来绘制：Canvas元素本身没有绘图能力，需要在JavaScript内部完成
<script type="text/javascript">
var c=document.getElementById("myCanvas");//JavaScript使用id来寻找canvas元素
var cxt=c.getContext("2d");//创建context对象
//画一个红色矩形
cxt.fillStyle="#FF0000";//上色
cxt.fillRect(0,0,150,75);//形状、位置和尺寸（左上角(0,0)开始150x75矩形）
</script>
画线：
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();//绘制当前路径
画圆：
cxt.fillStyle="#FF0000";
cxt.beginPath();//在画布中开始子路径的一个新的集合
cxt.arc(70,18,15,0,Math.PI*2,true);//创建弧/曲线
//arc(x,y,r,sAngle,eAngle,counterclockwise)参数圆心x,y半径r，起始角，结束角，可选counterclockwise规定顺逆时针绘图
cxt.closePath();//返回到开始点
cxt.fill();
图像：
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

HTML5 地理定位
HTML5 Geolocation API 用于获得用户的地理位置
使用 getCurrentPosition() 方法来获得用户的位置

HTML5 Web存储
HTML5提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
示例：
<body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
</body>
sessionStorage - 针对一个 session 的数据存储。当用户关闭浏览器窗口数据会被删除
示例：
<body>
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>
</body>

HTML5应用程序缓存
通过创建 cache manifest 文件，进行web应用缓存。
优势：1.离线浏览 2.速度更快(缓存资源) 3.减少服务器负载
如需启用缓存，需要在<HTML>标签中包含manifest属性<html manifest="demo.appcache">
注意：manifest 文件的建议的文件扩展名是："*.appcache"；manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
manifest文件是简单的文本文件，可分为三部分：
1.CACHE MANIFEST -在此标题下列出的文件将在首次下载后进行缓存
CACHE MANIFEST //第一行是必需的
/theme.css //当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。
/logo.gif //然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
/main.js

2.NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
NETWORK:
login.asp //永远不会被缓存，且离线时不可用

3.FALLBACK -在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
FALLBACK:
/html5/ /404.html //第一个URI是资源，第二个是替补

manifest文件注释是以"#"开头

HTML5表单
新的input类型：email、URL、number、range、Date pickers、search、color
email E-mail:<input type="email" name="user_email">
url Homepage:<inpute type="url" name="user_url">
number Points:<inpute type="number" name="points" min="0" max="9" /> //step属性规定合法值，value属性规定默认值
range <input type="range" name="points" min="1" max="10" /> //显示为滑动条
Date Pickers：data选取日、月、年；month选取月、年；week选取周和年；time选取时间(小时和分钟)；datetime选取UTC时间；datetime-local本地时间
search 用于搜索域，比如站点搜索或Google搜索。显示为常规的文本域
新的表单元素
datalist
规定输入域的选项列表，列表通过datalist内的option元素创建，option元素永远都要设置value属性
keygen
提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
output
用于不同类型的输出。

新的form属性：
autocomplete属性规定from或input域应该拥有自动完成功能
autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

autofocus属性规定在页面加载时，域自动地获得焦点。
autofocus 属性适用于所有 <input> 标签的类型。

form 属性规定输入域所属的一个或多个表单。
form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id；如需引用一个以上的表单，使用空格分隔的列表。

表单重写属性：
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

multiple属性规定输入域中可选择多个值。适用于<inpute>标签：email和file

pattern属性规定验证input域的模式(正则表达式)

placeholder 属性提供一种提示（hint），描述输入域所期待的值

required 属性规定必须在提交之前填写输入域（不能为空）

0 0