Dev.Coding Standard HTML.zh_cn

Jump to bottom Edit New page

nothing edited this page Feb 26, 2014 · 6 revisions

注意

规范参考Google HTML/CSS Style Guide
对于phtml模块，由于希望前后开发分离，而phtml里面的代码又是php的，所以应该用4个空格。其他规则同html。
什么情况会用到html呢？
- 一些静态的活动页面
- 前端模板，例如 AngularJS模板

规则

使用html5文档声明

<!DOCTYPE html>

编码 (文件格式使用UTF-8 (no BOM))

<meta charset="utf-8">

代码间隔(2个空格)，很多编辑器能把tab_size设置为2个空格，如sublime_text

{
  'tab_size': 2,
  'translate_tabs_to_spaces': true
}

省略闭合标签（可选） HTML5 specification指出了哪些标签可以省略。

<p>content
<div>
</div>
<ol>
  <li>item1
  <li>item2
</ol>
<table>
  <thead>
  <tbody>
    <tr>
      <td>
      <td>
</table>
...

大小写(元素的标签和属性名必须小写, 属性值必须加双引号;)

<a href="/">Home</a>

对于样式和脚本标签省略掉type属性

<link href="" rel="stylesheet">

<script></script>

自定义属性(使用data-xx)

<div data-url="" data-id=""></div>

每一个区块标签都重新换行，缩进每一个子元素

<div>
  <p>
  <ul>
    <li>
      <a href=""></a>
  </ul>
</div>

注释

<!-- Header: brand, slogan, user bar -->

<!-- Page main content: breadcrumb, flash-messenger, blocks and module content -->