Html5 Fundamental

最新推荐文章于 2022-03-11 16:08:47 发布

原创最新推荐文章于 2022-03-11 16:08:47 发布 · 571 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #语言 #web

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML5相较于HTML4的新特性，包括Canvas API、Geolocation API、WebStorage API等，探讨了它们如何改善用户体验，增强Web应用的功能。

区分SGML/HTML/XML/HTML5

SGML(Standard Globalized Markup Language)是用来定义文档的元语言。
HTML是基于SGML的超链接语言，可用于创建Web页面。
HTML头文件：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
其中的”doctype”定义了HTML的版本号，并且引入了”dtd”, 而”dtd”就是使用SGML语言创建的（这下总算追根溯源到面试时经常被问到的 “html文件的doctype/dtd相关问题” 了吧，拿走不谢，嘿嘿）。
XML由SGML衍生而来，是SGML的子集，通常用于处理数据。
HTML5是一种全新的标记语言，有自己的解析规则，不基于SGML，因此不需要DTD定义。
HTML5头文件：<!DOCTYPE html>

HTML5新增特性

HTML5相比HTML4有很多新增（废除）的标签、属性，具体参见官方文档https://www.w3.org/html/ig/zh/wiki/HTML5。HTML5其实是关于图像，位置，存储，速度的优化和改进，其中比较重要的新特性如下：

图像（Canvas）：

HTML5的Canvas API能够配合JavaScript利用键盘控制图形图像，这无疑为现有的网页游戏提供了新的选择和更好的维护性和通用性。脱离了flash插件的网页游戏必然能够获得更大的访问量，更多的用户。一些统计数据表格也可以通过使用canvas标签来达到和用户的交互。
应用如http://vis.uell.net/gsvg/electionAtlasGermany.html。
位置（Geolocation）：

HTML5的Geolocation API主要特点：1. 本身不去获取用户的位置，而是通过其他三方接口来获取，例如IP，GPS，WIFI等方式。2. 用户可以随时开启和关闭，在被程序调用时也会首先征得用户同意，保证了用户的隐私。
存储以及速度（Web Storage）：

如今Web应用的火爆已经是不折不扣的现实，并且相对传统的应用，web应用不需要安装，所占空间小的特性使其具备传统软件应用所不具备的优势，然而，目前制约web应用最大的问题在于网络连接不能够无时无处。在飞机上，汽车上，火车上，有很多地方都无法被网络信号所覆盖，因此web应用也就无法使用。
HTML5的Web Storage API 采用了离线缓存，会生成一个清单文件（manifest file），这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML，CSS，JavaScrpit，图片等相关内容。当使用离线应用时，应用会引入这一清单文件，浏览器会读取这一文件，下载相应的文件，并将其缓存到本地，使得这些web应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之处。

缓存的强大并不止在于离线应用，同样在于对cookies的替代，目前我们经常使用的保存网站密码，使用的就是cookies将密码信息缓存到本地，当需要时再发送至服务器端。然而，cookies有其本身的缺点4KB的大小限制，以及反复在服务器和本地之间传输，并且无法被加密。对于cookies的反复传输，不仅浪费了使用者的带宽、供应商的服务器的性能，更增加了被泄露的危险。
Web Storage API 解救了cookies，据现有的资料，Web Storage API将至少支持4M的空间作为缓存，对于日常的清单文件和基础信息，应该已经足够使用了，毕竟4KB我们不是都使用了这么多年了？速度的提升方式在于，Web Storage API将不再无休止的传输相同的数据给服务器，而只在服务器请求和做出更改时传输变更的必须文件，这样就大大节省了带宽，也减轻了服务器的压力，可谓是一举数得!
应用如https://webkit.org/demos/sticky-notes/。

HTML5 API 摘要

Canvas：本质上是一个位图画布。

使用canvas编程，首先要获取其上下文（context）。接着在上下文中执行动作，最后将这些动作应用到上下文中。可以将canvas的这种编辑方式想象成数据库事务：开发人员先发起一个事务，然后执行某些操作，最后提交事务。

html结构：

<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>

js代码：
```
 function drawDiagonal(){

    //获取canvas元素及其绘图上下文
    var canvas = document.getElementById(‘diagonal’);
    var context = canvas.getContext('2d');

    // 用绝对坐标来创建一条路径
    context.beginPath();
    context.moveTo(70,140);
    context.lineTo(140,70);

    // 将线绘制到canvas上
    context.stroke();
}
window.addEventListener('load',drawDiagonal,true);
```

