• HTML5与HTML4区别简介


    移动互联网的快速发展,尤其是4G时代已经来临,加上微软在Windows 10中搭载了新的浏览器Edge取代了IE的地位,所以现在很多网站都开始抛弃IE朝着HTML5发展,PC端在不同浏览器之间的兼容性问题越来越少,在移动终端上用的甚是广泛,HTML5已成为浏览器标记语言的霸主,这是大势所趋。随着Adobe放弃移动Flash,微软亦将停止发展Silverlight,HTML5的应用仍存在着巨大的上升空间。近期内很可能从广告行业逐渐往游戏行业、广播电视行业和媒体行业转型,不远的将来还能把触角伸得更远。作为新一代Web开发标准,HTML5的未来十分光明,值得我们去学习。

    html4-html5.png

    什么是HTML5?

    HTML5最先由WHATWG(Web超文本应用技术工作组)命名的一种超文本标记语言,随后与W3C组织的XHTML2.0相结合,产生现在最新一代的超文本标记语言。

    并为HTML5建立了一些规则:

    • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

    • 减少对外部插件的需求(比如 Flash)

    • 更优秀的错误处理

    • 更多取代脚本的标记

    • HTML5 应该独立于设备

    • 开发进程应对公众透明

    可以简单点理解成:HTML 5 ≈ HTML + CSS3 + JavaScript + API

    我们现在web前端开发的静态网页,一般都是HTML4.01,同时符合W3C规范。那么他们两者直接又有什么实质性的区别呢?

    1.在文档类型声明上

    <!DOCTYPE> 声明能帮助浏览器正确地显示网页。

    HTML5

    <!DOCTYPE html>
    

    HTML4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    

    XHTML1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    

    对比可见:在文档声明上,HTML4和XHTML有一段很长的代码,并且很难记住,想必很多人都是通过编辑器直接生成的吧?而HTML5只有简单的声明,这也方便人们的记忆。

    2.设置页面字符编码

    在HTML5中可以使用对 <meta> 元素直接追加charset属性的方式来指定字符编码。

    HTML4

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    

    HTML5

    <meta charset="UTF-8">
    

    从HTML5开始,对于文件的字符编码推荐使用UTF-8。

    3.在结构语义上

    HTML4: 没有体现结构语义化的标签,我们通常都是这样来表示网站的头部 <div id="header">

    HTML5: 在语义上却有很大的优势。提供了一些新的标签,比如 <header> / <nav> / <section> / <article> / <aside> / <footer> 等。

    html5-layout.jpg

    提供这样的标签有什么样的好处呢?语义化的含义就是用正确的标签做正确的事情,HTML语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有CSS样式情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

    4.其他新增内容

    新增的input类型: email(邮件地址) / url(URL地址) / number(数字) / range(范围滑动条) / date(日期) / search(搜索) / color(颜色选择器) 等。

    新的内联元素:

    • <meter> 定义预定义范围内的度量

    • <progress> 定义任何类型的任务的进度

    • <time> 定义一个日期/时间

    • <mark> 标签定义带有记号的文本

    新的内嵌元素:

    • <video> 定义视频

    • <audio> 定义音频

    • <source> 为媒介元素(比如 <video><audio>)定义媒介资源

    新的交互元素:

    • <details> 定义元素的细节

    • <datagrid> 定义树列表 (tree-list) 中的数据

    • <datalist> 定义选项列表

    • <menu> 定义菜单列表

    • <command> 定义命令按钮

    5.<canvas>替代Flash

    Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件,<canvas> 标签使得开发者只要使用一个标签就能和用户产生UI交互。HTML5已经可以替代Flash的绝大多数特性,而且从HTML5的发展趋势来看,HTML5将逐渐获得对Flash的优势,所以替代趋势肯定是存在的,已经有不少Flash开发者转入了HTML5阵营,所以我相信不久之后HTML5游戏开发这个领域应该会有非常大的发展。

    canvas-game.jpg

    6.废除的元素

    能用CSS替代的元素: 对于 <basefont> / <big> / <center> / <font> / <s> / <strike> / <tt> / <u>这些元素,由于它们的功能都是纯粹的画面展示服务的,而HTML5中提倡把画面展示性功能放在CSS样式中统一编辑,所以将这些元素废除。

    不再使用Frame框架: 由于Frame框架对网页可用性存在负面影响,HTML5中不再支持 <frame>,只支持iframe框架,或者用服务器创建的多个页面组成的复合页面的形式。

    只有部分浏览器支持的元素: <applet> / <bgsound> / <blink> / <marquee> 等元素。<bgsound><marquee> 只被IE支持,被HTML5废除。其中 <applet> 可由 <embed><object> 替代,<bgsound> 可由 <audio> 替代,<marquee> 可由JavaScript编程方式替代。

    7.本地存储

    HTML5 Storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并在以后需要的时候进行获取。这个概念和Cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这使得Cookie速度很慢而且效率也不高。HTML5的Storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。

    HTML5提供了两种在客户端存储数据的新方法:

    • localStorage - 没有时间限制的数据存储

    • sessionStorage - 针对一个session的数据存储

    如果需要保存一些数据到用户的浏览器,而这些数据又不需要每个请求都提交给服务器,不妨考虑使用本地存储。

  • 相关阅读:
    SpringBoot整合Mybatis之进门篇
    Tomcat和Java Virtual Machine的性能调优总结
    一次浴火重生的MySQL优化(EXPLAIN命令详解)
    简单聊聊不可或缺的Nginx反向代理服务器--实现负载均衡【上篇】
    Java设计模式之适配器设计模式(项目升级案例)
    前端错误监控
    三栏布局的5种方案
    prototype原型链详解
    关于mysql修改密码 set password for root@localhost = password('xxx');报错解决方法
    页面布局之三栏布局的5种方案
  • 原文地址:https://www.cnblogs.com/10manongit/p/12968301.html
Copyright © 2020-2023  润新知