前端基础：HTML5

HTML5 是 HTML 的最新稳定版本。

新增的布局元素

标签	语义	display
`<nav>`	导航	`block`
`<header>`	页眉	`block`
`<footer>`	页脚	`block`
`<section>`	和 `<div>` 类似。	`block`
`<aside>`	页面内容之外的内容。	`block`
`<dialog>`	窗口。设置 `open` 属性改变可见状态	`block`
`<article>`	文章	`block`
`<details>`	细节。	`block`
`<summary>`	`<details>` 的标题。	`block`
`<figure>`	分组。	`block`
`<figcaption>`	`<figure>` 的标题。	`block`
`<wbr>`	在换行时从何处分割。	`inline`
`<time>`	日期。	`inline`
`<mark>`	记号。	`inline`
`<meter>`	预定义范围内的度量。	`inline-block`
`<progress>`	进度条。	`inline-block`

新增的图像元素

<svg />

<html>
  <head>
    <title>SVG</title>
  </head>
  <body>
    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="YellowGreen"
        stroke-width="3"
        fill="green"
      />
    </svg>
  </body>
</html>

<svg /> 用于绘制矢量图形 (Scalable Vector Graphics) 。

<canvas />

<html>
  <head>
    <title>canvas</title>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="100">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById('myCanvas')
      var ctx = c.getContext('2d')
      ctx.font = '30px Arial'
      ctx.strokeText('Hello World', 10, 50)
    </script>
  </body>
</html>

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

新增的媒体元素

<audio />

<html>
  <head>
    <title>audio</title>
  </head>
  <body>
    <audio src="someaudio.wav" autoplay>
      Your browser does not support the audio element.
    </audio>
    <div>或者</div>
    <audio controls>
      <source src="horse.ogg" type="audio/ogg" />
      <source src="horse.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

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

<video />

<html>
  <head>
    <title>video</title>
  </head>
  <body>
    <video src="movie.webm" autoplay>
      Your browser does not support the video element.
    </video>
    <div>或者</div>
    <video controls>
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
      Your browser does not support the video element.
    </video>
  </body>
</html>

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

<embed />

<html>
  <head>
    <title>embed</title>
  </head>
  <body>
    <embed src="movie.swf" width="320" height="240" />
  </body>
</html>

<embed /> 用于嵌入外部的媒体。

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

表单类型

标签语义

<datalist> 下拉列表

<keygen> 密钥

<output> 输出的一些类型

标签	语义
`<datalist>`	下拉列表
`<keygen>`	密钥
`<output>`	输出的一些类型

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 协议。它能够更实时地进行通讯，并且能更好的节省服务器资源和带宽。

拖放

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>DataTransfer.setData()/.getData()/.clearData()</title>
    <style>
      div {
        margin: 0em;
        padding: 2em;
      }
      #source {
        border: 1px solid black;
      }
      #target {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <section>
      <div>
        <p id="source" draggable="true" ondragstart="handleDragStart(event)">
          Select this element, drag it to the Drop Zone and then release the
          selection to move the element.
        </p>
      </div>
      <div
        id="target"
        ondrop="handleDrop(event)"
        ondragover="handleDragOver(event)"
      >
        Drop Zone
      </div>
    </section>
    <script>
      // 开始拖拽
      function handleDragStart(ev) {
        console.log('dragStart')
        // 改变拖拽元素的样式
        ev.currentTarget.style.color = 'blue'
        ev.currentTarget.style.border = '1px dashed blue'
        // 将元素的 id 作为数据传输
        ev.dataTransfer.setData('text/plain', ev.target.id)
      }

      // 拖拽进入目标
      function handleDragOver(ev) {
        console.log('dragOver')
        // prevent Default event
        ev.preventDefault()
      }

      // 在目标区域松开鼠标
      function handleDrop(ev) {
        console.log('Drop')
        ev.preventDefault()
        // 获取拖拽元素的 id
        var data = ev.dataTransfer.getData('text')
        // 将拖拽元素加到目标元素中
        ev.target.appendChild(document.getElementById(data))
        // 清除拖拽运输携带的数据
        ev.dataTransfer.clearData()
      }
    </script>
  </body>
</html>

拖放 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, // 最大缓存时间
  }
)