什么是html喇喉？

html是一種網(wǎng)頁(yè)標(biāo)記語(yǔ)言，叫超文本標(biāo)記語(yǔ)言刊侯，我們平時(shí)上網(wǎng)所看到的所有網(wǎng)頁(yè)均來(lái)自于html宾娜，英文全稱Hyper Text（超文本） Markup（標(biāo)記） Language（語(yǔ)言）。
圖片吩谦、鏈接鸳谜、音樂(lè)、視頻逮京、程序等等現(xiàn)在都是通過(guò)html實(shí)現(xiàn)卿堂。但嚴(yán)格講，它并不算編程語(yǔ)言而是屬于標(biāo)記語(yǔ)言（標(biāo)記標(biāo)簽 markup tag）懒棉。所以草描，不論你是否是程序員，這個(gè)語(yǔ)言最好掌握策严。期初學(xué)習(xí)時(shí)可能覺(jué)得html很簡(jiǎn)單穗慕，一度以為當(dāng)個(gè)程序員太簡(jiǎn)單，后面會(huì)接觸到html5妻导、css3逛绵，兼容性，可能這還不是最難得倔韭，直到......javascript术浪，WTF！Ｊ僮谩胰苏！沒(méi)點(diǎn)基礎(chǔ)還真會(huì)懷疑人生！總之醇疼，對(duì)于html而言硕并，
并沒(méi)有想象中的那么難法焰，也沒(méi)有想象中那么簡(jiǎn)單。

了解html的歷史

• html1.0 - 2.0（1991-1995）：到底有沒(méi)有1.0我也沒(méi)搞清楚倔毙，網(wǎng)上找的資料也都存在爭(zhēng)議埃仪，因?yàn)楫?dāng)時(shí)版本很多，無(wú)法確定誰(shuí)的是初版陕赃÷羊龋《Head First HTM》這本書里也是1.0-2.0的說(shuō)法，但至少可以肯定的是雖然簡(jiǎn)陋凯正，但確實(shí)已經(jīng)支持超文本了毙玻。
• html3.2（1997.1）：那時(shí)候W3C的標(biāo)準(zhǔn)組織還未正式成立，很多標(biāo)準(zhǔn)制定都是在瀏覽器開發(fā)者相互討論的環(huán)境下產(chǎn)生的廊散，直到應(yīng)用廣泛的4.01也是沒(méi)改善桑滩。3.0期初設(shè)計(jì)主要用來(lái)兼容2.0的，且過(guò)于復(fù)雜如表格允睹，文字繞排和復(fù)雜數(shù)學(xué)元素的顯示运准，瀏覽器廠商也根本不鳥，最后掛了缭受！3.1也根本沒(méi)有人提起胁澳，后來(lái)3.2去掉了很多3.0的特性才被認(rèn)同。但那時(shí)大都是先有實(shí)現(xiàn)后才有標(biāo)準(zhǔn)米者。所以韭畸，html的標(biāo)準(zhǔn)就很不規(guī)范，加之瀏覽器之間的競(jìng)爭(zhēng)蔓搞，會(huì)產(chǎn)生只有自家瀏覽器支持的特性胰丁，也正因如此，那時(shí)候的瀏覽器對(duì)html頁(yè)面中的錯(cuò)誤都很寬容喂分，這反而加重了頁(yè)面的不標(biāo)準(zhǔn)性锦庸，很多web從業(yè)者寫了更多的不標(biāo)準(zhǔn)頁(yè)面。傳說(shuō)蒲祈，時(shí)至今日互聯(lián)網(wǎng)上仍有90%多的頁(yè)面不符合標(biāo)準(zhǔn)甘萧。而在那個(gè)年代這種事很普遍就像今天h5頁(yè)面普及一樣，大家都這么干梆掸，當(dāng)時(shí)扬卷，最大的兩家瀏覽器廠家是Netpcape和Microsoft，那時(shí)候不像現(xiàn)在上網(wǎng)入口這么多酸钦，誰(shuí)能統(tǒng)治瀏覽器怪得，誰(shuí)就能統(tǒng)治宇宙！瀏覽器為了保持領(lǐng)先，不停地增加自己的專用擴(kuò)展包汇恤。戰(zhàn)爭(zhēng)的受害者永遠(yuǎn)都是百姓，這害得很多web開發(fā)者甚至要寫兩個(gè)單獨(dú)的頁(yè)面來(lái)做兼容拔恰，有的兼容差的因谎，搞得瀏覽器還得想想怎么去顯示。開發(fā)人員會(huì)經(jīng)常會(huì)對(duì)著瀏覽器大罵：“他媽的支持個(gè)標(biāo)準(zhǔn)真有這么難嗎?!”
• html4.0（1997.12）：戰(zhàn)爭(zhēng)總有結(jié)束的時(shí)候颜懊，這個(gè)救世主就是W3C萬(wàn)維網(wǎng)協(xié)會(huì)（world Wide Web Consortium）财岔！他們看不下去了，認(rèn)為這是互聯(lián)網(wǎng)最基礎(chǔ)的問(wèn)題河爹，應(yīng)該得以解決匠璧，若這樣戰(zhàn)下去，是沒(méi)有希望的咸这，沒(méi)有標(biāo)準(zhǔn)何來(lái)統(tǒng)一夷恍？于是，他們想制定出一個(gè)“標(biāo)準(zhǔn)”媳维，將html分割成兩種語(yǔ)言酿雪，一個(gè)負(fù)責(zé)表現(xiàn)，一個(gè)負(fù)責(zé)結(jié)構(gòu)侄刽，這樣豈不是更好指黎？于是最初的html+css分離的html4.0標(biāo)準(zhǔn)誕生了，要求瀏覽器廠商也遵從這些標(biāo)準(zhǔn)州丹，這確實(shí)解決了很多問(wèn)題醋安，但仍然有不完美，這就是后話了墓毒，起碼世界安靜了吓揪，能讓開發(fā)人員睡個(gè)好覺(jué)了。
• html4.01（1999.12）：4.01閃亮登場(chǎng)蚁鳖，這個(gè)版本成了未來(lái)10年的經(jīng)典款磺芭。相對(duì)于4.0只是做了稍許改變，做了些修補(bǔ)醉箕。正當(dāng)大家各自安好便是晴天的時(shí)候钾腺，xhtml1.0來(lái)了。
• xhtml1.0（2001）：這個(gè)期間誕生了一個(gè)新事物讥裤，xml放棒，可擴(kuò)展標(biāo)記語(yǔ)言，它被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)己英。語(yǔ)法嚴(yán)謹(jǐn)间螟，對(duì)比html簡(jiǎn)直就是別人家的孩子，于是他們?cè)诹私饨佑|中雜交出了xhtml1.0。xhtml承諾厢破，因?yàn)樗鼑?yán)格荣瑟，又是90后，新方法多摩泪。只要遵從它的標(biāo)準(zhǔn)笆焰，天下即可統(tǒng)一〖樱可問(wèn)題是嚷掠，80后和70后們，根本看不慣90后的做法荞驴，因?yàn)樗麄儗?duì)4.01已經(jīng)非常鐘情不皆，只需要完善4.01即可，根本不想要也不想懂xhtml的新方法熊楼。因?yàn)?.01比較靈活霹娄，而xhtml語(yǔ)法確實(shí)太過(guò)嚴(yán)謹(jǐn)。
  比如：

