您的位置：首页 > Web前端 > HTML5

HTML5学习笔记

2016-01-29 20:55 531 查看

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"ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1"src="img_logo.gif" draggable="true" ondragstart="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：

var x=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教程》

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航