h5简单学习总结 - 码农教程

html5中增加一些新特性

　　用于绘画的canvas元素

　　用于媒介回放的video和audio元素

　　对本地离线存储的更好的支持

　　新的特殊内容元素，比如article、footer、header、nav、section

　　新的表单控件，比如calendar、date、time、email、url、search

h5视频

　　ogg文件，适用于Firefox、Opera以及Chrome浏览器，要确保适用于Safari浏览器，视频文件必须是MPEG4类型

　　video元素允许多个source元素。source元素可以链接不同的视频文件。

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

　　标签的属性及描述

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
height	pixels	设置视频播放器的高度
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放如果使用"autoplay"，则忽略该属性
src	url	要播放的视频的URL
width	pixels	设置视频播放器的宽度
poster		视频封面，没有播放时显示的图片

h5音频

　　ogg文件，适用于Firefox、Opera以及Chrome浏览器，要确保适用于Safari浏览器，视频文件必须是MP3或Wav类型

h5拖放

　　在h5中，拖放是标准的一部分，任何元素都能够拖放

　　首先，为了使元素可拖动，把draggable属性设置为true

<img draggable="true" />

　　然后，规定当元素被拖动时，会发生什么

　　ondragstart属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData()方法设置被拖数据的数据类型和值

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

　　ondragover事件规定在何处放置被拖动的数据

　　默认地，无法将数据/元素放置到其他元素中，如果需要设置允许放置，我么必须阻止对元素的默认处理方式，这要通过调用ondragover事件的event.preventDefault()方法

event.preventDefault()

　　进行放置-ondrop

　　当放置被拖数据时，会发生drop事件

　　ondrop属性调用了一个函数，drop(event)

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

h5画布

　　canvas元素用于在网页上绘制图形

　　canvas本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成

　　依赖分辨率，不支持事件处理器，能够以.png或.jpg格式保存结果图像，适合图像密集型的游戏

h5SVG

　　SVG是一种使用XML描述2D图形的语言

　　不依赖分辨率，支持事件处理器，适合带有打醒渲染区域的应用程序（谷歌地图），不适合游戏应用

h5地理定位

　　h5Geolocation API用于获得用户的地理位置。

　　鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的（具体后面再跟canvas和svg一起学习查看）

h5Web存储

　　h5新的存储方法有：localStorage和sessionStorage

　　在h5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。所以可以在不影响网站性能的情况下存储大量的数据

　　localStorage可以长期存储，sessionStorage只存在会话级别，及关闭浏览器窗口后数据就会别删除

　　两者的添加，获取，删除方式一致

h5应用缓存

　　使用h5通过创建cache manifest文件，可以轻松地创建web应用的离线版本

　　除了ie，其他浏览器都支持

　　如果需要启用应用缓存，可在文档的<html>标签仲包含manifest属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

　　manifest文件的建议的文件扩展名是：“.appcache”

　　manifest文件需要配置正确的MIME-type，即“text/cache-manifest”。必须在web服务器上进行配置

　　manifest文件可分为三个部分：

　　　　CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存

　　　　NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存

　　　　FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）

　　第一行，CACHE MANIFEST，是必须的

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

　　下面的FALLBACK小姐规定如果无法建立因特网连接，则用"offline.html"代替/html5/目录中的所有文件（第一个rui是资源，第二个是替补）

FALLBACK:
/html5/ /404.html

　　完整的Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

　　提示：以“#”开头的是注释行，但也可满足其他用途，应用的缓存会在其manifest文件更改时被跟新。更新注释行仲得日期和版本号是一种使浏览器重新缓存文件的办法（浏览器对缓存数据的容量限制可能不太一样，某些浏览器设置的限制是每个站点5MB）

h5 web workers h5服务器发送事件

　　后面有时间再学习

h5表单

　　输入类型：新增email、url、number、range、Date pickers、search、color（其实就是input输入框中的type类型）

　　表单元素：新增datalist、keygen、output

　　　　datalist元素：列表是通过datalist内的option元素创建的，如需把datalist绑定到输入域，请用输入域的list属性引用datalist的id:(option元素永远都要设置value属性)

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

　　　　keygen元素：提供一种验证用户的可靠方法。

　　　　keygen元素是密钥对生成器。当提交表单时，会生成两个键，一个是私钥，一个公钥。

　　　　私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书

　　　　目前，浏览器对此元素的支持度太低，仅做先了解

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

原文地址：https://www.cnblogs.com/chao202426/p/11028083.html