• 標(biāo)簽必須都小寫
• 非空標(biāo)簽必須成對(duì)出現(xiàn)
• 標(biāo)簽順序必須正確
• 所有屬性必須使用雙引號(hào)
• 不允許屬性最簡(jiǎn)化或省略

等等鲫骗，這是違反魯棒性原則（對(duì)自己輸出要嚴(yán)格项棠， 對(duì)他人的輸入要靈活）的，因?yàn)閤html并沒(méi)有增加新的tag挎峦，它只是要求按照XML的規(guī)范來(lái)要求HTML香追，并定義了一個(gè)新的MIME type，application/xhtml+xml坦胶。W3C的初衷是想讓瀏覽器強(qiáng)行檢查錯(cuò)誤透典，如果頁(yè)面有HTML錯(cuò)誤，瀏覽器就要顯示錯(cuò)誤信息顿苇。而實(shí)際情況是大家已經(jīng)用4.01的標(biāo)準(zhǔn)做了大量不符合要求的網(wǎng)頁(yè)了峭咒，你這么一搞，那就是啪啪打臉啊纪岁，自然不被大家認(rèn)可凑队，這也不符合瀏覽器向后兼容的原則。后來(lái)幔翰，W3C不得已垄潮，就在xhtml 1.0的標(biāo)準(zhǔn)之后加了一個(gè)附錄C氏仗，允許開發(fā)者自己選擇是使用XHTML語(yǔ)法或是舊的MIME type，來(lái)分發(fā)頁(yè)面。因?yàn)榕f的MIME type不會(huì)觸發(fā)瀏覽器的強(qiáng)錯(cuò)誤檢查谣辞。也就是說(shuō)渔彰，很多網(wǎng)站雖然宣稱自己符合xhtml1.0標(biāo)準(zhǔn)衰腌，但并不能保證完全無(wú)錯(cuò)葱峡。主要要看web服務(wù)器使用的是那種mime type來(lái)分發(fā)的抡草。但是，W3C仍不死心罢崤鳌康震！又在XHTML 1.1中取消了附錄C，還是讓大家全部使用新的MIME type來(lái)分發(fā)宾濒，并要求大家把文檔標(biāo)記成xml签杈。結(jié)果很顯然，然并卵鼎兽！W3C鍥而不舍啊，在后來(lái)流產(chǎn)的XHTML 2.0身上铣除，還是非要強(qiáng)行錯(cuò)誤檢查谚咬，強(qiáng)行檢查錯(cuò)誤就是如果你頁(yè)面有錯(cuò)誤，網(wǎng)頁(yè)顯示就是黃屏尚粘，哪怕只有一個(gè)小錯(cuò)誤择卦，你丫別想看這個(gè)網(wǎng)頁(yè)了！這要是不失敗難道還等著程序員給它送上神壇么郎嫁？而且這個(gè)情況正好解釋了亂戰(zhàn)期間的先實(shí)現(xiàn)后標(biāo)準(zhǔn)的現(xiàn)象存在的合理性秉继。因?yàn)椋扔袠?biāo)準(zhǔn)再來(lái)實(shí)現(xiàn)是行不通的泽铛。

