Web前端代碼規(guī)范與頁(yè)面布局
一、規(guī)范目的：為提高工作效率，便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)，輸出高質(zhì)量的文檔，在網(wǎng)站建設(shè)中，使結(jié)構(gòu)更加清晰，代碼簡(jiǎn)明有序，有一個(gè)更好的前端架構(gòu)，有利于SEO優(yōu)化。二、規(guī)范基本準(zhǔn)則：符合web標(biāo)準(zhǔn)，使用具有語(yǔ)義的標(biāo)簽，使結(jié)構(gòu)、表現(xiàn)、行為分離，兼容性優(yōu)良，頁(yè)面性能優(yōu)化，代碼簡(jiǎn)潔、明了、有序，盡可能的減少服務(wù)器的負(fù)載，保證最快的解析速度。三、文件規(guī)范：html、css、js、images文件均歸檔至約定的目錄中。1. html（1）編碼：所有編碼均采用xhtml，標(biāo)簽必須閉合，屬性值用雙引號(hào)包括，編碼統(tǒng)一為utf-8。（2）語(yǔ)義化：語(yǔ)義化html，正確使用標(biāo)簽，充分利用無(wú)兼容性問題的html自身標(biāo)簽。（3）文件命名：命名以中文命名，依實(shí)際模塊命名，如同一模塊以_&title&_來組合命名，以方便添加功能時(shí)查找對(duì)應(yīng)頁(yè)面。（4）文件頭部head的內(nèi)容 title，需要添加標(biāo)題 編碼charset=UTF-8 緩存：Content=’-1’表示立即過期?！ √砑觗escription、keywords內(nèi)容 Robots content部分有四個(gè)指令選項(xiàng)：index、noindex、follow、nofollow，用‘，’分隔，如： 在head標(biāo)簽內(nèi)引入css文件，有助于頁(yè)面渲染 引入樣式文件或JavaScript文件時(shí)， 須略去默認(rèn)類型聲明. 頁(yè)腳引入javascript文件（5）連接地址標(biāo)簽：書寫鏈接地址時(shí)，避免重定向，如href=”http://www.example.com/”，需在地址后面加‘/’（6）盡可能減少div嵌套，如：根據(jù)重要性使用h1-6標(biāo)簽，段落使用p，列表使用ul，內(nèi)聯(lián)元素中不可嵌套塊級(jí)元素，為含有描述性表單元素（input，tetarea）添加label（7）圖片 能以背景形式呈現(xiàn)的圖片，盡量寫入css樣式中 區(qū)分作為內(nèi)容的圖片和作為背景的圖片，作為背景的圖片采用Css sprite技術(shù)，放在一張大圖里 重要圖片必須加上alt屬性，給重要的元素和截?cái)嗟脑丶由蟭itle（8）注釋：給區(qū)塊代碼及重要功能加上注釋，方便后臺(tái)添加功能（9）轉(zhuǎn)義字符：特殊符號(hào)使用轉(zhuǎn)義字符（10）頁(yè)面架構(gòu)時(shí)考慮擴(kuò)展性2. Css（1）頁(yè)面內(nèi)部盡量避免使用style屬性（2）css放在head標(biāo)簽中，由link標(biāo)簽引入，使頁(yè)面的結(jié)構(gòu)與表現(xiàn)分離。（3）文件命名：以英文命名，后綴.css，共用：base.css，首頁(yè)：index.css，其他頁(yè)面樣式依具體模塊需求命名（4）編碼統(tǒng)一為utf-8（5）Class與id的使用： Id:具有唯一性，是父級(jí)的，用于標(biāo)識(shí)頁(yè)面上的特定元素，如header/footer/wrapper/left/right之類 Class:可以重復(fù)使用，是子級(jí)的，可用于頁(yè)面上任意多個(gè)元素 命名：以小寫英文字母、數(shù)字、下劃線組合命名，避免使用中文拼音，盡量使用簡(jiǎn)易的單詞組合，避免使用拼音，采用駝峰命名法和劃線命名法，提高可讀性，如：dropMenu、sub_nav_menu、drop-menu等。（6）為JavaScript預(yù)留鉤子的命名， 以 js_ 起始， 比如:js_hide， js_show（7）書寫代碼前，考慮樣式重復(fù)利用率，充分利用html自身屬性及樣式繼承原理減少代碼量，代碼建議單行書寫，利于后期管理（8）圖片 命名：小寫英文字母、數(shù)字、_ 的組合，使用有意義的名稱或英文簡(jiǎn)寫，最好不要使用漢語(yǔ)拼音，區(qū)分大寫字。 使用sprite技術(shù)， 減小http請(qǐng)求，sprite按模塊制作（9）書寫順序：保證同類型屬性寫在一起，一般遵循布局定位屬性–>自身屬性–>文本屬性–>其他屬性的書寫格式（10）書寫順序規(guī)則 定位屬性（比如：display， position， float， clear， visibility， table-layout等） 自身屬性（比如：width， height， margin， padding， border等） 文本屬性（比如：font， line-height， text-align， text-indent， vertical-align等） 其他屬性（比如：color， background， opacity， cursor，content， list-style， quotes等）（11）縮進(jìn)：統(tǒng)一使用tab進(jìn)行縮進(jìn)（12）樣式表中中文字體名，最好轉(zhuǎn)成unicode碼，以避免編碼錯(cuò)誤時(shí)亂碼。（13）減少影響性能的屬性，如：position，float（14）為大區(qū)塊樣式添加注釋，小區(qū)塊適量注釋。3. Javascript（1）文件編碼統(tǒng)一為utf-8， 書寫時(shí)， 每行代碼結(jié)束必須有分號(hào)‘;’，盡量根據(jù)需求編寫原生代碼開發(fā)，以避免造成的代碼污染(沉冗代碼 || 與現(xiàn)有代碼沖突 || …)等問題（2）在頁(yè)腳引入javascript腳本，采用外鏈引入形式，使頁(yè)面的結(jié)構(gòu)與行為分離（3）命名： 文件命名：以英文命名，后綴為.js，共用：common.js，其他命名可根據(jù)模塊需求命名 變量命名：駝峰式命名，原生JavaScript變量要求是純英文字母， 首字母須小寫， 如iTaoLun。變量集中聲明， 避免全局變量 類命名：首字母大寫， 駝峰式命名. 如 ITaoLun; 函數(shù)命名: 首字母小寫駝峰式命名. 如iTaoLun(); 命名語(yǔ)義化， 盡可能利用英文單詞或其縮寫;（4）規(guī)則 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩? 后期優(yōu)化中， JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用， 以避免編碼錯(cuò)誤時(shí)亂碼顯示 代碼結(jié)構(gòu)明了， 加適量注釋. 提高函數(shù)重用率 注重與html分離， 減小reflow， 注重性能.4. 注釋規(guī)范（1）html：注釋格式，”-”只能在注釋的始末位置，不可置入注釋文字區(qū)域（2）Css：注釋格式（3）Javascript：?jiǎn)涡凶⑨專?/這兒是注釋，多行注釋：5. Css Hack 特殊符號(hào)（1）* ：IE6/7都能識(shí)別*，標(biāo)準(zhǔn)瀏覽器不識(shí)別（2）_：只有IE6識(shí)別（3）！Important：IE6不識(shí)別，F(xiàn)irefox，IE7/8/9、chorme等主流瀏覽器均識(shí)別（4）\9：所有瀏覽器均識(shí)別，包括IE6/7/8（5）+：IE6/7/8識(shí)別（6）書寫順序：先寫FF等非IE瀏覽器所需樣式，其次IE8，再次IE7，最后寫IE6四、自適應(yīng)頁(yè)面布局（主要平臺(tái)為ios和安卓，所以此不考慮IE兼容性）1. 布局細(xì)節(jié) 首先頭部head中加入meta新標(biāo)簽，讓網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度，原始縮放比例為1.0，即100%顯示?！ osition：不能使用絕對(duì)定位 Width：不能使用px寬度，應(yīng)使用百分比或auto Font：不能使用絕對(duì)大小，應(yīng)使用em2. 流式布局float的使用各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。3. CSS3引入的Media Query模塊，可自動(dòng)探測(cè)屏幕寬度，加載相應(yīng)的CSS文件，屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件，如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。 @importurl("tinyScreen.css") screen and (max-device-width: 400px); 同一個(gè)CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則。@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; }}4. 圖片自適應(yīng) img， object { max-width: 100%;}轉(zhuǎn)自：http://blog.sina.com.cn/s/blog_6c2f334c01018rmz.html
發(fā)布時(shí)間：2017/08/18
