前言作为一个程序员，技术的落实和巩固是很有必要的，所以我想到了写一个系列叫做whywhatorhow每篇文章试图把一个问题解释清楚。这次的whywhatorhow主题：现在几乎人人都知道HTML5了，那么H5和HTML4有什么区别呢？升级版？标准版！HTML5作为HTML标准的第五版，于2014年发布，相信关注过HTML5发展史的朋友都知道，这个版本是在WHATWG和W3C握手之后诞生的。它是W3C组织与浏览器厂商相互妥协的结果，其中大部分由WHATWG组织制定，然后被W3C采纳并纳入标准。但是HTML5是HTML4的升级吗？是也不是，如果看版本变化的话，确实HTML5是在HTML4之后诞生的，但是HTML5和HTML4有本质的区别。相信大家对HTML4还是有一点印象的。编写HTML4时，需要添加特殊说明来声明文档类型：该段声明该文档基于http://www.w3.org/TR/html4/strict.dtd规范，从一方面来说，该文档只是符合该规范的文本，已知作为SGML（标准通用标记语言）。接下来我们看一下HTML5的文档声明：简单明了，说明该文档是HTML文档，没有规范。从浏览器的角度来看，在之前的HTML5版本中，浏览器必须从W3C官网获取规范文件才能解析文档，而HTML5文档可以直接被浏览器识别。这些角度说明HTML5之前的HTML是SGML规范的一种实现，而HTML5是原始的HTML，有自己的规范，所以HTML5可以认为是一个新的标准，诞生于HTML4，而不是HTML4的升级。但无论是基于SGML的HTML版本还是HTML5版本，语法内容都差不多。因此，不必过分担心这个问题。对于实用主义者来说，用好它就够了~语义学的看过什么是CSS？之后（没有的话可以看看），应该知道样式的发展经历了一个用标签表达样式的阶段，产生了一些样式标签，比如
等等。但是，HTML5提出了结构和样式的分离。样式表达在css中，而HTML负责结构。样式标签正式宣布退出舞台。在HTML5规范下，正式废除了这些标签，提出并规范了一些代表结构的标签。结构化、风格分离的HTML文档大大提高了文档的表现力，机器和人类都可以更快地理解文档的结构。此类文档称为语义文档。语义主要体现在以下几个方面：结构化标签写过HTML5的人都知道加了哪些标签。这是标签定义的粗略列表。section代表文档的一部分，应该与h[1-6]一起使用，代表文档结构。article代表文档的一个独立的内容区域，该区域的内容为博客文章、报纸文章等。main代表文档的主要内容区域。aside代表与内容主题稍有关联的区域。header代表文档的介绍区。footer表示文档的页脚，通常用于存放版权、作者等信息。nav代表文章导航区。figure表示该区域有多媒体内容，通常多媒体标签是该标签的子元素。模板模板区域可以被JavaScript使用。video可以通过这个标签来引用视频，代表视频可以展示的区域。Audio可以通过这个标签来引用audio，代表可以显示音频的区域。track这个标签提供视频的字幕。标记表示需要特别注意的内容区域。进度此区域表示任务的进度。meter这个区域代表某项内容的使用情况，比如CPU使用率等。time这个字段代表时间。canvas该区域表示可以由JavaScript控制的画布。可能有朋友会疑惑，这些东西其实没那么重要，用div+css也可以实现，而且在所有浏览器上表现一致，不用考虑兼容性问题。那为什么要在这里提呢？试想一个问题？如果你是一个浏览器，或者是一个解析HTML5文本内容的程序，你会怎么看待HTML4和HTML5？首先，第一个需要解决的问题：显示页面，两者都可以解析，生成树状结构，成功显示页面，这是大部分用户需要的。在这方面，两者打成平手，HTML5没有优势。所以现在第二个问题是识别文档。这可能不是大多数用户的需求，但用户少并不代表用户少。相信大部分朋友都有使用搜索引擎的习惯，那么搜索引擎是如何帮你找到这个网页的呢？搜索引擎通过适当的策略对爬虫抓取的网页内容进行分析，对文章进行分类，匹配用户给出的搜索词，最后将结果呈现给用户。爬虫的分析策略在面对HTML4时需要识别Howtofindaspecificdiv，如何找到这个特定的div？经验？具体字符串？面对HTML4，只能一个一个的获取div，而哪个div，emmm...很难找。HTML5呢？程序可以从结构上大致了解文档的结构，进而识别出文章的大概内容。问题2可以简单的认为：我们需要生成一个文章大纲。一篇文章可以由几个部分组成，大纲就是规范这些内容的。相信写过文章的人都知道大纲的作用，能够清楚的表达出内容。至于HTML4，一堆div分不清哪些是主体，哪些是次要内容，但在HTML5中，结构清晰，解析器可以快速生成文档大纲。大纲仅适用于搜索引擎吗？不是的，阅读设备需要大纲来生成目录，无障碍设备可以识别文档的主要内容等等。看到这里，相信大家都明白语义标签的重要性了。使用成本几乎为0，但文档的清晰度却提高了一个档次。为什么不？新增的表单类型表单类型（type）表示表单内容的类型，新增如下：虽然之前已经被广泛使用。charsetmeta标签增加了一个charset属性，用来规范文档使用的字符集。placeholderplaceholder属性被添加到可以输入的表单元素中，代表默认的内容。form表单元素添加了一个form属性，表示关联的表单表单，不需要在form标签中。contenteditable表示元素可以编辑。data-*与此元素关联的数据，在JavaScript中可用。以上就是HTML5语义的具体呈现。我希望您接受并使用新的HTML5标签。HTML4，即多媒体HTML5的上一代标准，发布于1999年，当时的互联网还处于图文混杂的时代，通讯还不是很发达。数据的交互受到网络速度的限制。但由于Flash的繁琐（需要安装插件）和安全问题，Apple拒绝使用Flash。之后各大浏览器厂商也开始关注Flash的安全问题，并提出了多媒体标签，直到HTML5规范了多媒体应用。相关的多媒体标签AudioVideo，建议查看英文的相关文档。中文翻译文档好像没有及时跟进。除了多媒体标签的更新，这里还有一些显示相关的内容：Canvas，可以使用JavaScript在修改元素指定的区域绘制，文档描述。WebGL光栅化图像绘制引擎，主要用于3D制作，文档制作，WebGL理论基础CameraAPI通过CameraAPI，可以使用手机的摄像头进行拍照，然后将拍摄的图片发送到当前网页。SVG现在可以直接在HTML5文档中编写SVG（可缩放矢量图形），这是一种基于XML的标记语言，用于描述二维矢量图形。文档说明。MathMLMathML（MathematicalMarkupLanguage）是一种基于XML的标记语言，用于描述数学公式，但目前浏览器支持有点低。详情请参考说明通信的文档。在HTML5之前，JavaScript只能通过XMLHttpRequest与后端程序进行交互。随着HTML5标准的引入，前端可以使用各种姿势与后端进行通信，数据的交互变得简单。灵活的。fetchXMLHttpRequest，虽然在实际开发中几乎很难用到，但是我们经常会用到它的封装库，比如axios$.ajax。封装库虽然降低了使用成本，但来源复杂，XMLHttpRequest是基于回调的异步模式。axios虽然已经基于Promise，但毕竟原生不支持。于是在HTML5标准中提出了一个基于Promise的请求API：fetch。一个简单的抓取示例);});fetch支持两个参数，资源地址请求参数，用于设置请求方法、请求头、请求体等，和一个JavaScript对象。学习资源：MDN在HTML5出现之前使用FetchWHATWGFetchWebSocket，做一个实时聊天的web项目是极其困难的，因为之前的版本只支持浏览器主动向服务器发送内容，必须要有请求才可以servercanresponsethedata，简单的说，server不能主动向client提交数据。面对这些需求，大家的做法通常都是轮询，通过前端设置一个定时器，定时请求服务器资源，即使服务器不更新数据。这样浪费了很多服务器资源，那么有没有办法支持服务器推送呢？有！WebSocket是HTML5中新增的协议。目的是在浏览器和服务器之间建立双向数据通道。浏览器可以向服务器推送数据，服务器也可以向客户端推送数据。WebSocket只是一个简单的前端API，最重要的是服务端的支持。WebSocket客户端代码示例//创建链接constsocket=newWebSocket('ws://localhost:8080');//链接打开事件socket.addEventListener('open',function(event){//发送到服务器推送数据socket.send('HelloServer!');});//服务器推送事件，event.data为服务器推送的数据socket.addEventListener('message',function(event){console.log('Message来自服务器',event.data);});至于服务器如何实现，不同的语言有不同的实现。比较有名的是Node下的Socket.IO。如果担心服务端语言实现困难，不妨使用Node搭建中间层，使用Node与客户端通信，将数据交给服务端程序处理。当然也可以看看MDN文章：为WebSocket服务器写一些资源WHATWGWebsocketswebsocket.orgHTML5WebSocketMDNWebSocketsEventSourcefetch实现请求的Promise，WebSocket实现双工通信，那么EventSource是什么？简单的说，Eve??ntSource实现了从服务端到客户端的单向通信。可以理解为客户端是订阅者，服务端是内容发布者，是发布-订阅模型的实现。一个简单的例子//开始订阅varevtSource=newEventSource('sse.php');vareventList=document.querySelector('ul');//服务器发布数据回调evtSource.onmessage=function(event){//event.data为服务器发布的数据console.log('Messagefromserver',event.data);}同样的前端代码很简单，服务端需要实现这个通信方式，需要一定的成本。详情可以查看文档WHATWGEventSourceMDNEventSourcesee.php写WebRTCWebRTC（WebInstantMessaging），是一种支持网页浏览器进行实时语音或视频对话的API。由于此API当前未包含在标准中，因此此处没有太多深入的信息。您可以通过以下文档了解它：MDNWebRTCAPIW3CWebRTC1.0存储在HTML5出现之前。但是使用cookies来存储数据是错误的。同一个域名不能说cookie可以用，就让它承载各种数据吧。应使用Cookie来识别用户。HTML5出现后，数据的存储被标准化，cookie又回到了最初的目的。这个API相信大家已经很熟悉了，所以存储分为sessionStorage和localStorage两部分，它们有相同的方法：setItemgetItemremoveItemclearlocalStorage会永久存储数据（当然用户也可以主动清除），数据集在sessionStorage中，当用户关闭页面时被清除。WHATWGWebstorageMDNStorageIndexedDB对小数据存储足够了，那么如何在浏览器端存储大量数据呢？IndexedDB就是HTML5给出的答案。IndexedDB是浏览器内置的数据库，用于存储结构化数据。但是这个数据库是异步访问数据的。老实说，它有点难用。如果你使用它，基本上所有的代码都在then方法中。考虑使用它。可以通过使用IndexedDB来学习和使用。DOM的更新queryquerySelector使用CSS选择器来选择元素，只选择第一个匹配元素。querySelectorAll使用CSS选择器来选择元素并返回所有匹配的元素。data-*标签上使用data-*可以设置元素绑定的数据，JavaScript可以通过dataset获取或设置。constp=document.querySelector('#title');p.dataset.text//添加前缀到hello元素并将其添加到指定标签前面的元素append添加元素元素到指定标签的末尾relatedfirstElementChild获取指定标签中的第一个子元素lastElementChild获取指定标签中的最后一个子元素previousElementSibling获取前一个兄弟元素nextElementSibling获取类名下一个兄弟元素操作Node.classList.add添加类名Node.classList.remove移除类名Node.classList.toggle切换类名Node.classList.contains检测是否有类名拖拽实现元素拖拽HTML4，我们需要这样一个流程来获取Element，设置元素定位，对需要拖入的元素进行碰撞检测，检测完成后进行拖拽操作。这个过程在HTML5中是标准化的。相关事件：dragstart设置在被拖动的元素上，标志着拖动的开始。dragenter被设置在被拖动的元素上，表示一个元素已经开始被拖动到元素中。dragover设置在被拖动的元素上，表示元素被完全拖入元素中。dragleave设置在被拖动的元素上，表示该元素即将离开该元素。drop设置在被拖动的元素上，表示被拖动的元素被放下。被拖元素和被拖元素可以通过e.dataTransfer.getData(xxx)e.dataTransfer.setData(xxx,xxx)进行数据交互。MutationObserverMutationObserver字面意思是变化观察者，用于观察文档节点的变化。相关文章了解HTML5MutationObserver中的MutationObserver在最后的DOM中，这是大家接触最多的内容。更详细的内容可以通过DOMSTANDARD查看。BOM的添加在WhatisJAVASCRIPT?我们提到BOM没有相关的标准来规范它。HTML5中一些未包含在DOM中的API更新包含在此处。WebWorkers我们都知道JavaScript以单线程的形式运行在客户端，无法避免大规模数据计算带来的阻塞问题。为了解决这个问题，HTML5提出了WebWorkers的概念，并最终包含在规范中。使用WebWorkers，可以将与页面渲染无关的数据计算代码放到另一个线程中，线程间通过postMessage发送数据，通过onmessage回调获取数据。一个简单的例子//workers.jsleti=0;函数timedCount(){i=i+1;postMessage(i);setTimeout(timedCount,500);}timedCount();constw=newWorker("workers.js");w.onmessage=function(event){console.log('Messagefromworker',event.data);};相关资源：WHATWGWorkerMDNWorker是目前流行的PWA应用程序，其核心ServiceWorker实际上是WebWorkers的一种实现。ServiceWorker通过编程来缓存资源和与后台同步数据。虽然这个内容已经在很多浏览器上实现了，但是标准还处于草案阶段，后续会详细介绍标准规范。相关资源W3CServiceWorkersHistory在HTML5之前，前端开发者只能通过history对象进行前后移动，不能在不刷新当前页面的情况下修改url。在HTML5之前，单页应用只能使用hash方式进行路由管理，但是通过HTML5提出的新的historyAPI，单页应用可以像普通应用一样管理页面url。使用以下三种方法：pushState在不刷新页面的情况下导航到指定的URL并生成历史记录。replaceState不刷新页面，将页面的当前URL替换为指定的URL，不生成历史记录。popstate事件当当前页面被点击返回时，window对象会触发该事件，可通过addEventListener监听。相关资源MDNDragandDropAPIWHATWGDraganddropDragDrop---API---拖动事件requestAnimationFrame通知浏览器在下次重绘前调用指定的回调。由于重绘是和屏幕刷新率挂钩的，所以这个API的调用也是和屏幕刷新率挂钩的。可以用这个API分解一些复杂的计算，把任务放在每次刷新的区间内，这样就不会出现刷屏请求了。浏览器刷新后还能及时绘制页面的尴尬情况，让页面显示流畅不掉帧。所以这个API的出现促进了Canvas的发展，而Canvas的发展又促进了页游的发展。requestAnimationFrame(callback)如果想实现类似定时器的效果，只需要在回调中再次调用requestAnimationFrame即可。相关资源MDNrequestAnimationFrame全屏APIElement.requestFullscreen()全屏显示当前元素Document.exitFullscreen()取消相关资源全屏显示MDN全屏API获取地理位置信息navigator.geolocation.watchPosition()监听地理位置信息并在发生变化时触发回调navigator.geolocation.getCurrentPosition()获取地理位置信息。以上两个方法都需要传入，成功回调和失败回调分别为参数1和参数2。相关资源MDN在什么是CSS中使用地理定位CSS3？在中，我们提到CSS标准被W3C采纳，最终成为HTML标准的一部分，因此CSS内容的更新也是HTML5更新的一部分。这部分我们单独说一下。总结一下实践，请教几个问题HTML5涵盖方便面的更新？通讯方式有何新变化？语义的体现，以及语义的作用？js如何在不影响页面渲染的情况下更好的处理数据？单页应用的历史是基于哪些API实现的？谈谈我的感受吧。随着HTML5的更新，前端不再是截屏图片，浏览器也开始作为GUI工具存在，而不仅仅是展示页面。相信随着技术的发展，当通信延迟降低到一定程度时，钢柱桥的allinbrowser愿景就会成为现实。参考HTML5HTML5DifferencesfromHTML4HTML5.12ndEditionHTML5.2WHATWG最后最后本系列所有问题都是minimo提出的，爱你们~~~