• html5（2014.10）：上面的教訓(xùn)也為后來(lái)制定下一代標(biāo)準(zhǔn)尚辑，即html5的時(shí)候交了學(xué)費(fèi)。所以盔腔，在html5誕生初期杠茬，帶著魯棒性原則的思想主線，向后兼容就成了h5最重要的原則弛随。h5不但兼容4.01的大部分特性瓢喉，還引入了許多新特性，甚至可以直接將舊網(wǎng)頁(yè)的第一行改成<!doctype html>舀透，讓它變成一個(gè)HTML5頁(yè)面栓票，照樣都會(huì)生成相同的DOM樹，在瀏覽器里也會(huì)正常解析愕够。老的已經(jīng)運(yùn)行了十幾年走贪，開發(fā)者確實(shí)已經(jīng)需要更多特性來(lái)滿足日益發(fā)展的需求了。h5正好滿足了這個(gè)需求惑芭，不但支持博客厉斟、視頻、圖形功能强衡，還有一大堆用來(lái)構(gòu)建web應(yīng)用的功能擦秽，所以，h5的成功就不難理解了。現(xiàn)在h5已經(jīng)不單只一個(gè)技術(shù)或標(biāo)準(zhǔn)了感挥，它已成為了一個(gè)技術(shù)合集的簡(jiǎn)稱缩搅，在移動(dòng)端的表現(xiàn)更像是一批黑馬。但是触幼，要注意的是硼瓣，HTML5并不是直接由W3C制定的，w3c好像經(jīng)歷太多后累覺(jué)不愛(ài)了置谦，覺(jué)得4.01可以作為最后一個(gè)版本了堂鲤，html就這樣吧。但總有一些另外的聲音媒峡，Opera的伊恩-克森這時(shí)就提出來(lái)再改進(jìn)下html的建議瘟栖，但W3C的投票結(jié)果是NO，他們認(rèn)為HTML已死谅阿，xHTML2才是未來(lái)半哟，真是打不死的小強(qiáng)，死心不改扒┎汀寓涨！于是，Opera氯檐，Apple等瀏覽器廠商脫離W3C成立了WHATWG戒良。接下來(lái)WHATWG的工作效率非常高，因?yàn)樗麄兊墓ぷ鹘M成員就是瀏覽器廠商冠摄，他們不僅可以說(shuō)加就加蔬墩，還可以實(shí)現(xiàn)，大家不斷地提出一些好點(diǎn)子并且逐一做到了瀏覽器中耗拓，并且在短時(shí)間得出了一些成果拇颅。反觀W3C的xHTML2沒(méi)有什么實(shí)質(zhì)性的進(jìn)展，特別是從實(shí)現(xiàn)的角度來(lái)看乔询，用原地踏步形容都不足為過(guò)樟插。2006年蒂姆-伯納斯-李（這個(gè)人也是牛的一逼，最好google下）寫博文承認(rèn)因?yàn)橄敕ㄌ磺袑?shí)際了竿刁，導(dǎo)致失敗黄锤，并建議重建HTML工作組。于是食拜，2007年W3C組建了HTML5工作組并投票通過(guò)在WHATWG工作組的既有成果上開始工作而非從頭開始鸵熟。于是有了兩個(gè)工作組并行的現(xiàn)象：一個(gè)專治，一個(gè)民主负甸。但這都不重要了流强，重要的是只要他們的設(shè)計(jì)原則是統(tǒng)一的痹届，對(duì)嗎！

html結(jié)構(gòu)

html的結(jié)構(gòu)包括頭部head打月，內(nèi)容body队腐，頭部中可包含頁(yè)面的標(biāo)題title、關(guān)鍵詞keywords奏篙、描述說(shuō)明description等柴淘，它本身不會(huì)顯示，主要是給瀏覽器看的秘通，但非常之重要为严，可以影響網(wǎng)頁(yè)顯示的效果。<body></body>里面就是網(wǎng)頁(yè)要顯示的主要內(nèi)容了肺稀，里面有很多閉合標(biāo)簽構(gòu)成第股。

html結(jié)構(gòu)速記

html、css盹靴、js的作用？

一個(gè)網(wǎng)站由N多個(gè)網(wǎng)頁(yè)組成瑞妇，一個(gè)網(wǎng)頁(yè)則有html稿静、css和js構(gòu)成。

• html是主體辕狰，裝載顯示各種dom元素改备，屬于結(jié)構(gòu)框架層。
  • html可以比做一個(gè)骨骼架構(gòu)的人體蔓倍。
• css用來(lái)裝飾dom元素悬钳，屬于顯示表現(xiàn)層。
  • css可以比做人體穿的衣服和妝容偶翅。
• javascript用來(lái)控制dom元素默勾，屬于動(dòng)作交互層。
  • javascript可以比做人體的可以控制動(dòng)作的思想聚谁。

三劍客

網(wǎng)站裸奔：如果沒(méi)有衣服（css）的裝飾母剥，人只有軀干身體（html），那就是人（網(wǎng)站）在裸奔形导，之前我記得美帝好像還搞過(guò)一個(gè)網(wǎng)站裸奔活動(dòng)环疼，很多網(wǎng)站哪天全都下架了css，全都裸奔朵耕，想想也很壯觀炫隶。

如果人（網(wǎng)站）沒(méi)有可以控制其動(dòng)作（抬胳膊，轉(zhuǎn)向阎曹，走路伪阶，吃飯煞檩，說(shuō)話）的思想（js），這人（網(wǎng)站）也可以稱之為人望门，但更像一個(gè)植物人形娇。當(dāng)然，借助css3的新技術(shù)筹误，可以把植物人打扮的更漂亮桐早，甚至可以協(xié)助他做一些簡(jiǎn)單的動(dòng)作，但沒(méi)有js厨剪，他依然是無(wú)交互反饋的哄酝。

有了html5后，增加了更多新的骨頭祷膳，去掉了以前老化無(wú)用的骨頭陶衅，但作為人更重要的依然是思想，沒(méi)有思想和閑魚有何區(qū)別直晨？而jQuery等框架的作用則更像是把控制人體的動(dòng)作編排成一套招式搀军，比如吃飯這個(gè)動(dòng)作編排進(jìn)了：拿起勺子→挖食物→把勺子送嘴邊→張嘴→送食物進(jìn)嘴→咀嚼。

html和html5區(qū)別

html

html5

沒(méi)有JavaScript的網(wǎng)頁(yè)會(huì)由圖2變?yōu)閳D1勇皇，只是好看了罩句，但還是黑板，交互性依然不行敛摘。

HTML门烂、XML、XHTML區(qū)別

• HTML：超文本標(biāo)記語(yǔ)言兄淫。語(yǔ)法松散屯远，不嚴(yán)格〔端洌可以理解為通過(guò)一系列標(biāo)簽集合組合成一個(gè)文本文件慨丐，用于網(wǎng)頁(yè)瀏覽。
• XML：可擴(kuò)展標(biāo)記語(yǔ)言泄私。用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)咖气。XML來(lái)源于SGML，最初設(shè)計(jì)的目的是彌補(bǔ)HTML的不足挖滤，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要崩溪，后來(lái)逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。注意斩松，XML是用于傳輸數(shù)據(jù)伶唯，而非顯示數(shù)據(jù)。其標(biāo)簽沒(méi)有被預(yù)定義惧盹，需要根據(jù)自己需求自行定義標(biāo)簽乳幸。
• XHTML：可擴(kuò)展超文本標(biāo)記語(yǔ)言瞪讼。基于XML粹断，作用與HTML類似符欠，但語(yǔ)法更嚴(yán)格。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大瓶埋，完全可以替代HTML希柿，但面對(duì)成千上萬(wàn)已有的站點(diǎn)，直接采用XML還為時(shí)過(guò)早养筒。因此曾撤，在HTML4.01的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展晕粪，得到了XHTML挤悉。其目的就是實(shí)現(xiàn)HTML向XML的過(guò)渡。

