html和html5的区别

最新推荐文章于 2024-09-11 14:09:02 发布

北冥٩( ๑╹ ꇴ╹)۶

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量241

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44054325/article/details/105140601

版权

1.HTML5 是 W3C 与 WHATWG 合作的结果（WHATWG 指 Web Hypertext Application Technology Working Group）。
2.WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
3.我们可以简单讲html5理解成：HTML 5 ≈ HTML4.0+CSS3+JS+API。
4.需要注意的是，HTML5虽然现在很火，但是HTML5标准还在制定中，标准仍在改变。HTML4已经10多年了，不会有任何改变了。
与html区别主要体现在：

1.在文档类型声明上

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

相比之下，html5更加方便人们的记忆，更加精简。

2.新的特殊内容元素

如article、footer、header、nav、section、aside

article 标签定义独立的内容，标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。aside 定义页面的侧边栏内容，标签定义 article 标签外的内容。

<body>
<article>
  <h1>Internet Explorer 9</h1>
  <p>Internet Explorer 9 Internet Explorer 9 Internet Explorer 9</p>
</article>
</body>

nav标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 nav 元素。该元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> 
</nav>

section标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation.</p>
</section>

总之就是标签语义化。

3.新的表单控件

如calendar、date、time、email、url、search

生日: <input type="date" name="bday">

在这里插入图片描述

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

在这里插入图片描述

4.用于媒介回放的 video 和 audio 元素

video 元素提供了播放、暂停和音量控件来控制视频。同时 video元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。video标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。video 元素支持多个 source 元素. source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

在audio标签之间你需要插入浏览器不支持的audio元素的提示文本。audio 元素允许使用多个 source 元素. source 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

5.绘图功能

SVG 是一种使用 XML 描述 2D 图形的语言。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

二者区别在于：
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用