Audio和Video：多媒体支持

html结构：

<audio id="clickSound">
    <source src="a.ogg">
    <source src="b.mp3">
</audio>
<button id="toggle" onclick="toggleSound()">play</button>

js代码：

function toggleSound() {
    var music = document.getElementById('clickSound');
    var toggle = document.getElementById('toggle');
    if(music.paused){
        music.play();
        toggle.innerHTML = 'Pause';
    }else{
        music.pause();
        toggle.innerHTML = 'Play';
    }
}

Geolocation

请求一个位置信息，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持HTML5地理定位功能的底层设备提供给浏览器。位置信息由纬度／经度坐标和一些其他的元数据组成。有了这些位置信息就可以构建引人注意目的位置感知类应用程序。

两种类型的定位请求API（单次定位请求和重复性的位置更新请求）：
```
window.addEventListener('load',loadDemo,true);
function loadDemo(){
    if(navigator.geolocation){
        navigator.geolocation.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});
    }
}
function updateLocation(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var accuracy = position.coords.accuracy;
    var timestamp = position.timestamp;
}
```
WebSockets

WebSocket作为HTML5一种新的协议，实现了浏览器与服务器的双向通讯。在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。
在此WebSocket 协议中，为我们实现即时服务带来了两大好处：
1. Header,互相沟通的Header是很小的-大概只有2Bytes。
2. Server Push。
在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” (handshaking)。作为这一设计原则的一部分,WebSocket连接的协议规范定义了一个HTTP连接作为其开始生命周期,进而保证其与pre-WebSocket世界的完全向后兼容。通常来说从HTTP协议切换WebSocket称为WebSocket握手。
Web storage

1. localStorage和sessionStorage

二者大同小异，主要区别在生存周期，下面细说。
```
//存
localStorage.backtoken='jartto';
localStorage.setItem('backtoken','');
//取
localStorage.getItem('backtoken');
//删
localStorage.removeItem('backtoken');
```
（1）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

（2）sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

（3）localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

（4）二者均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

（5）不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。

Tips：这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

2. 离线存储

HTML5 的 Web storage API 采用了离线缓存，会生成一个清单文件（manifest file)，这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的html,css,javascript,图片等相关内容。当使用离线应用时，应用会引入这一清单文件，浏览器会读取这一文件，下载相应的文件，并将其缓存到本地。使得这些web应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之处。

首先，需要在页面头加入manifest属性：
```
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
```
然后cache.manifest文件的书写方式为：
```
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
```
离线存储的manifest一般由三个部分组成:

（1）CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

（2）NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

（3）FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。
Communication

出于安全方面的考虑，运行在同一浏览器中的框架，标签页，窗口间的通信一直都受到了严格的限制。如果浏览器内部能提供直接的通信机制，就能更好的组织这些应用。为了满足上述需求，浏览器厂商和标准制定机构一致同意引入一种新功能：跨文档消息通信。

跨文档消息通信可以确保iframe，标签页，窗口间安全的进行跨源通信。它把postMessage API定义为发送消息的标准方式。利用postMessage发送消息非常简单，代码如下：

chatFrame.contentWindow.postMessage(‘Hello,world’,’http://jartto.wang');

接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。
```
window.addEventListener('message',messageHandler,true);
function messageHandler(e){
    switch(e.origin) {
        case 'friend.example.com':
        // 处理消息
        processMessage(e.data);
        break;
        default:
        // 消息来源无法识别，消息被忽略
    }
}
```
Web Workers

HTML5 Web Workers可以让Web 应用程序具备后台处理能力，它对多线程的支持非常好，因此，使用了HTML5的Javascript应用程序可以充分利用多核CPU带来的优势。将耗时长的任务分配给HTML5 Web Workers执行，可以避免弹出脚本运行缓慢的警告。
Web Workers不能直接访问Web 页面和DOM API。Web Workers的另一个用途是监听由后台服务器广播的新闻消息，收到后台服务的消息后，将其显示在Web页面上。
requestAnimationFrame

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。比如，通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。
```
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();
// usage:
// instead of setInterval(render, 16) ....
(function animloop(){
    requestAnimFrame(animloop);
    render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.
```
Refer to:

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

http://www.webhek.com/requestanimationframe/