HTML4和HTML5之间除了相似以外的10个主要不同


Posted in HTML / CSS onDecember 13, 2012

HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感觉到,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有很大不同之处。

事实上,HTML5并没有对HTML4做什么重大的修改,它们很多东西都是相似的。
可是,其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要的不同之处(并不是全部,全部列出来是不可能的):

1. HTML5标准还在制定中
这头一个不同之处显而易见,但非常重要,我需要先从它开始。也许你已经注意到了关于HTML5很酷的言论到处都是,但是事实情况是,HTML5是一个还未完成的标准。HTML4已经有10岁了,但它仍是当前正式的标准的事实没有改变。
另一方面,HTML5仍处在早期阶段,以后的修改会不断的出现。你必须考虑到这些,因为你在网站上使用的这些新增加或修改的网页元素会每年都出现一些变化,你需要不停的更新升级你的网站,这可不是你希望的。这就是目前为止,你最好在产品里使用HTML4,只在实验里使用HTML5的原因。

2. 简化的语法
更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写<!doctype html>,这就行了。HTML5的语法兼容HTML4和XHTML1,但不兼容SGML。

3. 一个替代Flash的新 <canvas> 标记
对于Web用户来说,Flash既是一个惊喜,也是一种痛苦。有很多的Web开发人员对HTML5对Flash产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的Flash视频的人来说,用新的 <canvas> 标记生成视频的技术已经到来。
目前, <canvas> 标记并不能提供所有的Flash具有的功能,但假以时日,Flash必将从web上淘汰。我们拭目以待,因为很多人还并不认同这种观点。

4. 新的 <header> 和 <footer> 标记
HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些<header> 和
<footer> 等新标记的出现,它们是专门为标志网站的这些部分设计的。
在开发网站时,你不在需要用<div>标记来标注网页的这些部分。

5. 新的 <section> 和 <article> 标记
跟<header> 和 <footer>标记类似,HTML5中引入的新的<section> 和 <article> 标记可以让开发人员更好的标注页面上的这些区域。
据推测,除了让代码更有组织外,它也能改善SEO效果,能让搜索引擎更容易的分析你的页面。

6. 新的 <menu> 和 <figure> 标记
新的<menu>标记可以被用作普通的菜单,也可以用在工具条和右键菜单上,虽然这些东西在页面上并不常用。
类似的,新的 <figure> 标记是一种更专业的管理页面上文字和图像的方式。当然,你可以用样式表来控制文字和图像,但使用HTML5内置的这个标记更适合。

7. 新的 <audio> 和 <video> 标记
新的<audio> 和 <video> 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称,它们是用来嵌入音频和视频文件的。
除此之外还有一些新的多媒体的标记和属性,例如<track>,它是用来提供跟踪视频的文字信息的。有了这些标记,HTML5使Web2.0特征变得越来越友好。问题在于,在HTML5还未被广泛的接受之前,Web2.0还是老的Web2.0。

8. 全新的表单设计
新的 <form> 和 <forminput> 标记对原有的表单元素进行的全新的修改,它们有很多的新属性(以及一些修改)。如果你经常的开发表单,你应该花时间更详细的研究一下。

9. 不再使用 <b> 和 <font> 标记
对我个人来说,这是一个让我不太理解的改动。我并不认为去除 <b> 和 <font>标记会带来多大的好处。我知道,官方的指导说这些标记可以通过CCS来做更好的处理,但这样一来,为了在文章一两个地方出现的这种标记,你就需要在独立的css和文本两个地方来实现这一的功能,岂不笨拙。也许我们以后会习惯这种方法。

10. 不再使用 <frame>, <center>, <big> 标记
事实上,我已经记不清曾经何时用过这些标记了,所以,我并不为去除这些标记感到悲哀。相同的原因,有更好的标记能实现它们的功能——这很好,任何作废的标记从标准中剔除都是受欢迎的。
这10个HTML5和HTML4之间的不同只是整个新的规范中的一小部分。除了这些主要的变动外,我还可以略提一下一些次要的改动,比如修改了<ol> 标记的属性,让它能够倒排序,对<u>标记也做了修改。
所有这些次要的改动数量众多。而且新的修改也在不断的增加,因此,如果你想实时跟踪最新的动向,你需要经常的查看w3.org的HTML4 和 HTML5之间的不同这个页面。如果你很心急,想在你的工作中使用这些新的标记和属性,我劝告你最好只是做实验,原因已经说的很清楚了,这些新标记和新属性在将来也许会有很大的改变,所以,除非你不断的更新你的代码,它们很可能会过期失效。
尽管如今大多数流行的浏览器的最新版都支持HTML5,但有些新的(或修改的)标记和属性它们并不支持,所以你的网页在用户的屏幕上有可能前后显示的不一致。耐心等待,等待HTML5真正可以实用时候。目前还不是时候。

HTML / CSS 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 #HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 #HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 #HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 #HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 #HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 #HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 #HTML / CSS
You might like
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
ES6的新特性概览
2016/03/10 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
会话Bean的种类
2013/11/07 面试题
毕业生找工作推荐信
2013/11/21 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
市场营销毕业求职信
2014/08/07 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
人力资源部工作计划
2019/05/14 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL