html5与html的区别?

时间:2021-11-18 来源:未知网络 作者:996建站网

本文章来源,百度文章总结+知乎其他作者文章+自己看到的材料总结,如果感觉总结不全面、不正确,留言。我会继续终结。方便学习了解html5和html。

一、html5和html的区别

1、文档声明区别

html:超文本标记语言,一种纯文本类型的语言。

html5:文档声明html5方便书写,精简,有利于程序员快速的阅读和开发。

例如:文档类型声明上不同

html5:<!DOCTYPE html>

html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xh"><html xmlns="w3.org/1999/xhtml">

**:在文档声明上,html有很长的一段代码,并且很难记住这段代码,想必很多人都是靠工具直接生成的,而html5却是不同,只有简简单单的声明,这也方便人们的记忆,更加精简。

2、结构语义区别

html:没有体现结构语义化的标签。如:<div id="nav"></div>、<divid="header"></div>(这样是表示网站的一个头部)。

html5:添加了许多具有语义化的标签,在语义上有很大的优势,并且是提供了一些新的标签。如: <header>、<footer>…

<!–…–> 定义注释

<!DOCTYPE> 定义文档类型

<abbr> 定义缩写。

<acronym> 定义只取首字母的缩写。

<address> 定义文档作者或拥有者的联系信息。

<area> 定义图像映射内部的区域。

<article> 定义文章。

<aside> 定义页面内容之外的内容。

<audio> 定义声音内容。

<base> 定义页面中所有链接的默认地址或默认目标。

<bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置。

html5增加了许多新的元素和功能,比如:用于绘画的 canvas 元素、用于媒介回放的video和audio元素、对本地离线存储的更好的支持、语意化更好的内容元素,比如 article、footer、header、nav、section、新的表单控件,比如 calendar、date、time、email、url、search。

html5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果,不断地重复编码、调试和运行,这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准,开发人员可以轻松调试修改。

3、绘图区别

html:指可伸缩矢量图形,用于定义网络的基于矢量的图形。

html5:html5的canvas元素使用脚本(通常使用JavaScript)在网页上绘制图像,可以控制画布每一个像素。

二、强大的html5的新功能

1、强大的绘图功能

可能有些动画,或者图片,在html5可以通过强大的绘画功能,加上JS可以实现。而在html4.0却不行。

在HTML5中,有两个东西,是可以进行绘图的,我们一起来看看是哪两个神奇的玩意。

1)Canvas标签

Canvas 通过 JavaScript 来绘制 2D 图形,Canvas 是逐像素进行渲染的。

在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

2)SVG

SVG 是一种使用 XML 描述 2D 图形的语言,SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

(1)SVG 图像可通过文本编辑器来创建和修改

(2)SVG 图像可被搜索、索引、脚本化或压缩

(3)SVG 是可伸缩的

(4)SVG 图像可在任何的分辨率下被高质量地打印

(5)SVG 可在图像质量不下降的情况下被放大

那么都两者都可以用于绘图,我们一起来看看他们之间有何区别:

3)Canvas

1.依赖分辨率

2.不支持事件处理器

3.弱的文本渲染能力

4.能够以 .png 或 .jpg 格式保存结果图像

5.最适合图像密集型的游戏,其中的许多对象会被频繁重绘

4)SVG

1.不依赖分辨率

2.支持事件处理器

3.最适合带有大型渲染区域的应用程序(比如谷歌地图)

4.复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

5.不适合游戏应用

2、新增视频标签

可能在html4.0的时候,我们想要插入一段视频,还需要引用一长段的代码。但是在html5的情况下。我们只需要用于一个video标签即可。

<video src="视频地址"></video>

3、好处

1)节省程序员写代码的时间。

2)我觉得最主要还是在SEO的优化上。

不管是我们自己来对网页模块命名,还是有这样的标签。因为做网站最终的目的只有一个,那就是盈利。想盈利的话,就只有通过SEO优化的技术,把你网站排名做上来,这样你的网站才有价值,且正是这一点,html5符合了这一点。为什么这么说呢?因为他定义的这些标签,更加有利于优化,蜘蛛能识别你。

