HTML5学习笔记
一、前言
作为新一代超文本标记语言,HTML5具有跨平台、跨分辨率、版本控制简单的优势,它包含的很多新特性,都是针对终端设备,为的就是在以后在终端设备上有更好的体验和交互。 目前,因为HTML5的强大功能,flash甚至停止更新,支持HTML5。足以可见,HTML5的广泛应用型和良好的发展前景。
二、内容
规则
1. 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
2. 减少对外部插件的需求(比如 Flash)
3. 更优秀的错误处理
4. 更多取代脚本的标记
5. HTML5应该独立于设备
6. 开发进程应对公众透明
新特征
l 用于绘画的 canvas 元素
l 用于媒介回放的 video 和 audio 元素
l 对本地离线存储的更好的支持
l 新的特殊内容元素,比如 article、footer、header、nav、section
l 新的表单控件,比如 calendar、date、time、email、url、search
一、视频音频
视频
方法:pause();play();
eg:
<video src="movie.ogg" controls="controls"></video>
特征属性:control:控件。(播放,暂停.....)
autoplay:就绪后播放
loop:循环(-1:无限循环,0-n:次数)
音频
格式:ogg|mp3|wav
方法和属性同视频。
<audiocontrols="controls">
<sourcesrc="song.ogg" type="audio/ogg">
<sourcesrc="song.mp3" type="audio/mpeg">
</audio>。
二、拖放
Drag 和 drop
步骤:
1.把元素的属性draggable设置为 true
2.拖动操作:ondragstart。
3.放到何处 - ondragover
4.进行放置 - ondrop
Eg:
<div id="div1"οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<img id="drag1"src="img_logo.gif" draggable="true" οndragstart="drag(event)"width="336" height="69" />
三、画布:
canvas 元素使用 JavaScript 在网页上绘制图像
本身没有什么特殊属性,都是通过js方法
步骤:
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
cxt.drawImage(img,0,0);
功能非常强大,可实现图像剪切,旋转等.........具体还需要自己的详细了解。
四、地理位置:
getCurrentPosition()
返回数据:
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间
Eg:
varx=document.getElementById("demo");
functiongetLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is notsupported by this browser.";}
}
functionshowPosition(position){
x.innerHTML="Latitude: " +position.coords.latitude +
"<br />Longitude: " +position.coords.longitude;
}
五、web存储
localStorage- 没有时间限制的数据存储
使用:localStoage.变量=“value”;
eg:localStorage.lastname="Smith";
sessionStorage- 针对一个session 的数据存储。
浏览器关闭后丢失
使用方法同上
六、应用程序缓存
创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
使用
<!DOCTYPE HTML>
<htmlmanifest="demo.appcache"></html>
manifest文件需要配置正确的 MIME-type,即 "text/cache-manifest"
manifest文件可分为三个部分:
CACHEMANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK- 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK- 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
eg:
CACHEMANIFEST
/theme.css
/logo.gif
/main.js
NETWORK:login.asp
FALLBACK:/html5//404.html
七、webworker
独立于其他脚本,不会影响页面的性能
步骤:
检测:if(typeof(Worker)!=="undefined")
创建web worker 文件 count.js
创建 Web Worker 对象
w=newWorker("demo_workers.js");
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;}
终止:w.terminate();
八、服务器发送事件:
服务器发送事件(server-sent event)允许网页获得来自服务器的更新
事件:onopen|onmessage|onerror
eg:
varsource=new EventSource("demo_sse.php");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data+ "<br />"; };
检测:if(typeof(EventSource)!=="undefined")
后台代码:
header('Content-Type:text/event-stream');
header('Cache-Control:no-cache');//不设置缓存
$time= date('r');
echo"data: The server time is: {$time}\n\n";
flush();//向网页刷新数据
九、input新类型
可以实现输入类型的基础验证。
email 邮箱
url 链接
number 数字,属性min max step
range 数字范围,属性min max step。范围
Datepickers (date, month, week, time, datetime, datetime-local)
input新属性。
datalist:可以选择也输入。
类似<select>,但是select只能选择,不能输入。
应用:类如邮箱类型选择。
autocomplete加载完成后完成
autofocus 加载完成后获得焦点
form 规定input属于哪个form(根据id)
formoverrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height和width
min,max 和step
placeholder 预输入内容,点击输入框后消失
required不为空
list
list类型结合dalist应用
三、总结及备注
HTML5具备强大的功能,可以实现输入格式的基础验证,视频或音频,地理位置获取等,基础规则很简单,但是,要熟练使用,还需要不断的练习,实践。:
但是,目前各种浏览器对HTML5的支持不尽相同,有些情况下,并不能达到我们想要的效果。在使用过程中,这需要我们通过实践去认证。
总之,目前HTML5的应该有些局限性;但是,未来将是属于html5。
四、参考资料
《W3Cschool-html5教程》