<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"> 渲染能力</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"></p> SVG<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px"></span> 1.不依賴解析度</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"> 1.以不依賴解析度</p>
<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 程式（如Google地圖）</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）新增影片12）新增影片。標籤 </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中文網其他相關文章！
