本文详细介绍了HTML和HTML5的历史、文档模式、元素结构以及HTML5的新特性，包括语义化、离线存储、多媒体支持、WebRTC、Canvas和设备访问。通过对HTML5的深入探讨，揭示了其在现代Web开发中的重要作用，帮助读者理解并掌握相关技术。
HTML
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
发展历史
HTML是用于描述网页文档的标记语言。现在我们常常习惯于用数字来描述HTML的版本（如：HTML5），但是最初的时候我们并没有HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。
两年之后，在1995年HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的。
有了以上的两个历史版本，HTML的发展可谓突飞猛进。1996年
HTML3.2成为W3C推荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。
在2000年基于HTML4.01的ISO HTML 成为了国际标准化组织和国际电工委员会的标准。于是被沿用至今，这期间虽然有点小的改动但大方向上终归没有什么变化。 从1993-2000之间短短的7年时间，HTML语言有着很大的发展，基于诸多人的努力，终于产生了我们现在用的HTML语言。
HTML文档模式
IE5.5引入了文档模式的概念，而这个概念是通过使用文档类型DOCTYPE切换实现的。
文档模式主要分为混杂模式和标准模式两种，而标准模式又可划分为标准模式，准标准模式，超级标准模式三种（其中标准模式和准标准模式非常接近，他们的差异几乎可以忽略不计）。具体区分如下图：
标准模式
可通过以下任何一种类型来开启：
HTML 4.01 严格型
<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3c.org/TR/html4/strict.dtd">
XHTML 1.0 严格型
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5
<!-- HTML 5 -->
<!DOCTYPE HTML>
准标准模式
可通过使用过渡型（transitional）或框架集型（frameset）来触发，如下：
HTML 4.01 过渡型
<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/html4/DTD/loose.dtd">
HTML元素
HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如：
<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>
HTML文本级元素和块级元素
HTML（超文本标记语言）中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
元素示例
<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>
块级元素
- div
- h1, h2, h3, h4, h5, h6
- address, center, pre, blockquote, marquee, hr
- ul, li, ol, dl, dd, form, table
行内元素
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
二者区别
格式
默认情况下，块级元素会新起一行。行内元素只能包含数据和其他行内元素。
内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
HTML5
HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念：它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5。
- 语义化：能够让你更恰当地描述你的内容是什么。 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
- 离线&存储：能够让网页在客户端本地存储数据以及更高效地离线运行
- 多媒体：使 video 和 audio 成为了在所有 Web中的一等公民。
- 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
- 性能 &集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
- 设备访问 Device Access：能够处理各种输入和输出设备。
语义化
什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
- 语义化优点： 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析，如盲人阅读器根据语义渲染网页。
- 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
主体结构标签，如图所示：
离线&存储
HTML5 提供一种 应用程序缓存机制，使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器应该缓存的资源并使得离线用户可用。 在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。
使用应用缓存可以得到以下益处：
- 离线浏览: 用户可以在离线状态下浏览网站内容。
- 更快的速度: 因为数据被存储在本地，所以速度会更快。
- 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。
应用缓存如何工作
若想为应用启用应用缓存，你需要在应用页面中的html元素上增加manifest 特性，请看下面的示例：
<html manifest="example.appcache">
...
</html>
manifest 特性与 缓存清单(cache manifest) 文件关联，这个文件包含了浏览器需要为你的应用程序缓存的资源(文件)列表。
我们应当在每一个意图缓存的页面上添加 manifest 特性。浏览器不会缓存不带有manifest 特性的页面，除非这个页面已经被写在清单文件内的列表里了。你没有必要添加所有你意图缓存的页面的清单文件，浏览器会暗中将用户访问过的并带有 manifest 特性的所有页面添加进应用缓存中。
一个简单的缓存清单文件
CACHE MANIFEST
# v1 2019-10-08
# This is another comment
index.html
cache.html
style.css
image1.png
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html
清单文件可以分为三段： CACHE， NETWORK，与 FALLBACK。
- Cache:：这是缓存文件中记录所属的默认段落。在 CACHE后(或直接跟在 CACHE MANIFEST行后)列出的文件会在它们第一次下载完毕后缓存起来。
- NETWORK：在 NETWORK下列出的文件是需要与服务器连接的白名单资源。所有类似资源的请求都会绕过缓存，即使用户处于离线状态。可以使用通配符。
- FALLBACK：FALLBACK指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI——第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。
上面例子中的注释 「v1」很有必要存在。只有当清单文件发生变化时，浏览器才会去更新应用缓存。如果你要更改缓存资源(比如说，你使用了一张新的 header.png 图片)，你必须同时修改清单文件中的内容，以便让浏览器知道它们需要更新缓存。
sessionStorage 和 localStorage
HTML5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
localStorage和sessionStorage操作： localStorage和sessionStorage都具有相同的操作方法，例如有setItem,getItem,removeItem,clear等。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限（约4096字节，sessionStorage和localStorage大小约为5M）的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
多媒体
audio 和 video元素嵌入并支持新的多媒体内容的操作。
audio标签
HTML audio元素用于在文档中表示音频内容。audio元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者source元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持audio元素的浏览器，audio元素也可以作为浏览器不识别的内容加入到文档中。
基本用法
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
<!-- controls -->
<audio controls="controls">
Your browser does not support the <code>audio</code> element.
<source src="foo.wav" type="audio/wav">
</audio>
video标签
HTML video元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将video标签用于音频内容，但是audio元素可能在用户体验上更合适。
基本用法
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a
<a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
WebRTC
WebRTC中的RTC是实时通信的简称，这是一种支持在浏览器客户端之间语音/视频交流和数据分享的技术。WebRTC作为一项标准,使得所有浏览器无需安装插件或第三方软件，就可以点对点地分享应用数据和进行电话会议。
WebRTC组件是通过JavaScript APIs获得的。目前正在开发中的APIs包括：网络流API(能够提供音频和视频)，点对点连接API(允许两个或更多用户通过浏览器进行联系)。同样在开发中的还有数据API，能够让浏览器在实时游戏，文字聊天，文件传输和其他应用中与其他类型数据进行交流。
兼容性
Camera API
通过Camera API，我们可以使用手机的摄像头拍照，然后把拍到的照片发送给当前网页。这些操作主要是通过一个input元素来实现的，其中该元素的type属性必须为"file"，accept属性要允许图片格式，这样才能知道这个文件选择框是用来选择图片的。完整的HTML结构看起来是这样的：
<input type="file" id="take-picture" accept="image/*">
当用户激活这个HTML元素的时候，系统会呈现给用户一个选择界面，其中一个选项是选择本地的图片文件，另一个选项是要通过摄像头直接拍摄照片作为所选文件。如果用户选择了摄像头，则会进入手机的拍照模式。拍照结束后，用户可以选择确定还是放弃。如果接受了，则该照片会作为所选文件发送给那个< input type=“file” >元素，同时触发该元素的onchange事件。
兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Camera API | 未实现 | 未实现 | 未实现 | 未实现 | 未实现 |
| createObjectURL() | 16 | 8.0 (8.0) | 10+ | 未实现 | 未实现 |
| FileReader | 16 | 3.6 (1.9.2) | 10+ | 未实现 | 未实现 |
2D/3D 绘图
canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的（以及不那么简单的）动画。下方的图片展示了一些 canvas的实现示例。
WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 canvas元素中使用。
图片来源Echarts官网，侵删
性能 & 集成
Web Workers
Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O过将消息发布到该代码指定的事件处理程序（反之亦然）。
在worker线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性。然而你可以使用大量window对象之下的东西，包括WebSockets，IndexedDB以及FireFox OS专用的Data Store API等数据存储机制。
workers和主线程间的数据传递通过这样的消息机制进行——双方都使用postMessage()方法发送各自的消息，使用onmessage事件处理函数来响应消息（消息被包含在Message事件的data属性中）。这个过程中数据并不是被共享而是被复制。
基本用法
/* 这段代码中变量first和second代表2个<input>元素；
它们当中任意一个的值发生改变时，myWorker.postMessage([first.value,second.value])会将这2个值组成数组发送给worker。
*/
var myWorker = new Worker('worker.js');
first.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
second.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
在worker中接收到消息后，我们可以写这样一个事件处理函数代码作为响应（worker.js）：
onmessage = function(e) {
console.log('Message received from main script');
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
console.log('Posting message back to main script');
postMessage(workerResult);
}
回到主线程，我们再次使用onmessage以响应worker回传的消息：
myWorker.onmessage = function(e) {
result.textContent = e.data;
console.log('Message received from worker');
}
History API
DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从HTML5开始——提供了对history栈中内容的操作。
// 在history中向后跳转：
window.history.back();
// 在history中向前跳转：
window.history.forward();
// 跳转到 history 中指定的一个点
// 向后移动一个页面 (等同于调用 back()):
window.history.go(-1);
// 向前移动一个页面, 等同于调用了 forward():
window.history.go(1);
// 可以通过查看长度属性的值来确定的历史堆栈中页面的数量:
let numberOfEntries = window.history.length;</
最低0.47元/天 解锁文章
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
