day001: HTML5和HTML4究竟有哪些不同？

用户3806669

发布于 2021-03-10 20:53:06

41200

代码可运行

文章被收录于专栏：前端三元同学前端三元同学

运行总次数：0

代码可运行

前端每日一问day001: HTML5和HTML4究竟有哪些不同？

声明方面

HTML5 文件类型声明（）变成下面的形式：

<!DOCTYPE html>

标准方面

HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准，而是形成了自己的一套标准。

标签方面

新增语义标签，其中包括

<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>

废除一些网页美化方面的标签，使样式与结构分离更加彻底, 包括

<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>

通过增加了 <audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持。

属性方面

增加了一些表单属性, 主要是其中的input属性的增强

<!-- 此类型要求输入格式正确的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 autofacus="true" >

其他标签新增了一些属性,

<!-- meta标签增加charset属性 --><meta charset="utf-8"><!-- script标签增加async属性 --><script async></script>

使部分属性名默认具有boolean属性

<!-- 只写属性名默认为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进行缓存，在没有网络的情况下使用，通过创建cache manifest文件,创建应用缓存，为PWA(Progressive Web App)提供了底层的技术支持。