什么是html語(yǔ)義化巫湘？

所謂html語(yǔ)義化實(shí)際上是除了讓人容易通過(guò)標(biāo)簽的意思理解外装悲，也要易于搜索引擎和瀏覽器爬蟲理解。簡(jiǎn)單講就是在合適的時(shí)間合適的地方使用合適的有語(yǔ)義信息的標(biāo)簽尚氛，例header,nav,aside,footer,section,ul,ol,em,strong等代替那些沒(méi)有語(yǔ)義div,span信息的標(biāo)簽和big,center,strike,font,b,u等完全可以用css來(lái)取代的標(biāo)簽诀诊。同時(shí)，語(yǔ)義化也有助于seo和團(tuán)隊(duì)的開發(fā)維護(hù)怠褐，它的目的是讓機(jī)器更接近人的思想畏梆，都能看懂您宪，提高處理效率奈懒。比如我們經(jīng)常犯的錯(cuò)誤就是在一個(gè)div里面對(duì)某一個(gè)詞要加重強(qiáng)調(diào)的時(shí)候，會(huì)使用span包起來(lái)宪巨，然后控制span的css為font-weight為bold磷杏。這種顯然不是語(yǔ)義化，因?yàn)橛屑又貜?qiáng)調(diào)的標(biāo)簽strong捏卓。

結(jié)構(gòu)表現(xiàn)行為分離原則

html（內(nèi)容結(jié)構(gòu)層）极祸、css（樣式表現(xiàn)層）、js（行為控制層）怠晴。html結(jié)構(gòu)層作為網(wǎng)頁(yè)的重要基礎(chǔ)遥金，其標(biāo)簽賦予內(nèi)容的含義，主要包含內(nèi)容（注意：這里的內(nèi)容是指純粹的數(shù)據(jù)信息本身蒜田，并不包含輔助信息稿械，如裝飾性的圖片圖標(biāo)等）。css表現(xiàn)層則是定義您的html該如何顯示冲粤。js行為層則是為頁(yè)面增加一些交互動(dòng)作美莫。實(shí)際上页眯，html4.0誕生的時(shí)候就是希望將css和html的分離開，css負(fù)責(zé)表現(xiàn)厢呵，而不是通過(guò)一些html的樣式標(biāo)簽來(lái)實(shí)現(xiàn)窝撵，這樣做好處在于一方面有利于搜索優(yōu)化，另一方面方便修改維護(hù)和改版重構(gòu)襟铭。在實(shí)現(xiàn)分離時(shí)候保持兩個(gè)原則即可：

• html只管結(jié)構(gòu)碌奉，不要太復(fù)雜，寫html時(shí)不要管css和js的事兒蝌矛，只管語(yǔ)義化道批，簡(jiǎn)潔化，不要涉及表現(xiàn)的標(biāo)簽入撒、不要把樣式寫在行內(nèi)隆豹。
• css表現(xiàn)層和js行為層分別用獨(dú)自的.css和.js文件來(lái)寫。寫js行為控制樣式的時(shí)候盡量不要去直接控制css樣式茅逮，而是通過(guò)在結(jié)構(gòu)層html上添加class和id璃赡，在css中定義class來(lái)是實(shí)現(xiàn)。

編碼規(guī)范的黃金定律：

永遠(yuǎn)遵循同一套編碼規(guī)范 -不管有多少人共同參與同一項(xiàng)目献雅，一定要確保每一行代碼都像是同一個(gè)人編寫的碉考。

HTML規(guī)范：

• <!doctype....>申明可寫可不寫；
• <html>必須是root根元素挺身；
• <head>和<body>是<html>中一定有且只有的元素侯谁；
• <head>必須有<title>標(biāo)簽，<meta>和<style>可選章钾，只能在<head>里墙贱；
• block塊級(jí)元素不能放在inline行級(jí)元素里；
• 元素標(biāo)簽和屬性不區(qū)分大小寫（不敏感）贱傀；
• 非空元素標(biāo)簽不必成對(duì)出現(xiàn)惨撇；
• 屬性不需要用"號(hào)包圍；
• 一些屬性可以默認(rèn)為空（如checked和disabled）府寒；
• 自閉和標(biāo)簽（img魁衙、br、link株搔、input）以空格和反斜杠/結(jié)束剖淀；
• 特殊字符或?qū)嶓w（&、<>）纤房，可不進(jìn)行轉(zhuǎn)義纵隔；
• 元素標(biāo)簽嵌套無(wú)嚴(yán)格規(guī)定。
• 樣式可寫在行內(nèi)帆卓。

XHTML規(guī)范：

• <!doctype....>申明必須要有巨朦；
• 對(duì)大小寫敏感米丘，元素標(biāo)簽和屬性必須是小寫的；
• 非空元素標(biāo)簽必須成對(duì)出現(xiàn)糊啡，有開始標(biāo)簽就必須有結(jié)束標(biāo)簽拄查；
• 屬性值必須用"引號(hào)包圍；
• 元素屬性不支持默認(rèn)空值棚蓄， 如checked屬性必須寫checked="checked"或checked="true"堕扶，不能直接寫checked=""或checked；
• name屬性不贊成使用梭依；
• 自閉和空元素結(jié)束必須寫空格和反斜杠/稍算；（<br />、<hr />役拴、<input />）
• 特殊字符如&糊探、<>必須用字符實(shí)體進(jìn)行轉(zhuǎn)義；（如&必須寫成&而<必須寫成<）河闰，html常見(jiàn)字符編碼
• 元素標(biāo)簽要正確的嵌套科平；如<b><i>這是錯(cuò)誤的嵌套</b></i>和<b><i>這是正確的嵌套</i></b>。類似規(guī)則還有： <a>元素中不能包含其他的<a>元素姜性； <pre>元素中不能包含<object>瞪慧、<big>、<img>部念、<small>弃酌、<sub>或<sup>元素；<button>元素中不能包含<input>儡炼、<textarea>妓湘、<label>、<select>射赛、<button>多柑、<form>奶是、<iframe>楣责、<fieldset>或<isindex>元素；<label>元素中不能包含其他的<label>元素聂沙； <form>元素中不能包含其他的<form>元素等秆麸。
• 推薦使用注釋，但不要在注釋內(nèi)容中使"--"及汉，也就是說(shuō)沮趣，"--"只能發(fā)生在XHTML注釋的開頭和結(jié)束，在內(nèi)容中它們不再有效坷随。如錯(cuò)誤例子：房铭，可用等號(hào)或者空格替換內(nèi)部的虛線驻龟。如正確例子：
• 推薦使用級(jí)聯(lián)樣式表控制外觀，實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)和表現(xiàn)相分離缸匪，相應(yīng)地會(huì)有部分外觀屬性不推薦使用翁狐，例如align屬性等；
• 推薦使用外部鏈接來(lái)調(diào)用腳本凌蔬。<script type="text/javascript" src="js/menu.js"></script>露懒，同時(shí)在html中使用在注釋中插入腳本的行文會(huì)被刪除；
• 圖片必須有說(shuō)明文字砂心，每個(gè)圖片標(biāo)簽都必須有ALT說(shuō)明文字懈词。

