HTML 5 是什么？

时间  2019-11-06
标签 html 什么 栏目 HTML 繁體版
原文   原文链接

前言

做为程序员，技术的落实与巩固是必要的，所以想到写个系列，名为 why what or how 每篇文章试图解释清楚一个问题。javascript

此次的 why what or how 主题：如今几乎全部人都知道了 HTML5 ，那么 H5 到底相比于 HTML4 有什么区别呢？php

升级版？标准版！

HTML5 作为 HTML 标准的第 5 版，于 2014 年发布，相信关注过 HTML5 的发展史的朋友都知道该版本是 WHATWG 和 W3C 握手言和后诞生的，是 W3C 组织与浏览器厂商相互妥协的结果，其中的绝大部分规范都由 WHATWG 组织所制定，以后由 W3C 采纳并入标准中。css

但 HTML5 是 HTML4 的升级版吗？html

是也不是，若是以版本的更迭来看，确实，HTML5 确实在 HTML4 以后诞生，可是 HTML5 本质上却已经不一样于 HTML4 了。前端

相信你们目前都还留有对 HTML4 的些许印象，在写 HTML4 时须要加一段特殊的说明来声明文档类型的：html5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
复制代码

该段声明说明了该文档基于 http://www.w3.org/TR/html4/strict.dtd 规范，从一个侧面来看，该文档仅仅是符合这种规范的文本而已，而这种规范被称为 SGML（标准通用标记语言）。java

接着在来看看 HTML5 的文档声明：ios

<!DOCTYPE html>
复制代码

简简单单，清晰明了，说明该文档是 HTML 文档，并无基于规范。git

从浏览器的角度来对比，HTML5 以前的版本，浏览器必需要从 W3C 官网上获取规范文件，才能解析文档，而 HTML5 文档能够被浏览器直接识别。程序员

这些角度都代表了，HTML5 以前的 HTML 是 SGML 规范的一种实现，而 HTML5 倒是原本来本的 HTML，有本身的规范，所以 HTML5 能够认为是一种新的标准，该规标准诞生于 HTML4，却不是 HTML4 的升级。

但无论是基于 SGML 的 HTML 版本，仍是 HTML5 版本，其语法内容都差很少。所以也不须要过多的纠结在这个问题上，实用主义者，能用好用就行~

语义化

在看过什么是 CSS？以后（没有的能够看看），应该知道样式的发展过程当中经历了一个用标签表达样式的阶段，该阶段产生了一些样式标签，好比 <font> <center> <big> 等。但 HTML5 提出结构和样式分离，样式表达在 css 内，而 HTML 负责结构，样式标签正式宣告脱离舞台，在 HTML5 的规范下，这些标签正式被废除，一些表明结构的标签被提出并规范。

结构化，样式脱离的 HTML 文档，极大提升了文档的表达力，无论是机器仍是人类都能更快的理解文档的结构，这种文档就被称为语义化文档。

语义化主要体如今如下几个方面：

结构标签

写过 HTML5 的都知道大概有哪些标签新加了进来，这里大体罗列一下

标签 释义
section 表明文档组成的一部分，应该与 h[1-6] 结合使用，表示文档结构。
article 表明文档的独立内容区域，该区域内容为博文、报纸文章等内容。
main 表明文档的主要内容区域。
aside 表明与内容主题略有相关的区域。
header 表明该文档的介绍性区域。
footer 表明该文档的页脚，一般用于存放版权，做者等信息。
nav 表明文章导航区域。
figure 表明该区域内有多媒体内容，一般多媒体标签做为该标签的子元素。
template 模板区域，能够被 JavaScript 所使用。
video 经过该标签能够引用视频，该标签表明视频能够显示的区域。
audio 经过该标签能够引用音频，该标签表明音频能够显示的区域。
track 该标签为 video 提供了字幕。
mark 表明须要特殊注意的内容区域。
progress 该区域表明某项任务的进度。
meter 该区域表明某项内容的使用量，好比 CPU 使用量等。
time 该区域表明时间。
canvas 该区域表明能够被 JavaScript 所控制的画布。

可能有些朋友会纳闷，这些东西其实吧，也不是那么的重要，用 div + css 也都能实现，并且各个浏览器上表现的还都一致，还不用考虑兼容问题。那么为何这里还提呢？

试想一个问题？

若是你是浏览器，或者说是解析 HTML5 文本内容的程序，你会怎么看待 HTML4 与 HTML5 ？

首先第一个须要解决的问题：显示页面，二者都能解析，生成树状结构，并成功的显示页面，这也是大部分用户所须要的。在这方面二者平局，HTML5 没有任何的优点。

那么如今第二个问题，识别该文档，这或许不是大部分用户的需求，但小部分用户并不意味着人数少。