三、html5标签和普通html标签有什么不同

不同点:
便于搜索引擎捕获,seo优化
①section:用于表达书的一部分或一章,或者一章内的一节。
②hgroup:对网页或区段(section)的标题进行组合。
③header:页面主体上的头部,注意区别于head标签。这里可以给初学者提供一个判断的小技巧:head标签中的内容往往是不可见的,而header标签往往在一对body标签之中。
④footer:页面的底部(页脚)。通常,标出网站的一些相关信息,例如关于我们、法律申明、邮件信息、管理入口等。
⑤nav:是专门用于菜单导航、链接导航的标签,是navigator的缩写。
⑥article:用于表示一篇文章的主体内容,一般为文字集中显示的区域。
功能增强,需要js配好使用
①视频,音频的播发
②canvas画布(非常重要)

③本地存储

相同点:

html5只是在原来的基础上新增了一些元素和一些规范,html能用户的,html5也兼容。所以在使用上不用担心。

html5很厉害,学好后可以尝试做web app 开发。

四、html5与html4的区别

1、HTML5 中的 DOCTYPE 声明方法(不区分大小写,引号不区分是单引号还是双引号)如下:
<!DOCTYPE html>
当使用工具时,也可以在 DOCTYPE 声明方式中加入 SYSTEM 识别符,声明方法如下面的代码所示:
<!DOCTYPE HTML SYSTEM "about:legacy-compat">

2、指定字符编码
在 HTML4 中,使用 meta 标签的形式指定文件中的字符编码,如下所示:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
在 HTML5 中,可以使用对 <meta> 标签直接追加 charset 属性的方式来指定字符编码,如下所示:
<meta charset="UTF-8">
两种方法都有效,可以继续使用前面那种方式(通过 content 属性来指定),但是不能同时混合使用两种方式,在以前的 HTML 代码中可能会存在下面代码所示的标记方式,但在 HTML5 中,这种字符编码方式将被认为是错误的,这一点请注意:
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
从 HTML5 开始,对于文件的字符编码推荐使用 UTF-8。

3、可以省略标记的元素
在 HTML5 中,标签的标记分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。让我们来针对这三类情况列举一个标签清单,其中包括 HTML5 中的新标签。

1)不允许写结束标记的标签有:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

“不允许写结束标记的标签”是指,不允许使用开始标记与结束标记将标签括起来的形式,只允许使用“<标签/>”的形式进行书写。例如“<br>…</br>”的书写方式是错误的,正确的书写方式为“<br/>”。当然,HTML5之前的版本中<br>这种写法可以被沿用。

2)可以省略结束标记的标签有:li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

“可以省略全部标记的标签”是指,该标签可以完全被省略。请注意,即使标记被省略了,该标签还是以隐式的方式存在的。例如将body标签省略不写时,但它在文档结构中还是存在的,可以使用document.body进行访问。

3)可以省略全部标记的标签有:html、head、body、colgroup、tbody。

3、具有boolean值的属性
对于具有boolean值的属性,例如 disabled 与 readonly 等,当只写属性而不指定属性值时,表示属性值为true;如果想要将属性值设为flase,可以不使用该属性。另外,要想将属性值设为true时,也可以将属性名设定为属值,或将空字符串设定为属性值。

属性值的设定方法可以参考下面的示例:

<!–只写属性不写属性值代表属性为true–>
<input type="checkbox" checked>
<!–不写属性代表属性为false–>
<input type="checkbox">
<!–属性值=属性名,代表属性为true–>
<input type="checkbox" checked="checked">
<!–属性值=空字符串,代表属性为true–>
<input type="checkbox" checked="">

4、省略引号
在之前的 HTML 版本中,大家已经知道,指定属性值的时候,属性值两边既可以用双引号,也可以用单引号。HTML5 在此基础上做了一些改进,当属性值不包括空字符串、“<”、“>”、"="、单引号、双引号等字符时,属性值两边的引号可以省略。如下面的代码所示:

<!--请注意type的属性值两边的引号-->
<input type="text">
<input type='text'>
<input type=text>

html5与html的区别?插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序