语义化

优点

  • 使用语义标签增强了代码的可读性，即使没有css的情况下，开发者也能够清晰的看出网页的结构，便于团队的开发和维护
  • 文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好的获取更多的有效信息，有效提升网页的搜索量
  • 语义类支持读屏软件，根据文字可以自动生成目录

  • 方便其他设备解析（如移动设备、盲人阅读器等）

    常见语义化标签

  • <article>：定义文章

    • 使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论
  • <aside>：定义页面内容以外的内容
    • 表示和文章主题不是那么相关的内容，它可能包含导航、广告等工具性质的内容
  • <footer>：定义文档或节的页脚
    • 一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息
  • <header>：规定文档或节的页眉
    • 放在页面或布局的顶部，一般放置导航栏或标题
  • <main>：规定文档的主内容
    • 整个页面只出现一个，表示页面的主要内容，可以理解为特殊的div
  • <nav>：定义导航链接
    • 为了方便搜索引擎解析，最好是将主要的链接放在nav中
  • <section>：定义文档中的节
    • 包含的内容是一个明确的主题，通常有标题区域
  • <summary>：定义 details元素的可见标题
  • <details>：定义用户能够查看或隐藏的额外细节
  • <time>：定义日期 / 时间
  • <figcaption>：定义 <figure>的标题
  • <figure>：规定自包含内容，比如图示、图表、照片、代码清单等

  • <mark>：定义重要或强调的文本

    新表单类型

    表单，主要指的<input>，<input>表单标签本身已经有不少类型了

    新增的 input 标签类型

    但是 h5 为了满足开发需求，同样还新增了不少的类型的 input 标签

  • <input type="email" />： e-mail 地址的输入域

  • <input type="number" />： 数字输入域
  • <input type="url" />： URL 地址的输入域
  • <input type="range" />： range 类型显示为滑动条，默认value值是1~100的限定范围，
    • 可以通过 min 属性和 max 属性自定义范围
    • <input type="range" name="points" min="1" max="10" />
  • <input type="search" /> 用于搜索域
  • <input type="color" /> 用于定义选择颜色
  • <input type="tel" /> 电话号码输入域
  • <input type="date" /> date类型为时间选择器

新增的表单属性

HTML5 新增的表单属性

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

视频和音频

视频<video>和音频<audio>，也是 html 提供的新的标签，它们的功能类似于<img>标签，<img>标签引用的是图片，它们引用的是视频文件和音频文件。不仅如此，html5 针对视频文件和音频文件的特殊性，给 <video>和<audio>提供了非常丰富的方法,属性和事件，用于操控这俩元素。

注意：video播放视频时请注意转换一下视频的格式，转换为AVC(H264)，不转换的话容易出现有声音而没有视频的现象，浏览器将支持第一个识别的文件类型：( MP4, WebM, 和 Ogg)。

常用属性

HTML5 新特性 - 图1

常用监听事件

HTML5 新特性 - 图2

常用事件

  • play() 控制视频开始播放
  • pause() 控制视频暂停播放

    Canvas 绘图

    canvas 元素用于在网页上绘制图形，canvas 标签本身只是个图型容器，需要使用 javaScript 脚本来绘制图形

    Svg

    SVG 是指可伸缩的矢量图形，SVG 也是一种使用 XML 描述 2D 图形的语言。由于 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

SVG 图形的样式和 CSS 有些不同，fill 是定义图形填充色，stroke描边色，stroke-width是线宽。如果我们要对 SVG 图形操作，那么我们该怎么做呢？
其实很简单，只需要document.getElementById()获取需要操作的 SVG 图形节点，然后针对该 SVG 图形的属性去操作就可以了，对 SVG 图形属性的操作可以用getAttribute()和setAttribute()

拖拽（drag 和 drop）

