翻译：稳定、地道HTML书写原则

//zxx: 以下为翻译全文 ——–

一、一般原则

• 所有的代码应看似出自一人之手，即使奶妈有多人。
• 严格执行约定的风格。
• 若风格不定，使用现有、常用风格。

二、空白

你的整个源代码应该只存在一种风格。空白使用前后一致，使用空白提高可读性。

• 到死也不要混用空格符(spaces)和制表符(tabs)实现缩进。
• 柔和缩进(spaces)或真实制表二选一，关键要一站到底。（个人偏好：空格-spaces）
• 如果使用空格，选定一个缩进字符值。（个人偏好：4空格）

小提示：你可以配置编辑器“显示不可见”(“show invisibles”)，此举可用来消除结束行的空白，避免违背上面（坚持一种缩进）的承诺。

三、格式

• 标签以及属性名称总是小写。
• 一行一个不连续元素。
• 每个嵌套元素使用一个额外的缩进。
• 布尔属性无值（如checked而不是checked="checked"）。
• 属性值总是使用双引号引起来。
• 省略link样式表、style以及script元素的tyPE属性。
• 总是包含结束标签。
• 自闭元素(img, br)不要包含斜杠。

（每行长度保持一个最大的合理值，例如 80列）

例如：

div class="tweet">
         a href="path/to/somewhere">
             img src="path/to/image.png" alt="">
         /a>
         p>
    [微博文字]/p>
         button disabled>
    回复/button>
     /div>
     

@H_379_126@异常和轻微的偏差
元素含有多个属性，可以跨多行排版，以努力提高可读性以及提供更多有用的差异。

如：

a class="[value]"  data-action="[value]"  data-id="[value]"  href="[url]">
         span>
    [文字]/span>
     /a>
     

四、属性顺序

HTML属性应该以特定的属性排列，（如下）这可以某种程度上反应类名是主要接口——用做CSS以及JavaScript选择元素

1. class
2. id
3. data-*
4. 其他

例如：

a class="[value]" id="[value]" data-name="[value]" href="[url]">
    [文字]/a>
     

五、命名

命名很难，但很重要。这是开发一个可维护的代码库重要的组成部分，并确保您HTML和CSS/JS见有个可伸缩的接口。

• 使用清晰，周到，适当的HTML类名。名称应该体现HTML和CSS文件的信息。
• 避免很系统地使用类名缩写，这会让事情变得难以理解。

下面是糟糕的命名：

div class="cb s-scr">
    /div>
 

.s-scr {
       overflow: auto;
 }
  .cb {
       background: #000;
 }
     

这是更好一点的命名：

div class="column-body is-scrollable">
    /div>
 

.is-scrollable {
         overflow: auto;
 }
  .column-body {
         background: #000;
 }
     

六、实例

含各种约定的例子：

!DOCTYPE html>
     html>
         head>
             meta charset="utf-8">
             title>
    文档/title>
             link rel="stylesheet" href="main.css">
             script src="main.js">
    /script>
         /head>
         body>
             article class="post" id="1234">
                 time class="timestamp">
    2013年1月4日/time>
                 a data-id="1234"              data-Analytics-category="[value]"              data-analytics-action="[value]"              href="[url]">
    [文本]/a>
                 ul>
                     li>
                         a href="[url]">
    [文本]/a>
                         img src="[url]" alt="[文本]">
                     /li>
                     li>
                         a href="[url]">
    [文本]/a>
                     /li>
                 /ul>
                  a class="link-complex" href="[url]">
                     span class="link-complex__target">
    [文本]/span>
                     [文本]             /a>
                  input value="text" readonly>
             /article>
         /body>
     /html>
     

//zxx: 以上为翻译全文 ——–

大家可以根据自己的实际情况，提炼出有帮助的信息。
翻译水平有限，文中要是有不准确之处，欢迎指正。

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！