TML5開發現在很火爆，是一門技術，更是一個概念。可以讓我們的工作模式、交互模式以及對應用和游戲的體驗有了翻天覆地的變化，很多人都知道HTML5這門技術，也常把HTML5讀作H5（簡稱）。其實一些外行人對HTML5的認識是存在一些誤區的，例如微信上出現一個應用就說是H5做的、看到炫酷的頁面也說是H5做的、看到一個網頁游戲還說是H5做的、以及看到一個數據提交的小表單也理解成是H5做的。其實說的并不全對，是有HTML5的身影存在，但如果HTML5不用JavaScript就像汽車沒有發動機，如果HTML5不用CSS，就像汽車只有框架沒有絢麗的外觀，基于HTML5的開發必須要和其它多種技術配合才能實現。當然也不用太“較真兒”了，你可以把H5開發看作是代表WEB開發，或是當作是前端開發的統稱，或是把HTML5看作是HTML、CSS3、JavaScript、jQuery等開發技術的代名詞吧，通過本節的學習相信你就能真正認識什么是HTML5了。

HTML5和HTML的關系

HTML5是下一代HTML標準，要想了解什么是HTML5，就要先認識它的祖先HTML。HTML全稱為超文本標記語言（HyperText Markup Language），是被用來結構化細節、定義文檔外觀和語義的一種標記語言。說白了HTML就是在Web世界里，將內容放到網頁里的技術，內容包括文檔、鏈接、圖片、視頻等，并能做一些簡單的格式布局。

早期的HTML非常簡單，1980年，為使用世界各地的物理學家能夠方便地進行合作研究，創建了適合用于其系統的HTML。英國計算機科學家萬維網的發明者Tim Berners-Lee，設計的HTML以純文字格式為基礎，則可以使用任何文本編輯器處理，當然最初僅有少量標記（TAG）且易于掌握運用。而隨著HTML使用率的增加，人們不滿足只能看到文字，1993年，還是大學生的Marc Andreessen在他的Mosaic瀏覽器加入<img>標記，從此以后在Web頁面上就可以瀏覽圖片了。但人們認為僅有文字和圖片還是不夠，還希望可以將任何形式的媒體加到網頁上，因此HTML不斷地擴充和發展，HTML經過20多年的發展歷經了多個版本，如表1所示：

表1　HTML20多年的發展版本

HTML5，第五版超文本標記語言，單純從技術的角度來看，HTML5就是HTML標準的最新版本，于2014年10月由萬維網聯盟（W3C）發布為正式推薦標準。它是HTML自1991年問世以來，最具變革價值的技術規范，歷經多年修訂與完善才制定完成。HTML5又不僅僅是HTML4的下一個版本，因為它同樣支持HTML4之后的網頁規范，是首個將Web作為應用開發平臺的HTML標準。而從其他角度來講，HTML5現在如此火爆原因總結如下：

1．HTML5增加了許多新特性，讓網頁能力變得更強，這讓許多以前不切實際的想法變成了現實，也讓很多難實現的功能變得很簡單。

2．近幾年移動互聯網變得越來越普及，跨設備、跨終端的需求越來越明顯，這也為HTML5的發展提供了契機。

3．對于應用或游戲開發來說，一套跨平臺的標準更加易于節約開發成本，讓開發工作從繁重的多平臺版本中解脫出來。

所以HTML5很像當年Web2.0的概念，基于現有的技術，讓用戶體驗到不一樣的互聯網世界。

么是SVG《HTML5系列教程26》

在HTML文檔中我們可以嵌入各種各樣的圖片資源，然而不同的圖片在特定的條件下顯示的效果卻大相徑庭。比如在一樣分辨率下，柵格圖像和矢量圖像顯示效果就相差甚遠。所以這次我們要介紹一個叫做SVG的元素，那么什么是SVG呢？SVG有什么優勢呢？它都能夠做些什么呢？

1.什么是SVG

Scalable Vector Graphics 是SVG的全稱，是一種用來繪制矢量圖的HTML5標簽，是一個基于可擴展標記語言，用于繪制二維可縮放矢量圖形的標準

SVG是一種使用XML來描述二維圖形的語言，允許三種類型的圖形對象：矢量圖形、圖像和文本。SVG是可伸縮的矢量圖形，用來定義用于網格的基于矢量的圖形，它使用XML格式定義圖形，圖像在放大或縮小的情況下，其圖形質量不會有損失，SVG還是萬維網聯盟的一個標準。

SVG有哪些優勢

SVG與其他圖像格式都用于展示圖形，但是SVG卻有著更多的優勢，具體體現在以下方面：

1. SVG可被多種工具讀取和編輯，甚至是記事本。

2. SVG與JPEG和GIF圖像相比，尺寸更小，可壓縮性更強。

3. SVG是可伸縮的矢量圖形。

4. SVG圖像可以在如何分辨率下被高質量地打印。

5. SVG圖像在放大或縮小的情況下，期圖像質量不會下降。

6. SVG可以與Java技術一起運行。

7. SVG是開放的標準。

8. SVG是一種XML文本

3.將SVG直接嵌入HTML5頁面

我們先來看一個實例，這個實例的效果是在一個HTML5頁面中繪制一副圖形，代碼如下：

在這段代碼中，SVG代碼以＜svg＞元素開始，包括開啟標簽＜svg＞和關閉標簽＜/svg＞。xmlns屬性定義了SVG的命名空間。version屬性定義所使用的SVG版本。

＜circle＞標簽用來創建一個圓。cx和cy屬性定義圓中心的x和y坐標。如果忽略這兩個屬性，那么圓點會被設置為（0,0）.r屬性定義圓的半徑。stroke和stroke-width屬性克制如何顯示形狀的輪廓。我們把圓的輪廓設置為2px寬，黑色變寬。fill屬性設置形狀內的顏色。我們把填充顏色設置為紅色。

在谷歌瀏覽器中顯示的效果如下圖：

通過上述文章中的敘述我們已經大致了解到了什么是SVG了，那么SVG還可以實現什么功能呢？在下次的文章繼續為大家介紹。謝謝大家的觀看。祝大家：身體健康、生活愉快！