著互聯(lián)網(wǎng)的發(fā)展和進(jìn)步，HTML5前端開發(fā)工程師崗位的熱度也一直居高不下，近幾年還有明顯的繼續(xù)升高的趨勢。那么對于許多零基礎(chǔ)的人來，應(yīng)該判斷自己的HTML5掌握的是否入門了呢？

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

1、HTML5

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

HTML5是Web中核心語言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁瀏覽時看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過一些技術(shù)處理將其轉(zhuǎn)換成為了可識別的信息。

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

2、CSS3

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

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

3、JavaScript

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

JavaScript在網(wǎng)頁設(shè)計中是至關(guān)重要的，因?yàn)樗兄跒榫W(wǎng)站提供功能?？梢詭椭_發(fā)人員做一些互動元素并添加到你的網(wǎng)站地圖的實(shí)時更新，在線游戲，互動電影等。使用JavaScript，可以確保網(wǎng)站的交互性，可以接受任何類型的用戶。

4、jQuery

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

jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。

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

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

2、Facebook日前表示即將在所有的瀏覽器默認(rèn)使用HTML5技術(shù)播放網(wǎng)絡(luò)視頻，不再使用Flash。

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

可以看到，各大主流網(wǎng)站平臺都在向H5轉(zhuǎn)型。在可預(yù)見的未來，F(xiàn)lash將被HTML5所替代。一方面，企業(yè)對H5網(wǎng)站的需求在不斷增加;另一方面，市場魚龍混雜，大量“偽H5”網(wǎng)站充斥著互聯(lián)網(wǎng)。

如果你的企業(yè)目前正打算建設(shè)一個H5網(wǎng)站，以下是我們調(diào)研了國內(nèi)幾類建站服務(wù)商做出的總結(jié)建議，希望能給您做個參考。

1.偽H5型

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

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

2.真H5技術(shù)型

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

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

3、自由DIY型

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

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

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

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

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判斷橫屏豎屏方法