HTML5規(guī)范

原則：

web標(biāo)準(zhǔn)的核心思想是結(jié)構(gòu)（html）、表現(xiàn)（css）辩诞、行為（javascript）相互分離坎弯，互不干涉。并非某一個(gè)標(biāo)準(zhǔn)译暂，而是一系列標(biāo)準(zhǔn)的集合荞怒。按照結(jié)構(gòu)表現(xiàn)行為分離原則，編寫網(wǎng)頁(yè)時(shí)應(yīng)先考慮結(jié)構(gòu)秧秉，也就是在寫html的時(shí)候褐桌，先不要管css樣式的事兒，先把重點(diǎn)放在html的結(jié)構(gòu)和語(yǔ)義化上象迎，讓html能夠體現(xiàn)頁(yè)面的結(jié)構(gòu)或內(nèi)容荧嵌。之后在結(jié)構(gòu)的基礎(chǔ)上再去添加樣式，最后在加上js交互行為砾淌。同時(shí)啦撮，在寫javacript的時(shí)候盡量不要用js去直接操作樣式，而是通過(guò)給html元素添加或刪除class來(lái)控制樣式變化汪厨。

• 規(guī)范赃春。保證所寫代碼規(guī)范規(guī)整，近html5劫乱，遠(yuǎn)xhtml织中，保證結(jié)構(gòu)表現(xiàn)行為分離，避免在html內(nèi)使用樣式屬性和行為屬性衷戈。
• 簡(jiǎn)潔狭吼。大道至簡(jiǎn)，保證代碼的最簡(jiǎn)化殖妇，即便瀏覽器默認(rèn)是忽略回車符的刁笙，也要避免多余的空格和空行出現(xiàn)。在任何時(shí)候都要牢記，能用一個(gè)元素解決的問(wèn)題不要用兩個(gè)疲吸，做減法而不是做加法座每。
• 語(yǔ)義。保持代碼的語(yǔ)義化摘悴，盡量使用具有語(yǔ)義的元素尺栖。不要過(guò)多使用無(wú)意義的div。你的代碼不光是給開發(fā)同事看的烦租，更是給瀏覽器看延赌，給搜索引擎蜘蛛看的。
• 實(shí)用叉橱。遵循標(biāo)準(zhǔn)挫以，但是不能以犧牲實(shí)用性為代價(jià)。任何情況下都要保證使用最少的標(biāo)簽并保持最小的復(fù)雜度窃祝。
• 忠誠(chéng)掐松。選擇一套規(guī)范，然后始終遵循粪小。不管代碼由多少人參與大磺，都應(yīng)該看起來(lái)像一個(gè)人寫的一樣。
• 字符探膊。任何情況下只要是代碼部分杠愧，必須使用英文半角而不是全角字符。
  總結(jié)就是：實(shí)用為王的原則逞壁。遵循 HTML 標(biāo)準(zhǔn)和語(yǔ)義流济，不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度腌闯。

語(yǔ)法：

• 小寫绳瘟。html元素和屬性名全小寫。
• 閉合姿骏。所有非空元素必須閉合糖声，不要省略可選的結(jié)束標(biāo)簽（closing tag）要有始有終（即便是有些可選的結(jié)束標(biāo)簽可以省略，也不要省分瘦，都閉合）蘸泻。空的自閉合（self-closing）元素不要再尾部添加空格和反斜杠了（即便是加了也不算錯(cuò)誤也不要加擅腰，牢記原則）蟋恬。HTML5 規(guī)范中明確說(shuō)明這是可選的翁潘。
• 遷移趁冈。用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
• 嵌套。所有元素必須正確嵌套渗勘。不要出現(xiàn)段落里面嵌套標(biāo)題或標(biāo)題里嵌套段落的槽糕情況沐绒。同時(shí)，嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）旺坠。
• 引號(hào)乔遮。對(duì)于屬性的定義，確保全部使用雙引號(hào)取刃，絕不要使用單引號(hào)蹋肮。如：
  <h1 class="hello-world">Hello, world!</h1>

注釋：

• 詳盡注釋。解釋代碼解決問(wèn)題璧疗、解決思路坯辩、是否為新鮮方案等。
• 模塊注釋崩侠。建議不使用模塊結(jié)束注釋漆魔，一來(lái)丑，二來(lái)浪費(fèi)空間却音。
• 代辦注釋改抡。這主要是給同事和自己看的，以防腦子不好使忘了系瓢。

文檔：

• 文檔類型使用html5標(biāo)準(zhǔn)文檔模式（standard mode）<!doctype html>在第一行進(jìn)行聲明阿纤，文檔申明前不允許出現(xiàn)任何非空字符，確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)夷陋。
• 強(qiáng)烈建議html元素上指定lang屬性<html lang="zh-CN">阵赠。顯示頁(yè)面語(yǔ)言，有助于語(yǔ)言合成工具來(lái)確定怎樣發(fā)音肌稻，以及翻譯工具決定使用的規(guī)則等等清蚀。
  擴(kuò)展問(wèn)題：lang到底寫zh還是zh-CN，還是zh-cmn爹谭？
  更多關(guān)于lang屬性的知識(shí)可以從 此規(guī)范 中了解枷邪。這里列出語(yǔ)言代碼表，可以參考诺凡。
