标签：重要性 情况 blog 表示 不同类 空间 popup auth 条件判断
HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
:::html
<!DOCTYPE html>
<html>
<head>
</head>
</html>字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（约定一致采用UTF-8编码）。
:::html
<head>
<meta charset="UTF-8">
</head>文档模板
:::html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Sample page</title>
<link rel="stylesheet" href="css_example_url" />
<script src="js_example_url"></script>
</head>
<body>
<section id="page">
<header id="header">
页头
</header>
<section id="body">
主体
</section>
<footer id="footer">
页尾
</footer>
</section>
<script>
// 你的代码
</script>
</body>
</html>IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
:::html
<meta http-equiv="X-UA-Compatible" content="IE=Edge">元素
html5元素
figcaption 表示 figure内容的标题
:::html
<!-- hgroup 示例 -->
<hgroup>
<h1>文档主标题</h1>
<h2>文档副标题</h2>
</hgroup>
<!-- figure 示例 -->
<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
<figure>
<img src="img" alt="Example image" />
<figcaption>Example image</figcaption>
</figure>结构性元素
头部元素
文本元素
媒体元素
列表元素
表单元素
属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
classid 、 namedata-*src、for、 type、 hreftitle、altaria-*、 roleclass用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。如：
:::html
<a class="..." id="..." data-modal="toggle" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">文件和目录命名约定
空格/标签/注释
</li>,</body>；文件编码约定
所有文件统一采用UTF-8无BOM编码。换行格式为 unix 格式。
id和class命名约定
#header,#footer,.main-nav.如根据内容无法找到合适的命名，可以再结合表现进行命名，如：col-main, col-sub, col-extra,blue-boxmain-wrapzhidao-comcol, nav, hd, bd, fd( 缩写只用来表示结构，不允许写任何样式)。不要自造缩写。.selected;对于hover，支持伪类使用:hover，不支持的使用 .hover，隐藏使用.hide 。class="J_tab-content some-mod-content"。（注意：钩子，不允许在css中定义任何的样式效果）ad、ads、adv、banner、sponsor、gg、guangg、guanggao等 页面中尽量避免采用以上词汇来命名。文件引用
选择器
通用结构
:::html
<div class="mod recommend-mod">
<div class="hd recommend-title">Tilte </div>
<div class="bd recommend-body">contents</div>
<div class="ft recommend-footer">footer </div>
</div>没有内容的部分可以省略，其中用来表示结构的 mod hd bd ft 不允许直接定义样式（避免嵌套带来样式问题）,需要定义样式的时候需要另外增加class以控制样式如：
:::html
<div class="mod recommend-mod">
<div class="hd recommend-title">Tilte </div>
<div class="bd recommend-body">contents</div>
<div class="ft recommend-footer">footer </div>
</div>当2个以上的结构不存在的时候可以不是采用此结构，如，没有hd和ft,bd也可以省略
多选择器规则之间换行
当样式针对多个选择器时每个选择器占一行
/ 推荐的写法 /
a.btn,
input.btn,
input[type="button"] {
......
}
z-index
现在通用z-index记录,使用时请避开和灵活使用
| z-index | 使用者 | 类型 |
|---|---|---|
| <10 | page-content | 页面级别 |
| >10, <99 | page-popup | 页面级别 |
| 20 | usercard用户名片 | common通用 |
| MSG气泡消息 | common通用 | |
| Dialog-Cover | common通用 | |
| Dialog | common通用 |
css属性顺序
css书写顺序：
:::html
例子:
.header {
/* 显示属性 */
display || visibility
list-style
position
top || right || bottom || left
z-index
clear
float
/* 自身属性 */
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本属性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
}css写法
禁止将样式写为单行
如
.hotel-content {margin: 10px; background-color: #efefef;}
单行显示不好注释，不好备注，这应该是压缩工具的活儿~
禁止使用行内（inline）样式
禁止使用"*"来选择元素
/*别这样写*/
* {
margin: 0;
padding: 0;
}
这样写是没有必要的，一些元素在浏览器中默认有margin或padding值，但是只是部分元素，没有必要将所有元素的margin、padding值都置为0。
带前缀的属性
当使用特定浏览器带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。如：
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}优化css选择器
css选择器是从右边到左边进行匹配的。如：
#header a {
color: #444;
}浏览器会检查整个文档中的所有链接，然后浏览器并不仅仅检查每个链接的父元素，还要遍历文档树去查找 id 为 header 的祖先元素，如果被评估的链接不是 header 的后代，那么浏览器就要向上一级遍历知道文档的根节点。针对此问题，有以下几个解决方法：
div#header ，应该简化为： #header（提权的除外）。ul.recommend ，改成 .recommend-list 或者 .list-recommend。 ul li a 这样长的选择符，最好使用 .list-anchor 之类的选择符。 #header > li > a，这样基于子标签的自选择符，那么应该使用一个class来关联每个元素如： .header-anchor。尽量使用具体的类代替子选择符。命名规范
文件命名可读性强
文件夹、文件的命名与命名空间应能代表代码功能，可读性强。
函数命名
驼峰命名方式
:::javascript
function funName() {}常量
大写
:::javascript
var VARIABLENAME变量
驼峰命名
:::javascript
var variableName编码规则
排版缩进
采用统一的缩进方式排版代码。缩进为2个ASCII空格
:::javascript
If(condition1 || condition2) {
action1;
} else if (condition3 && condition4) {
action2;
} else if (condition5
&& condition6
&& condition7
&& condition8) {
action2;
} else {
default action;
}关键词、条件括弧后面使用空格；运算操作符号两侧使用空格；语句分割符‘,’后面使用空格
:::javascript
var name[空格]=[空格]value;
if[空格](a,[空格]b) {
}左大括号"{"可以居行尾，也可写在下行首（独自一行）；右大括号"}"单独占一行，居行首
:::javascript
if (a && b) {
}
------------------------
if (a && b)
{
}句末必须用分号结尾
:::javascript
var fn = function () {
};//这里没有分号的话，脚本解析器会报错！！！
(function () {
alert(1);
})();单行过长应在适当位置予以换行,增强可读性
if 语句括号中的条件若过多过长，应予以折行；折行后，||、&& 等符号应与 “(” 后的第一个字母纵向对齐
:::javascript
if (condition1
&& condition2
|| condition3) {
}if、while、for、do语句的执行体总是用"{"和"}"括起来，即使在其结构体内只有一条语句
:::javascript
if (s==100) {
alert(‘shit!‘);
}语法意义相互独立的代码将用空行分隔
:::javascript
a++; b++; //！！！避免同一行书写两个表达式
if (a > b) {
value = a; //行间不用空行间隔
}
var variableName = value; //与上一代码行使用空行间隔注释规范
文件注释
文件版本、创建或者修改时间、功能、作者
:::javascript
/**
* @file Image.js
* @description 功能详细描述
*/函数或者类等都要添加头描述
:::javascript
/**
* 简述
*
* 功能详细描述
*
* @param <String> arg1 参数1
* @param <Number> arg2 参数2，默认为0
* @return <Boolean> 看xxx是否成功
*/
function fooFunction (arg1, arg2) {
}操作注释
多行注释
:::javascript
/*
* 注释操作说明
*/
for( var i = 0; i < obj.lenght; i++) {
}注释标签参考
| 标签 | 描述 |
|---|---|
| @addon | 把一个函数标记为另一个函数的扩张，另一个函数的定义不在源文件中。 |
| @argument | 用大括号中的自变量类型描述一个自变量。 |
| @author | 函数/类作者的姓名。 |
| @base | 如果类是继承得来，定义提供的类名称。 |
| @class | 用来给一个类提供描述，不能用于构造器的文档中。 |
| @constructor | 描述一个类的构造器。 |
| @deprecated | 表示函数/类已被忽略。 |
| @exception | 描述函数/类产生的一个错误。 |
| @exec | |
| @extends | 表示派生出当前类的另一个类。 |
| @fileoverview | 表示文档块将用于描述当前文件。这个标签应该放在其它任何标签之前。 |
| @final | 指出函数/类。 |
| @ignore | 让jsdoc忽视随后的代码。 |
| @link | 类似于@link标签，用于连接许多其它页面。 |
| @member | 定义随后的函数为提供的类名称的一个成员。 |
| @param | 用大括号中的参数类型描述一个参数。 |
| @private | 表示函数/类为私有，不应包含在生成的文档中。 |
| @requires | 表示需要另一个函数/类。 |
| @return | 描述一个函数的返回值。 |
| @returns | 描述一个函数的返回值。 |
| @see | 连接到另一个函数/类。 |
| @throws | 描述函数/类可能产生的错误。 |
| @type | 指定函数/成员的返回类型。 |
| @version | 函数/类的版本号。 |
条件判断的陷阱
在if判断中，使用===作比较,避免掉入==造成的陷阱
null，undefined，字符串‘‘，数字0，NaN而在==时，则会有一些让人难以理解的陷阱,如：
(function () {
var undefined;
undefined == null; // true
1 == true; //true
2 == true; // false
0 == false; // true
0 == ‘‘; // true
NaN == NaN;// false
[] == false; // true
[] == ![]; // true
})();对于不同类型的 == 判断，有这样一些规则，顺序自上而下：
1.
undefined与null相等
2.一个是number一个是string时，会尝试将string转换为number
3.尝试将boolean转换为number，0或1
4.尝试将Object转换成number或string，取决于另外一个对比量的类型
所以，对于0、空字符串的判断，建议使用 === 。===会先判断两边的值类型，类型不匹配时为false。
简单类型转换
1 + ‘‘或String(1)，不使用new String(1)或1.toString()的方式。string to number的转换，建议使用parseInt，必须显式指定第二个参数的进制。下面的例子展示了不指定进制的风险：
parseInt(‘08‘); // 0
parseInt(‘08‘, 10); //8float to integer的转换，建议使用Math.floor/Math.round/Math.ceil方法，不使用parseInt。
字符串拼接
字符串拼接，应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。如:
不好的拼接方式，+=
var str = ‘‘;
for (var i = 0, len = list.length; i < len; i++) {
str+= ‘<div>‘ + list[i] + ‘</div>‘;
}
dom.innerHTML = str;
正确拼接方式，Array的push+join
var str = [];
for (var i = 0, len = list.length; i < len; i++) {
str.push(‘<div>‘+ list[i] + ‘</div>‘);
}
dom.innerHTML = str.join(‘‘);获取元素
获取单个元素
通常，我们使用document.getElementById来获取dom元素，避免使用document.all。document.getElementById是标准方法，兼容所有浏览器
ie浏览器会混淆元素的id和name属性，document.getElementById可能获得不期望的元素。
在对元素的id与name属性的命名需要非常小心，应使用不同的命名法。
下面是一个name与id冲突的例子：
<input type="text" name="test"> <div id="test"></div>
<button onclick="alert(document.getElementById(‘test‘).tagName)"></button>
<!-- ie6下为INPUT -->标签：重要性 情况 blog 表示 不同类 空间 popup auth 条件判断
原文地址：http://www.cnblogs.com/cuidan9495/p/6202191.html
