HTML5学习笔记

2017-10-14 本文已影响9人丨ouo丨

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

<video>
<audio>

拖放

设置元素可拖放<img draggable="true" />

设置ondragstart事件，设置setData()
<img id="" src="" draggable="true" ondragstart="drag(event)"/>

function drag(ev)
{
   ev.dataTransfer.setData("Text",ev.target.id);//设置被拖动数据的数据类型和值
}

设置放到哪
<div id="" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

 function allowDrop(ev)
 {
   ev.preventDefault();//取消默认的不能放置
 }

 function drop(ev)
 {
   ev.preventDefault();
   var data=ev.dataTransfer.getData("Text");//获得被拖的数据
   ev.target.appendChild(document.getElementById(data));
 }

<canvas>

新建一个canvas元素
<canvas id="myCanvas" width="200" height="100"></canvas>

js获得绘制环境

<script type="text/javascript">
  var c=document.getElementById("myCanvas");
  var cxt=c.getContext("2d");`//getContext("2d") 对象是内建的HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<script>

线条

cxt.moveTo(10,10);//线条的起点
cxt.lineTo(150,50);//线条要连接的第一个点
cxt.lineTo(10,50);//线条要连接的第二个点
cxt.stroke();//绘制实线

圆

cxt.beginPath();//开始创建路径
cxt.arc(70,18,15,0,Math.PI*2,true);//x坐标:70,y坐标:18,r:15，
  //起始角度：0，结束角度：Math.PI*2（圆），逆时针
cxt.closePath();//创建路径结束
cxt.fill();//路径实现

渐变
```
 var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;//填充
cxt.fillRect(0,0,175,50);//绘制
```
createLinearGradient 包含四个参数x1,y1,x2,y2
- 如果x1=x2 并且y1!=y2,渐变色改变的方向则是水平。
  如果y1=y2 并且x1!=x2, 渐变色方向是垂直的。
  如果x1!=x2且y1!=y2,渐变色方向则为对角。

图像

var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

把图像放到画布上

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

Geolocation

var x=document.getElementById("demo");
function getLocation()
{
  if (navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
  else
  {
    x.innerHTML="Geolocation is not supported by this browser.";
  }
}
function showPosition(position)
{
  x.innerHTML="Latitude: " + position.coords.latitude + "<br/>Longitude: " + position.coords.longitude;
}

web存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
应用缓存
- 启动应用缓存
```
<!DOCTYPE HTML>
<html manifest="demo.appcache">
 ...
</html>
```
- manifest 文件可分为三个部分：
  - CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  - NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  - FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
Web Workers
服务器发送事件
表单
- 新增input类型
  - email
  - url
  - number
  - range
  - Date pickers (date, month, week, time, datetime, datetime-local)
  - search
  - color
- 新增表单元素
  - datalist
```
<input type="url" list="url_list" name="link" /><--用list绑定datalist的id!-->
<datalist id="url_list">
  <option label="Google" value="http://www.google.com" />
</datalist>
```
  - keygen
    <keygen name="security" />
    keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
    私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
  - output
- 新增表单属性
  - autocomplete
    适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
    <form action="demo_form.asp" method="get" autocomplete="on">
  - autofocus
    <input type="text" name="user_name" autofocus="autofocus" />
  - form
    form 属性适用于所有 <input> 标签的类型。
    form 属性必须引用所属表单的 id：
```
<form action="demo_form.asp" method="get" id="user_form">
</form>
<input type="text" name="lname" form="user_form" />
```
  - 表单重写属性
    适用于以下类型的 <input> 标签：submit 和 image。
    formaction - 重写表单的 action 属性
    formenctype - 重写表单的 enctype 属性
    formmethod - 重写表单的 method 属性
    formnovalidate - 重写表单的 novalidate 属性
    formtarget - 重写表单的 target 属性
  - width和height
    height 和 width 属性只适用于 image 类型的 <input> 标签。
  - list
  - min、max、step
  - multiple 属性
    适用于以下类型的 <input> 标签：email 和 file。
  - novalidate 属性
    novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
    适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.
```
<form action="demo_form.asp" method="get" novalidate="true">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>
```
  - pattern属性
  - placeholder属性
  - required属性

Web Socket
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

新建var Socket = new WebSocket(url, [protocol] );

语义元素

h5语义元素

HTML5学习笔记

猜你喜欢

热点阅读