html5的新增特性

语义标签

• header,nav,footer,aside,article,section

增强型表单

• 新的表单元素

  • <input><textarea><select><option>…
  • <datalist>：数据列表，为input提供输入建议列表
  • <progress>：进度条，展示连接/下载进度
  • <meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)
  • <output>：输出内容，语义上表示此处的数据是经过计算而输出得到的
  • 表单元素的新属性
  • placeholder：占位提示文字
  • mutiple：是否允许多个输入
  • autofocus：自动获得输入焦点
  • form：指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果
  • required：输入框内容不能为空
  • min：允许输入的数字最小值
  • max：允许输入的数字最大值
  • minlength：允许输入的字符串最小长度
  • maxlength：允许输入的字符串最大长度
  • pattern：输入框内容必须符合的正则表达式

视频和音频

• audio
• video

Canvas绘图

SVG绘图

• Canvas与SVG的不同

  • Canvas是位图；SVG是矢量图
  • Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)
  • Canvas内容不能使用CSS；SVG内容可以使用CSS；
  • Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

地理定位(Geolocation)

拖放API(Drag and drop)

WebWorker

• Worker的本质：就是一个执行指定任务的独立线程；且该线程可以与UI主线程进行消息数据传递

WebStorage

• web storage和cookie的区别：Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
• 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie,getCookie。
• 但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。