前端基础：HTML5

HTML5 是 HTML 的最新稳定版本。

新增的布局元素

标签	语义	display
	导航	block
	页眉	block
	页脚	block
	和 类似。	block
	页面内容之外的内容。	block
	窗口。设置 open 属性改变可见状态	block
	文章	block
	细节。	block
	的标题。	block
	分组。	block
	的标题。	block
	在换行时从何处分割。	inline
	日期。	inline
	记号。	inline
	预定义范围内的度量。	inline-block
	进度条。	inline-block

新增的图像元素

• 用于绘制矢量图形 (Scalable Vector Graphics) 。

• 
    
      
    
    
      
        Your browser does not support the HTML5 canvas tag.
      
      
    
  
  

  用于绘制位图。但它只是图形容器，绘制图形需要使用 JavaScript 脚本。

新增的媒体元素

• 
    
      
    
    
      
      
  或者
      
    
  
  

  用于播放音频，支持 MP3、OGG、WAV 等格式。

• 
    
      
    
    
      
      
  或者
      
    
  
  

  用于播放视频，支持 MP4、OGG、WEBM 等格式。

• 用于嵌入外部的媒体。

新增的表单相关元素、类型

• 表单类型

  标签	语义
  	下拉列表
  	密钥
  	输出的一些类型

• input 类型

  类型	语义
  color	颜色
  date	日期
  datetime	日期时间
  datetime-local	日期时间（本地）
  email	邮件
  month	月份
  number	数字
  range	范围
  search	搜索
  tel	电话
  time	时间
  url	URL
  week	周

• input 属性

  属性	语义
  autocomplete	自动完成
  autofocus	自动聚焦
  list	列表
  multiple	多选
  pattern	正则表达式
  placeholder	占位符
  required	必填
  step	步长
  max / min	最大值/最小值
  width / height	type="image" 的宽度/高度

新增的 API

• localStorage 和 sessionStorage

  // 存储
  localStorage.setItem('key', 'value')
  sessionStorage.setItem('key', 'value')
  // 读取
  localStorage.getItem('key')
  sessionStorage.getItem('key')
  // 删除
  localStorage.removeItem('key')
  sessionStorage.removeItem('key')
  // 清空
  localStorage.clear()
  sessionStorage.clear()
  

  localStorage 用于存储的没有截止日期的数据。在手动删除之前，都是可用的。

  sessionStorage 用于存储的当前会话的数据。当浏览器被关闭时数据就会被删除。

  localStorage 和 sessionStorage 的存储限制比 cookie 要大得多（至少 5MB），并且信息不会被传输到服务器。

• WebSocket

  // 创建
  const ws = new WebSocket('ws://localhost:8080')
  // 打开
  ws.onopen = function () {
    console.log('open')
  }
  // 收到消息
  ws.onmessage = function (ev) {
    console.log('message', ev.data)
  }
  // 关闭
  ws.onclose = function () {
    console.log('close')
  }
  // 发生错误
  ws.onerror = function (ev) {
    console.log('error', ev)
  }
  

  在 HTML5 之前，Web 上想要推送内容，大多采用轮询的方式。在特定的的时间间隔（如每 1 秒），通过 AJAX 向服务器发出 HTTP 请求，然后由服务器返回最新的数据。

  这种方案虽然可行，但存在明显的缺点。浏览器需要不断的向服务器发出请求，服务器也要不断的处理请求。而且 HTTP 请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

  于是在这种情况下，HTML5 定义了 WebSocket 协议。它能够更实时地进行通讯，并且能更好的节省服务器资源和带宽。

• 拖放

  
  
    
      
      
      
    
    
      
  
        
  
          
  
            Select this element, drag it to the Drop Zone and then release the
            selection to move the element.
          
        
        
  
          Drop Zone
        
      
      
    
  
  

  拖放 API 可以使用户在网页上自由的使用鼠标拖拽元素，开发者只需给元素设置 draggable 属性。在用户拖拽期间、之后将会触发对应的事件。

  事件名称	说明
  ondrag	当拖拽元素或选中的文本时触发
  ondragend	当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)
  ondragenter	当拖拽元素或选中的文本到一个可释放目标时触发
  ondragexit	当元素变得不再是拖拽操作的选中目标时触发
  ondragleave	当拖拽元素或选中的文本离开一个可释放目标时触发。
  ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）
  ondragstart	当用户开始拖拽一个元素或选中的文本时触发）
  ondrop	当元素或选中的文本在可释放目标上被释放时触发

• 获取当前位置

  // 获取当前位置
  navigator.geolocation.getCurrentPosition(
    // 成功回调
    pos => {
      const crd = pos.coords
  
      console.log('Your current position is:')
      console.log('Latitude : ' + crd.latitude)
      console.log('Longitude: ' + crd.longitude)
      console.log('More or less ' + crd.accuracy + ' meters.')
    },
    // 失败回调
    error => {
      console.warn('ERROR(' + err.code + '): ' + err.message)
    },
    // 选项
    {
      enableHighAccuracy: true, // 是否要求高精度
      timeout: 1000 * 60 * 5, // 超时时间
      maximumAge: 0, // 最大缓存时间
    }
  )