整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
示：点击上方"蓝色字体"↑ 可订阅！
关于我们 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小时内与您取得联系。
