規范目的
本檔案的目標是使HTML5代碼風格保持一致，容易被理解、維護和升級，提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的檔案,同是為網站有一個更好的前端架構，網站的發展及未來打好一個基礎。
基本準則
符合web標準, 語意化html, 結構表現行為分離, 兼容性優良. 頁面性能方面, 代碼要求簡潔明了有序, 盡可能的減小服務器負載, 保證最快的決議速度.
檔案規范
1、 html, css, js, images檔案均歸檔至約定的目錄中。
2、html檔案命名: 必須單詞全字母小寫，單詞間以-分隔，依實際模塊命名，如果同一模塊以_& title& _ 來組合命名, 以方便添加功能時查找對應頁面，團結里的相互理解。
HTML5代碼規范
1. 代碼風格
1.1 縮進與換行
[建議]使用4個空格作為一個縮進層級。
[建議]模板代碼的縮進優先保證 HTML 代碼的縮進規則。
1.2 命名規則
[強制]class：必須單詞全字母小寫，單詞間以-分隔，且必須代表相應的模塊或部件的內容或功能，不得以html內置樣式進行命名，命名應該具有明確的語意。
[強制]id：必須保持在頁面中的唯一性，命名應該具有明確的語意。
1.3 標簽
[強制]Html中的標簽名必須使用小寫字母。
[強制]標簽的閉合要符合html5的規定。
[強制]標簽的使用必須符合標簽的嵌套規則，例：div不得置于p中，tbody必須置于table中。
[建議]標簽的使用必須遵循標簽的語意，
例： p - 段落
h1,h2,h3,h4,h5,h6 - 層級標題
strong,em - 強調
ins - 插入
del - 洗掉
abbr - 縮寫
code - 代碼標識
cite - 引述來源作品的標題
q - 參考
blockquote - 一段或長篇參考
ul - 無序串列
ol - 有序串列
dl,dt,dd - 定義串列
[建議]在CSS可以實作相同需求的情況下不得使用表格進行布局。
1.4 屬性
[強制]屬性必須使用小寫字母，其屬性值必須用雙引號包圍。
[建議]布爾型別的建議不添加屬性值。
自定義屬性建議以 xxx- 為前綴，推薦使用data-
1.5所有編碼均遵循xhtml標準, 標簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且所有標簽必須閉合, 包括br (<br />), hr(<hr />)等;
屬性值必須用雙引號包括;
目的:更加符合web標準(w3c),也有利于seo。
1.6語意化html,
如 標題根據重要性用h*(同一頁面只能有一個h1),
段落標記用p,
串列用ul,
行內元素中不可嵌套塊級元素;
目的：減少代碼量，
1.7盡可能減少div嵌套, 如
<div class=”box”>
<div class=”welcome”>歡迎訪問XXX, 您的用戶名是
<div class=”name”>用戶名</div>
</div>
</div>
完全可以用以下代碼替代:
<div class=”box”>
<p>歡迎訪問XXX, 您的用戶名是
<span>用戶名
</span>
</p>
< /div>;
目的：減少代碼量，
1.8引入JS庫檔案, 檔案名須包含庫名稱及版本號及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入插件, 檔案名格式為庫名稱+插件名稱, 比如jQuery.cookie.js;
1.9書寫鏈接地址時, 必須避免重定向，例如：href=https://bbs.csdn.net/topics/”http://www.haogu.com/”, 即須在URL地址后面加上“/”；
2.0在頁面中盡量避免使用style屬性,即style=”?”除非考慮網站http請求，網站響
應速度等因素比重情況具體分析;
2. 頁面頭部
2.1 DOCTYPE
[強制]使用doctype 來啟用標準模式，建議使用大寫的 DOCTYPE
2.2 語言編碼
[建議]有助于提高頁面的可訪問性，必須設定正確的lang屬性，例：<html lang="zh-CN">
[強制]頁面必須指定字符編碼的meta，且必須是 head 的第一個直接子元素，例：<meta charset="UTF-8">。
Meta 標記用于定義頁面的相關資訊，為非成對標記，位于<head>標記之間。可以有三部分，name http-equiv content
http-equiv屬性值可以是：
refresh(頁面重繪) http-equiv=“refresh” content=“5；url=http://www.baidu.com”
reply-to(頁面回復資訊)
keywords(頁面關鍵字) 用于某些搜索引擎
content-type(頁面內容格式) content-type:text/html
author(頁面作者)
description(頁面內容摘要)
注：如果沒有name屬性，那么名稱/值對中的名稱會采用http-equiv屬性的值。
Base 頁面中的所有標簽在新視窗中打開，target值有_blank,_parent,_self,_top。對應的是連接，href的值可以確定。
Title 定義檔案的標題
Link 用于樣式的連接
Style 用于直接寫樣式
Script 定義用戶客戶端腳本檔案
2.3 CSS和JavaScript引入
[強制]引入css時必須指明rel="stylesheet"，在引入css和javascript時必須指明type屬性。
[建議]Javascript代碼必須放在頁面末尾或采用異步加載。
2.4 Head內容
[強制]Title標簽必須設定為head的直接子元素，并緊隨charset宣告之后。
[強制]Favicon保證可訪問，例：<link rel="shortcut icon" href="https://bbs.csdn.net/topics/path /favicon.ico">
[強制]Viewport屬性必須指定。
3. 圖片
[強制]禁止 img 的 src 取值為空，延遲加載的圖片也要增加默認的 src屬性值。
[建議]重要圖片添加 alt 屬性值。
[建議]添加 width 和 height 屬性以避免頁面抖動。
4. 表單
4.1 控制元件標題
[強制]文本標題的控制元件必須使用 label 標簽將其與其標題相關聯，例：
<label>
<input type="checkbox" name="confirm" value="https://bbs.csdn.net/topics/on"> 我已確認上述條款
</label>
或
<label for="user">用戶：</label>
<input type="text" name="user" id="user">
4.2 按鈕
[強制]使用 button 元素時必須指明 type 屬性值
4.3 可訪問性
[建議]當使用 JavaScript 進行表單提交時，應使原生提交功能正常作業。
[建議] 根據內容型別指定輸入框的 type 屬性，例：<input type="date">
5. 多媒體
[建議]使用 audio 以及 video 標簽來播放音頻、視頻時，應當注意格式： 音頻格式：MP3、WAV、Ogg 視頻格式：MP4、WebM、Ogg
6. 注釋
[強制]針對頁面或模塊的CSS、javascript代碼必須進行詳細的注釋
7. Css命名
7.1樣式命名推薦使用英文避免使用漢語拼音, 盡量使用簡易的單詞組合;
命名方式采用駝峰命名法和劃線命名法兩種，提高可讀性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。駝峰命名法用來區別不同的單詞。
劃線命名法表明從屬關系。如：“.timeList”和“.time_list”分別表示時間串列和時間部分下的串列。
7.2 css屬性書寫順序, 建議遵循 布局定位屬性–>自身屬性–>文本屬性–>其他屬性. 此條可根據自身習慣書寫, 但盡量保證同類屬性寫在一起.
1.H5 新標簽請查看
2. Css 檔案命名
模塊：module.css
基本共用：base.css
布局、版面：layout.css
主題：themes.css
專欄：columns.css
文字：font.css
表單：forms.css
補丁：mend.css
列印：print.css 3.
頁面框架命名 強制書寫必須使用
3.1 頁眉H5新語意化標簽 <header>
3.2 導航 H5新語意化標簽 <nav>
3.3 頁腳 H5新語意化標簽 <footer>
無H5新標簽的頁面框架，一般具有唯
一性，推薦用ID命名。
3.4 主體 使用 main 命名。
3.5 內容 使用 container 命名。
3.6 側欄 使用 sidebar 命名。
3.7 欄目 使用 column 命名。
3.8 外圍整體布局寬度 使用 wrapper 命名。
4頁面結構命名:
左右中：left right center
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
選單：menu
子選單：submenu
標題: title
摘要: summary+功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章串列：list
提示資訊：msg
5模塊結構命名
友情鏈接：friendlink
著作權：copyright
滾動：scroll
小技巧：tips
指南：guild
服務：service
投票：vote
合作伙伴：partner
H5與之前的兼容性問題
具有boolean值的屬性
在html中有一些元素的屬性，當只寫屬性名稱而不指定屬性值時，表求屬性值為true, 如果設定該屬性值為false，則不使用該屬性即可。另外，要想將屬性值設定true時，也可以將屬性名設定為屬性值， 或將空字串設定為屬性值。例如input元素中的disabled與readonly就是這樣的屬性。
引號使用
在html中使用屬性時， 屬性值可以使用雙引號，也可以使用單引號括起來，在HTML5中做了一些改進，當屬性值不包括空字串、“<”、“>”、“=”、單引號、雙引號等字符時， 屬性兩邊的引號是可以省略的。
頁面布局的W3C盒子模型
每個HTML元素都可以看作一個裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。
屬性 描述
margin 有1-4個值設定元素的邊界，每個值都是長度、百分比或者auto，百分比值參考上級元素的寬度，允許使用負邊界值。還可以使用margin-left margin-right margin-bottom margin-left
padding 設定區域的內邊距，是邊框和元素內容之間的間隔距離 可以分開四個單獨設定
border 可以設定邊框的風格、顏色、寬度，也可以分開四個單獨設定
width 可以設定百分比、像素、auto等值，不允許使用負值
height 可以設定百分比、像素、auto等值，不允許使用負值
Margin padding
樣式挨著寫，布局，顏色最好分開
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/151995.html
標籤：Java EE
上一篇：虛擬機
下一篇：HTML5常用標簽大全