HTML&CSS书写规范

第一部分：HTML书写规范：

1.1 HTML整体结构：

1.1.1：HTML基础设施：

1. 文档以"<!DOCTYPE...>"首行顶格开始，推荐使用"<!DOCTYPE htlm>"；
2. 文档必须申明编码charset，与文件本身编码保持一致，推荐<meta charset="UTF-8">；
3. 根据页面内容和需求适当填写keywords和description；<meta name="keywords" content=""><meta name="decription" content="">
4. 页面title是极为重要的一项。

1.1.2：结构顺序与视觉顺序基本保持一致

1. 按照从上到下，从左到右的顺序进行书写HTML；
2. 有时候为了便于搜索引擎抓取，我们要将重要内容在HTML结构中提前；
3. 用div替代table布局；
4. 当需要一些表现形式为表格的数据，使用<table>

1.1.3：结构（html），表现（css），行为（js）三者分离，避免内联

1. 使用link将css文件引入，置于head中；
2. 使用script将js文件引入，置于body底部。

1.1.4保持良好的简洁的树形结构：

1. 每一个块级元素都另起一行，每一行都使用Tab缩进对齐。删除冗余的行尾的空格
2. 使用4个空格代替1个Tab（大多数编辑器均可设置）
3. 对于内容较为简单的表格，建议将<tr>写成单行
4. 大的模块之间，可以使用空行隔开，使结构更为清晰

另外，请做到下列几点：

1. 结构上可以并列书写，就不要嵌套书写。如：如果可以写成<div></div><div></div，就不要写成<div><div></div></div>
2. 如果结构上已经可以满足视觉上与语义上的要求，就不要有冗余的结构。如：<div><h2></h2></div>，就不要写成<div><div><h2></h2></div></div>
3. 一个标签上引用的ClassName不要过多，如不要出现这种情况：<div class="calss1 class2 class3 class4 class5"></div>
4. 对一个语义化的内部标签，尽量避免使用ClassName。如这种情况中：<ul class="ask-help"><li class="item"></li></ul>，class="item"应该去除！

 

1.2　内容及语义：

1.2.1  内容类型决定使用的语义标签

在HTML中某种特定类型的内容要有特定的HTML标签来承载；也就是根据内容语义化HTML结构。

1.2.2  加强"资源型"内容的可访问性和可用性

在资源的内容上加上描述文案，比如img添加alt属性，在audio加上文案和链接

1.2.3  加强“不可见”内容的可访问性

背景图片上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取内容，同时CSS失效时可以看到内容

1.2.4  以字符实体代替与HTML语法相同的字符，避免浏览器解析错误

 

更多HTML规范：参考链接

 

第二部分：CSS书写规范

参考链接

 

第三部分：JavaScript书写规范

3.1 区块：

总是使用大括号表示区块

if(false)
    var aa=1;
    var bb=2;
    var cc=3;
console.log(aa,bb,cc);//undefined 2 3
//等同于:
if(false){
    var aa=1;
}
var bb=2;
var cc=3;

起首的大括号跟在关键字后面

function test(){
    return 
    {
        name:'apple'
    }
}
console.log(test());//undefined
//上面函数原本是想返回一个对象,但其实上面代码等价于：
function test(){
    return ;
    {
        name:'apple'
    }
}

正确的写法：

function test(){
    return {
        name:'apple'
    }
}

3.2行尾分号：JavaScript规定，行尾分号可以省略。但是建议：能不省的地方不要去省略（这不是python,ruby等语言）

3.3变量申明：由于“变量提升”，所以，变量声明最好在头部就申明

3.4new 命令：

var a=new myObeject();

　　这是使用new命令，由构造函数生成一个对象。但是一旦忘记new，myObject()内部的this 关键字就会指向全局对象，导致所有绑定在this上面的变量，都变为全局变量。

因此构造函数首字母一般需要大写，而普通函数首字母小写！

3.5 with：尽量不要使用with

3.6 ==与===：建议总是使用严格相等(===)

3.7 switch...case结构：代码很容易冗长；容易造成程序流程的混乱，不符合面向对象编程原则。

switch...case建议尽量避免使用！