相信大部分朋友都有使用搜索引擎的习惯，那么搜索引擎是如何帮你找到这个网页的呢？

搜索引擎经过适当的策略解析经过爬虫抓取到的网页内容，将该文章进行分类，经过用户给的搜索词进行匹配，最终将结果呈现给用户，爬虫的解析策略，面对 HTML4 时，须要识别出特定的 div 而这个特定的 div 该如何去找呢？经验？特定字符串？面对 HTML4 ，只能获得一个个的 div 而哪一个 div ，emmm... 很差找。面对 HTML5 呢？程序从结构就能大体理解文档的结构，进而识别出该篇文章的大致内容。

问题二能够简单认为：咱们须要生成文章大纲，一篇文章能够有几部分的内容组成，而规范这些内容的就是大纲，相信有写过文章的都知道大纲的做用，能够清醒的表达出内容，那么 HTML4 呢，一堆 div 分不清哪一个是主体，哪一个是次要内容，但 HTML5 呢，结构清晰，解析程序也能很快的生成文档的大纲。

大纲只能用在搜索引擎吗？并非，阅读设备就很须要大纲生成目录，无障碍设备能够识别到文档的主体内容等等。

看到这里，相信你们对于语义化标签的重要性也有了了解，使用成本几乎为 0，但文档的清晰程度却上了一个层级，干吗不用呢？

新增的表单类型

表单类型（type）表明了改表单内容的类型，新增了如下几个

  • tel
  • search
  • url
  • email
  • date
  • time
  • number
  • range
  • color

新的标签属性

属性 示例 含义
target <base target="..."> base 标签新增 target属性，虽然以前已经被普遍的使用了。
charset <meta charset="utf-8"> meta 标签新增 charset 属性，规范文档所使用的字符集。
placeholder <input placeholder="..."> 可输入的表单元素新增 placeholder 属性，表明默认内容。
form <input form=1> 表单元素新增 form 属性，表明关联的 form 表单，而不须要在 form 标签内。
contenteditable <div contenteditable> 表明该元素可编辑。
data-* <div data-a="..."> 与该元素相关联的数据，可在 JavaScript 中获取。

以上为 HTML5 语义化的具体呈现，但愿你们拥抱并使用 HTML5 的新标签。

多媒体

HTML5 的上一代标准 HTML4 于 1999 年发布，当时互联网还处于图文混排的时代，通信也不是很发达，数据的交互受限于网速，可是近 20 年来数据通信的高速发展图文混排已经不能知足用户的需求了，因为浏览器并不支持视频促成了 Flash/ActionScript 的发展，可是因为 Flash 的繁琐（须要装插件）以及安全问题，Apple 拒绝使用 Flash，以后各大浏览器厂商也开始重视 Flash 的安全问题，提出了多媒体标签，直到 HTML5 规范化了多媒体应用。

相关多媒体标签

建议查看英文的相关文档，中文的翻译文档好像尚未及时跟进。

除了多媒体标签的更新，这里同时还列举下一些与显示相关的内容：

  • Canvas

画布，可使用 JavaScript 在改元素规定的区域内进行绘画，文档说明。

  • WebGL

光栅化的图片绘画引擎，主要用于 3D 制做，文档说明，以及WebGL 理论基础

  • Camera API

经过Camera API，你可使用手机的摄像头拍照，而后把拍到的照片发送给当前网页。

  • SVG

如今能够直接在 HTML5 文档中写 SVG（可缩放矢量图形），一种用于描述基于二维的矢量图形的，基于 XML 的标记语言。文档说明。

  • MathML

MathML（Mathematical Markup Language），是一种基于 XML 的标记语言，用以描述数学公式，但目前浏览器的支持力度有点低。具体能够查看文档说明

通讯

HTML5 以前，JavaScript 只能经过 XMLHttpRequest 与后端程序进行交互，随着 HTML5 标准的提出，前端可使用各类各样的姿式与后端进行沟通，数据的交互变的简单，灵活。

fetch

XMLHttpRequest，虽然在实际开发中几乎很难使用到它，可是对于它的封装库咱们却常用，好比 axios $.ajax 。虽说封装的库下降使用成本，但源头是复杂的，并且 XMLHttpRequest 是基于回调的异步模式，虽然 axios 进行了 Promise 化，但毕竟不是原生支持。所以一个基于 Promise 的请求 API 于 HTML5 标准内提出：fetch。

一个简单的 fetch 例子

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });
复制代码

fetch 支持两个参数，

  1. 资源地址
  2. 请求参数，用于设置请求方式，请求头，请求体等内容，一个 JavaScript 对象。

学习资源：

WebSocket

