web前端開發(fā)HTML5基礎(chǔ)（碼動未來）
HTML5是萬維網(wǎng)的核心語言热凹，是未來Web發(fā)展的方向赐俗，同時也是HTML4.0.1的一個升級版本煤伟，它與HTML有著密不可分的關(guān)系癌佩。因此，掌握HTML5的基礎(chǔ)知識便锨，是進(jìn)一步學(xué)習(xí)HTML知識的必要條件围辙。萬維網(wǎng)是World Wide Web字母的縮寫，也可簡寫為Web放案、WWW姚建、3W，它的功能是通過瀏覽器訪問服務(wù)端中的頁面吱殉；在這個訪問的過程中掸冤，服務(wù)端的頁面稱為“資源”，瀏覽器通過資源統(tǒng)一標(biāo)識的URL（Uniform Resource Identifier）地址來識別并解析頁面友雳。在整個瀏覽器打開并解析頁面的過程中稿湿，還有一個非常重要的概念，就是如何將頁面從服務(wù)端傳輸?shù)娇蛻舳搜荷蓿鼊t是由超文本傳輸協(xié)議（Hypertext Transfer Protocol）來完成的饺藤。整個過程如圖1所示。
圖1HTML是HyperText Markup Language的縮寫流礁，其功能是定義頁面文檔的格式涕俗，它是一種規(guī)范、一種標(biāo)準(zhǔn)神帅，通過這種規(guī)范與標(biāo)準(zhǔn)告訴瀏覽器如何去顯頁面中的內(nèi)容再姑。有一點需要說明的是，不同的瀏覽器找御，它的這種標(biāo)準(zhǔn)是不完全相同的元镀，因此會導(dǎo)致同一頁面在不同瀏覽器中出現(xiàn)不一樣的頁面效果。雖然萬維網(wǎng)與HTML存在密不可分的關(guān)系霎桅，但它們之前的關(guān)系也是非常明確的栖疑，那就是前者是整個Web系統(tǒng)執(zhí)行過程的統(tǒng)稱，而后者僅是這個統(tǒng)稱中的一部分哆档，它是頁面編寫的一種標(biāo)準(zhǔn)，按此標(biāo)準(zhǔn)構(gòu)建的頁面在前者執(zhí)行的Web系統(tǒng)中瀏覽住闯、執(zhí)行瓜浸、解析澳淑。它們間的關(guān)系如圖2所示。
圖2HTML這種超文本語言規(guī)范插佛，隨著版本的迭代而不斷發(fā)展和完善杠巡，直到2014年10月28日，HTML5草案的確定雇寇，給整個Web頁的開發(fā)指定了一個新的方向氢拥。通常情況下，HTML早期的版本在每隔2年后锨侯，都會有一個新版本的更迭嫩海，只是最后一個版本——HTML 5來的晚了些，詳細(xì)的版本時間軸如圖3所示囚痴。
圖3（1）在HTML版本不斷升級變更時叁怪，暴露了一些問題，例如深滚，它的語法非常松散奕谭，對于開發(fā)者來講是一件好事，可對于早期的計算機(jī)系統(tǒng)痴荐，特別對移動端系統(tǒng)來講血柳，解析起來非常麻煩，因此生兆，產(chǎn)生了語法更嚴(yán)格的XHTML語言难捌。（2）XHTML的語法非常嚴(yán)格，它的最初目標(biāo)就是要取代HTML皂贩，并在2000年推出了1.0的推薦標(biāo)準(zhǔn)栖榨，后面由于各瀏覽器廠商并不都認(rèn)可這種語法，因此明刷，它版本的更新非常慢婴栽，詳細(xì)的版本時間軸如圖4所示。
圖4（3）需要說明的是辈末，XHTML語言在更新至2.0版本之后愚争，后續(xù)的版本全部基于HTML5草案，它最常見的版本是基于HTML4.0.1的XHTML1.0挤聘。從目前互聯(lián)網(wǎng)發(fā)展的整體形勢來看轰枝，HTML5是HTML版本中最為重要的一次變動，而不僅僅是一次簡單的版本更新组去，它將代表和引領(lǐng)著未來Web開發(fā)的方向鞍陨，之所以這樣講，是因為HTML5有以下幾個明顯的特點。（1）各大瀏覽器廠商的大力支持HTML5畢竟只是一個超級文本的標(biāo)準(zhǔn)诚撵，這一標(biāo)準(zhǔn)的執(zhí)行離不開瀏覽器的支持缭裆，而各大瀏覽器廠商對HTML5的支持卻是空前的，因為它們也非常希望能夠借助一些新技術(shù)的誕生寿烟，不斷擴(kuò)大原有的市場份額澈驼。（2）移動優(yōu)先的原則當(dāng)前的Web終端多而無序，但它有一個非常明顯的特征筛武，就是移動端優(yōu)先缝其，特別是2010年以后，各大企業(yè)加大了對移動端技術(shù)研發(fā)的投入和支持力度徘六，使得傳統(tǒng)意義上的Web開發(fā)的實質(zhì)就是移動端開發(fā)内边。HTML5是順應(yīng)這一趨勢的，大量新增的移動端元素和屬性及API為它支持移動端開發(fā)提供了強(qiáng)大的技術(shù)保障硕噩。（3）支持游戲的開發(fā)近年來假残，基于頁面的游戲越來越受到用戶的喜愛，傳統(tǒng)意義上的本地APP的游戲應(yīng)用炉擅，由于安裝與更新上的局限性辉懒，使得企業(yè)逐漸放棄對它的開發(fā)，改而轉(zhuǎn)向Web方式的開發(fā)谍失，并有慢慢替代本地趨勢眶俩。HTML5對游戲的開發(fā)也提供了大量的API支持，包括新增的Canvas元素快鱼、CSS3中的3D動畫效果颠印，第三方的游戲引摯，是目前Web游戲開發(fā)常用方式抹竹。相對于客戶端和服務(wù)端的開發(fā)環(huán)境搭建而言线罕，Web前端頁面開發(fā)的環(huán)境構(gòu)建要方便許多，針對它的工具也是很多窃判，目前最為主要的包括下面幾款工具：（1）Adobe DreamweaverAdobe Dreamweaver钞楼，簡稱“DW”，中文名稱?“夢想編織者”袄琳，它是美國MACROMEDIA公司開發(fā)的網(wǎng)頁編輯器询件，它的特點是集網(wǎng)頁制作和管理網(wǎng)站于一身，并且可以做到所見即所得唆樊，近來的版本也更加貼近移動端市場宛琅，可以非常方便地制作出跨越平臺限制和跨越瀏覽器的動態(tài)頁面。目前常用的版本是Adobe Dreamweaver CC逗旁。它的搭建非常簡單嘿辟，在官網(wǎng)下載開發(fā)工具包，解壓后，點擊可執(zhí)行文件红伦，按照界面提示介陶，點擊“下一步”，最后色建，安裝成功后打開的主界面如圖5所示。
圖5需要說明的是舌缤，Adobe Dreamweaver CC在安裝過程中箕戳，需要進(jìn)行用戶注冊，注冊成功后国撵，就可以進(jìn)行30天試用或直接輸入激活碼進(jìn)行使用陵吸。（2）WebStorm與Adobe Dreamweaver CC工具不同，WebStorm是jetbrains公司旗下一款JavaScript 開發(fā)工具介牙，也是一款功能非常強(qiáng)大的前端開發(fā)利器壮虫，它的強(qiáng)大之處在于它的開發(fā)過程中的代碼提示效果，因此环础，被廣大的程序開發(fā)人員稱為“最強(qiáng)大的HTML5編輯器”囚似、“最智能的JavaScript IDE”。目前常用的版本是WebStorm 10.0.3线得。WebStorm的環(huán)境構(gòu)建也非常方便饶唤，不需要安裝，直接在官網(wǎng)中下載應(yīng)用包贯钩，點擊可執(zhí)行文件募狂，就進(jìn)入了主界面開發(fā)環(huán)境中，效果如圖6所示角雷。
圖6需要說明的是祸穷，WebStorm開發(fā)工具在安裝后，需要進(jìn)行版本的漢化和破解勺三，相應(yīng)的方面雷滚，在安裝包中有詳細(xì)的說明。（3）Sublime Text與前面介紹的兩款Web頁面相比檩咱，Sublime Text開發(fā)工具要輕巧許多揭措，無論是體積或功能，它是一個代碼編輯器刻蚯，也是HTML和散文先進(jìn)的文本編輯器绊含，漂亮的用戶界面和非凡的代碼書寫功能是它的一個最為明顯的特點。目前常用的版本是Sublime Text 3炊汹。它的安裝也是非常簡便躬充，只需要下載安裝包，點擊可執(zhí)行文件即可，它的開發(fā)主界面如圖7所示充甚。
圖7需要說明的是Sublime Text開發(fā)工具雖然輕巧以政，但它的許多功能的使用都必須依賴于插件，因此伴找，找到相應(yīng)插件才能實現(xiàn)對應(yīng)的功能盈蛮。
QQ技術(shù)交流群:815302226
更多內(nèi)容請?zhí)砑游⑿牛簃adongweikai，或掃描下方二維碼添加
