html+css編寫規(guī)范

《html+css編寫規(guī)范》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、HTML代碼編寫規(guī)范一、說(shuō)明在任何一個(gè)項(xiàng)目或者系統(tǒng)開發(fā)之前都需要定制一個(gè)開發(fā)約定和規(guī)則，這樣有利于項(xiàng)目的整體風(fēng)格統(tǒng)一、代碼維護(hù)和擴(kuò)展。由于Web項(xiàng)目開發(fā)的分散性、獨(dú)立性、整合的交互性等，所以定制一套完整的約定和規(guī)則顯得尤為重要。適用：本規(guī)范應(yīng)用于html,div,css,xml等文件本文件二、命名規(guī)則命名是代碼規(guī)劃的核心,好的命名才能體現(xiàn)出代碼的質(zhì)量，使代碼更加易懂和規(guī)范。就一般約定命名應(yīng)以能夠描述讓代碼閱讀者能夠容易的知道這些代碼的作用。形式越簡(jiǎn)單、越有規(guī)則，就越容易讓人感知和理解。應(yīng)該避免使用

2、模棱兩可，雜亂無(wú)章的命名。命名一律為小寫格式，以標(biāo)準(zhǔn)計(jì)算機(jī)英文為藍(lán)本，杜絕一切拼音、或拼音英文混雜的命名方式；不可使用t1、t2這樣容易產(chǎn)生混淆的形式，應(yīng)當(dāng)使用header、tophead這樣一目了然容易理解的形式；可以合理的對(duì)過(guò)長(zhǎng)的命名進(jìn)行縮寫，例如bio(biography)，tpp(threadsPerPage)，前提是英文中有這樣既有的縮寫形式，或字母符合英文縮寫規(guī)范(附件為英文縮寫規(guī)則)；三、書寫規(guī)范良好的代碼格式使得代碼顯示更加規(guī)范易懂且結(jié)構(gòu)清晰。為此我們制定了以下標(biāo)準(zhǔn)化書寫規(guī)則：3.

3、1縮進(jìn)每個(gè)縮進(jìn)的單位約定是一個(gè)TAB(8個(gè)空白字符寬度)，需每個(gè)參與項(xiàng)目的前端人員在編輯器(Dreamweaver、EditPlus、ExpressionWeb等)中進(jìn)行強(qiáng)制設(shè)定，以防在書寫代碼時(shí)遺忘而造成格式上的不規(guī)范。本縮進(jìn)規(guī)范適用于Html,Css、JavaScript等。3.2排版在書寫代碼時(shí)同級(jí)標(biāo)簽要整齊橫向或豎向排列，不同層級(jí)的標(biāo)記必須進(jìn)行縮進(jìn).簡(jiǎn)化布局層次，避免多余的層次嵌套而造成的代碼冗余。3.3CSS中Class與ID一個(gè)Class是用來(lái)根據(jù)用戶定義的標(biāo)準(zhǔn)對(duì)一個(gè)或多個(gè)元素進(jìn)行定義

4、的。你可以在一個(gè)文檔中使用任意次數(shù)的Class?！　≈劣贗D，通常用于定義頁(yè)面上一個(gè)僅出現(xiàn)一次的標(biāo)記。在對(duì)頁(yè)面排版進(jìn)行結(jié)構(gòu)化布局時(shí)（比如說(shuō)通常一個(gè)頁(yè)面都是由一個(gè)頁(yè)眉，一個(gè)報(bào)頭，一個(gè)內(nèi)容區(qū)域和一個(gè)頁(yè)腳等組成），一般使用ID比較理想，因?yàn)橐粋€(gè)ID在一個(gè)文檔中只能被使用一次。而這些元素在同一頁(yè)面中很少會(huì)出現(xiàn)大于一次的情況?！　w納成一句話就是：Class可以反復(fù)使用而ID在一個(gè)頁(yè)面中僅能被使用一次。有可能在很大部分瀏覽器中反復(fù)使用同一個(gè)ID不會(huì)出現(xiàn)問(wèn)題，但在標(biāo)準(zhǔn)上這絕對(duì)是錯(cuò)誤的使用，而且很可能導(dǎo)致某些瀏

5、覽器的現(xiàn)實(shí)問(wèn)題?！　≡趯?shí)際應(yīng)用的時(shí)候，Class可能對(duì)文字的排版等比較有用，而ID則對(duì)宏觀布局和設(shè)計(jì)放置各種元素較有用。所以對(duì)于主要的、重要的、最外層的DIV我們用“#”(井號(hào))選擇符命名，其它都用“.”選擇符命名。3.4理解css的block與inline級(jí)對(duì)象Block（區(qū)塊）對(duì)象都是矩形,其尺寸由width，height，padding，borders，以及margins決定,如果不設(shè)置寬度，一個(gè)非float型盒子水平上將充滿其父容器（扣除父容器的留白）,如果不設(shè)置高度，該盒子的高度將自動(dòng)適

6、應(yīng)其包含的內(nèi)容，加上留白等（除非使用了float）如果一個(gè)盒子的寬度設(shè)置為100%，它就不能再設(shè)置margins，padding，和borders，否則會(huì)撐破其父容器。inline級(jí)對(duì)象會(huì)忽略其寬度和高度設(shè)置,Inline級(jí)對(duì)象可以使用vertical-align屬性控制其垂直對(duì)齊，block級(jí)對(duì)象不可以,Inline級(jí)對(duì)象的下方會(huì)保留一些自然的空間，以適應(yīng)字母g一類的會(huì)向下探出的筆畫,一個(gè)設(shè)置為float的inline對(duì)象將變成block對(duì)象。四、W3C標(biāo)準(zhǔn)內(nèi)容一個(gè)標(biāo)準(zhǔn)XHTML頭信息格式如下：

7、

8、gb2312"/>注:一般如果項(xiàng)目或頁(yè)面沒(méi)有要求description和keywords描述的話,均采用中文站首頁(yè)的mate信息。4.1、什么是DOCTYPEDOCTYPE是documenttype(文檔類型)的簡(jiǎn)寫，用來(lái)說(shuō)明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文檔