码迷,mamicode.com
首页 > Web开发 > 详细

HTML&CSS书写规范

时间:2017-12-03 17:13:04      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:使用   搜索引擎   根据   全局变量   ruby   help   参考   文案   错误   

第一部分: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 区块:

总是使用大括号表示区块

 1 if(false)
 2     var aa=1;
 3     var bb=2;
 4     var cc=3;
 5 console.log(aa,bb,cc);//undefined 2 3
 6 //等同于:
 7 if(false){
 8     var aa=1;
 9 }
10 var bb=2;
11 var cc=3;

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

 1 function test(){
 2     return 
 3     {
 4         name:‘apple‘
 5     }
 6 }
 7 console.log(test());//undefined
 8 //上面函数原本是想返回一个对象,但其实上面代码等价于:
 9 function test(){
10     return ;
11     {
12         name:‘apple‘
13     }
14 }

正确的写法:

1 function test(){
2     return {
3         name:‘apple‘
4     }
5 }

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建议尽量避免使用!

HTML&CSS书写规范

标签:使用   搜索引擎   根据   全局变量   ruby   help   参考   文案   错误   

原文地址:http://www.cnblogs.com/why-not-try/p/7966293.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!