html5和html有什么区别-html tutorial-php.cn

<h1 style="margin:0px; padding:10px 0px; font-size:20px; font-weight:500; color:rgb(0,136,219); text-align:center">浅谈：html5和html的区别</h1> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词。可能有人会问，这两者有什么关系呢？随着这移动互联网快速发展的时代，尤其是4G时代已经来临的时刻，加上微软对“XP系统”不提供更新补丁、维护的情况下“html5+css3”也逐渐的成为新一代web前端技术，手机网站也渐渐的成为一种趋势。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">什么是html5呢？</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：HTML 5 ≈ HTML4.0+CSS3+JS+API。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">hmtl5和html的区别在哪里？</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">我们现在web前端开发的静态网页，一般都是html4.0。同时是符合W3C的xhtml1.0规范来的。那么他们两者又有什么实质性的区别呢？</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">1.在文档类型声明上</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">html:</p> <table style='outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%'><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"> <td style='vertical-align:baseline; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border-width:0px 1px 0px 0px; border-top-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:initial; border-bottom-color:initial; border-left-color:initial; float:none; left:auto; margin:0px; outline:0px; overflow:visible; background:none rgb(247,247,249); position:static; right:auto; top:auto; bottom:auto; min-height:auto; font-size:13px; padding:9.5px 0px 9.5px 9.5px; color:rgb(175,175,175); border-right-style:solid; border-right-color:rgb(225,225,232); width:4.0393%'> <p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p> <p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">2</p> <p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">3</p> </td> <td style='position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;'><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!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"></pre><div class="contentsignin">Salin selepas log masuk</div></div></td></tr></tbody></table><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> HTML5:<br/></p><table style="outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%"><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"><td style="vertical-align:baseline; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border-width:0px 1px 0px 0px; border-top-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:initial; border-bottom-color:initial; border-left-color:initial; float:none; left:auto; margin:0px; outline:0px; overflow:visible; background:none rgb(247,247,249); position:static; right:auto; top:auto; bottom:auto; min-height:auto; font-size:13px; padding:9.5px 0px 9.5px 9.5px; color:rgb(175,175,175); border-right-style:solid; border-right-color:rgb(225,225,232); width:4.0393%"><p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p></td><td style="position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html></pre><div class="contentsignin">Salin selepas log masuk</div></div></td></tr></tbody></table><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">由这两者对比可见：在文档声明上，html有很长的一段代码，并且很难记住这段代码，想必很多人都是靠工具直接生成的吧？而html5却是不同，只有简简单单的声明，这也方便人们的记忆，更加精简。</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">2.在结构语义上</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">html4.0：没有体现结构语义化的标签，我们通常都是这样来命名的</p><table style="outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%"><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"><td style="vertical-align:baseline; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border-width:0px 1px 0px 0px; border-top-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:initial; border-bottom-color:initial; border-left-color:initial; float:none; left:auto; margin:0px; outline:0px; overflow:visible; background:none rgb(247,247,249); position:static; right:auto; top:auto; bottom:auto; min-height:auto; font-size:13px; padding:9.5px 0px 9.5px 9.5px; color:rgb(175,175,175); border-right-style:solid; border-right-color:rgb(225,225,232); width:4.0393%"><p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p></td><td style="position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><p id="header"></p></pre><div class="contentsignin">Salin selepas log masuk</div></div></td></tr></tbody></table><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">这样表示网站的头部。</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">html5：在语义上却有很大的优势。提供了一些新的html5标签，比如:</p><table style="outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%"><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"><td style="vertical-align: baseline; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; border-width: 0px 1px 0px 0px; border-top-style: initial; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-bottom-color: initial; border-left-color: initial; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; background: rgb(247, 247, 249) none repeat scroll 0% 0%; position: static; right: auto; top: auto; bottom: auto; min-height: auto; font-size: 13px; padding: 9.5px 0px 9.5px 9.5px; color: rgb(175, 175, 175); border-right: 1px solid rgb(225, 225, 232); width: 4.0393%; word-break: break-all;"><p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p></td><td style="position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><header>、<nav>、<article>、<aside>、<footer>..</pre><div class="contentsignin">Salin selepas log masuk</div></div></td> </tr></tbody></table> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">3.强大的HTML5的新功能</span><br></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">（1）强大的绘图功能</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 可能有些动画，或者图片，在html5可以通过强大的绘画功能，加上JS可以实现。而在html4.0却不行。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 在HTML5中，有两个东西，是可以进行绘图的，我们一起来看看是哪两个神奇的玩意。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 1.Canvas标签</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 是逐像素进行渲染的。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 2.SVG</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> SVG 是一种使用 XML 描述 2D 图形的语言，SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> （1）SVG 图像可通过文本编辑器来创建和修改</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> （2）SVG 图像可被搜索、索引、脚本化或压缩</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> （3）SVG 是可伸缩的</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> （4）SVG 图像可在任何的分辨率下被高质量地打印</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> （5）SVG 可在图像质量不下降的情况下被放大</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">那么都两者都可以用于绘图，我们一起来看看他们之间有何区别：</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px"> Canvas</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 1.依赖分辨率</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 2.不支持事件处理器</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 3.弱的文本渲染能力</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 4.能够以 .png 或 .jpg 格式保存结果图像</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 5.最适合图像密集型的游戏，其中的许多对象会被频繁重绘</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px"> SVG</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 1.不依赖分辨率</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 2.支持事件处理器</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 3.最适合带有大型渲染区域的应用程序（比如谷歌地图）</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 4.复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 5.不适合游戏应用</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">（2）新增视频标签 </span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 可能在html4.0的时候，我们想要插入一段视频，还需要引用一长段的代码。但是在html5的情况下。我们只需要用于一个video标签即可。</p> <table style='outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%'><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"> <td style='vertical-align:baseline; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border-width:0px 1px 0px 0px; border-top-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:initial; border-bottom-color:initial; border-left-color:initial; float:none; left:auto; margin:0px; outline:0px; overflow:visible; background:none rgb(247,247,249); position:static; right:auto; top:auto; bottom:auto; min-height:auto; font-size:13px; padding:9.5px 0px 9.5px 9.5px; color:rgb(175,175,175); border-right-style:solid; border-right-color:rgb(225,225,232); width:4.0393%'><p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p></td> <td style='position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;'><p style="position:static; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; right:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none; padding:0px 1em"><code style='position:static; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; padding:0px; right:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none'> </code><code style='right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none'><</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none; color:gray">video src</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none">=</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none; color:blue">"视频地址"</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none">></</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; background:none; min-height:auto; font-weight:bold; color:rgb(255,120,0)">video</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none">>//详细属性可以见下图</code></p></td> </tr></tbody></table> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">提供这样的标签有什么样的好处呢？</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">第一：节省程序员写代码的时间。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">第二：我觉得最主要还是在SEO的优化上。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">不管是我们自己来对网页模块命名，还是有这样的标签。因为做网站最终的目的只有一个，那就是盈利。想盈利的话，就只有通过SEO优化的技术，把你网站排名做上来，这样你的网站才有价值，且正是这一点，html5符合了这一点。为什么这么说呢？因为他定义的这些标签，更加有利于优化，蜘蛛能识别你。</p> <p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">总结：虽然在前几年html5已经出来了，但是那时候因为不够成熟，时机不对，才没被兴起。在这互联网高速发展的时候，也是来临4G的时代。我们还不学习hml5+css3我们就out了！</p>

Atas ialah kandungan terperinci html5和html有什么区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!