在 HTML5 出现以前，作一个实时聊天的 web 项目是极其困难的，因为以前的版本仅支持浏览器主动向服务器进行发送内容，必须先有请求才能有服务器响应的数据，简单的来讲服务器并不能主动将数据提交给客户端。

面对这些需求，你们的作法一般是轮询，经过前端设置一个定时器，每隔固定的时间去请求服务器资源，即便服务器并无发生数据更新。这浪费了极大的服务器资源，那么有没有一种方式支持服务器推送呢？

有！WebSocket 是 HTML5 新增的一种协议，目的是在浏览器和服务器之间创建一个双向数据通道，浏览器能够推送数据到服务端，服务端也能够推送数据到客户端。WebSocket 对于前端来讲仅是一个简单的 API，最重要的是服务端的支持。

WebSocket 的客户端代码示例

// 建立连接
const socket = new WebSocket('ws://localhost:8080');

// 连接开启事件
socket.addEventListener('open', function (event) {
    // 向服务端推送数据
    socket.send('Hello Server!');
});

// 服务端推送事件，event.data 即为服务端推送的数据
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
复制代码

至于服务端如何实现，不一样的语言有不一样的实现，比较出名的是 Node 下的 Socket.IO，若是担忧服务端语言实现困难，不妨用 Node 搭建中间层，使用 Node 进行与客户端的沟通，并将数据交由服务端程序处理。固然也能够查看 MDN 的文章：编写 WebSocket 服务器

一些资源

EventSource

fetch 实现了请求的 Promise 化，WebSocket 实现了双工通讯，那么 EventSource 又是什么？

简单的来讲，EventSource 实现了服务端对客户端的单向通讯，能够理解为客户端是订阅者，服务端是内容发布者，也就是发布订阅模式的实现。

一个简单的例子

// 开始订阅
var evtSource = new EventSource('sse.php');
var eventList = document.querySelector('ul');

// 服务端发布数据回调
evtSource.onmessage = function(event) {
    // event.data 即为服务端发布的数据
    console.log('Message from server ', event.data);
}
复制代码

一样的前端代码很简单，服务端须要实现该通讯方式须要有必定的成本。具体能够查看一下文档

WebRTC

WebRTC（网页即时通讯），是一个支持网页浏览器进行实时语音对话或视频对话的 API。因为该 API 目前并未归入标准中，这里就不过多的深刻了，能够经过如下文档进行了解：

存储

在 HTML5 出现以前，前端开发者仅能经过 cookie 来存储用户在不一样页面之间跳转的数据，但使用 cookie 来存储数据其意义上是不对的，不能说 cookie 能够在同域名下通用，就让它来携带各类各样的数据，cookie 应该是用来标志用户身份的。HTML5 出现以后，规范了数据的存储，cookie 也回到了原始的用途。

storage

相信你们对于该 API 已经熟悉的不能在熟悉了，storage 分为两部分，sessionStorage 与 localStorage，拥有一样的方法：

  • setItem
  • getItem
  • removeItem
  • clear

localStorage 会将数据永久的存储下来（固然用户能够主动清楚），sessionStorage 中设置的数据当用户关闭页面后会清除。

IndexedDB

小型的数据由 storage 已经够用，那么浏览器端如何进行大量数据的存储呢？IndexedDB 就是 HTML5 给出的答案。IndexedDB 是浏览器内置的一个数据库，用于存储结构化数据。但这个数据库是异步存取数据的，说实话有点难使用，若是使用他，那基本上全部的代码都在 then 方法里了。考虑使用吧。

能够经过使用 IndexedDB进行学习和使用。

DOM 的更新

query

  • querySelector 使用 CSS 选择器进行选择元素，仅选取匹配元素中的第一个。
  • querySelectorAll 使用 CSS 选择器进行选择元素，返回全部匹配的元素。

data-*

能够经过在标签上使用 data-* 设置与元素绑定的数据，JavaScript 能够经过 dataset 获取或设置。

<p id="title" data-text="hello"></p>
复制代码
const p = document.querySelector('#title');
p.dataset.text // hello
复制代码

元素添加

  • prepend 在规定标签的最前面添加元素
  • append 在规定标签最后面添加元素

element 相关

  • firstElementChild 获取规定标签中的第一个子元素
  • lastElementChild 获取规定标签中的最后一个子元素
  • previousElementSibling 获取前一个兄弟元素
  • nextElementSibling 获取后一个兄弟元素

类名操做

  • Node.classList.add 添加类名
  • Node.classList.remove 移除类名
  • Node.classList.toggle 切换类名
  • Node.classList.contains 检测是否有类名

拖拽

在 HTML4 中想实现元素拖拽，咱们须要这样一个过程，获取元素，设置元素定位，与须要被拖入的元素进行碰撞检测，检测完成后进行拖入操做。在 HTML5 中规范了这一过程。

