web前端代码规范

html页面原则：

    1.保证代码规范，结构表现行为相互分离，有一套html规范。

    2.保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。

    3.按照标准，但是不能违背实用性。

    4.开发同一个项目时，共用一套代码规范，这样就像是一个人写的

 

页面规范：

     1.缩进与换行：使用4个空格作为一个缩进层级，不允许使用两个或tab字符；

     2.命名：

          a.使用驼峰命名

          b.使用单词拼接（单词字母小写）中间以-分隔 ，命名必须代表相应模块或者内容功能，id必须是页面唯一的，在能描述清楚的前提下尽可能短，在同一个项目中命名风格必须保持一致；

     3.标签的使用：

          a.标签名必须小写字母，对于不需要自闭合的标签，不要自闭合（input ，br ，img ，hr），

          b.标签允许省略的闭合标签，不能省略闭合标签;

          c.标签使用必须符合标签嵌套规则；（如：tbody必须放在table中）；

          d.标签使用遵守标签的语义：

                 p   --   段落

                 h1， h2，h3，h4，h5，h6   --  层级标题

                 strong ，em  --  强调

                 ins  --  插入

                 del  --  删除

                 abbr  --  缩写

                 code  --  代码标识

                 cite   --  引述来源作品的标题

                 blockquote   --  一篇和长篇应用

                 ul li  --  无序列表

                 ou li  --  有序列表

                 dl  dt  dd  --  定义列表

          e.在用css能实现的情况下不要用table来进行布局

    4.使用 HTML5的doctype来启用标准模式，建议使用大写的DOCTYPE;    

    5.meta标签的应用：

 

 

<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="guo,[e-mail]"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=medium-dpi, minimal-ui" />
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

<!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" -->
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

    6.有文本标题的控件必须使用label标签将其与其标题相关联

 

     

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
<label for="username">用户名：</label> <input type="textbox" name="username" id="username">

    7.使用button input元素时必须指明type的属性值；

 

    8.尽量不要使用按钮元素的name属性，由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。

 

 

css的规范：

    1.全局：common.css  或  global.css   全站共用的，页面基础的，必须包含的就放入这里；

    2.模块：module.css  项目功能模块多，可以放开放入便以以后维护；

    3.主题：themes.css 或 index.css  

    4.命名规范：

     头：header                                             内容：content/containe

    尾：footer                                       导航：nav
    侧栏：sidebar                                  栏目：column
    登录条：loginbar                              页面外围控制整体布局宽度：wrapper

    左右中：left right center                   标志：logo

    广告：banner                                  页面主体：main
    热点：hot                                        新闻：news
    下载：download                               子导航：subnav
    菜单：menu                                    子菜单：submenu
    搜索：search                                   友情链接：friendlink
    页脚：footer                                    版权：copyright
    滚动：scroll                                     内容：content
    标签页：tab                                     文章列表：list
    提示信息：msg                                 小技巧：tips
    栏目标题：title                                 加入：joinus
    指南：guild                                     服务：service
    注册：regsiter                                 状态：status
    投票：vote                                      合作伙伴：partner

    

    功能命名：  

     标志：logo                                       广告：banner

    登陆：login                                      登录条：loginbar
    注册：regsiter                                  搜索：search
    功能区：shop                                    标题：title
    加入：joinus                                    状态：status
    按钮：btn                                        滚动：scroll
    标签页：tab                                     文章列表：list
    提示信息：msg                                 当前的: current
    小技巧：tips                                     图标: icon
    注释：note                                       指南：guild
    服务：service                                   热点：hot
    新闻：news                                      下载：download
    投票：vote                                       合作伙伴：partner
    友情链接：link

 

js的规范

    1.代码缩进

             代码缩进为四个空格，不要使用tab缩进（不同浏览器中tab缩进没有一个长短的标准）。

    2.注释

             记得写注释，给以后需要理解你的代码的人们（自己）留下信息是非常有用的，注释要清晰明了。

    3.变量的申明

             所有的变量必须在使用前申明，让程序容易阅读，一般将var放在函数的首部；

    4.变量，函数，类命名规范

             使用有意义的命名，清晰易懂

    5.函数返回的数据应该统一类型。