`

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

    博客分类:
  • html
阅读更多

cnbeta.com上看到的文章,摘抄下来备用。
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真正可以实用时候。目前还不是时候。

摘自:
http://www.cnbeta.com/articles/162345.htm
分享到:
评论

相关推荐

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

    下面列出的就是一些HTML4和HTML5之间主要的不同之处(并不是全部,全部列出来是不可能的): 1. HTML5标准还在制定中 这头一个不同之处显而易见,但非常重要,我需要先从它开始。也许你已经注意到了关于HTML5很酷的...

    HTML5过场动画切换

    4. 响应式布局:通过动画使页面元素在不同屏幕尺寸间平滑变换位置和大小。 综上所述,HTML5过场动画切换是现代网页设计的重要组成部分,它不仅提升了网站的视觉效果,还增强了用户的交互体验。随着HTML5技术的不断...

    html4 html5中文参考手册

    在学习HTML4、HTML5和XHTML时,了解它们之间的关系和差异至关重要。HTML4是基础,而HTML5引入了更多现代网页开发所需的功能。XHTML则是一种更加严格的编码规范,有助于提高代码质量和兼容性。对于开发者来说,掌握...

    html5-boilerplate:大批量开源HTML5模板集合汇总

    HTML5 Boilerplate(H5BP)是一个开源项目,旨在提供一套最佳实践和自动化工具,以帮助开发者快速构建高质量的HTML5网站和应用。这个项目集合了大量的前端开发模板,旨在简化和标准化开发流程,提高开发效率。它包含...

    jQuery+html5实现的3D焦点轮播幻灯片(html5zoo.js html5zoo-slides).zip

    "演示一"和"演示二"可能提供了两个不同的示例,分别展示了不同的3D效果或者交互方式,这有助于开发者对比和学习,理解不同实现的优缺点,根据实际需求选择合适的设计方案。 总结来说,通过jQuery和HTML5,我们可以...

    html2canvas-rc4.js和html2canvas.min.js

    HTML2canvas是一个JavaScript库,它的主要功能是将HTML页面或者DOM元素转换为Canvas图像或图片。这个库在前端开发中非常有用,特别是在需要保存网页截图或者实现动态生成图像的场景中。然而,像所有软件一样,...

    Unity3D和HTML之间传递信息的实现

    Unity3D与HTML之间的交互主要通过两种方式实现:一是Unity3D浏览器调用HTML网页中的JavaScript函数;二是HTML网页调用Unity3D浏览器中的脚本函数。这两种方式共同构成了Unity3D与HTML之间的双向通信机制。 ##### ...

    Python-html5lib一个兼容标准的HTML文档和片段解析及序列化库

    `html5lib`是一个强大的Python库,专为解析和序列化HTML5和部分HTML4文档而设计。它遵循W3C制定的HTML5规范,致力于提供一个与标准兼容的解决方案,使开发者在处理HTML内容时能够更加灵活和稳定。 ### 解析HTML文档...

    一个简单HTML5期末考核大作业,学生个人html静态网页制作代码

    - **页面数量**:为了提高用户体验,建议至少有5-10个页面,并且这些页面之间通过超链接相互关联。 - **风格统一**:保持整个网站的风格一致,包括字体、颜色等,以提升用户的视觉体验。 - **导航设计**:设计美观且...

    HTML期末大作业html+css+div二十个页面以上

    这个HTML期末大作业集包含二十个以上的页面,展示了全面的网页布局和设计能力。接下来,我们将详细探讨这三个技术及其在网页制作中的应用。 HTML(HyperText Markup Language)是网页内容的结构语言,它定义了网页...

    jquery html5三维线性人物关系图特效代码

    "jQuery HTML5三维线性人物关系图特效代码"就是这样一个工具,它利用jQuery库和HTML5的技术,实现了动态、立体的人物关系展示,帮助用户更直观地理解人物之间的联系。 jQuery是一个广泛使用的JavaScript库,它简化...

    HTML5系列教程-HTML5样式、链接和表格

    在“HTML5系列教程-HTML5样式、链接和表格”这个主题中,我们将深入探讨三个核心概念:样式、链接和表格。 1. **HTML5样式**: 在HTML5中,样式主要是通过CSS(层叠样式表)来实现的,它让开发者能够控制网页的...

    基于HTML5、JavaScript和CSS3之间依赖关系的缺陷.pdf

    基于HTML5、JavaScript和CSS3之间依赖关系的缺陷 HTML5是超文本标记语言(Hyper Text Markup Language,HTML)的第5次重大修改,由万维网联盟(World Wide Web Consortium,W3C)于2014年10月完成标准制定。HTML5的...

    html5手册css3手册

    10. **多背景层**:允许在一个元素上设置多个背景,每层背景可以有不同的颜色、图像和透明度。 通过这些HTML5和CSS3的新特性,开发者能够构建出更具互动性、响应性和功能性的网页,同时提高了用户体验和开发效率。...

    简单的html5聊天对话展示(html+jq+css)

    本项目是一个基于HTML5、jQuery和CSS构建的简单聊天对话展示示例,旨在创建一个纯聊天框页面,用于展示用户之间的对话内容。这个交互式的界面设计能够实时更新,通过WebSocket技术与后台服务器进行通信,即时显示新...

    基于HTML5的小说阅读器功能实现.zip

    Web Storage API,包括`localStorage`和`sessionStorage`,使得浏览器可以本地存储数据,使得用户可以在不同的会话之间保持阅读进度,甚至在没有网络连接的情况下继续阅读。 离线应用的另一大支柱是Service Worker...

    HTML5登陆注册页面模板

    这个模板主要利用了HTML5、CSS和JavaScript,旨在创建一个简洁且易于理解和修改的登录注册界面。在这个模板中,用户可以在登录和注册功能之间轻松切换,为网站提供友好的用户体验。 HTML5是现代网页开发的标准,它...

    html5弹球游戏

    2. **碰撞检测**:游戏中的关键部分是弹球与不同物体之间的碰撞检测。这通常涉及到几何学和物理原理,例如判断两个圆形是否相交,或者判断一个矩形是否与另一个矩形或线段碰撞。在HTML5游戏中,通常会使用精确的算法...

Global site tag (gtag.js) - Google Analytics