web 代码规范

前端卡发的核心思想：

        1.表现，内容和行为的分离。

        2.标记应该是结构良好，语义正确以及普遍合法。

       3.javascript应该起到渐进式增强的用户的体验。

    

   标记：

   1  在创建的HTML文档中总是要使用能够表达内容语义的标记。

  2  段落分隔符要使用实际对应的<p>元素，而不是用多个<br>标签。

  3  在合适的条件下，充分利用<dl> （定义列表）和<blockquote> 标签。

  4 列表中的条目必须总是放置于<ul>、<ol>或<dl> 中，永远不要用一组 <div>或<p> 来表示。

  5  给每个表单里的字段加上 <label> 标签，其中的 for 属性必须和对应的输入字段对应，这样用户就可以点击标签。同理，给标签加上 cursor:pointer;

  6 不用使用输入字段中的 size 属性。该属性是和输入字段里文本的 font-size 相关的。应该使用CSS宽度。

  7  在某些闭合的 </div> 标签旁边加上一段html注释，说明这里闭合的是什么元素。这在有大量嵌套和缩进的情况下会很有用。

  8 不要把表格用于页面布局。

  9 在合适的条件下，利用 <thead>、<tbody>和<th>标签。

  10 常见无需自闭合标签有input、br、img、hr等，不要画蛇添足。

  11 标签使用必须符合标签嵌套规则。
解释：HTML 标签的使用应该遵循标签的语义。比如 div 不得置于 p 中，tbody 必须置于 table 中。

 

css编码原则：

    1 从外部文件加载CSS，尽可能减少文件数。

    2 用 LINK 标签加载，永远不要用@import。

    3 不要在文件中用内联式引入的样式，不管它是定义在样式标签里还是直接定义在元素上。这样会很难追踪样式规则。

   

属性：

      在HTML5规范里并没有严格要求属性值两边加引号，但是为了一致性，加上引号，最好是双引号。

 属性命名与顺序：

       确保页面中的属性名称唯一。
建议： id、name、class 命名，在避免冲突并描述清楚的前提下尽可能短。

解释：同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时将导致异常。IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心，为 id 和 name 使用不同的命名避免这个麻烦。

 顺序：1 class  2 id, name  3 data-*   4 src, for, type, href   5 title, alt   6 aria-*, role

解释：Classes 是为高可复用组件设计的，所以它处在第一位。Ids 更加具体而且应该尽量少使用（例如, 页内书签），所以它们俩处在第二位。

javascript的编码原则：

    1 99%的代码必须封装在外部Javascript文件中。这些文件必须在 BODY 标签的尾部引入，让页面的性能最大化。

   2 不要使用 document.write()。

   3  所有布尔变量的命名必须用 “is” 开头对正条件的测试。（建议）

   4  给变量和函数的命名要有逻辑意义

   5  不要人为缩短命名到最小。除了传统的 for 循环中的计数器 i 等简化的情况，变量命名必须长到有明确意义。

   6 常量或配置变量（例如动画持续时间等）必须放在文件的顶部。

   7 尽力编写可通用化的函数，让它接受参数并返回值。这样有利于充分的代码重用，而且一旦与引入及外部脚本配合起来，能在脚本需要修改时减少开销。

   8 给代码添加注释！这会有利于减少在调试Javascript函数上花费的时间。

 

优化 JavaScript 的特征：

     1 编写可维护的代码

     2 单变量模式

    3 Hoisting：把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定义，由此会产生问题）

     4不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）

     5不要用 eval()

     6用 parseInt() 进行数字转换

     7构造器首字母大写

     8写注释

     9不要用 void

     10不要用 with 语句

     11不要用 continue 语句

     12尽量不要用位运算   

html，css，js：

  变量，ID 及 class：所有的 JavaScript 变量必须写成全小写或驼峰法。一个例外是构造器函数，按惯例是首字母大写。所有CSS里的 id 和 class 声明都必须只用小写。不允许用连接符或下划线。

 

建议：每行代码不超过 120 个字符。

          在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少，在 CSS 可以实现相同需求的情况下不得使用表格进行布局。
解释：减少不必要的标签，在兼容性允许的情况下应尽量保持语义正确性以保持简洁，对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。