相关事件

  • dragstart 设置在拖动元素上，标志拖动开始
  • dragenter 设置在拖入元素上，标志有元素开始拖入到该元素内
  • dragover 设置在拖入元素上，标志元素彻底拖入该元素
  • dragleave 设置在拖入元素上，标志元素即将梨块该元素
  • drop 设置在拖入元素上，标志拖动元素放下

拖动元素与拖入元素能够经过 e.dataTransfer.getData(xxx) e.dataTransfer.setData(xxx, xxx) 进行数据交互。

MutationObserver

MutationObserver 字面意思为变更观察器，用来观察文档节点的变更。相关文章

最后

DOM 中，接触最多的也就这些内容了，更为详细的内容能够经过DOM STANDARD查看。

BOM 的新增

在什么是 JAVASCRIPT中，咱们提到过 BOM 并无相关的标准去规范它，HTML5 中一些没有归到 DOM 中 API 更新就归到这。

Web Workers

咱们都知道 JavaScript 是以单线程的形式运行在客户端，这就避免不了当进行大规模的数据运算时所带来的堵塞问题，为解决这一问题 HTML5 提出了 Web Workers 的概念，并最终归入规范。使用 Web Workers 能够将于页面渲染无关的数据运算代码放入另外一个线程，线程间经过 postMessage 发送数据，经过 onmessage 回调获取数据。

一个简单的例子

// workers.js
let i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout(timedCount, 500);
}
timedCount();
复制代码
const w = new Worker("workers.js");
w.onmessage=function(event){
    console.log('Message from worker ', event.data);
};
复制代码

相关资源：

目前大火的 PWA 应用，其核心 Service Worker 其实也是 Web Workers 的一个实现。 Service Worker 使用编程的方式来进行资源的缓存，与后台进行数据同步等内容。虽然该内容已在很多的浏览器上实现，但标准仍在草案阶段，等出标准规范在详细介绍。

相关资源

History

在 HTML5 以前，前端开发者只能经过 history 对象进行前进后退的动做，但却不能在不刷新当前页面的状况下进行 url 修改，在 HTML5 以前，单页应用仅能经过 hash 模式进行路由管理，但经过 HTML5 新提出的 history API ，单页应用就能像正常应用那样管理页面的 url 了。经过如下 3 个方法便可：

  • pushState 不刷新页面导航到指定 URL 并产生历史记录。
  • replaceState 不刷新页面并将页面当前 URL 替换为指定 URL，不产生历史记录。
  • popstate 事件 在当前页面点击返回时，window 对象会触发该事件，可使用 addEventListener 进行监听。

相关资源

requestAnimationFrame

通知浏览器，在下一次重绘以前调用指定 callback。因为重绘与屏幕刷新率挂钩，所以该 API 的调用也与屏幕刷新率挂钩，可使用该 API 进行一些复杂运算的分解，将任务放在每次刷新的间隔中，这样就不会产生屏幕要刷新了但浏览器却能及时绘制出页面的尴尬状况出现，使得页面显示平滑，不掉帧。所以该 API 的出现促进了 Canvas 的发展，而 Canvas 的发展又促进了页游的发展。

  • requestAnimationFrame(callback)

若是想实现相似定时器的效果，只须要在 callback 中再次调用 requestAnimationFrame 便可。

相关资源

全屏 API

  • Element.requestFullscreen() 将当前元素全屏展现
  • Document.exitFullscreen() 取消全屏显示

相关资源

获取地理位置信息

  • navigator.geolocation.watchPosition() 监听地理位置信息，当发生改变时，触发回调
  • navigator.geolocation.getCurrentPosition() 获取地理位置信息

以上两方法都须要传入，成功回调和失败回调，分别为参一和参二。

相关资源

CSS3

在什么是 CSS？中，咱们提到过，CSS 标准被 W3C 采纳，并最终成为 HTML 标准的一部分，所以 CSS 内容的更新也算是 HTML5 更新的一部分。

这部分单独说吧。

总结

惯例，问几个问题

  • HTML5 涵盖了那几方便面的更新？
  • 通讯方式有什么新姿式？
  • 语义化的体现，以及语义化的做用？
  • js 如何更好的处理数据而不影响页面渲染？
  • 单页应用的 history 是基于那些 api 实现的？

谈谈感觉

随着 HTML5 的更新，前端在也不是切图仔，浏览器也开始作为了一个 GUI 工具存在，而不只是为了展现页面。相信随着技术的发展，当通信延迟下降到必定程度后，乔帮主的设想 all in browser 将会成为现实。

参考

最后的最后

该系列全部问题由 minimo 提出，爱你哟~~~

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程