HTML5 新特性

HTML5 新特性

1.语义标签

• <header>元素：header 元素代表“网页”或“section”的页眉。
• <footer>元素：footer元素代表“网页”或“section”的页脚。
• <nav> 标签定义导航链接的部分。
• <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
• <aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
• <article> 标签定义独立的内容。

2.增强型表单

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

3.视频和音频

• HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

4.Canvas绘图

• 用于绘画的 canvas 元素

5.地理定位

• HTML5 Geolocation（地理定位）用于定位用户的位置。

  window.navigator.geolocation {
      getCurrentPosition:  fn  用于获取当前的位置数据
      watchPosition: fn  监视用户位置的改变
      clearWatch: fn  清除定位监视
  }　
  

6.拖放API

• 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
• 拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

源对象(可能发生移动的)可以触发的事件：

• dragstart：拖动开始
• drag：拖动中
• dragend：拖动结束

目标对象(不会发生移动)可以触发的事件：

• dragenter：拖动着进入
• dragover：拖动着悬停
• dragleave：拖动着离开
• drop：释放

dataTransfer：用于数据传递的“拖拉机”对象：

// 在拖动源对象事件中使用e.dataTransfer属性保存数据：
e.dataTransfer.setData( k, v )
// 在拖动目标对象事件中使用e.dataTransfer属性读取数据：
var value = e.dataTransfer.getData( k )

7.WebWorker

• 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
• web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

8.WebStorage

• 使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。
• 但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。
• 数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

• localStorage - 没有时间限制的数据存储，永久存储。页面共享
• sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。页面不共享

不管是 localStorage，还是 sessionStorage，可使用的API都相同:

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

9.WebSocket

• WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
• 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
• 当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

        function WebSocketTest() {
            if ("WebSocket" in window) {
                alert("您的浏览器支持 WebSocket!");
                // 打开一个 web socket
                var ws = new WebSocket("ws://localhost:9998/echo");
                ws.onopen = function() {
                    // Web Socket 已连接上，使用 send() 方法发送数据
                    ws.send("发送数据");
                    alert("数据发送中...");
                };
                ws.onmessage = function (evt) { 
                    var received_msg = evt.data;
                    alert("数据已接收...");
                };
                ws.onclose = function(){ 
                    // 关闭 websocket
                    alert("连接已关闭..."); 
                };
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }

Vue和WebSocket实现的讨论区

<template>  
  <div>  
    <h1>讨论区</h1>  
    <div v-for="message in messages" :key="message.id">  
      {{ message.content }}  
    </div>  
    <div>  
      <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息...">  
      <button @click="sendMessage">发送</button>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      newMessage: '',  
      messages: [],  
      socket: null,  
    };  
  },  
  created() {  
    this.socket = this.$socket; // 这是vue-socket.io提供的便捷方式来获取socket实例  
    this.socket.on('connect', () => {  
      console.log('WebSocket connected');  
    });  
    this.socket.on('receive message', (data) => {  
      this.messages.push(data);  
    });  
  },  
  methods: {  
    sendMessage() {  
      this.socket.emit('send message', { id: Date.now(), content: this.newMessage });  
      this.newMessage = ''; // 清空输入框  
    },  
  },  
};  
</script>

这个例子中，当用户在输入框中输入内容并点击发送按钮或按回车键时，消息会被发送到服务器。服务器会将消息广播给所有连接的客户端，客户端监听这个事件并更新UI。

10.SSE服务器发送事件(Server-Sent Events)

• HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
• 通常用于创建单向连接，使服务器能够发送任意数量的数据
• Server-Sent 事件 - 单向消息传递
• EventSource 对象用于接收服务器发送事件通知

以下是使用SSE的基本步骤：

1.创建一个EventSource对象。这可以通过指定URL来完成，例如：

var es = new EventSource('demo_sse.php');

• onopen 当通往服务器的连接被打开
• onmessage 当接收到消息
• onerror 当发生错误

2.添加事件处理方法。可以通过onmessage和addEventListener方法来添加事件处理方法。当服务器端有新的事件产生时，相应的事件处理方法会被调用。例如：

es.onmessage = function(event) {  
  console.log(event.data);  
};  
es.addEventListener('myevent', function(event) {  
  console.log(event.data);  
});

3.保持连接。一旦建立了EventSource对象，浏览器会不断地访问服务器中的数据，直到连接被关闭。这个过程可能会有延迟，具体取决于服务器类型、数据大小和浏览器支持情况等因素。

需要注意的是，SSE只支持从服务器到客户端的单向通信，不支持客户端向服务器的请求或消息传递。此外，SSE不支持跨域请求，因此在使用时需要确保服务器设置了适当的CORS（跨来源资源共享）策略。

Vue和SSE的简单示例

<template>  
  <div>  
    <h1>Server-Sent Events Example</h1>  
    <div v-html="message"></div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: ''  
    }  
  },  
  created() {  
    let es = new EventSource('/api/sse');  
    es.onmessage = function(event) {  
      this.message = event.data;  
    }  
  }  
}  
</script>

在这个例子中，我们创建了一个Vue组件，该组件在创建时使用EventSource对象连接到SSE服务。当接收到服务器端发送的新消息时，onmessage事件处理程序将消息数据设置为组件的message数据属性。然后，Vue将自动更新DOM以反映新的数据。

SSE与WebSocket的区别

SSE（Server-Sent Events）和WebSocket都是实现服务器与客户端实时通信的技术，但它们之间存在一些重要的差异。

• 通信模式：SSE是一种单向的通信模式，只能由服务器向客户端推送数据。而WebSocket是双向通信模型，客户端和服务器可以互相发送消息。
• 复杂性：相对于WebSocket，SSE是一个轻量级协议，相对简单。WebSocket则是一种较重的协议，相对复杂。
• 兼容性和部署：SSE是部署在HTTP协议之上的，现有的服务器软件都支持。而WebSocket需要服务器端支持新的协议。
• 断线重连：SSE默认支持断线重连，而WebSocket则需要额外的配置。
• 数据格式：SSE不支持自定义发送的数据类型，而WebSocket可以处理更复杂的通信需求，如自定义消息格式、心跳检测、连接状态管理等。

因此，在选择使用SSE还是WebSocket时，需要根据具体的应用需求来决定。如果只需要从服务器向客户端推送数据，并且希望简化实现和部署过程，那么SSE可能是一个更好的选择。如果需要更复杂的双向通信，或者需要处理更复杂的数据格式和通信需求，那么WebSocket可能更适合。