html5是標(biāo)記語言，不需要下載。
創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)十余年來致力于為客戶提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都品牌網(wǎng)站建設(shè)、營銷型網(wǎng)站、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了上千余家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。
你可以在電腦新建一個(gè)文本文件，將后綴改為.html，里面編輯文字后使用瀏覽器打開。
具體的標(biāo)簽含義與學(xué)習(xí)可以在w3school,菜鳥教程等學(xué)習(xí)。
《HTML5與CSS3權(quán)威指南（上冊） （第3版）》（陸凌牛）電子書網(wǎng)盤下載免費(fèi)在線閱讀
鏈接:
提取碼: avm3
書名：HTML5與CSS3權(quán)威指南（上冊） （第3版）
作者：陸凌牛
豆瓣評分：6.7
出版社：機(jī)械工業(yè)出版社
出版年份：2015-9-1
頁數(shù)：552
內(nèi)容簡介：
本書是HTML 5與CSS 3領(lǐng)域公認(rèn)的標(biāo)桿之作，被讀者譽(yù)為“系統(tǒng)學(xué)習(xí)HTML 5與CSS 3的最佳著作”和“Web前端工程師案頭必備圖書之_”。
前兩版累計(jì)印刷超過15次，網(wǎng)絡(luò)書店評論超過8000條，98％以上的評論都是五星級的好評。不僅是HTML 5與CSS 3圖書領(lǐng)域當(dāng)之無愧的領(lǐng)頭羊，而且在整個(gè)原創(chuàng)計(jì)算機(jī)圖書領(lǐng)域是佼佼者。
第3版首先從技術(shù)的角度根據(jù)最新的HTML 5和CSS 3標(biāo)準(zhǔn)進(jìn)行了更新和補(bǔ)充，其次根據(jù)讀者的反饋對內(nèi)容的組織結(jié)構(gòu)和寫作方式做了進(jìn)一步的優(yōu)化，內(nèi)容更經(jīng)典，閱讀體驗(yàn)也更好。
全書共29章，分為上下兩冊：
上冊(1—17章)全面系統(tǒng)地講解了HTML 5相關(guān)的技術(shù)，以HTML 5對現(xiàn)有Web應(yīng)用產(chǎn)生的變革開篇，順序講解了HTML 5與HTML 4的區(qū)別、HTML 5的結(jié)構(gòu)、表單及新增頁面元素、圖形繪制、多媒體、本地存儲、文件、WebRTC通信、擴(kuò)展的XMLHttpRequest、離線應(yīng)用、WebWorkers、地理位置信息、拖放與通知等內(nèi)容；下冊(18—29章)全面系統(tǒng)地講解了CSS 3相關(guān)的技術(shù)，以CSS 3的功能和模塊結(jié)構(gòu)開篇，順序講解了各種選擇器及其使用、文字與字體的相關(guān)樣式、盒相關(guān)樣式、背景與邊框相關(guān)樣式、布局相關(guān)樣式、變形處理、動畫、顏色相關(guān)樣式等內(nèi)容。
全書一共389個(gè)示例頁面和2個(gè)綜合性的案例，所有代碼均通過作者上機(jī)調(diào)試，讀者可下載書中代碼，直接在瀏覽器查看運(yùn)行結(jié)果。
作者簡介：
陸凌牛，資深Web開發(fā)工程師、軟件開發(fā)工程師和系統(tǒng)設(shè)計(jì)師。從事Web開發(fā)多年，對各種Web開發(fā)技術(shù)（包括前端和后端）都有非常深入的研究，經(jīng)驗(yàn)極其豐富。HTML 5和CSS 3等新技術(shù)的先驅(qū)者和布道者，不僅對HTML 5與CSS 3有非常深入的研究，而且對Sencha Touch、Node.js等開發(fā)框架也有非常深入的研究，并且付諸了大量實(shí)踐。同時(shí)，他還擅長微軟與Java的相關(guān)技a術(shù)，在C#、VB.NET、ASP.NET、SQL Server 、Oracle、Java、Struts、Spring、Hibernate等方面也積累大量的實(shí)戰(zhàn)經(jīng)驗(yàn)。
首先，HTML5是跨平臺的，也就是說你編寫的HTML5頁面可以很容易的移植到各個(gè)平臺上，比如說應(yīng)用商店；再者，HTML5擁有自適應(yīng)網(wǎng)頁的特性，通過它我們只需要編寫一個(gè)網(wǎng)頁就能夠滿足用戶在不同設(shè)備上的查詢，比如手機(jī)，平板，電腦；其次，HTML5引入了諸多標(biāo)簽，減少開發(fā)者的工作，提高搜索引擎的可讀性；最后，及時(shí)更新，HTML5編寫的游戲都是及時(shí)更新的，不用下載，只不過現(xiàn)在還沒有客戶端游戲體驗(yàn)好。建議，百度多看看介紹，如果要學(xué)w3cschool是個(gè)不錯(cuò)的網(wǎng)站。
html5的播放器可以到源碼分享網(wǎng)去下載一個(gè)，然后自己修改一下。
當(dāng)然，自己可以寫一個(gè)就行了。html5的播放器蠻簡單的
比如
video width="330" height="270" controls autobuffer
source src="./video/test.mp4" type='video/mp4/source
source src="./video/test.ogg" type='video/ogg/source
/video
音樂播放器也差不多的。
當(dāng)然也可以直接用flash形式。
《HTML5 WebSocket權(quán)威指南》（Vanessa Wang）電子書網(wǎng)盤下載免費(fèi)在線閱讀
鏈接：
提取碼：8jxi ?
書名：HTML5 WebSocket權(quán)威指南
作者：Vanessa Wang
譯者：姚軍
豆瓣評分：7.0
出版社：機(jī)械工業(yè)出版社
出版年份：2014-3
頁數(shù)：193
內(nèi)容簡介：
《HTML5 WebSocket權(quán)威指南》是HTML5 WebSocket領(lǐng)域最權(quán)威的著作之一，它系統(tǒng)、全面地講解了HTML5 WebSocket的各個(gè)方面，是Web開發(fā)人員和架構(gòu)師學(xué)習(xí)WebSocket的最佳選擇。書中討論了基于WebSocket的架構(gòu)師如何減少不必要的網(wǎng)絡(luò)開銷和延遲層，如何通過WebSocket對廣泛使用的協(xié)議（如XMPP和STOMP）進(jìn)行分層，如何保護(hù)WebSocket連接和在企業(yè)部署基于 WebSocket的應(yīng)用程序。主要內(nèi)容包括： WebSocket API和協(xié)議、WebSocket協(xié)議通信的例子、WebSocket的安全性和企業(yè)部署、內(nèi)置即時(shí)通信和聊天應(yīng)用程序的WebSocket與XMPP、通過WebSocket的STOMP實(shí)現(xiàn)發(fā)布/訂閱消息傳遞協(xié)議，以及用遠(yuǎn)程幀緩沖協(xié)議實(shí)現(xiàn)VNC。
作者簡介：
vanessa wang，html5領(lǐng)域的布道者和實(shí)踐者，熱衷于html5和websocket的研究，是舊金山html5用戶組的聯(lián)合組織者，負(fù)責(zé)組織html5和相關(guān)技術(shù)的社區(qū)活動．vanessa目前是kaazing公司的技術(shù)出版經(jīng)理，15年來一直堅(jiān)持撰寫技術(shù)文章。kaazing是一家軟件公司，旨在使用新的websocket標(biāo)準(zhǔn)改進(jìn)企業(yè)和客戶通過web通信的方式。寫作之余，她喜歡打跆拳道、騎自行車和拉大提琴。
frank salim，google公司資深軟件工程師，擁有pomona學(xué)院的計(jì)算機(jī)科學(xué)學(xué)位。曾經(jīng)是kaazing公司最早的工程師之一，協(xié)助建立了websocket網(wǎng)關(guān)和客戶端策略。2010年，frank與人合著了《pro html5 programming》(apress)一書。編程之余，他喜歡閱讀、繪畫和單排輪滑。
peter moskovits，kaazing公司實(shí)時(shí)解決方案負(fù)責(zé)人。peter與架構(gòu)師和開發(fā)人員社區(qū)緊密協(xié)作，構(gòu)建和部署最好的web解決方案。在加入kaazing之前，peter擔(dān)任過多種產(chǎn)品的管理工作，并曾經(jīng)負(fù)責(zé)oracie的門戶產(chǎn)品策略．peter經(jīng)常在會議和業(yè)界活動上發(fā)表演講，包括goto、yow!、javaone、oracle openworld、html5deconf、devcon5和各種用戶組會議。他還是《oracle webcenter 11g handbook》的合著者。
目前HTML5已向開發(fā)人員提供了很多新的標(biāo)簽，如section，nav，article，header和footer等。這些標(biāo)簽語義化程度高，會被經(jīng)常使用，但在IE6，IE7，IE8和Firefox 2等老式瀏覽器中卻不能識別和正常使用。
一、HTML5標(biāo)簽在瀏覽器展示存在的問題
對于現(xiàn)階段來說，使用HTML5標(biāo)簽可能遇到的最大問題就是如何在不支持新標(biāo)簽的瀏覽器中做恰當(dāng)?shù)奶幚?。?dāng)我們在頁面中使用HTML5元素時(shí)，可能會得到三種不同的結(jié)果。
結(jié)果1：標(biāo)簽被當(dāng)作錯(cuò)誤處理并被忽略。那么DOM構(gòu)建的時(shí)候，就會當(dāng)作這個(gè)標(biāo)簽不存在。
結(jié)果2：標(biāo)簽會被當(dāng)作錯(cuò)誤處理，并在DOM構(gòu)建的時(shí)候依然會按照預(yù)期的代碼進(jìn)行創(chuàng)建，并且HTML標(biāo)簽會被構(gòu)造成行內(nèi)元素（也就是說雖然不能識別，但是代碼里section標(biāo)簽依然會在dom中創(chuàng)建一個(gè)對應(yīng)section節(jié)點(diǎn)，但是屬于行內(nèi)元素）。
結(jié)果3：標(biāo)簽被識別為HTML5標(biāo)簽，然后用DOM節(jié)點(diǎn)對其進(jìn)行替換。DOM在構(gòu)建的時(shí)候和預(yù)想的一致，并且合適的樣式會應(yīng)用到標(biāo)簽上（大部分情況下是塊級元素）。
有一個(gè)具體的例子，大家思考一下下面的代碼：
div class="outer"
section
h1title/h1
ptext/p
/section
/div
很多瀏覽器（比如Firefox
3.6和Safari4）解析的時(shí)候都會將div作為最外層的元素，然后div里面是一個(gè)識別不了的元素（section），它會在DOM中創(chuàng)建，并被作為一個(gè)行內(nèi)元素存在。h1和p元素都是作為section元素的子節(jié)點(diǎn)。因?yàn)閟ection在DOM中真實(shí)存在，所以也可以修改其樣式。這種情況對應(yīng)結(jié)果2。
IE9之前的版本會認(rèn)為section標(biāo)簽是一個(gè)錯(cuò)誤，并直接將其忽略，那么h1和p標(biāo)簽會被解析，然后成為div標(biāo)簽的子節(jié)點(diǎn)。/section也會被認(rèn)為是一個(gè)錯(cuò)誤并直接跳過。在這些瀏覽器中實(shí)際有效的代碼是這樣的：
div class="outer"
h1title/h1
ptext/p
/div
那么，舊版本的IE瀏覽器除了生成的DOM結(jié)構(gòu)和其他瀏覽器不一樣，其對不可識別標(biāo)簽的容錯(cuò)能力還是很棒的。因?yàn)閟ection節(jié)點(diǎn)沒有在DOM樹中構(gòu)建，所以也就不能給其增加樣式。這種情況對應(yīng)結(jié)果1。
當(dāng)然，支持HTML5的瀏覽器比如IE9，F(xiàn)irefox4+，Safari5+會創(chuàng)建正確的DOM結(jié)構(gòu)，然后這些標(biāo)簽會默認(rèn)附帶HTML5規(guī)范中定義的默認(rèn)樣式。
那么，我們所面臨的最大問題就是同樣的代碼在不同的瀏覽器中形成了不同的DOM結(jié)構(gòu)，并且含有不同的樣式。
二、如何解決HTML5標(biāo)簽不兼容
或許會有很多人在質(zhì)疑：為什么老式的瀏覽器不能識別這些標(biāo)簽？其實(shí)錯(cuò)不在瀏覽器，因?yàn)樵谀莻€(gè)時(shí)代根本不存在這種標(biāo)簽，所以不能正確識別出來，而這種不尋常的標(biāo)簽識別令DOM結(jié)構(gòu)變得異常。對此，人們想出了很多在現(xiàn)階段頁面中使用HTML5元素的解決方案。每一個(gè)解決方案為了做到兼容都會遇到一些特定的問題。在此也在馬海祥博客上跟大家分享一下：
1、實(shí)現(xiàn)標(biāo)簽被識別
馬海祥曾做個(gè)一個(gè)測試（以IE8為例），是一個(gè)文章標(biāo)題和藍(lán)色字的文章內(nèi)容，其中文章內(nèi)容用了article標(biāo)簽。代碼如下：
!DOCTYPE html
html xmlns="" lang="zh-CN"
head
meta charset="UTF-8" /
title測試/title
style
article{color:#06F;}
/style
/head
body
h1文章標(biāo)題/h1
article
這是文章內(nèi)容，應(yīng)該是一段藍(lán)色的文字。在老式瀏覽器中，如果不做hack將顯示異常。
/article
/body
/html
在IE8瀏覽器中，顯示如下：
IE8不能識別article標(biāo)簽， 定義在標(biāo)簽上的CSS樣式?jīng)]有起作用。
在IE8中，article被解釋成命名為article /和/article
/兩個(gè)空的標(biāo)簽元素，與文章內(nèi)容并列為兄弟節(jié)點(diǎn)，如下圖所示：
既然因?yàn)椴荒茏R別標(biāo)簽而不能使用，那我們的解決辦法就是讓標(biāo)簽被識別出來。所幸，簡單地通過document.createElement（tagName）即可以讓瀏覽器識別標(biāo)簽和CSS引擎知道該標(biāo)簽的存在。假設(shè)我們上面的例子的head區(qū)域加上如下代碼。
script
document.createElement('article');
/script
IE8瀏覽器中的DOM解釋就會變成下圖所示：
自然，文字也顯示成正常的藍(lán)色。如下圖所示：
2、JavaScript解決方案
JavaScript解決方案目的是解決在舊版本的IE中樣式應(yīng)用的問題。老版本的IE不會識別不明元素已經(jīng)是一個(gè)耳熟能詳?shù)奶匦?，而如果這些元素已經(jīng)通過document.createElement()創(chuàng)建，那么瀏覽器就可以識別這些標(biāo)簽，并可以將其在DOM樹中構(gòu)建，然后允許開發(fā)者對其應(yīng)用樣式。
這個(gè)方法可以確保HTML5標(biāo)簽?zāi)茉谂f版本IE中對應(yīng)創(chuàng)建DOM節(jié)點(diǎn)，然后可以對其應(yīng)用樣式。這個(gè)方法將HTML5塊級元素設(shè)置成display:block，從而可以在各個(gè)瀏覽器中做到兼容。
今天測試以下把馬海祥博客的網(wǎng)頁改成了HTML5的，調(diào)試了一下，在FF和Opera中都顯示正常了，到了IE6上卻變得面目全非了。對此我還特意去找了一些使用JS代碼支持HTML5標(biāo)簽元素的方法，在此也跟大家分享一下：
（1）、使用html5shiv
查看了一下，發(fā)現(xiàn)了html5shiv能解決這個(gè)問題，可以把HTML5的新元素轉(zhuǎn)換成IE6認(rèn)識的內(nèi)容。只需要在你的head中調(diào)用這段代碼就行：
!--if lt IE 9]
script src=""/script
![endif]--
當(dāng)然你也可以直接把這個(gè)文件下載到自己的網(wǎng)站上。但這個(gè)文件必須在head標(biāo)簽中調(diào)用，因?yàn)镮E必須在元素解析這前知道這些元素，才能啟作用！但馬海祥還要提醒你一下：還要在你的CSS文件中加上以下代碼，不然有可能會出現(xiàn)些莫名其妙的問題。
header,nav,article,section,aside,footer{display:block;}
另外excanvas.js是Google為IE6支持canvas元素寫的腳本，以后馬海祥會跟大家再細(xì)說這樣的例子，感興趣的朋友可以去試試。
（2）、使用Kill IE6
除此之外你還可以使用KILL IE6一族，前提是你的瀏覽器允許執(zhí)行JS文件。方法很簡單，在你的網(wǎng)站的/body之前加上以下代碼就可以了：
!--if lte IE 6]
script src=""/script
![endif]--
上面寫的!--if lte IE 6]在正常的HTML中屬于注釋，不會被執(zhí)行，但在IE中是一個(gè)判斷語句，所以這些代碼只有在IE中才會被識別并加載。
lte：就是Less than or equal to的簡寫，也就是小于或等于的意思。
lt ：就是Less than的簡寫，也就是小于的意思。
gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。
gt ：就是Greater than的簡寫，也就是大于的意思。
! ： 就是不等于的意思，跟javascript里的不等于判斷符相同
說實(shí)話，馬海祥不喜歡這個(gè)利用JavaScript解決的方案，因?yàn)樗茐牧宋易钪饕膚eb應(yīng)用開發(fā)原則：我們不應(yīng)該使用JavaScript來控制布局。不僅僅是因?yàn)檫@個(gè)做法給那些禁用腳本的用戶帶來了糟糕的用戶體驗(yàn)，更重要的是，如果我們希望我們的web應(yīng)用代碼是面向未來，并且維護(hù)性高的，那么必須將視圖相關(guān)部分分離出來。這個(gè)方案對在跨瀏覽器中構(gòu)建相同的DOM結(jié)構(gòu)很有幫助，也可以確保你的JavaScript和CSS在各個(gè)地方運(yùn)行結(jié)果相同，但是這個(gè)優(yōu)勢并不能改變我對這個(gè)方法的不認(rèn)同。
3、Namespace hack
永遠(yuǎn)不要缺乏使用hack解決問題的能力，在IE中還有其他技術(shù)來讓瀏覽器識別不明的標(biāo)簽。這個(gè)來自Elco Klingen日志的方法一開始引起了廣泛的關(guān)注。該技術(shù)包含了一個(gè)XML形式的命名空間，并使用了含有namespace前綴的元素。例如：
html xmlns="" xmlns:html5=""
body
html5:section
!-- content --
/html5:section
/body
/html
前綴html5是純粹是用于這個(gè)例子而且也不是官方支持的，你甚至可以用"foo"作為前綴，結(jié)果還是一樣。有了前綴之后，IE會識別新的元素，從而可以應(yīng)用樣式。在其他瀏覽器中一樣有效，那么最后，你就成功地在各個(gè)瀏覽器中構(gòu)建了一樣的元素和一樣的樣式。
這個(gè)方法的缺陷很明顯：你必須在HTML文檔中使用XML格式的命名空間，同樣，你也需要在css中這么做:
html5\:section {
display: block;
}
馬海祥點(diǎn)評：這并不是我期望Web開發(fā)者編寫代碼的方式。雖然這是一個(gè)非常杰出的解決方案，但是這讓應(yīng)用變得不自然。我不希望看到文件中充滿了帶命名空間的元素。
4、Bulletproof技術(shù)（防彈衣技術(shù)）
說實(shí)話，我是第一次接觸到這個(gè)技術(shù)，建議在所有新的HTML5塊級元素中增加一個(gè)內(nèi)部的div元素，然后包含一個(gè)CSS class，用這個(gè)元素來替代HTML元素（類似在里面穿了一件防彈衣），例如：
section
div class="section"
!-- content --
/div
/section
在應(yīng)用樣式的時(shí)候，Tantek推薦直接給div增加樣式，而不是給新元素增加樣式
推薦使用：
.section {
color: blue;
}
而不是：
section {
color: blue;
}
這個(gè)方案的原理是用簡單的方式將原來的樣式應(yīng)用方式轉(zhuǎn)移到一個(gè)代表了HTML5標(biāo)簽的元素上。由于我一般情況下不會將樣式通過標(biāo)簽名的方式應(yīng)用到元素上，所以馬海祥也并完全支持這個(gè)建議。
馬海祥覺得這個(gè)方案的缺陷是不同的瀏覽器構(gòu)建了不同的DOM結(jié)構(gòu)，那么你必須在編寫JavaScript和CSS的時(shí)候格外小心。獲取子節(jié)點(diǎn)或者父節(jié)點(diǎn)的時(shí)候，不同的瀏覽器返回的結(jié)果可能會不一樣。特別是在下面的代碼中：
div class="outer"
section
div class="section main"
!-- content --
/div/section
/div
5、反向的bulletproof技術(shù)
還有一些方法，比如嘗試使用和Tanteck方案相反的技術(shù)，也就是把HTML5元素放在div元素內(nèi)部，例如：
div class="section"
section
!-- content --
/section
div
這個(gè)方案唯一的不同是HTML5元素的位置，其他都一樣。喜歡這個(gè)技術(shù)的支持者認(rèn)為他的一致性很好（適用于所有的元素，包括hgroup）。但是DOM結(jié)構(gòu)的不同讓這個(gè)方案意義變得不大。他的主要優(yōu)勢是技術(shù)上的一致性。
6、關(guān)于X-UA-Compatible的使用
目前絕大多數(shù)網(wǎng)站都用以下代碼來作為IE8的兼容方法。
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
雖然微軟將IE向標(biāo)準(zhǔn)邁進(jìn)了一大步，而事實(shí)上IE8還存在一系列渲染的奇怪現(xiàn)象是不爭的事實(shí)。
在X-UA-Compatible中可用的方法有：
meta http-equiv="X-UA-Compatible" content="IE=6"
meta http-equiv="X-UA-Compatible" content="IE=7"
meta http-equiv="X-UA-Compatible" content="IE=8"
meta http-equiv="X-UA-Compatible" content="IE=edge"
其中最后一行是永遠(yuǎn)以最新的IE版本模式來顯示網(wǎng)頁的。
另外加上
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"
而使用，Emulate模式后則更重視。
所以目前來說還是以使用
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
為首選。
7、通過修改HTML部分來實(shí)現(xiàn)
我的主要目標(biāo)是確保我只需要修改HTML部分。這就意味著不需要修改CSS和JavaScript。為什么會有這樣的需求？需要修改的Web應(yīng)用視圖越多，你越有可能制造bug。將改變限制到一個(gè)視圖也就限制了bug的出現(xiàn)，即使出現(xiàn)了bug，也可以減少你查找錯(cuò)誤的范圍。如果一個(gè)視圖破相了，我可以知道這是因?yàn)槲以黾恿艘粋€(gè)section元素，而不是考慮是不是CSS文件修改來帶的影響。
在研究了所有這些解決方案，并進(jìn)行一些嘗試和設(shè)計(jì)之后，我回到了Tantek的方案。這是唯一一個(gè)只需要修改HTML而不用動CSS和HTML的方案?，F(xiàn)在，我在他的方案基礎(chǔ)上做了一些改進(jìn)，來達(dá)到我想要的結(jié)果。
首先，我不會給那些代表HTML5元素的class增加樣式（所以我不會使用.section這樣的選擇器）。我保留了div元素，然后再增加一個(gè)帶語義的class來應(yīng)用樣式，并作為進(jìn)行JavaScript操作的鉤子。例如，這樣的代碼：
div class="content"
!-- content --
/div
經(jīng)過改進(jìn)后：
section
div class="section content"
!-- content --
/div
/section
這樣的修改完成后，我依然使用.content作為樣式和腳本的入口。這也意味著我不需要修改CSS和JavaScript。
然后，為了避免hgroup標(biāo)簽這樣的情況，我選擇不使用這個(gè)標(biāo)簽。我在我已有的所有頁面中沒有找到任何一個(gè)使用了這個(gè)標(biāo)簽的。由于hgroup標(biāo)簽只能包含標(biāo)題元素，如果你確實(shí)想要使用這個(gè)標(biāo)簽，那么使用hrgoup來包含本身是非常安全的（假設(shè)它沒有包含其他的塊級元素）。
我在馬海祥博客上花了很多時(shí)間來測試比較bulletproof和反向的bulletproof哪個(gè)更好一些。我做選擇時(shí)最主要的決定因素就是反向的bulletproof需要我去增加CSS代碼。在那些為HTML5標(biāo)簽創(chuàng)建了DOM節(jié)點(diǎn)但是沒有應(yīng)用默認(rèn)樣式的元素來說，div元素里包含了一個(gè)HTML5塊級元素在很多情況下都會攪亂我的布局，因?yàn)閯?chuàng)建的DOM節(jié)點(diǎn)是行內(nèi)元素。我不得不明確增加CSS規(guī)則來讓這個(gè)節(jié)點(diǎn)變成塊級元素從而可以正常布局，這也就違反了我不修改CSS文件的初衷。
馬海祥博客點(diǎn)評：
在我的研究中，我使用了多個(gè)頁面，然后在這些頁面上使用修改過后的bulletproof技術(shù)。我分別在簡單和復(fù)雜的布局中，含有和不含有JavaScript交互進(jìn)行測試。在每一個(gè)例子中，我只需要修改HTML就可以讓頁面表現(xiàn)正確（不修改JavaScript和CSS）。那么，子節(jié)點(diǎn)和父節(jié)點(diǎn)的問題怎么辦？有趣的事情是我在測試中并沒有遇到這樣的問題。
理由很簡單，因?yàn)槲覍Υa苛刻的態(tài)度。我認(rèn)真地做了第二遍檢查：
（1）、標(biāo)簽名和ID不會用于應(yīng)用樣式（只是用class）。
（2）、盡量選擇常用的CSS選擇器并且盡量減少選擇器的使用。
（3）、JavaScript代碼不依賴于特定的DOM結(jié)構(gòu)。
（4）、標(biāo)簽名不用于操作DOM。
我注意到另一個(gè)有趣的事情是我使用了HTML5元素作為容器。而這些新的元素僅僅是作為功能性模塊的邊界。你應(yīng)該花費(fèi)你的大部分時(shí)間為內(nèi)部的元素編寫樣式和腳本而不是處理各個(gè)模塊間的樣式和腳本。由于馬海祥博客的JavaScript和CSS標(biāo)簽都應(yīng)用在容器的內(nèi)部，所以一切都顯得很順利。我想這才是一個(gè)真正的代碼質(zhì)量高的網(wǎng)站。
重慶分公司
重慶分公司