• 指定明確的字符編碼<meta charset="UTF-8">东揣。讓瀏覽器輕松、快速的確定適合網(wǎng)頁(yè)內(nèi)容的渲染方式腹泌，這樣做的好處是嘶卧，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致凉袱，（推薦使用國(guó)際標(biāo)準(zhǔn)UTF-8）芥吟。
  <meta charset="UTF-8">
• IE兼容模式侦铜。Internet Explorer支持使用兼容性<meta>標(biāo)簽來(lái)指定使用什么版本的 IE來(lái)繪制渲染頁(yè)面。如果不是特殊需要钟鸵，通常通過(guò)edge mode來(lái)通知IE使用最新的兼容模式钉稍。
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
• 可以使用IE條件注釋的方式兼容IE，但是不要添加額外的樣式表棺耍。
  更多信息可以閱讀這篇 stack overflow 上的文章
• head部分的順序（結(jié)束時(shí)不再需要反斜杠/）：
  第一部分：<meta>元素贡未；（編碼>內(nèi)核>適配>關(guān)鍵詞>描述>作者>蜘蛛>緩存>轉(zhuǎn)碼）
  第二部分：<title>元素；
  第三部分：<link> \ <style>樣式表蒙袍；
  第四部分：<base>新窗口俊卤；
  第五部分：<script>需要的js文件；
• html5規(guī)范中引入css 和javascript文件時(shí)害幅，不再需要指定type屬性了瘾蛋，因?yàn)?code>text/css和text/javascript分別是它們的默認(rèn)值。
  HTML5 spec links
  Using link
  Using style
  Using script
• 文件拓展名默認(rèn)使用html（推薦）或htm矫限，便于操作系統(tǒng)或者程序辨認(rèn)文件哺哼。

屬性：

• 對(duì)于屬性的定義，確保全部使用雙引號(hào)叼风，絕不要使用單引號(hào)取董。如果js控制時(shí)有問(wèn)題，請(qǐng)使用 / 轉(zhuǎn)義符解決无宿。
• 省略type屬性茵汰。使用style、link孽鸡、script蹂午，不用指定type屬性，因?yàn)?text/css 和 text/javascript 分別是他們的默認(rèn)值彬碱。
• 省略Boolean屬性值豆胸。布爾型屬性可以在聲明時(shí)不賦值，XHTML 規(guī)范要求為其賦值巷疼，但是 HTML5 規(guī)范不需要晚胡。元素的布爾型屬性如果有值，就是 true嚼沿，如果沒(méi)有值估盘，就是 false。如disabled,checked,selected等骡尽。如果一定要為其賦值的話遣妥，請(qǐng)參考 WhatWG 規(guī)范：如果屬性存在，其值必須是空字符串或 [...] 屬性的規(guī)范名稱攀细，并且不要在首尾添加空白符箫踩。
  更多信息請(qǐng)參考 WhatWG section on boolean attributes
• 省略u(píng)rl類屬性資源協(xié)議頭爱态。
• 屬性順序。html屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性班套。class -> id,name -> data-* -> src,for,type,href,value -> title,alt -> aria-*,role肢藐。class 用于標(biāo)識(shí)高度可復(fù)用組件故河，因此應(yīng)該排在首位吱韭。id 用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用鱼的，因此排在第二位理盆。
• 多媒體元素添加替代屬性。圖像增加alt屬性凑阶，音視頻增加替代文字猿规。
• 不手動(dòng)設(shè)置tabindex屬性，讓瀏覽器自動(dòng)設(shè)置宙橱。

元素：

• 避免冗余標(biāo)簽姨俩。編寫 HTML 代碼時(shí)，盡量避免多余的父元素师郑。很多時(shí)候环葵，這需要迭代和重構(gòu)來(lái)實(shí)現(xiàn)。
• 避免JavaScript 生成標(biāo)簽宝冕。通過(guò)JS生成的標(biāo)簽會(huì)讓內(nèi)容變得不易查找张遭、編輯谜洽，并且降低性能商虐，能避免時(shí)盡量避免。
• 段落文字應(yīng)該用<p>剃毒，避免使用<br>宝剖。
• 列表項(xiàng)放<ul>洁闰、<ol>、<dl>万细，不要使用一系列的<div>或<p>
• <input>使用for屬性綁定<label>渴庆。
• 使用<label>標(biāo)簽包裹radio或checkbox和他們的文字，不用再使用for屬性雅镊。
• 使用單選襟雷、復(fù)選替代下拉菜單。（radio or checkbox instead of select menu）
• form button應(yīng)制定type類型仁烹，使用type="submit"耸弄、type="reset"或type="button"。
• 首要的表單按鈕首先出現(xiàn)(在dom中)卓缰，尤其是適用多個(gè)提交按鈕的場(chǎng)合计呈。視圖中顯示的順序可以利用css修改砰诵。
• 有效使用<thead>、<tfoot>捌显、<tbody>茁彭、<th>（scope屬性）》鐾幔可以把<tfoot>放<tbody>前提高加載速度理肺。（如果不寫tbody，瀏覽器也給你自動(dòng)加上）
• 通過(guò)Javascript生成的元素讓內(nèi)容變得不易查找善镰、編輯妹萨，并且降低性能。能避免時(shí)盡量避免炫欺。

格式：

• 嵌套縮進(jìn)乎完，用兩個(gè)空格來(lái)代替制表符Tab，這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法品洛。
• 刪除行尾空格树姨。
• 塊元素、列表元素桥状、表格元素都放在新行帽揪。
• inline元素視情況換行。
• 努力保持每行長(zhǎng)度小于80列岛宦，如果太長(zhǎng)可換行台丛。

編輯器配置：