拖放是html5提供一个新的特性，这个特性增加了拖拽事件的api和 定义可以拖拽的属性。
举个例子，在 h5 之前实现拖拽功能，其实用的是一种模拟方式，鼠标onmousedown时，获取当前的一些信息，然后在onmousemove时不断更新推拽对象的left和top值，最后在onmouseup时对推拽对象彻底赋值，并进行释放后一系列的程序操作。
现在 h5 出来后呢，不在需要模拟了，先给元素属性加draggable="true" ，然后可以使用已有d标准监听事件api

  • ondragstart
  • ondrag
  • ondragend

注意：拖拽对象必须把 draggable 属性设置为 true，其他开发思维其实和以前一样的，没有多大差别，只是多了更多的监听事件而已。 了解详细拖拽可以去拖放API查看。

地理定位

地理定位这个特性，故名思意，就是获取用户位置信息的。
通过getCurrentPosition(successCallback, failCallback)获取一系列定位信息

  • successCallback：获取地理位置成功的回调
  • failCallback：获取地理位置失败的回调

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

例 1

使用谷歌地图提供的脚本 [http://maps.google.com/maps/api/js?sensor=set_to_true_or_false](http://maps.google.com/maps/api/js?sensor=set_to_true_or_false)

  1. <!DOCTYPE html>
  2. <html>
  4. <body>
  5.   <p id="demo">点击这个按钮，获得您的位置：</p>
  6.   <button onclick="getLocation()">试一下</button>
  7.   <div id="mapholder"></div>
  8.   <script src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
  9.   <script>
  10.     var x = document.getElementById("demo");
  11.     function getLocation() {
  12.       if (navigator.geolocation) {
  13.         navigator.geolocation.getCurrentPosition(showPosition, showError);
  14.       }
  15.       else { x.innerHTML = "Geolocation is not supported by this browser."; }
  16.     }
  18.     function showPosition(position) {
  19.       lat = position.coords.latitude;
  20.       lon = position.coords.longitude;
  21.       latlon = new google.maps.LatLng(lat, lon)
  22.       mapholder = document.getElementById('mapholder')
  23.       mapholder.style.height = '250px';
  24.       mapholder.style.width = '500px';
  26.       var myOptions = {
  27.         center: latlon, zoom: 14,
  28.         mapTypeId: google.maps.MapTypeId.ROADMAP,
  29.         mapTypeControl: false,
  30.         navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
  31.       };
  32.       var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
  33.       var marker = new google.maps.Marker({ position: latlon, map: map, title: "You are here!" });
  34.     }
  36.     function showError(error) {
  37.       switch (error.code) {
  38.         case error.PERMISSION_DENIED:
  39.           x.innerHTML = "User denied the request for Geolocation."
  40.           break;
  41.         case error.POSITION_UNAVAILABLE:
  42.           x.innerHTML = "Location information is unavailable."
  43.           break;
  44.         case error.TIMEOUT:
  45.           x.innerHTML = "The request to get user location timed out."
  46.           break;
  47.         case error.UNKNOWN_ERROR:
  48.           x.innerHTML = "An unknown error occurred."
  49.           break;
  50.       }
  51.     }
  52.   </script>
  53. </body>
  55. </html>

例 2

  1. <div class="map-app"></div>
  2. <script type="module" src="./index.js"></script>
  1. const app = document.querySelector('.map-app')
  3. const initGeolocation = () => {
  4.   const handleSuccess = ({ coords }) => {
  5.     const { latitude, longitude, accuracy } = coords
  6.     app.innerHTML = `
  7.     <p>Accuracy: ${accuracy}</p>
  8.     <p>Latitude: ${latitude}</p>
  9.     <p>Longitude: ${longitude}</p>
  10.     <iframe
  11.       width="600"
  12.       height="300"
  13.       frameborder="0"
  14.       src="https://maps.google.com/maps?q=${latitude},${longitude}&amp;z=14&amp;output=embed"
  15.     ></iframe>
  16.     `
  17.   }
  19.   const handleFailure = (error) => {
  20.     switch (error.code) {
  21.       case error.PERMISSION_DENIED:
  22.         console.log(error.message);
  23.         break;
  24.       case error.POSITION_UNAVAILABLE:
  25.         console.log(error.message);
  26.         break;
  27.       case error.TIMEOUT:
  28.         console.log(error.message);
  29.         break;
  30.       default:
  31.         console.log('Unknow Error');
  32.     }
  33.   }
  34.   const options = {
  35.     timeout: 2000,
  36.     maximumAge: 0
  37.   }
  38.   navigator.geolocation.getCurrentPosition(handleSuccess, handleFailure, options)
  39. }
  41. if ('geolocation' in navigator) {
  42.   initGeolocation()
  43. }

离线缓存

HTML5 通过创建 **cache manifest** 文件，可以创建 web 应用的离线版本。

  1. 开启离线缓存 html 的配置

如果要启用应用程序缓存，必须在文档的 <html> 标签中包含manifest 属性：每个指定了 manifest 的页面在用户对其访问时都会被缓存。
如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。 manifest 文件的建议的文件扩展名是：.appcache

  1. <!DOCTYPE HTML>
  2. <html manifest="demo.appcache">
  3. ...
  4. </html>
  1. 开启离线缓存 manifest 文件的书写

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

manifest 文件有三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

    请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置

CACHE MANIFEST 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html

Web 存储

localStorage、sessionStorage

Websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

WebSocket 属性

  • Socket.readyState 只读属性，表示连接状态
    • 0 - 表示连接尚未建立
    • 1 - 表示连接已建立，可以进行通信
    • 2 - 表示连接正在进行关闭
    • 3 - 表示连接已经关闭或者连接不能打开。
  • Socket.bufferedAmount 只读属性，表示已被send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数

WebSocket 事件

  • Socket.onopen 连接建立时触发
  • Socket.onmessage 客户端接收服务端数据时触发
  • Socket.onerror 通信发生错误时触发

  • Socket.onclose 连接关闭时触发 ```javascript function WebSocketTest() { if (“WebSocket” in window) { alert(“您的浏览器支持 WebSocket!”);

    // 打开一个 web socket var ws = new WebSocket(“ws://localhost:9998/echo”);

    ws.onopen = function () {

    1. // Web Socket 已连接上，使用 send() 方法发送数据
    2. ws.send("发送数据");
    3. alert("数据发送中...");

    };

    ws.onmessage = function (evt) {

    1. var received_msg = evt.data;
    2. alert("数据已接收...");

    };

    ws.onclose = function () {

    1. // 关闭 websocket
    2. alert("连接已关闭...");

    }; }

    else { // 浏览器不支持 WebSocket alert(“您的浏览器不支持 WebSocket!”); } }

WebSocketTest()

  2. <a name="sEvrR"></a>
  3. # Web Worker
  4. `web worker` 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 关于 web worker 的应用大概分为三个步骤：
  6. 1. 创建`web worker`文件，它是一个单独的 js 文件，写好逻辑后，通过`postMessage()`方法把数据发送出去
  7. 2. 调用页面创建 worker 对象，`var w = new Worker("worker文件路径")`。然后通过实例对象调用`onMessage`事件进行监听，并获取 worker 文件里返回的数据
  8. 3. 终止`web worker`，当我们的`web worker`创建后会持续的监听它，需要中止的时候则使用实例上的方法`w.terminate()`
  10. ```javascript
  11. // work.js
  12. // 单独的 web worker 的 js 文件
  13. var i = 0;
  14. function timedCount() {
  15.   i = i + 1;
  16.   setTimeout(() => {
  17.     postMessage(i); //把数据发送出去
  18.   }, 2000)
  19. }
  20. timedCount();
  1. // index.js
  2. const btn = document.getElementById('btn');
  4. btn.onclick = function () {
  5.   const worker = new Worker('./worker.js');
  6.   worker.onmessage = (event) => {
  7.     console.log(event, event.data);
  8.     worker.terminate()
  9.   }
  10. }

注意：由于 Worker 属于外部文件，因此它不能获取 javascript 这些对象： window 对象，document 对象，parent 对象。

参考文章

《HTML5的新特性概述（上）》
《HTML5新特性概述(下)》