扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
HTML5和HTML4有何区别？
创新互联拥有10余年成都网站建设工作经验,为各大企业提供网站建设、网站设计服务，对于网页设计、PC网站建设（电脑版网站建设）、app软件定制开发、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、域名与空间等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。
HTML5是HTML标准的下一个版本。虽然HTML5没有完全颠覆HTML4，但是它们也有一些不同。下面是我为大家搜索整理的关于HTML5和HTML4的区别，欢迎参考阅读，希望对你有所帮助!想了解更多相关信息请持续关注我们应届毕业生培训网!
1. 简化的语法
HTML5简化了很多细微的语法，例如doctype的声明，你只需要写!doctype html就行了。HTML 5 指定 UTF-8 编码的方式如下
meta charset="UTF-8"
2. Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。canvas标签使得开发者只要使用一个标签就能和用户产生UI交互。
3. 新增许多标签
HTML5设计的一个原则是更好的体现网站的语义性，所以增加 了header和footer这样的标签，用来明确表示网页的结构；新增 section 和 article 标签，section和article也有利于清晰化网页的结构，更有利于SEO；新增 menu 和 figure 标签，menu可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。figure标签使得网页文字和图片的排版更 专业； 新增 audio 和 video 标签，这两个标签可能是HTML5里面最有用的两个标签了，使用起来时也异乎方便，如在HTML5页面中嵌入视频只需一小段。
复制代码代码如下:
video width="450" height="340" controls
source src="jamshed.mp4" type="video/mp4"
Your browser does'nt support video embedding feature.
/video
同理，音频等其他的也类似。
4. 全新的表单
HTML5对 form 和 forminput 标签进行了大量修改，添加了很多新的属性，也修改了很多属性
5. 删除 b 和 font 标签，frame, center, big 标签
6. HTML5 支持了不同类型的存储类型
HTML5 支持本地存储，在之前版本中是通过 Cookie 实现的。HTML5 本地存储速度快而且安全。并且HTML5有两种不同的`对象可用来存储数据，HTML5通过JS来存储和访问数据：
localStorage 适用于长期存储数据，浏览器关闭后数据不丢失
sessionStorage 只是针对一个session的数据存储，存储的数据在浏览器关闭后自动删除
总的来说，HTML5已经超越了标记语言的范畴，更富语义的标签将使得HTML5更有用处。Canvas+WEBGL等技术，实现无插件的动画以及 图像、图形处理能力；本地存储，可实现offline应用；websocket，一改http的纯pull模型，实现数据推送的梦 想；MathML，SVG等，支持更加丰富的render等等等等，现在对于对HTML5的了解还只停留在表面阶段，以后会多阅读一部分HTML5的书籍 增加一下见识。
;
HTML5和HTML4的区别:
第一点，HTML5标准还在制定中
企业网站制作首先要注意的是，HTML5虽然现在很火，但是HTML5标准还在制定中，标准仍在改变，HTML4已经10多年了，不会有任何改变了。
第二点，HTML5简化的语法
HTML5简化了很多细微的语法，例如doctype的声明，你只需要写!doctype html就行了，HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。
第三点，canvas标签替代Flash
Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件，canvas标签使得开发者只要使用一个标签就能和用户产生UI交互，虽然目前canvas标签还不能实现Flash的所有功能，但是很快canvas就会让Flash看起来老土，哈哈！
第四点，新增header和footer标签
HTML5设计的一个原则是更好的体现网站的语义性，所以增加了header和footer这样的标签，用来明确表示网页的结构。
第五点，新增section和article标签
与header，footer类似，section和article也有利于清晰化网页的结构，更有利于网站优化。
第六点，新增menu和figure标签
menu可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单，figure标签使得网页文字和图片的排版更专业。
第七点，新增audio和video标签
这两个标签可能是HTML5里面最有用的两个标签了，顾名思义，这两个标签是用来播放音频和视频的。
第八点，全新的表单
HTML5对form和forminput标签进行了大量修改，添加了很多新的属性，也修改了很多属性。
第九点，删除b和font标签
这个改进我还无法理解，我不认为删除这两个标签对代码的改进有很大的帮助，官方的解释是应该用CSS来替代这两个标签，但我还是觉得对于简单的文本，这两个标签还是很方便的。
第十点，删除frame，center，big标签
总结，这十点只是一部分，要看看真正了解HTML5制作出来的网站风格和创意可以欣赏一下Y+外贸网站，就是通过HTML5技术制作出来的。
HTML5相对于HTML4而言最大的亮点主要在以下几个方面：
（1）增加了对Canvas、Video和Audio等标签的支持，多媒体和绘画、甚至动画的展现能力得到极大的增强
（2）增加了一些更具语义的标签或接口，例如aside，header，footer等
（3）修改或废弃了一些HTML标签和语义，如新表单特性，Marquee，frameset等
（4）建议将颜色/尺寸/对齐排版相关的属性都移到CSS中，HTML5主要负责网页的布局
1、第一个区别： html5 更加的语义化了，语法简单化了
HTML5简化了很多细微的语法，例如doctype的声明，你只需要写!doctype html就行了。HTML 5 指定 UTF-8 编码的方式如下meta charset="UTF-8"
2、第二个区别：html5多增加了新的 标签：
1）canvas标签 ：利用js控制实现画图的效果
2）header和footer标签
3）section和article标签
4）audio和video标签
5）html5支持本地存储
6）删除了html中的标签：b，font，frame，center，bid标签
7）对表单的form做了大量的修改
HTML5是HTML标准的下一个版本。越来越多的程序员开始HTML5来构建网站。如果同时使用HTML4和HTML5的话 ，会发现用HTML5从头构建，比从HTML4迁移到HTML5要方便很多。虽然HTML5没有完全颠覆HTML4，它们还是有很多相似之处，但是它们也有一些关键的不同。以下10个关键的不同之处。
1. HTML5 标准还在制定中
首先要注意的是，HTML5虽然现在很火，但是HTML5标准还在制定中，标准仍在改变。HTML4已经10多年了，不会有任何改变了。
2. 简化的语法
HTML5简化了很多细微的语法，例如doctype的声明，只需要写!doctype html就行了。HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。
3. canvas标签替代Flash
Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。canvas标签使得开发者只要使用一个标签就 能和用户产生UI交互。虽然目前canvas标签还不能实现Flash的所有功能，但是很快canvas就会让 Flash看起来老土！
4. 新增 header 和 footer 标签
HTML5设计的一个原则是更好的体现网站的语义性，所以增加了header和footer这样的标签，用来明确表示网页的结构。
5. 新增 section 和 article 标签
与header， footer类似，section和article也有利于清晰化网页的结构，更有利于SEO。
6. 新增 menu 和 figure 标签
menu可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。figure标签使得网页文字和图片的排版更专业。
7. 新增 audio 和 video 标签
这两个标签可能是HTML5里面最有用的两个标签了。顾名思义，这两个标签是用来播放音频和视频的。
8. 全新的表单
HTML5对 form 和 forminput 标签进行了大量修改，添加了很多新的属性，也修改了很多属性。
9. 删除 b 和 font 标签
10. 删除 frame， center， big 标签
以上十点只是HTML5和HTML4差别的很小一部分。
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真正可以实用时候。目前还不是时候。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网