WEB前端編碼規(guī)范
《WEB前端編碼規(guī)范》由會(huì)員分享,可在線閱讀,更多相關(guān)《WEB前端編碼規(guī)范(47頁(yè)珍藏版)》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、 XXXX有限公司 XXXXXXXX管理平臺(tái) Web 前端代碼編寫規(guī)范 文件狀態(tài): 文件標(biāo)識(shí): [ √ ] 草稿 當(dāng)前版本: 1.0 [ ] 正式發(fā)布 作 者: 李光強(qiáng) [ ] 正在修改 完成日期: 2016.1.30 XXXXXX 2016 年 1
2、 月 修改歷史 修訂后 修訂人 修訂 編號(hào) 修訂內(nèi)容簡(jiǎn)述 版本號(hào) 日期 11.0 李光強(qiáng) 起草 2016.1.30 第一部分 HTML 規(guī)范 HTML并不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言,它沒(méi)有任何真正的編程語(yǔ) 言中的循環(huán)或是流程控制語(yǔ)句。然而, HTML代碼的格式和風(fēng)格是非常重要的,因?yàn)橐?jīng)常對(duì) HTML代碼進(jìn)行維護(hù)和修改, 因此 HTML代碼必須有很清晰的邏輯結(jié)構(gòu)和布局,而使其易懂和易于維護(hù)。 HTML語(yǔ)言是不區(qū)分大小寫的,但為改善
3、可讀性,規(guī)定小寫所有字母(除最 上一行引用外) 。與 HTML不一樣, XHTML對(duì)大小寫是敏感的,
4、 2. 網(wǎng)站 head 區(qū)代碼規(guī)范: head 區(qū)是指
和 之間的內(nèi)容。必須加入的標(biāo)簽: 2.1 公司版權(quán)注釋 2.2 網(wǎng)頁(yè)顯示字符集 簡(jiǎn)體中文 : 繁體中文:5、ta http-equiv="Content-Type" content="text/html; charset= BIG5"> 英 語(yǔ): 2.3 作者與版權(quán)信息 此處用于存儲(chǔ)開發(fā)公司版權(quán)信息,如: 2.4 網(wǎng)頁(yè)的 c
6、ss,javascript 規(guī)范 在引用 CSS和 JS文件時(shí),統(tǒng)一放置在
中,先放 CSS引用,再放 js 引用。 html 中 javascript 的書寫: 2.5 網(wǎng)頁(yè)標(biāo)題 Title 中使用“ - ”分割,如:設(shè)備管理平臺(tái) - 運(yùn)維系統(tǒng)7、。 2.6 設(shè)置搜索關(guān)鍵詞 百度關(guān)鍵詞搜索指數(shù): ,在這個(gè)工具里, 可以看到一些常用關(guān)鍵詞的每日搜 索次數(shù)。 熱門詞匯,目前收索量最多的詞匯??梢圆榭窗俣葻嵩~榜, Google AdWords 關(guān)鍵字工具:查詢特定關(guān)鍵詞的常見(jiàn)查詢及擴(kuò)展匹配。 KEYWRODS關(guān)鍵字最多不超過(guò) 5 個(gè)建議長(zhǎng)度:小于等于 100 個(gè)漢字,如果使用的網(wǎng)頁(yè)編碼是 UTF-8,不同關(guān)鍵字之間用英文“ , ”分隔。 2.7 網(wǎng)站簡(jiǎn)介
8、 description 是描述網(wǎng)頁(yè)內(nèi)容的, 因此最好是可以用一句話來(lái)概括本網(wǎng)頁(yè)的 主題內(nèi)容。 description 不要超過(guò) 255 個(gè)字符,搜索引擎索引一般都會(huì)索引 Description 的前 255 個(gè)字符,因此,這 255 個(gè)字符是做搜索引擎優(yōu)化的關(guān)鍵。 如果使用的網(wǎng)頁(yè)編碼是 UTF-8,那么在 Description 中的標(biāo)點(diǎn)符號(hào)最好都使 用英文,例如英文的逗號(hào)、句號(hào)等。如果是中文的話,那么就使用中文的標(biāo)點(diǎn)符 號(hào)即可。 2.
9、8 其它標(biāo)簽 [ 非必需 ] 1. 設(shè)定網(wǎng)頁(yè)的到期時(shí)間。 一旦網(wǎng)頁(yè)過(guò)期, 必須到服務(wù)器上重新調(diào)閱, 這樣有利于頁(yè)面信息。 2. 禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容。 3. 用來(lái)防止別人在框架里調(diào)用你的頁(yè)面。 4. 自動(dòng)跳轉(zhuǎn)。 5 指時(shí)間停留 5 秒。 5. 網(wǎng)頁(yè)搜索機(jī)器人向?qū)?. 用來(lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引,哪些頁(yè)面不需要索引。 CONTENT的參數(shù)有 all,none,index,noindex,follow,nofollow 。默認(rèn)是 all 。 6. 收藏夾圖標(biāo) 圖片大小 16px*16px 7. 訂閱 RSS瀏覽 是一種描述和同步網(wǎng)站內(nèi)容的格式。用戶可以通過(guò) RSS閱讀器訂閱。 2.9 完整示例
12、 3. html 中元素的書寫:
區(qū)域標(biāo)簽 3.1 段落 段落使用標(biāo)簽進(jìn)行定義。
This is a paragraph
3.2 標(biāo)題 即正文標(biāo)題一般用 標(biāo)簽,最好和 title 標(biāo)簽的內(nèi)容有關(guān)聯(lián)。 標(biāo)題使用 至 標(biāo)簽進(jìn)行定義。 定義最大的標(biāo)題。 定義
最小的標(biāo)題。
This
定義最大的標(biāo)題。 定義
最小的標(biāo)題。
This
This
13、is a heading
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
文章中的小標(biāo)題一定也要加粗。 可以把網(wǎng)頁(yè)中的重要內(nèi)容做成這樣。 用戶不用登陸這個(gè)網(wǎng)頁(yè)就可看到更新的內(nèi)容。 3.3 字體的設(shè)置標(biāo)簽 換行:字體修飾不要使用
14、> 等進(jìn)行標(biāo)注,一般使用 css 樣式進(jìn)行字體 樣式排版 3.4 注意事項(xiàng) 1.
為了保證瀏覽器的兼容性 ,必須設(shè)置頁(yè)面背景: 2. 關(guān) 所有的 打開的 必 關(guān) ,例如 ,當(dāng)然 有一種關(guān) 方式,如:。 即:一定要有 束 。 3. 屬性 用雙引號(hào) “” 括起來(lái) , 屬性 一使用小寫 例如: 4. 所有的屬性 不正確的寫法: 正確的寫法 : 5. 要合理嵌套 不正確的寫法:
16、t 屬性指定了當(dāng) 片不能 示的 候就 示供替 文本。 內(nèi)容最好與關(guān) 相關(guān)。 如: 一些小 最好用 .png 或 .gif 格式 片,比如 箭 ,文章列表前的 等,在 CSS中做成背景。 些小 最好做一 片,用 CSS來(lái)定位。 9. 用 構(gòu)化的元素 出內(nèi)容
- 新現(xiàn)代
- 新現(xiàn)代
- 新現(xiàn)代
- <
17、/dt>
?? | ? .
19、 4. HTML 元素的排序規(guī)則 能夠使用的 HTML元素包括: div 、p、ul 、table 、span、input 、select 等?;旧?div 、table 、ul 、p 都屬于結(jié)構(gòu)性比較強(qiáng)的元素,而 span、input 則是比較弱的元素,因此不允許有 span 嵌套 div 、 table 等等的情況出現(xiàn), span 可以嵌套 input, 可以嵌套 span。 在寫頁(yè)面的時(shí)候可以先不考慮界面呈現(xiàn), 按照這樣的規(guī)則, 把數(shù)據(jù)直接綁定到 HTML元素的節(jié)點(diǎn)上。 5. 九大原則 原則一: 一般要寫兼容多種瀏覽器的
20、網(wǎng)頁(yè), 最省事的方法就先寫適合 chrome 的樣式,并在 chrome 進(jìn)行調(diào)度。測(cè)試時(shí)可以使用多種瀏覽器。 原則二: 逐步疊加的方式,如果需要用這個(gè)樣式的模塊很多, 并且會(huì)存在些許的不同,千萬(wàn)不要把樣式一步寫到位, 最好把框架性的先寫好, 細(xì)節(jié)性的留到第二個(gè)步驟,甚至第三個(gè)步驟,當(dāng)然最好步驟不要超過(guò)三步,這樣很不利于維護(hù)。 由若干個(gè)二級(jí)定義對(duì)一級(jí)定義進(jìn)行補(bǔ)充, 這樣的既可以減少代碼, 又可以減少繁多的 CLASS命名。 不要輕易修改共用的 CSS,否則可能會(huì)影響其它頁(yè)面。 在每個(gè)一級(jí) CSS前添加注釋,說(shuō)明哪些頁(yè)面使用了該 CSS。
21、 原則三: 從總到分。順序應(yīng)該是這樣:總體需要用到的 >>結(jié)構(gòu) >>模塊 >>二級(jí)模塊 >> 細(xì)節(jié);并且這個(gè)文檔最不容易修改的處于最上端, 頻繁用于修改的在末端。 最忌諱即興發(fā)揮, 這樣寫出的東西經(jīng)不起推敲, 稍有變化就要忙得亂成一團(tuán)。 結(jié)構(gòu)性的東西應(yīng)該慎重精細(xì)。 原則四: 盡量把能夠放在一組的小圖標(biāo)或者圖片放在一個(gè)圖片文件里, 這樣的好處有很多。 1、 圖片文件的總量會(huì)變小; 2、利于下載,太多的小圖片下載效果是不理想的,常常會(huì)發(fā)現(xiàn)這個(gè)圖片出 來(lái),那個(gè)沒(méi)出來(lái), 這樣在寫樣式的時(shí)候只需要寫一個(gè)總體的, 對(duì)于具體的要顯
22、示 的只需要標(biāo)一個(gè)位置,非常省時(shí)間,樣式也很精煉; 3、 顯而易見(jiàn),這樣做非常便于管理,替換或新增的時(shí)候工作量很小。 原則五: 切圖的原則, 應(yīng)該切大的圖絕不切小, 應(yīng)該切小的絕不切大, 能夠用顏色代替的絕不切圖。 把一個(gè)大圖切成很多份并不一定能夠加快頁(yè)面的顯示速度, 相反會(huì)浪費(fèi)很多不必要的帶寬。 不光要控制圖片文件的多少, 還要考慮到這樣切會(huì)不會(huì)造成頁(yè)面增加許多額外的代碼。 原則六: 圖片使用能名稱表達(dá)圖片意義的名詞命名,盡量不要使用編號(hào)命名。 原則七: 涉及多行多列的特別是列寬有不固定的,堅(jiān)決用表格,千萬(wàn)不要為
23、了 DIV 而 DIV。 多個(gè)圖片規(guī)則排列時(shí),可以使用
24、模塊(子系統(tǒng))單獨(dú)創(chuàng)建一個(gè)文件夾,使 用與之相關(guān)的有意義的英文名詞命名。 例如有一個(gè)系統(tǒng)包括后臺(tái)管理 (admin)、 前臺(tái)商城( shop)、會(huì)員中心( member)和商家中心( store )等子系統(tǒng),文件 夾組織: 每個(gè)子系統(tǒng)中應(yīng)該包含一個(gè)缺省的 html 文件,文件名統(tǒng)一用 index.html ,即當(dāng)用戶缺省訪問(wèn)該目錄時(shí),自動(dòng)加載該頁(yè)面。 公用頁(yè)面(如登錄 login.html 、頁(yè)頭 header.html 、頁(yè)腳 footer.html 、導(dǎo) 航 navigation.
25、html 、菜單 menu.html 、信息 / 錯(cuò)誤提示 message.html 等),可以統(tǒng)一放在 common目錄中。 6.2 頁(yè)面命名規(guī)則 具有管理功能的頁(yè)面,如用名、角色、設(shè)備、日志、文章等的管理,可以歸 納為列表( list.htm )、新建( add.html )、編輯( edit.html )等幾類操作, 所以在頁(yè)面組織時(shí), 每類模塊單獨(dú)創(chuàng)建一個(gè)文件夾, 使用能夠表達(dá)模塊意義的英 文名詞命名,并在其中分別創(chuàng)建 list.html 、add.html 、 edit.html 等文件,對(duì) 應(yīng)于內(nèi)容列表、添加、編輯等操作。
26、示例: 其它說(shuō)明: 1. 在列表頁(yè)面里統(tǒng)一使用“四欄式”顯示風(fēng)格,即列表頁(yè)面里必須包括模塊目錄 / 位置提示、工具欄(含添加、編輯、刪除、刷新、查詢等操作控件)、表格、分頁(yè)操作等部分。示例: 2. 表格用于顯示查詢內(nèi)容,在 list.html 打開時(shí),必須默認(rèn)加載一定的記錄;表格欄目?jī)H
27、顯示用戶常用或關(guān)心的字段; 在顯示時(shí)必須對(duì)表格內(nèi)容進(jìn)行必要的格式處理;對(duì)記錄常用的操作可以放置于操作欄內(nèi) (如上圖中的操作欄內(nèi)放置有編輯和刪除兩個(gè)操作按鈕)。 3. 表格可以統(tǒng)一使用 easyui datagrid 或 bootstap data tables 。 6.3. 資源文件的命名原則 資源文件包括 css 、js 、圖片等內(nèi)容。所有資源文件統(tǒng)一存儲(chǔ)在 web 根目錄 resource 文件夾中。示例:
28、 每個(gè)子系統(tǒng)(大類)文件夾命名規(guī)則同 6.1 規(guī)則。 每個(gè)子系統(tǒng)文件夾中分別包括 css 、 js 和 images,示例: 多個(gè)子系統(tǒng)公共使用的資源,統(tǒng)一存儲(chǔ)在 common文件夾中,如常用的 js 操作,可以命名為 generic.js ,放置在 common/js/generic.js 。 6.3 圖片命名規(guī)則 圖片分成兩部分, 一是網(wǎng)頁(yè)設(shè)計(jì)時(shí)使用的靜態(tài)資源, 通常不會(huì)因系統(tǒng)的運(yùn)行而發(fā)生變化,另一類是程序生成、用戶上傳、終端上傳的圖片。 (
29、1)靜態(tài)圖片存儲(chǔ)在 大類目錄 \images 中,使用能表達(dá)圖片意 義的英文單詞命名, 不能使用圖片編號(hào)命名。 網(wǎng)面使用的小圖標(biāo), 可以放置在一個(gè)圖片文件中,使用 css 裁切和背景方式顯示在頁(yè)面中。 (2)動(dòng)態(tài)圖片存儲(chǔ)在 resources\upload 目錄中,在其中創(chuàng)建分類圖片目錄。 例如,與系統(tǒng)相關(guān)的圖片存儲(chǔ)在 system 目錄中,設(shè)備監(jiān)控相關(guān)圖片存儲(chǔ)在 management 中等。為了避免同一文件夾中文件數(shù)量限制,在分類目錄中,按上 傳日期分成不同的次級(jí)目錄, 命名規(guī)則為上傳文件所在的 yyyyMM(年度月份),其中月份使用
30、兩位數(shù)字表示。例如: 上傳的圖片統(tǒng)一使用 GUID標(biāo)識(shí)進(jìn)行命名, 即在上傳時(shí),由接收的 java 程序自動(dòng)生成 guid 編號(hào) +. 圖片擴(kuò)展名進(jìn)行命名。 注意:保存圖片時(shí),文件擴(kuò)展名必須保持不變。示例: 7. 常用 HTML標(biāo)識(shí)符 HTML 標(biāo)記一覽 : 標(biāo)記 類型 譯名或意義 作 用 備注 文件標(biāo)記 ● 文件聲明 讓瀏覽器知道這是 HTML 文件
31、● 開頭 提供文件整體資訊
○
段落標(biāo)記
為字、畫、表格等之間留一空白行
○
換行標(biāo)記
令字、畫、表格等顯示于下一行
○ 水平線 插入一條水平線
● 預(yù)設(shè)格式 令文件按照原始碼的排列方式顯示32、
● 區(qū)隔標(biāo)記 設(shè)定字、畫、表格等的擺放位置● 不折行 令文字不因太長(zhǎng)而繞行 ● 建議折行 預(yù)設(shè)折行部位 字體標(biāo)記 ● 加重語(yǔ)氣 產(chǎn)生字體加粗 BOLD 的效果 ● 粗體標(biāo)記 產(chǎn)生字體加粗的效果 ● 強(qiáng)調(diào)標(biāo)記 字體出現(xiàn)斜體效果 ● 斜體標(biāo)記 字體出現(xiàn)斜體效果 ● 打字字體 COURIER字體,字母寬度相同 ● 加上底線 加上底線 反對(duì) ● 一級(jí)標(biāo)題標(biāo)記 變
33、粗變大加寬,程度與級(jí)數(shù)反比
● 二級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬
● 三級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬
● 四級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬
● 五級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬
● 六級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬 ● 字形標(biāo)記 設(shè)定字形、大小、顏色 反對(duì)
○ 基準(zhǔn)字形標(biāo)記 設(shè)定所有字形、大小、顏色 反對(duì) ● 字體加大 令字體稍為加大 ● 字體縮細(xì) 令字體 34、稍為縮細(xì)
● 畫線刪除 為字體加一刪除線 反對(duì)● 程式碼 字體稍為加寬如 ● 鍵盤字 字體稍為加寬,單一空白 ● 范例 字體稍為加寬如 ● 變數(shù) 斜體效果 ● 傳記引述 斜體效果
● 引述文字區(qū)塊 縮排字體 ● 述語(yǔ)定義 斜體效果 ● 地址標(biāo)記 斜體效果 ● 下標(biāo)字 下標(biāo)字 ● 上標(biāo)字35、 指數(shù)(平方、立方等) 清單標(biāo)記
● 順序清單 清單項(xiàng)目將以數(shù)字、字母順序排列
● 無(wú)序清單 清單項(xiàng)目將以圓點(diǎn)排列
- ○ 清單項(xiàng)目 每一標(biāo)記標(biāo)示一項(xiàng)清單項(xiàng)目
反對(duì)
● 目錄清單 清單項(xiàng)目將以圓點(diǎn)排列,如 反對(duì)
● 定義清單 清單分兩層出現(xiàn)
- ○ 定義條目 標(biāo)示該項(xiàng)定義的標(biāo)題
- ○ 定義內(nèi)容 標(biāo)示定義內(nèi)容 表格標(biāo)記
36、BLE> ● 表格標(biāo)記 設(shè)定該表格的各項(xiàng)參數(shù)
● 表格標(biāo)題 做成一打通列以填入表格標(biāo)題 ● 表格列 設(shè)定該表格的列 ● 表格欄 設(shè)定該表格的欄 ● 表格標(biāo)頭 相等于 ,但其內(nèi)之字體會(huì)變粗 表單標(biāo)記