html5和html有什么区别

一个新手
发布: 2017-09-21 10:16:09
原创
1721 人浏览过
<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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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>

以上是html5和html有什么区别的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板