语义化标签

语义化标签指的是仅仅从标签来看就能看出页面的大致结构，也有利于SEO。

描述 属性
定义文档的头部区域
定义文档的尾部区域
定义文档的导航区域
定义文档的段落
定义页面独立的内容区域
定义页面侧边栏内容
定义命令按钮
标签包含 details 元素的标题
定义对话框

增强型表单

  1. 提供了新的输入型控件，如：number、url、email、range、color、date等，通过input的type属性使用。

  2. 添加了新的表单属性：

    • placehoder：即我们常见的输入框默认提示，在用户输入后消失
    • required：是一个 boolean 属性。要求填写的输入域不能为空
    • pattern：描述了一个正则表达式用于验证 元素的值
    • min和 max属性，设置元素最小值与最大值。
    • step：为输入域规定合法的数字间隔。
    • height和 width：用于 image 类型的 标签的图像高度和宽度。
    • autofocus：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
    • multiple：是一个 boolean 属性。规定 元素中可选择多个值。　

      DOM扩展

  3. 新增的getElementByClassName()方法： ```javascript //取得类中包含”username”和”current”的元素 var allCurrentUsernames = document.getElementByClassName(“username current”)

//取得id为”myDiv”的元素中带有类名”selected”的所有元素 var selected = document.getElementById(“myDiv”).getElementsByClassName(“selected”)

  2. 2. 可以为元素添加非标准的属性，但要加前缀**data-**，为元素提供与渲染无关的信息；可以通过元素的**dataset**属性访问自定义属性的值。
  3. <a name="qcS0R"></a>
  4. # 原生Drag & Drop拖放
  5. 拖放被加入标准中。
  6. <a name="iYWdH"></a>
  7. # 音频与视频
  8. 音频：`<audio>`<br />视频：`<video>`
  9. ```javascript
  10. <!-- 视频 -->
  11. <video src="video.mp4" id="myVideo">Video Player</video>
  13. <!-- 音频 -->
  14. <audio src="song.mp3" id="myAudio">Audio Player</audio>

Web Socket

区别于http协议，提供全双工双向通信。

Web Storage

sessionStorage和localStorage提供了除cookie之外在客户端存储数据的途径；大容量。

地理位置

Geolocation API在浏览器中的实现是navigator.geolocation对象

Canvas绘图

要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。

Canvas SVG
与分辨率相关(可以理解为位图，图形放大会失真看到一个个像素点) 与分辨率无关(可以理解为矢量，图形放大不会失真)
不支持事件处理程序 支持事件处理程序
文字呈现功能比较简单 最适合具有大型渲染区域地应用程序(如Google地图)
可以将生成的图像保存为.png或.jpg 如果复杂地话渲染速度慢(其实任何使用DOM的东西都会很慢)
非常适合图形密集性游戏 不适合游戏应用程序

桌面通知Notification API

Application Cache 应用程序缓存

postMessage

参考资料：

postMessage是HTML5中新引入的API，它可以实现跨窗口以及跨域的通信。postMessage类似Ajax但是它不受同源策略的限制并且通信双方都是客户端。

相关API介绍

发送数据

  1. receiveMessageWindow.postMessage(data, origin[, transfer]])

receiveMessageWindow是接收数据的一方，可以是：

  1. iframe的contentWindow

    1. <body>
    2.  <iframe class="childIframe" scr="http://XXX:8080"></iframe>
    3.  <script>
    4.      // 获取iframe的contentWindow
    5.      const win = document.querySelector('.childIframe').contentWindow
    6.  </script>
    7. </body>

  2. 执行window.open()方法返回的对象

    1. <body>
    2.  <script>
    3.      // 获取window.open()打开窗口的引用
    4.      const win = window.open('http://XXX:8888')
    5.  </script>
    6. </body>

  3. window.frames

    1. <body>
    2.  <script>
    3.      const iframes = window.frames
    4.  </script>
    5. </body>

    data表示将要发送到其他 window的数据，无需自己序列化。
    origin可以指定哪些窗口可以接收到该消息事件，可以是：

  4. “*”：表示不受限制

  5. URL地址：表示只有该URL地址的窗口才能接收到消息。

transfer是一串和message同时传递的Transferable对象.这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

接收数据

监听message事件，语法如下：

  1. window.addEventListener('message', (e) => {
  2.     // ...
  3. })

在接收到的事件对象中有三个重要的属性：

  1. origin：表示发送消息窗口的源，可以通过此属性判断源是否安全
  2. data：表示发送消息窗口发送的数据

  3. source：表示对发送消息窗口的引用，可以用此来向发送消息的窗口返回数据

    应用

  4. 传递消息，实现父子窗口间的通信

  5. 修改iframe中DOM节点的样式