`
chenyunhong
  • 浏览: 141035 次
  • 性别: Icon_minigender_1
  • 来自: 真的不知道
社区版块
存档分类
最新评论

HTML4和HTML5之间的10个主要不同的地方

 
阅读更多

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 真正可以实用时候。目前还不是时候。

分享到:
评论

相关推荐

    HTML5+CSS大学生学习笔记

    * 如果你的首页(也就是说第一个网页),它上有一个超链接,并且是一个网址,如果这个网址的地址放的地方和你的首页是一个地方(就是在一个文件夹中),那么你就可以省略这个超链接的路径,直接写上你的超链接的名字...

    文件比较工具,可以快速找出不一样的地方

    在标题“文件比较工具,可以快速找出不一样的地方”中,我们理解到这个工具的主要功能是高效地识别并展示不同文件间的异同。在描述中,“可以比较2个文件的不一样的地方,很方便,可以用于查看代码不一样的地方”...

    html5制作柱形图

    HTML结构非常简单,主要包含一个`&lt;script&gt;`标签和一个`&lt;div&gt;`元素,其中`&lt;script&gt;`标签用于编写JavaScript代码,而`&lt;div&gt;`元素则是用于放置图表的地方。 ```html // JavaScript代码 &lt;div id="chartHolder"&gt;&lt;/div...

    html5 canvas鼠标点击拖动粒子动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。在这个特定的“html5 canvas鼠标点击拖动粒子动画特效”项目中,我们将探讨如何利用Canvas API来实现...

    果冻任务HTML5游戏源码

    果冻任务HTML5游戏源码是一款基于HTML5技术开发的游戏,HTML5是现代网页开发的主流标准,它提供了丰富的功能和强大的性能,使得开发者能够创建出具有交互性和动态性的网页应用,包括各种游戏。HTML5游戏源码是游戏...

    简单的html实例(多页面跳转)

    在HTML中,页面之间的跳转主要通过`&lt;a&gt;`标签实现。`&lt;a&gt;`标签代表超链接,它允许我们创建指向其他网页、文件或页面内特定位置的链接。基本语法如下: ```html 目标URL"&gt;链接文字 ``` 例如,如果你想从一个页面跳转...

    html5关卡过关小游戏代码

    在这个"html5关卡过关小游戏代码"中,我们可以预期找到利用HTML5特性的游戏代码,这些特性可能包括Canvas画布、Web Audio音频处理、WebSocket实时通信以及Local Storage本地存储等。 Canvas是HTML5中的一个核心元素...

    星爷粉丝大考验HTML5游戏源码

    "星爷粉丝大考验HTML5游戏源码"是一个基于HTML5的游戏项目,它展示了如何利用HTML5的特性来构建一个具有趣味性和互动性的游戏。 1. **HTML5 Canvas** HTML5的Canvas元素是游戏开发的关键,它允许开发者通过...

    html5 canvas烟雾消散图片切换动画特效

    在这个“html5 canvas烟雾消散图片切换动画特效”中,我们看到的是利用Canvas元素来实现的一种视觉效果,它通过烟雾消散的动画过渡,巧妙地在两张图片之间进行切换。 首先,我们要理解Canvas的基本使用。在HTML中,...

    原生js html5 canvas制作flappy bird压扁小鸟游戏下载

    7. **用户界面(User Interface)**: HTML5和CSS可以用来构建游戏的菜单、按钮和显示分数的地方。开发者需要确保这些元素既美观又易于用户操作。 8. **事件监听(Event Handling)**: JavaScript通过监听用户的键盘...

    自己用C#写的Word转Html工具,亲测可用

    在IT领域,编程语言C#是一种广泛应用于...综上所述,这个C#编写的Word转Html工具是一个结合了文件处理、文档解析、格式转换等多个技术领域的实例,对于提升C#开发者的技术能力和了解Word与HTML之间的转换机制大有裨益。

    html打开本地DCM文件并显示.rar

    6. **安全和兼容性**:虽然这种技术可以方便地在任何支持HTML5 canvas的浏览器上运行,但必须注意跨域限制、用户隐私保护以及不同浏览器之间的兼容性问题。 总的来说,这个压缩包提供的代码示例可能是实现上述流程...

    html资源包括三个页面一个文件夹

    在描述中提到的“一个文件夹”很可能是“assets”文件夹,这是一个常见的存放静态资源的地方。在这个文件夹里,可能包含与HTML页面相关的图像、样式表(CSS)、脚本(JavaScript)、字体和其他多媒体资源。例如,CSS...

    前端开源库-angular-html5.zip

    Angular 是一个强大的前端开发框架,由 Google 主导并维护,主要用于构建单页应用程序(SPA)。它提供了丰富的特性和工具,使得开发人员能够高效地构建可扩展、高性能的Web应用。这个开源库 "angular-html5.zip" ...

    HTML基础.PPT HTML元素,

    3. 页面代码编辑区:这是编写HTML代码的地方,编辑的代码会自动更新到页面视图区,实现代码和视觉效果的同步。 4. 页面结构视图区:显示HTML页面的结构框架,帮助开发者更好地理解页面的层次结构。 接下来,我们...

    jmf20-api(HTML)

    5. **allclasses-frame.html**:列出所有公开的类和接口,是查找和探索API中可用组件的好地方。 6. **help-doc.html**:这是一个帮助文档,可能包含了使用API的指南、常见问题解答等信息。 7. **spec-license.html...

    html5实现的踩云彩跳高小游戏源码.zip

    在这个"html5实现的踩云彩跳高小游戏源码.zip"压缩包中,包含了一个使用HTML5编写的简单游戏,让我们来深入探讨一下这个源码可能涉及的关键知识点。 首先,HTML5的游戏开发主要依赖于其强大的Canvas元素,这是一个...

    JavaScript代码应该放在HTML代码哪个位置比较好?

    通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述。 放置于&lt;head&gt;&lt;/...

    看你有多老HTML5游戏源码

    4. **Web Audio API**:HTML5的音频支持使得游戏可以播放高质量的背景音乐和音效,提供更好的用户体验。 5. **Web Workers**:允许在后台线程中执行脚本,提高了处理密集型任务时的性能,比如游戏中的复杂计算。 6...

Global site tag (gtag.js) - Google Analytics