• 用兩個(gè)空格代替制表符（soft-tab 即用空格代表 tab 符）。
• 保存文件時(shí)砾肺，刪除尾部的空白符挽霉。
• 設(shè)置文件編碼為 UTF-8。
• 在文件結(jié)尾添加一個(gè)空白行变汪。

css編碼規(guī)范：

語(yǔ)法：

• 用兩個(gè)空格來(lái)代替制表符（tab） --這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法侠坎。
• 為選擇器分組時(shí)，將單獨(dú)的選擇器單獨(dú)放在一行裙盾。
• 為了代碼的易讀性实胸，在每個(gè)聲明塊的左花括號(hào)前添加一個(gè)空格。
• 聲明塊的右花括號(hào)應(yīng)當(dāng)單獨(dú)成行番官。
• 每條聲明語(yǔ)句的 :后應(yīng)該插入一個(gè)空格庐完。
• 為了獲得更準(zhǔn)確的錯(cuò)誤報(bào)告，每條聲明都應(yīng)該獨(dú)占一行徘熔。
• 所有聲明語(yǔ)句都應(yīng)當(dāng)以分號(hào)結(jié)尾门躯。最后一條聲明語(yǔ)句后面的分號(hào)是可選的，但是酷师，如果省略這個(gè)分號(hào)讶凉，你的代碼可能更易出錯(cuò)染乌。
• 對(duì)于以逗號(hào)分隔的屬性值，每個(gè)逗號(hào)后面都應(yīng)該插入一個(gè)空格（例如懂讯，box-shadow
  ）荷憋。
• 不要在 rgb()、rgba()褐望、hsl()勒庄、hsla()或 rect()值的內(nèi)部的逗號(hào)后面插入空格。這樣利于從多個(gè)屬性值（既加逗號(hào)也加空格）中區(qū)分多個(gè)顏色值（只加逗號(hào)譬挚，不加空格）锅铅。
• 對(duì)于屬性值或顏色參數(shù)酪呻，省略小于 1 的小數(shù)前面的 0 （例如减宣，.5代替 0.5
  ；-.5px代替 -0.5px）玩荠。
• 十六進(jìn)制值應(yīng)該全部小寫漆腌，例如，#fff阶冈。在掃描文檔時(shí)闷尿，小寫字符易于分辨，因?yàn)樗麄兊男问礁子趨^(qū)分女坑。
• 盡量使用簡(jiǎn)寫形式的十六進(jìn)制值填具，例如，用 #fff代替 #ffffff匆骗。
• 為選擇器中的屬性添加雙引號(hào)劳景，例如，input[type="text"]碉就。只有在某些情況下是可選的盟广，但是，為了代碼的一致性瓮钥，建議都加上雙引號(hào)筋量。
• 避免為 0 值指定單位，例如碉熄，用 margin: 0;代替 margin: 0px;

代碼示例：

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

對(duì)用到的術(shù)語(yǔ)有疑問(wèn)的請(qǐng)參考 Wikipedia 上的 syntax section of the Cascading Style Sheets article桨武。

聲明順序：

相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組，并按照下面的順序排列：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以從正常的文檔流中移除元素锈津，并且還能覆蓋盒模型（box model）相關(guān)的樣式呀酸，因此排在首位。盒模型排在第二位一姿，因?yàn)樗鼪Q定了組件的尺寸和位置七咧。其他屬性只是影響組件的內(nèi)部（inside）或者是不影響前兩組屬性跃惫，因此排在后面。

代碼示例：

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* Misc */
  opacity: 1;
}

完整的屬性列表及其排列順序請(qǐng)參考 Recess艾栋。

不要使用@import：

與<link>標(biāo)簽相比爆存，@import指令要慢很多，不光增加了額外的請(qǐng)求次數(shù)蝗砾，還會(huì)導(dǎo)致不可預(yù)料的問(wèn)題先较。替代辦法有以下幾種：

1. 使用多個(gè)<link>元素
2. 通過(guò) Sass 或 Less 類似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件
3. 通過(guò) Rails、Jekyll 或其他系統(tǒng)中提供過(guò) CSS 文件合并功能

代碼示例：

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

請(qǐng)參考 Steve Souders 的文章了解更多知識(shí)悼粮。

媒體查詢（Media query）的位置：

將媒體查詢放在盡可能相關(guān)規(guī)則的附近闲勺。不要將他們打包放在一個(gè)單一樣式文件中或者放在文檔底部。如果你把他們分開了扣猫，將來(lái)只會(huì)被大家遺忘菜循。下面給出一個(gè)典型的實(shí)例。如：

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

帶前綴的屬性：

當(dāng)使用特定廠商的帶有前綴的屬性時(shí)申尤，通過(guò)縮進(jìn)的方式癌幕，讓每個(gè)屬性的值在垂直方向?qū)R，這樣便于多行編輯昧穿。
在 Textmate 中勺远，使用 Text → Edit Each Line in Selection (??A)。
在 Sublime Text 中时鸵，使用 Selection → Add Previous Line (??↑) 和 Selection → Add Next Line (??↓)胶逢。

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

單行規(guī)則聲明：

對(duì)于只包含一條聲明的樣式，為了易讀性和便于快速編輯饰潜，建議將語(yǔ)句放在同一行初坠。對(duì)于帶有多條聲明的樣式，還是應(yīng)當(dāng)將聲明分為多行囊拜。
這樣做的關(guān)鍵因素是為了錯(cuò)誤檢測(cè) -- 例如某筐，CSS 校驗(yàn)器指出在 183 行有語(yǔ)法錯(cuò)誤。如果是單行單條聲明冠跷，你就不會(huì)忽略這個(gè)錯(cuò)誤南誊；如果是單行多條聲明的話，你就要仔細(xì)分析避免漏掉錯(cuò)誤了蜜托。

代碼示例：

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

簡(jiǎn)寫形式的屬性聲明：

