著互聯網的發展和進步，HTML5前端開發工程師崗位的熱度也一直居高不下，近幾年還有明顯的繼續升高的趨勢。那么對于許多零基礎的人來，應該判斷自己的HTML5掌握的是否入門了呢？

在這里我們要先明確一個概念，現在的HTML5技術指的是HTML5、CSS3以及JavaScript。那么判斷自己HTML5技術是否入門的時候，也需要看這三種技術掌握的如何。

1、HTML5

HTML是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現給用戶。

HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。

當開發人員想添加圖片到一個頁面，HTML會顯得尤為重要。掌握HTML5是成為HTML5開發人員的必要條件之一。

2、CSS3

CSS就是層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。而且CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

CSS3原理同CSS，是在網頁中自定義樣式表的選擇符，然后在網頁中大量引用這些選擇符。

3、JavaScript

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是用來給HTML網頁增加動態功能。

JavaScript在網頁設計中是至關重要的，因為它有助于為網站提供功能?？梢詭椭_發人員做一些互動元素并添加到你的網站地圖的實時更新，在線游戲，互動電影等。使用JavaScript，可以確保網站的交互性，可以接受任何類型的用戶。

4、jQuery

jQuery是一個快速、簡潔的JavaScript框架，能夠讓開發人員用更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。

于html5(H5)的發展，分享下面幾個最近看到的驚人的數據和新聞。

1、截至2015，有80%的App將全部或部分基于HTML5。這意味著大部分App的內容都將是以H5頁面的形式呈現，典型的例子包括微信、Twitter等。

2、Facebook日前表示即將在所有的瀏覽器默認使用HTML5技術播放網絡視頻，不再使用Flash。

3、谷歌瀏覽器于9月1日起不再自動播放Flash。亞馬遜宣布旗下網絡(包括Amazon.com門戶在內)不再使用Flash。

可以看到，各大主流網站平臺都在向H5轉型。在可預見的未來，Flash將被HTML5所替代。一方面，企業對H5網站的需求在不斷增加;另一方面，市場魚龍混雜，大量“偽H5”網站充斥著互聯網。

如果你的企業目前正打算建設一個H5網站，以下是我們調研了國內幾類建站服務商做出的總結建議，希望能給您做個參考。

1.偽H5型

雖然H5網站在國外很火，但是國內真正掌握這門技術建站的有實力的公司并不多，很多建站公司號稱建立的是H5網站，實際僅是視覺看起來更炫的普通網站，教大家辨別這類網站一個最簡單的方法。

H5網站最大的特性是響應式，響應式的意思是一個網站多終端跨界適配，如果你把一個網站頁面最大化和縮小都不影響網站內容的展示—這才是真正的H5網站，而那些縮小后連文字都顯示不全的就是偽H5網站。

2.真H5技術型

這樣的公司在國內并不多見，業內比較知名的是以明月H5平臺為代表的少數幾家，其中明月H5平臺服務比較多元，不僅提供成熟的H5技術建站服務，還有涵蓋網站策劃，設計，seo優化等整合型建站推廣服務。

下面這張圖演示了H5響應式網站在各個終端都自動跨界瀏覽的效果：

3、自由DIY型

目前，國內沒有一家服務商提供可以讓用戶自己建設H5網站的平臺，所謂的DIY建站平臺要么生成的是普通網站而非H5網站，要么僅是一個H5移動端頁面。

如果你只是需要一個頁面做推廣，比如邀請函和小游戲，那么這個是你的首先，這類H5頁面一個在校大學生半天時間就可以做出來，但是和企業要求的具備多功能的H5網站相去甚遠。

目前H5建站技術在國內太新，走在前面的僅有少數幾家，整個市場沒有定價和服務標準，導致H5網站建設公司魚龍混雜，大部分是“掛羊頭，賣狗肉”。相信這篇文章會讓有建設H5網站的企業家們免去被忽悠，被坑的經歷。

移動端中我們經常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。

CSS如何判斷橫屏豎屏

豎屏引用

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

橫屏引用

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

css代碼

@media screen and (orientation: portrait) { 
 /*豎屏 css*/ 
} 
@media screen and (orientation: landscape) { 
 /*橫屏 css*/ 
} 

JS判斷橫屏豎屏方法