h5简单学习总结
Posted chao202426
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
login.asp永远不会被缓存且离线时是不可用的（可以使用*来指示所有其他资源/文件都需要因特网连接）
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>
以上是关于h5简单学习总结的主要内容，如果未能解决你的问题，请参考以下文章