html5和html有什麼差別
- 一个新手原創
- 2017-09-21 10:16:091699瀏覽
淺談：html5和html的差別
最近看群組聊天聊得最火熱的莫過於手機網站和html5這兩個字。可能有人會問，這兩者有什麼關係呢？隨著這個行動互聯網快速發展的時代，尤其是4G時代已經來臨的時刻，加上微軟對「XP系統」不提供更新補丁、維護的情況下「html5+css3」也逐漸的成為新一代web前端技術，手機網站也漸漸的成為一種趨勢。
什麼是html5呢？
html5最早由WHATWG(Web 超文本應用技術工作組)命名的一種超文本標記語言，隨後和W3C的xhtml2.0(標準)結合，產生現在最新一代的超文本標記語言。可以簡單點理解成：HTML 5 ≈ HTML4.0+CSS3+JS+API。
hmtl5和html的差別在哪裡？
我們現在web前端開發的靜態網頁，一般都是html4.0。同時是符合W3C的xhtml1.0規範來的。那麼他們兩者又有什麼實質的差別呢？
1.在文件類型宣告上
html:
|
1 #2 3 |
<!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:
1 |
<!DOCTYPE html> |
由这两者对比可见：在文档声明上，html有很长的一段代码，并且很难记住这段代码，想必很多人都是靠工具直接生成的吧？而html5却是不同，只有简简单单的声明，这也方便人们的记忆，更加精简。
2.在结构语义上
html4.0：没有体现结构语义化的标签，我们通常都是这样来命名的
1 |
<p id="header"></p> |
这样表示网站的头部。
html5：在语义上却有很大的优势。提供了一些新的html5标签，比如:
1 |
<header>、<nav>、<article>、<aside>、<footer>.. |
3.強大的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 可在影像品質不下降的情況下放大
#那麼兩者皆可用於繪圖，我們一起來看看他們之間有何差異：
Canvas
1.依賴解析度
渲染能力
4.能夠以.png 或.jpg 格式保存結果圖像
5.最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG1.不依賴解析度
1.以不依賴解析度
程式（如Google地圖）
4.複雜度高會減慢渲染速度（任何過度使用DOM 的應用都不快）
5.不適合使用遊戲應用
（2）新增影片12）新增影片。標籤
可能在html4.0的時候，我們想要插入一段視頻，我們需要引用一長段的程式碼。但是在html5的情況下。我們只需要用於一個video標籤。
1 |
|
提供這樣的標籤有什麼樣的好處呢？
第一：節省程式設計師寫程式碼的時間。
第二：我覺得最主要還是在SEO的優化上。
不管是我們自己來對網頁模組命名，還是有這樣的標籤。因為做網站最終的目的只有一個，就是獲利。想獲利的話，就只有透過SEO優化的技術，把你網站排名做上來，這樣你的網站才有價值，且正是這一點，html5符合了這一點。為什麼這麼說呢？因為他定義的這些標籤，更有利於優化，蜘蛛能辨識你。
總結：雖然在前幾年html5已經出來了，但那時候因為不夠成熟，時機不對，才沒被興起。在這網路高速發展的時候，也是來臨4G的時代。我們還不學hml5+css3我們就out了！
以上是html5和html有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！