整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
示：點擊上方"藍色字體"↑ 可訂閱！
關于我們 51RGB官方微信
今天分享的文章來自昨天在review同事代碼的時候發現他的網頁頭部跟平常見到的不一樣他在頭部聲明lang="zh-cmn-Hans"，本著好奇心，早讀君就開始搜索了，然后就然后了～
正文從這開始～
我相信很多人都熟悉這個東西，這個就是我們平常寫網頁頭部的那個語言聲明吧，估計很多人和我一樣以為默認的中文就是這么寫，但是今天在知乎看到一個問題，發現我們了解的真是不夠啊…
首先lang屬性的取值應該遵循 BCP 47 – Tagsfor Identifying Languages。而單一的 zh 和zh-CN 均屬于廢棄用法。因為問題主要在于，zh 現在不是語言code了，而是macrolang，能作為語言code的是cmn（國語）、yue（粵語）、wuu（吳語）等。我通常建議寫成 zh-cmn 而不是光寫 cmn，主要是考慮兼容性（至少可匹配 zh），有不少軟件和框架還沒有據此更新。
zh-CN 的問題還在于，其實多數情況下標記的是簡體中文，但是不恰當的使用了地區，這導致同樣用簡體中文的 zh-SG（新加坡）等無法匹配。更典型的是 zh-TW 和 zh-HK。所以其實應該使用 zh-Hans / zh-Hant 來表示簡體和繁體。那么完整的寫法就是 zh-cmn-Hans，表示簡體中文書寫的普通話/國語。一般而言沒有必要加地區代碼，除非要表示地區特異性，一般是詞匯不一樣（比如維基百科的大陸簡體和新馬簡體）。
但是，由于歷史原因，有時候不得不繼續使用zh-CN。比如中文維基百科，沿用了傳統的zh-CN/zh-HK/zh-SG/zh-TW（按照標準應該使用 zh-cmn-Hans-CN、zh-cmn-Hant-HK、zh-cmn-Hans-SG、zh-cmn-Hant-TW）。這時候，合理的軟件行為，是將 zh-CN 等轉化為 zh-cmn-Hans（即轉化為最常見的誤用所對應的實際標準寫法）。
最后，所以說要真正正確的寫應該是按這個步驟來的，但是為了兼容性可以寫成lang=zh-cmn或者zh-cmn-Hans亦或者lang=”zh-cmn-Hans-CN”
來自@Hax:
單一的 zh 和zh-CN 均屬于廢棄用法。
問題主要在于，zh 現在不是語言code了，而是macrolang，能作為語言code的是cmn（國語）、yue（粵語）、wuu（吳語）等。我通常建議寫成 zh-cmn 而不是光寫 cmn，主要是考慮兼容性（至少可匹配 zh），有不少軟件和框架還沒有據此更新。
如何標記的例子：
1. 簡體中文頁面：html
2. 繁體中文頁面：html
3. 英語頁面：html
4. 《回來》的音頻，以國語演唱：audio
5. 《海闊天空》的音頻，以粵語演唱：audio
6. 《進來白相相》的音頻，以滬語演唱：audio
注意上述因為都是音頻，所以不應加上 Hans/Hant 標記。
7. 《最終信仰》的音頻，雙語演唱，因此audio不需要標記lang（如果一定需要標記可以用），但是每個段落的歌詞可以分別用 p 和 p 標記（根據簡體或是繁體可用 zh-cmn-Hans 或 zh-cmn-Hant）。
8. 《忐忑》的音頻，沒有歌詞，因此不需要標記lang（如果一定需要標記可用 audio）。
需要加地區代碼的情況一般比較少，除非為了強調不同地區漢語使用差異。比如：
<p>
<b>菠蘿</b>和<blang="zh-cmn-Hant-TW">鳳梨</b>其實是同一種水果。只是大陸和臺灣稱謂不同，且新馬一帶的稱謂也是不同的，稱之為<blang="zh-cmn-Hans-SG">黃梨</b>。
</p>
當然，由于歷史原因，有時候不得不繼續使用zh-CN。比如中文維基百科，沿用了傳統的zh-CN/zh-HK/zh-SG/zh-TW（按照標準應該使用 zh-cmn-Hans-CN、zh-cmn-Hant-HK、zh-cmn-Hans-SG、zh-cmn-Hant-TW）。這時候，合理的軟件行為，是將 zh-CN 等轉化為 zh-cmn-Hans（即轉化為最常見的誤用所對應的實際標準寫法）。
實際上，各相關標準，也存在一定的滯后。例如CSS的:lang選擇器，不支持選擇僅僅簡體/繁體中文（而不管是cmn或是yue或是min等漢語方言）。理想情況是CSS3對:lang選擇器的語法進行升級，即BCP 47中的高級匹配算法，支持 :lang(*-Hans)這樣的寫法。
關于我們 51RGB官方微信
51RGB在線教育 (www.51rgb.com) ：聘請WEB前端開發高級講師，現任職騰訊UED前端開發工程師。曾就職于卓望信息前端工程師。從事前端開發8年，在卓望期間負責移動微博的前端頁面架構及開發工作。來到騰訊之后主要做手機端HTML5方向。網頁前端技術一流，大型企業實戰經驗豐富。期待你的加入！
微信：tyacheng
客服電話：400 110 9151
↓↓↓
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-size{ font-size: 28px; }</style></head><body> <div>碼海無際</div> <div class="my-font-size">碼海無際</div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-family{ /*font-family: 宋體;*/ /*font-family: SimSun;*/ /*font-family: B8BF53;*/ font-family: B8BF53,ED1F53; }</style></head><body> <div>碼海無際</div> <div class="my-font-family">碼海無際</div></body></html>范圍值 100 ~ 900 為字體指定了加粗級別。如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價于 normal，而 700 等價于 bold。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-weight{ /*font-weight: bold;*/ font-weight: 700; }</style></head><body> <div>碼海無際</div> <div class="my-font-weight">碼海無際</div></body></html>常用于設置斜體文本，該屬性有三個值：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-style{ font-style: italic; }</style></head><body> <div>碼海無際</div> <div class="my-font-style">碼海無際</div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-one { font-style: italic; font-weight: bold; font-size: 20px; font-family: 宋體; } .my-font-two { font: italic bold 20px 宋體; } .my-font-three { font: 20px 宋體; }</style></head><body> <div>碼海無際</div> <div class="my-font-one">碼海無際</div> <div class="my-font-two">碼海無際</div> <div class="my-font-three">碼海無際</div></body></html>歡的可以收藏轉發加關注
一、 規范目的：
為提高工作效率，便于后臺人員添加功能及前端后期優化維護，輸出高質量的文檔，在網站建設中，使結構更加清晰，代碼簡明有序，有一個更好的前端架構，有利于SEO優化。
二、 規范基本準則：
符合web標準，使用具有語義的標簽，使結構、表現、行為分離，兼容性優良，頁面性能優化，代碼簡潔、明了、有序，盡可能的減少服務器的負載，保證最快的解析速度。
三、 文件規范：
html、css、js、images文件均歸檔至約定的目錄中。
HTML部分：
縮進使用soft tab（4個空格）；
嵌套的節點應該縮進；
在屬性上，使用雙引號，不要使用單引號；
屬性名全小寫，用中劃線做分隔符；
不要在自動閉合標簽結尾處使用斜線（HTML5 指出他們是可選的）；
不要忽略可選的關閉標簽，例：</li> 和 </body>
雖然doctype不區分大小寫，但是按照慣例，doctype大寫
在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現；
根據HTML5規范：應在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應當怎么去發音和翻譯。
通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網頁內容的渲染方式，通常指定為’UTF-8’。
用 <meta> 標簽可以指定頁面應該用什么版本的IE來渲染；
根據HTML5規范, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。
屬性應該按照特定的順序出現以保證易讀性；
id
class
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；boolean屬性的存在表示取值為true，不存在則表示取值為false。
在JS文件中生成標簽讓內容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。
在編寫HTML代碼時，需要盡量避免多余的父節點；
很多時候，需要通過迭代和重構來使HTML變得更少。
盡量遵循HTML標準和語義，但是不應該以浪費實用性作為代價；
任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。
CSS部分：
使用soft tab（4個空格）。
每個屬性聲明末尾都要加分號。
以下幾種情況不需要空格：
屬性名后
多個規則的分隔符’,’前
!important ‘!’后
屬性值中'(‘后和’)’前
行末不要有多余的空格
以下幾種情況需要空格：
屬性值前
選擇器’>’, ‘+’, ‘~’前后
‘{‘前
!important ‘!’前
@else 前后
屬性值中的’,’后
注釋’/*’后和’*/’前
以下幾種情況需要空行：
文件最后保留一個空行
‘}’后最好跟一個空行，包括scss中嵌套的規則
屬性之間需要適當的空行
以下幾種情況不需要換行：
‘{‘前
以下幾種情況需要換行：
‘{‘后和’}’前
每個屬性獨占一行
多個規則的分隔符’,’后
不允許使用!important。
注釋統一用’/* */’（scss中也不要用’//’），具體參照右邊的寫法；
縮進與下一行代碼保持一致；
可位于一個代碼行的末尾，與代碼間隔一個空格。
最外層統一使用雙引號；
url的內容要用引號；
屬性選擇器中的屬性值需要引號。
使用小寫字母，以中劃線分隔
scss中的變量、函數、混合、placeholder采用駝峰式命名
相關的屬性聲明按文章最后面的順序做分組處理，組之間需要有一個空行。
顏色16進制用小寫字母；
顏色16進制盡量用簡寫。
盡量將媒體查詢的規則靠近與他們相關的規則，不要將他們一起放到一個獨立的樣式文件中，或者丟在文檔的最底部，這樣做只會讓大家以后更容易忘記他們。
不允許有空的規則；
元素選擇器用小寫字母；
去掉小數點前面的0；
去掉數字中不必要的小數點和末尾的0；
屬性值’0’后面不要加單位；
同個屬性不同前綴的寫法需要在垂直方向保持對齊，具體參照右邊的寫法；
無前綴的標準屬性應該寫在有前綴的屬性后面；
不要在同個規則里出現重復的屬性，如果重復的屬性是連續的則沒關系；
不要在一個文件里出現兩個相同的規則；
用 border: 0; 代替 border: none;；
選擇器不要超過4層（在scss中如果超過4層應該考慮用嵌套的方式來寫）；
發布的代碼中不要有 @import；
盡量少用’*’選擇器。
JS部分：
使用soft tab（4個空格）。
不要超過120，但如果編輯器開啟word wrap可以不考慮單行長度。
長字符串拼接用加號。
以下幾種情況后需加分號：
變量聲明
表達式
return
throw
break
continue
do-while
以下幾種情況不需要空格：
對象的屬性名后
前綴一元運算符后
后綴一元運算符前
函數調用括號前
無論是函數聲明還是函數表達式，'(‘前不要空格
數組的'[‘后和’]’前
對象的'{‘后和’}’前
運算符'(‘后和’)’前
以下幾種情況需要空格：
二元運算符前后
三元運算符’?:’前后
代碼塊'{‘前
下列關鍵字前：else, while, catch, finally
下列關鍵字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
單行注釋’//’后（若單行注釋和代碼同行，則’//’前也需要），多行注釋’*’后
對象的屬性值前
for循環，分號后留有一個空格，前置條件如果有多個，逗號后留一個空格
無論是函數聲明還是函數表達式，'{‘前一定要有空格
函數的參數之間
換行的地方，行末必須有’,’或者運算符；
以下幾種情況不需要換行：
下列關鍵字后：else, catch, finally
代碼塊'{‘前
以下幾種情況需要換行：
代碼塊'{‘后和’}’前
定義變量后
雙斜線后，必須跟一個空格；
縮進與下一行代碼保持一致；
可位于一個代碼行的末尾，與代碼間隔一個空格。
最少三行, ‘*’后跟一個空格，具體參照右邊的寫法；
建議在以下情況下使用：
難于理解的代碼段
可能存在錯誤的代碼段
瀏覽器特殊的HACK代碼
業務邏輯強相關的代碼
最外層統一使用單引號。
標準變量采用駝峰式命名（除了對象的屬性外，主要是考慮到cgi返回的數據）
‘ID’在變量名中全大寫
‘URL’在變量名中全大寫
‘Android’在變量名中大寫第一個字母
‘iOS’在變量名中小寫第一個，大寫后兩個字母
常量全大寫，用下劃線連接
構造函數，大寫第一個字母
jquery對象必須以’$’開頭命名
一個函數作用域中所有的變量聲明提到函數首部，除了for (…)里面使用的一次性變量。
var的數量不做限制，但要統一，一行定義一個變量。
無論是函數聲明還是函數表達式，'(‘前不要空格，但'{‘前一定要有空格；
函數調用括號前不需要空格；
立即執行函數外必須包一層括號；
不要給inline function命名；
參數之間用’, ‘分隔，注意逗號后有一個空格。
對象屬性名不需要加引號；
對象以縮進的形式書寫，不要寫在一行；
數組、對象最后不要有逗號。
下列關鍵字后必須有大括號（即使代碼塊的內容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。
null
適用場景：
不適用場景：
不要用null來判斷函數調用時有無傳參
不要與未初始化的變量做比較
初始化一個將來可能被賦值為對象的變量
與已經初始化的變量做比較
作為一個參數為對象的函數的調用傳參
作為一個返回對象的函數的返回值
永遠不要直接使用undefined進行變量判斷；
使用typeof和字符串’undefined’對變量進行判斷。
不要混用tab和space；
不要在一處使用多個tab或space；
對上下文this的引用命名范圍：self > that > _this > me；
行尾不要有空白字符；
switch的falling through和no default的情況一定要有注釋特別說明；
不允許三元運算符嵌套。
不允許有空的代碼塊。
希望對大家有幫助喲！！！！！！！！！！！！！！！！！！！！！！
學習前端的伙伴可以私信回復小編“前端”領取全套免費前端學習資料、視頻
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
