html5的新特性

(1) 语义化标签  [nav  header  footer article aside section]

(2) 增强型表单

input增加了新的表单输入类型, 如:email,url,range,number,datePikcers,search,color

新的表单元素

新的表单属性autofocus,placeholder

(3) 用于媒介回放的video与audio

(4) 元素的拖放drag(api)

设置元素为可拖放draggable为true

拖动什么?:ondragstart调用了一个函数,规定了要拖动的数据, event.dataTransfer.setData()方法设置了被拖动数据的数据类型和值

放到哪里?:ondragover事件,设置目标位置允许放置,阻止对元素的默认处理行为

进行放置:ondrop事件,event.dataTransfer.getData()方法获取被拖动的数据,把数据追加到目标位置元素

(5) 用于绘画的 canvas 元素

canvas是使用javascript在网页上绘制图像,

画布是一个矩形区域可以控制每一个像素

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

(6)  HTML5里可以直接把svg元素插入HTML页面

(7) 地理定位

geolocation(地理定位)用于定位用户的位置

(8) Web存储

存客户端临时的信息,专门为储存而设计,不会随着请求发出去

localStorage  没有时间限制的数据存储

sessionStorage 针对一个session的数据存储

Api:存:localStorage.setItem(‘userinfo’,JSON.stringify(o))

       取:var o=JSON.parse(localStorage.getItem(‘userInfo’))

      删除:localStorge.remove(‘userInfo’)

      清空:localStorage.clear()

cookie: 本身用于浏览器和server通讯,被借用到本地来存储,可用document.cookie=''来修改

    http请求的时候需要发送到服务端,增加请求的数据量

(9) webscoket

posted on 2020-01-16 09:57  猪mother  阅读(156)  评论(0编辑  收藏  举报