&nbs p;
原文链接：Principles of writing consistent, idiomatic HTML
原文作者：necolas
翻译 编辑：张鑫旭
//zxx: 以下为翻译全文 & # 8212;—–
一、一般原则
所有的代码应看似出自一人之手，即使奶妈有多人。 严格执行约定的风格。 若风格不定，使用现有、常用风格。二、空白
你的整个 源 代码 应该 只存在一种风格。空白使用前后一致，使用空白 提高 可读性 。
到死也不要混用空格符(spaces)和 制表符 (tabs)实现缩进。 柔和缩进(spaces)或真实制表二选一，关键要一站到底。（个人偏好：空格 -s paces） 如果使用空格，选定一个缩进字符值。（个人偏好：4空格）小提示：你可以配置编辑器“显示不可见”(“show invisibles”)，此举可用来消除结束行的空白，避免违背上面（坚持一种缩进）的承诺。
三、格式
标签以及属性名称总是小写。 一行一个不连续元素。 每个嵌套元素使用一个额外的缩进。 布尔属性无值（如 checked 而不是 checked="checked" ）。 属性值总是使用双引号引起来。 省略 link 样式表、 style 以及 script 元素的 ty PE 属性。 总是包含结束标签。 自闭元素( img , br )不要包含斜杠。（每行长度保持一个最大的合理值，例如 80列）
例如：
.highlight PR e{background-color:#f8f8f8;border:1px solid #ccc;font- Size: 13px;line-h ei ght:19px;overflow:auto;padding:6px 10px;border-radius:3px}.highlight{background:#ffffff}.highlight .c{color:#999988;font-style: IT alic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{ font-weight :bold}.highlight .o{font-weight:bold}.highlight .cm{color:#999988;font-style:italic}.highlight .cp{color:#999999;font-weight:bold}.highlight .c1{color:#999988;font-style:italic}.highlight .cs{color:#999999;font-weight:bold;font-style:italic}.highlight .gd{color:#000000;background-color:#ffdddd}.highlight .gd .x{color:#000000;background-color:#ffaaaa}.highlight .ge{font-style:italic}.highlight .gr{color:#aa0000}.highlight .gh{color:#999999}.highlight .gi{color:#000000;background-color:#d DF fdd}.highlight .gi .x{color:#000000;background-color:#aaffaa}.highlight .go{color:#888888}.highlight .gp{color:#555555}.highlight .gs{font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#aa0000}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kn{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#445588;font-weight:bold}.highlight .m{color:#009999}.highlight .s{color:#d14}.highlight .na{color:#008080}.highlight .nb{color:#0086B3}.highlight .nc{color:#445588;font-weight:bold}.highlight .no{color:#008080}.highlight .ni{color:#800080}.highlight .ne{color:#990000;font-weight:bold}.highlight .nf{color:#990000;font-weight:bold}.highlight .nn{color:#555555}.highlight .nt{color:#000080}.highlight .nv{color:#008080}.highlight .ow{font-weight:bold}.highlight .w{color:#bbbbbb}.highlight .mf{color:#009999}.highlight .mh{color:#009999}.highlight .mi{color:#009999}.highlight .mo{color:#009999}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999999}.highlight .vc{color:#008080}.highlight .vg{color:#008080}.highlight .vi{color:#008080}.highlight .il{color:#009999}.highlight .gc{color:#999;background-color:#EA f2 F5}
<div class= "tweet" > <a hr ef= "path/to/somewhere" > <img src= "path/to/image.png" alt= "" > </a> <p> [ 微博 文字] </p> <button disabled > 回复 </button> </div>
@H_10_ 126 @异常和轻微的偏差
元素含有多个属性，可以跨多行排版，以 努力 提高可读性以及提供更多有用的差异。
如：
<a class= "[value]" data-action= "[value]" data -i d= "[value]" href= "[url]" > <span> [文字] </span> </a>
四、属性顺序
HT ML 属性应该以特定的属性排列，（如下）这可以某种程度上反应类名是主要接口——用做 CSS 以及JavaScript选择元素
class id data-* 其他例如：
<a class= "[value]" id= "[value]" data-n am e= "[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> < ;m eta charset= "utf-8" > <title> 文档 </title> <link rel= "stylesheet" href= "m ai n.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__t arg et" > [文本] </span> [文本] </a> <input value= "text" readonly > </article> </body> </html>
//zxx: 以上为翻译全文 ——–
大家可以根据自己的实际情况，提炼出有帮助的信息。
翻译水平有限，文中要是有不准确之处，欢迎指正。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-翻译：稳定、地道HTML书写原则 全部内容，希望文章能够帮你解决 html5教程-翻译：稳定、地道HTML书写原则 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-翻译：稳定、地道HTML书写原则的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219113