前端开发规范[html篇]

禅思院
86 阅读5分钟

html规范

协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用html组件, 协作开发过程中， 此文件不可随意修改.

1. 代码格式

* 每个块级、列表、表格元素单独占一行，每个子元素都相对父元素缩进。
* 纯文本在 HTML 标签结束之前不要换行。
* 缩进: 统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。
* HTML 属性值使用双引号。
* 结构、样式、行为分离: 尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。
* 文件编码: 使用不带 BOM 的 UTF-8 编码,在 HTML中指定编码 <meta charset="utf-8">.
* 充分利用html自身属性及样式继承原理减少代码量, 比如:


<ul class="list"><li>这儿是标题列表<span>2010-09-15</span></ul>
定义 ul.list li{position:relative}  ul.list li span{position:absolute; right:0}
即可实现日期居右显示


* 书写代码前, 考虑并提高样式重复使用率。
* 一律使用小写字母
* 省略外链资源 URL 协议部分: 省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。其它协议（ftp 等）的 URL 不省略。
* 语言属性: lang属性的取值应该遵循 BCP 47 - Tags for Identifying Languages。
* 文档类型: 标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。
* 引号: 属性的定义，统一使用双引号。
* 统一注释: 可以根据编译器统一生成注释。

2. 命名规则

* 头：header
* 内容：content/container
* 尾：footer
* 导航：nav
* 侧栏：sidebar
* 栏目：column
* 页面外围控制整体布局宽度：wrapper
* 左右中：left right center
* 登录条：loginbar
* 标志：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

3. 标签使用

* 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )。
* 可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )。
* 表格table: 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行

  /*recommended*/

  <td><img src=”../images/sample.gif”></td>

  /*not recommended*/

  <td><img src=”../images/sample.gif”> 
  </td>

  这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： 
  <td><img src=”../images/sample.gif”> </td>

* 链接a: 网站中的链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名。

  /*recommended*/

  <a href=”aboutus/index.htm”>

  /*not recommended*/

  <a href=”aboutus/”>

  所有内页指向首页的链接写成<a href=”/”>
  在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码“javascript:void(null)”代替原来的“#”标记


* Alt和Title


  <p Title="给链接文字提示">文字</p>

  <a href="#" Title="给链接文字提示">文字</a>

  <img src="图片.gif" alt="给图片提示"> 


* 尽量减少标签数量。

4. 图片处理

* banner
  > 全尺寸banner为468X60px，半尺寸banner为234X60px，小banner为88X31px。
    另外120X90，120X60也是小图标的标准尺寸。全尺寸banner不超过14K。
    普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
    次级页的pip尺寸360X300，336X280
    游标:100X100或120X120

*  LOGO的国际标准规范
  > 为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：
    88*31 这是互联网上最普遍的LOGO规格。
    120*60 这种规格用于一般大小的LOGO。
    120*90 这种规格用于大型LOGO。
*  页面修饰图片处理: 图片经过优化以加快下载的速度,有较佳的视觉空间效果，用图要与页面风格、页面内容相符；制作精美，细节处理得当。

5. Class 与 ID

* class 应以功能或内容命名，不以表现形式命名.
* class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔.
* 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class.

6. 属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。
* 1. id
* 2. class
* 3. name
* 4. data-xxx
* 5. src, for, type, href
* 6. title, alt
* 7. aria-xxx, role

7. 注释

  <!--<div class="sell"></div>-->

  <!-- HTML推荐注释，注释符号一上一下覆盖整个要注释的区块，多行注释 -->
  <!--
  <div class="sell">
      <p>多行注释</p>
      <p>多行注释</p>
      <p>多行注释</p>
      <p>多行注释</p>
  </div>
-->

参考文档

  • html: 主要有缩进，标签，加载顺序等等。可以参考：
ps:建议大家在各个产品，严格遵守规范，以便后期的维护以及代码的健壮性等。
如果文档有更好的补充和好的建议，欢迎联系@博主
如有雷同，请联系@博主。
avatar
文章
阅读
粉丝