在需要顯示地設(shè)置所有值的情況下抄囚，應(yīng)當(dāng)盡量限制使用簡(jiǎn)寫形式的屬性聲明。常見(jiàn)的濫用簡(jiǎn)寫屬性聲明的情況如下：padding橄务、margin幔托、font、background、border重挑、border-radius
大部分情況下嗓化，我們不需要為簡(jiǎn)寫形式的屬性聲明指定所有值。例如谬哀，HTML 的 heading 元素只需要設(shè)置上刺覆、下邊距（margin）的值，因此史煎，在必要的時(shí)候谦屑，只需覆蓋這兩個(gè)值就可以。過(guò)度使用簡(jiǎn)寫形式的屬性聲明會(huì)導(dǎo)致代碼混亂篇梭，并且會(huì)對(duì)屬性值帶來(lái)不必要的覆蓋從而引起意外的副作用氢橙。
在 MDN（Mozilla Developer Network）上一篇非常好的關(guān)于shorthand properties 的文章，對(duì)于不太熟悉簡(jiǎn)寫屬性聲明及其行為的用戶很有用恬偷。

代碼示例：

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Less 和 Sass 中的嵌套：

避免不必要的嵌套悍手。這是因?yàn)殡m然你可以使用嵌套，但是并不意味著應(yīng)該使用嵌套喉磁。只有在必須將樣式限制在父元素內(nèi)（也就是后代選擇器）谓苟，并且存在多個(gè)需要嵌套的元素時(shí)才使用嵌套官脓。
擴(kuò)展閱讀：Nesting in Sass and Less

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

Less 和 Sass 中的操作符：

為了提高可讀性协怒，在圓括號(hào)中的數(shù)學(xué)計(jì)算表達(dá)式的數(shù)值、變量和操作符之間均添加一個(gè)空格卑笨。

// Bad example
.element {
  margin: 10px 0 @variable*2 10px;
}

// Good example
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

注釋：

代碼是由人編寫并維護(hù)的孕暇。請(qǐng)確保你的代碼能夠自描述、注釋良好并且易于他人理解赤兴。好的代碼注釋能夠傳達(dá)上下文關(guān)系和代碼目的妖滔。不要簡(jiǎn)單地重申組件或 class 名稱。對(duì)于較長(zhǎng)的注釋桶良，務(wù)必書寫完整的句子座舍；對(duì)于一般性注解，可以書寫簡(jiǎn)潔的短語(yǔ)陨帆。

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

class 命名：

• class 名稱中只能出現(xiàn)小寫字符和破折號(hào)（dashe）（不是下劃線曲秉，也不是駝峰命名法）。破折號(hào)應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如疲牵，.btn 和 .btn-danger）承二。
• 避免過(guò)度任意的簡(jiǎn)寫。.btn 代表 button纲爸，但是 .s 不能表達(dá)任何意思亥鸠。
• class 名稱應(yīng)當(dāng)盡可能短，并且意義明確。
• 使用有意義的名稱负蚊。使用有組織的或目的明確的名稱神妹，不要使用表現(xiàn)形式（presentational）的名稱。
• 基于最近的父 class 或基本（base） class 作為新 class 的前綴家妆。
• 使用 .js-* class 來(lái)標(biāo)識(shí)行為（與樣式相對(duì)）灾螃，并且不要將這些 class 包含到 CSS 文件中。

在為 Sass 和 Less 變量命名時(shí)也可以參考上面列出的各項(xiàng)規(guī)范揩徊。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

選擇器：

• 對(duì)于通用元素使用 class 腰鬼，這樣利于渲染性能的優(yōu)化。
• 對(duì)于經(jīng)常出現(xiàn)的組件塑荒，避免使用屬性選擇器（例如熄赡，[class^="..."]）。瀏覽器的性能會(huì)受到這些因素的影響齿税。
• 選擇器要盡可能短彼硫，并且盡量限制組成選擇器的元素個(gè)數(shù)，建議不要超過(guò) 3 凌箕。
• 只有在必要的時(shí)候才將 class 限制在最近的父元素內(nèi)（也就是后代選擇器）（例如拧篮，不使用帶前綴的 class 時(shí) -- 前綴類似于命名空間）。

擴(kuò)展閱讀：
Scope CSS classes with prefixes
Stop the cascade

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

代碼組織：

• 以組件為單位組織代碼段牵舱。
• 制定一致的注釋規(guī)范串绩。
• 使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔芜壁。
• 如果使用了多個(gè) CSS 文件礁凡，將其按照組件而非頁(yè)面的形式分拆，因?yàn)轫?yè)面會(huì)被重組慧妄，而組件只會(huì)被移動(dòng)顷牌。

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

編輯器配置：

將你的編輯器按照下面的配置進(jìn)行設(shè)置，以避免常見(jiàn)的代碼不一致和差異：

• 用兩個(gè)空格代替制表符（soft-tab 即用空格代表 tab 符）塞淹。
• 保存文件時(shí)窟蓝，刪除尾部的空白符。
• 設(shè)置文件編碼為 UTF-8饱普。
• 在文件結(jié)尾添加一個(gè)空白行运挫。

參照文檔并將這些配置信息添加到項(xiàng)目的.editorconfig文件中。例如：Bootstrap 中的 .editorconfig 實(shí)例费彼。
更多信息請(qǐng)參考 about EditorConfig滑臊。

推薦學(xué)習(xí)網(wǎng)站和書籍：

1. https://www.w3.org/
2. https://developer.mozilla.org/
3. http://www.w3school.com.cn/
4. https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css
5. http://www.w3cschool.cn/
6. http://www.w3ii.com/
7. https://www.codecademy.com/
8. http://www.webplatform.org/
9. http://www.bilibili.com/video/av3514695/
10. http://www.bilibili.com/video/av3143963/

head fisrt系列入門書籍

也可以看看

評(píng)價(jià)挺高，排版是亮點(diǎn)箍铲，缺點(diǎn)是書是膠粘的雇卷，時(shí)間長(zhǎng)了掉頁(yè)嚴(yán)重，我是看一頁(yè)仍一頁(yè)

chrome書簽：

一些學(xué)習(xí)網(wǎng)站，自己去搜下就可以关划，缺點(diǎn)是不系統(tǒng)

本文章著作權(quán)歸作者本人和饑人谷所有小染，轉(zhuǎn)載須說(shuō)明來(lái)源