01: HTML5和HTML4究竟有哪些不同?
声明方面
HTML5 文件类型声明(<!DOCTYPE>)变成下面的形式:
html
<!DOCTYPE html>
标准方面
HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准,而是形成了自己的一套标准。
标签方面
新增语义标签,其中包括
html
<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>
废除一些网页美化方面的标签,使样式与结构分离更加彻底, 包括
html
<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>
通过增加了<audio>
、<video>
两个标签来实现对多媒体中的音频、视频使用的支持。
属性方面
增加了一些表单属性, 主要是其中的input属性的增强
html
<!-- 此类型要求输入格式正确的email地址 -->
<input type=email >
<!-- 要求输入格式正确的URL地址 -->
<input type=url >
<!-- 要求输入格式数字,默认会有上下两个按钮 -->
<input type=number >
<!-- 时间系列,但目前只有 Opera和Chrome支持 -->
<input type=date >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<!-- 默认占位文字 -->
<input type=text placeholder="your message" >
<!-- 默认聚焦属性 -->
<input type=text autofocus="true" >
其他标签新增了一些属性,
html
<!-- meta标签增加charset属性 -->
<meta charset="utf-8">
<!-- script标签增加async属性 -->
<script async></script>
使部分属性名默认具有boolean属性
html
<!-- 只写属性名默认为true -->
<input type="checkbox" checked/>
<!-- 属性名="属性名"也为true -->
<input type="checkbox" checked="checked"/>
存储方面
新增WebStorage, 包括localStorage和sessionStorage
引入了IndexedDB和Web SQL,允许在浏览器端创建数据库表并存储数据, 两者的区别在于IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库。W3C已经不再支持WebSQL。
引入了应用程序缓存器(application cache),可对web进行缓存,在没有网络的情况下使用,通过manifest文件(已经被web标准废除)或者使用Service Worker创建应用缓存。Service Worker作为一个独立的线程,是一段在后台运行的脚本,可使web app也具有类似原生App的离线使用、消息推送、后台自动更新等能力,为PWA(Progressive Web App)提供了底层的技术支持。
总结
对于HTML5与HTML4的区别,这些基本的概念是要有印象的,也许现在还比较粗略,但后面会慢慢深入了解,达到知其然知其所以然的效果。