整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一文读懂HTML5和HTML4区别!

一文读懂HTML5和HTML4区别!

TML5自从2010年正式推出后,它以惊人速度发展,现在主流浏览器基本上都支持了HTML5(除了个别的特性在浏览器兼容有问题),这说明HTML5越来越受到欢迎。可以预测不久的将来HTML5会成为web前端的主流技术。HTML5特效更好适应移动互联网时代,可以更好支持多媒体在移动设备上运行。

html5和html4有什么不同?

定义上区别

HTML5是应用超文本标记语言(HTML)的第五次修改,HTML4是应用超文本标记语言(HTML)的第四次修改,他们分别是html语言第5和第4版本,HTML4是为了适应pc时代产生的,HTML5是为了适应移动互联网时代产生的。他们都是w3c(World Wide Web)推荐的标准语言。

标签的区别

HTML5相比HTML4代码更加简洁,HTML5的一些新元素、新属性等可以使web开发变的容易简单,比如说HTML5提高了API。HTML5之前有很多功能必须依靠javascript实现,现在使用HTML5元素的标签属性就可以。由于HTML5在web页面这种大量可代替脚本(javascript)属性使语言变的简单易懂,而仅靠html4需要和javascript配合才能做到。

图片来自网络,如有侵权请联系!

新的元素

HTML5增加了canvas 元素(绘画)、video 元素(媒体回放)、audio 元素、新的特殊内容元素(article、footer、header、nav、section)、表单控件(calendar、date、time、email、url、search),比如之前用div现在可以用HTML5结构化标签代替,这样使整个页面更加直观,容易理解。

HTML5更加适宜时代要求

移动互联网时代相比pc时代更加迫切希望有一个统一的标准。之前由于各个浏览器不统一,因为修改浏览器兼容引起的bug浪费了大量的时间。在HTML5中视频、音频、图像、动画都会标准化,会解决浏览器兼容这个令人头疼的问题。

标记方法的区别

HTML5语法主要是DOCTYPE(DOCTYPE声明方法:<!DOCTYPE html>)和指定字符编码(对mate元素追加charset属性指定编码:<mate charset="UTF-8">)和html4有所区别.

今天关于HTML5内容先聊到这,改天咱们接着聊,如果你是技术大牛这篇文章就直接忽略!

TML5以HTML4为基础,对HTML4进行了大量的修改。

介绍HTML5对HTML4到底进行了哪些修改?它们之间比较大的区别是什么?

1 语法的改变

HTML5的语法变化

HTML5中,语法发生了很大的变化。或许有人会抱着异常惊讶和不安地问“HTML普及到何种程度”“根本的语法发生了变化,会有多大影响”。

只是,HTML5的“语法变化”和其他编程语言所谓的语法变更意义有所不同。为什么这么说呢?原因比较特殊,因为以前的HTML几乎没有遵循规范实现的Web浏览器。

 现有浏览器与规范背离

HTML的语法是在SGML(Standard Generalized Markup Language)语言的基础上来规定的。但是由于SGML的语法非常复杂,文档结构解析程序的开发也不太容易,多数Web浏览器不作为SGML解析器运行。由此,HTML规范中虽然要求“应遵循SGML的语法”,但实际情况却是遵循规范实现的Web浏览器几乎不存在。

 规范向实现靠拢

如上所述,HTML5中提高Web浏览器间的兼容性是重大的目标之一。要确保兼容性,必须消除规范与实现的背离。因此HTML5以近似现有的实现,重新定义了新的HTML语法,使规范向实现靠拢。由于文档结构解析的算法也有着详细的记载,使得Web浏览器开发者可以专注于遵循规范去进行实现工作。在新版本的FireFox和WebKit(Nightly Builder版)中,已经内置了遵循HTML5规范的解析器。IE(Internet Explorer)和Opera也为了能够提供更好的兼容性实现而紧锣密鼓地努力着。

2 可编辑列表实例

将<div>、<table>元素转换成可编辑状态。

3 可编辑的div和table元素

designMode属性

designMode属性用来指定整个页面是否可编辑,当页面可编辑时,页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改。该属性有两个值——on与off。当属性被指定为on时,页面可编辑;被指定为off时,页面不可编辑

打开designMode属性

说明绝大部分浏览器都已支持designMode属性,如Internet Explorer9、Chrome、Firefox、Opera和Safari等浏览器都可支持designMode属性。

hidden属性

hidden属性类似于aria-hidden,它告诉浏览器这个元素的内容不应该以任何方式显示。但是元素中的内容还是浏览器创建的,也就是说页面装载后允许使用JavaScript脚本将该属性取消,取消后该元素变为可见状态,同时元素中的内容也即时显示出来。hidden属性是一个布尔值的属性,当设为true时,元素处于不可见状态;当设为false时,元素处于可见状态。

说明

hidden属性可以代替CSS样式中的display属性,设置hidden="tru

tabindex是一个旧的概念,是指用户使用键盘导航一个页面时(通常使用Tab键,但某些浏览器,如著名的Opera,可能使用不同的键组合来导航),控制页面上的元素获得焦点的顺序。

当站点使用深度嵌套的布局表格来构建时,这个属性非常常用,但是如今这已经不再那么常用了。默认的标签页顺序是由元素出现在标记中的顺序来决定的,因此顺序正确和结构良好的文档应该不再需要额外的标签页顺序来提示。

002_HTML_操作系统和软件_尚学堂_哔哩哔哩_bilibili

么理解Html5?

Html5(超文本标记语言)简单理解是HTML(超文本标记语言)的第五次重大修改的版本,由WHATWG(Web Hypertext Application Technology Working Group中文全称Web超文本应用技术工作组)和一些公司在html4.0基础研究下一代html版本,2004年正式提出html5于2007正式被w3c接纳,html5应用凝结很多人的心血,作为下一代超文本标记语言的核心,html5主要增加了新元素互操作性主要是针对移动设备和多媒体。

html5是现在前端培训比较火热的语言,今天为大家简单介绍一下html5语言。

Html5和html4

Html5和html4相比有哪些优势?

1、设备兼容特性

Html4代码不兼容是一个让人头痛的问题,html5就可以很好处理兼容问题,特别是移动设备HTML5另外也提供了更多功能上的优化选择,带来了更好的体验,例如视频影音可直接与麦克风及摄像头相联。

2、网页多媒体特性

Html5相比html4支持网页端的音响、录像等功能, 与网站自带的摄像头,影音功能,这些功能会大大提高用户体验。

3、语义结构

HTML5相比html4更能赋予网页更好的结构。比如新增加的article标签可以专门定义侧边栏内容,而在html4中需要自己定义页面侧边栏内容。

html5语言

怎么学好html5语言?

1、基础

如果之前接触html4,可以尝试着去学习html5,如果没有基础建议去w3cshool官网了解一下html、css(css3)及JavaScript等知识。

2、建立逻辑思维

Html5基础打好后,逻辑思维是下一步晋级必须面对的问题,这个阶段也许新手会感到复杂和棘手,但是如果你能迎难而上坚持下来不断自我总结,这是成为大牛必须经历的过程。

html5学习

3、多跟后端交流

了解一下服务器开发,做前端总是要跟服务器配合的,你要是完全不懂后端,我可以说你的工作会遇到很多问题而且这些问题是可以完全避免的。

4、多实践

你跟大牛的其实不是技术的差别,而是一个项目和一百个项目经验的差别,每做一个项目比你单纯去看一本书使用的多,有机会要多尝试各种类型的开发,不断打破自己的舒适区。

大家有什么更好的同意见咱们可以讨论一下!