Web基础之HTML5

2017-02-26 本文已影响55人南山伐木

+概述：HTML5是W3C 与 WHATWG 合作的结果。

新特性：
1）canvas：用于绘画；
2）video/audio：用于媒体播放；
3）web离线存储；
4）新的特殊内容元素：article、footer、header、nav、section
5）新的表单控件：calendar、date、time、email、url、search

*<video src=“a.mp4” controls=“controls”>
用于播放视频，支持的视频格式有：Ogg,MPEG4,WebM。但不是所有浏览器支持；

属性：
-> autoplay=“autoplay”：视频在就绪后马上播放；
-> controls=“controls”:显示控件栏，功能包括：播放、暂停、定位、音量、全屏切换、字幕（如果要可用）、音轨（如果可用）
->width/height：播放器宽高
->loop=“loop”:视频在结束后重新开始
->preload=“preload”：视频在页面加载时进行加载，并预备播放（若使用了autoplay，则无效）
->src=“”：要播放的url;
Dom操作video的方法及事件
方法：play() pause() load() canPlayType
属性：currentSrc currentTime videoWidth/videoHeight duration ended error paused muted seeking volume width/height
事件：play pause progress error timeupdate ended abort empty emptied waiting loadedmetadata

<audio src="song.ogg" controls="controls">
播放音频：

属性：同Video

Drag/drop
用于对元素的拖放，是HTML5的标准组成，任何元素都能拖放。

使用步骤：
1）设置元素为可拖放。如：<img draggable="true" />
2)拖动什么。规定当元素拖动时的回调方法ondragstart和setData()。

 ![](img_logo.gif)
…
function drag(ev){ ev.dataTransfer.setData(“Text",ev.target.id);  }

3）放到何处。在ondragover事件中规定放置何处。默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。通过调用 ondragover 事件的 event.preventDefault() 方法；
4）进行放置。ondrop，当放置被拖元素时，会发生drop事件。

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

canvas：画布，使用JavaScript在网页上绘制图像；

1）创建：<canvas id="myCanvas" width="200" height=“100"></canvas>
2）通过javaScript绘制：

 <script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

【cxt下的方法API类似于java下的Canvas的方法API】

SVG(Scalable Vector Graphics)：可伸缩矢量图形，在放大或改变尺寸的情况下其图形质量不会有损失，用于定义用于网络的基于矢量的图形，可用xml来定义。
1）与其他图像如jpg/gif的优势：
—> 可通过文本编辑器来创建和修改；
—> 可被搜索、索引、脚本化或压缩；
—> 可伸缩的；
—> 可在任何的分辨率下被高质量地打印；
—> 可在图像质量不下降的情况下被放大；

 <body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>

【注：Canvas与SVG的区别】

Canvas：
—> 依赖分辨率
—> 不支持事件处理器
—> 弱的文本渲染能力
—> 能够以 .png 或 .jpg 格式保存结果图像
—> 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
—> 不依赖分辨率
—> 支持事件处理器
—> 最适合带有大型渲染区域的应用程序（比如谷歌地图）
—> 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
—> 不适合游戏应用

地理定位Geolocation:
Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
使用：getCurrentPosition() 方法来获得用户的位置。

 function getLocation(){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);   }
  else{
x.innerHTML="Geolocation is not supported by this browser.";}
 }

web存储
两种新方法：
1）localStorage：没有时间限制的数据存储
2）sessionStorage：针对一个session的数据存储；当用户关闭浏览器后，数据会被删除。
【注：这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。】

<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>

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

Application Cache:应用程序缓存。

三个优势：
->离线浏览；
->速度：已缓存资源加载更快；
->减小服务器负载：浏览器将只从服务器下载更新过或更改过的资源；
1）manifest：在html标签中包含manifest标签即可，<html manifest=“demo.appcache">
【注意：每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）；manifest 文件的建议的文件扩展名是：”.appcache”；manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。】
包含三个部分：
1）CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
2）NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
3）FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

**Web Worker
**：后台任务。是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
1)创建：if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }
2）监听：w.onmessage=function(event){document.getElementById(“result").innerHTML=event.data;};
3）终止：w.terminate();
【注意：由于web workder位于外部文件中，无法以访问：window对象、document、parent对象】

server-sent event：服务器发送事件，允许网页获得来自服务器的更新。

单向消息传递。除了IE外都支持。
1）创建一个EventSource对象，然后规定发送更新的页面的url;
2）每接收一次更新，就会发生onmessage事件
3）在onmessage事件中取出数据。

var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
  document.getElementById("result").innerHTML+=event.data + "<br />";};

注意：服务器端须将Content-Type设置为text/event-stream】

其他事件：
—> onopen：当与服务器的连接被打开
—> onerror：当错误发生

Input元素新增类型：
—> email：用于应该包含 e-mail 地址的输入域。
—> url：应该包含 URL 地址的输入域。
—> number：用于应该包含数值的输入域(包括max、min、step、value属性)。
—> range：滑动条，包含一定范围内数字值的输入域。(包括max、min、step、value属性)
—> Date pickers：多个可供选取日期和时间的新输入类型：date(日/月/年)、month、week、time(时/分)、datetime(日/月/年/时/分)、datetime-local
—> search：用于搜索域
—> color:

Input/Form新增属性：
—> autocomplete：规定form或input域应该拥有自动完成功能，适用元素<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color
<form action="demo_form.asp" method="get" autocomplete=“on">
<input type="email" name="email" autocomplete="off" />
—>autofocus：规定在页面加载时，域自动获得焦点。
<input type="text" name="user_name" autofocus="autofocus" />
—> form：规定输入域所属的是一个或个全表单
<input type="text" name="lname" form="user_form" />
—>form overrides(formaction,formenctype,formmethod,formtarget)：即重写这些属性。适用于<input>下的：submit和image,如:
<input type="submit" formaction="demo_admin.asp" value="sure" />
—> height/width:规定用于 image 类型的 input 标签的图像高度和宽度。
—>list：规定输入域的 datalist。datalist 是输入域的选项列表。
—> min/max/step：用于为包含数字或日期的 input 类型规定限定（约束），适用于<input>下的：data pickers、number、range
—>multiple：规定输入域中可选择多个值。适用于<input>下的：email和file
—> pattern(regexp)：规定用于验证 input 域的模式（pattern）。适用于<input>下的：text, search, url, telephone, email 以及 password。
—> placeholder：提供一种提示（hint），描述输入域所期待的值.
—> required：规定必须在提交之前填写输入域（不能为空）。
<input type="text" name="usr_name" required="required" />
—> novalidate：规定在提交表单时不应该验证 form 或 input 域。适用于<input>下的：text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate=“true">

Form元素新增元素：
—> datalist：输入框下带一个选项列表，列表是通过 datalist 内的 option 元素创建的。

<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>

【注意：option 元素永远都要设置 value 属性。】

—> keygen：密钥对生成器（key-pair generator）,是提供一种验证用户的可靠方法，当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。但各浏览器支持度都不是很好。
—> output：用于不同类型的输出，比如计算或脚本输出。

博客地址：Web基础之HTML5

Web基础之HTML5

猜你喜欢

热点阅读