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

标签： css相关 class html type 书写顺序 | 发表时间：2013-01-04 15:59 | 作者：张 鑫旭
出处：http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=2896

原文链接： Principles of writing consistent, idiomatic 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>

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

如：

<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: 以上为翻译全文 ——–

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

原创文章，转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=2896

（本篇完）

有话要说，点击 这里发表评论。

相关 [翻译 地道 html] 推荐：

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

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2896. 原文链接： Principles of writing consistent, idiomatic HTML. 原文作者： necolas. //zxx: 以下为翻译全文 ——–. 所有的代码应看似出自一人之手，即使奶妈有多人.

翻译：谷歌HTML、CSS和JavaScript风格规范

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2511. 原文地址： http://…style-guides/. 原文作者： Craig Buckler. 注：本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范，而是一种带有总结性质的简单称述.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了，几乎所有的关于HTML 5 在各种主流浏览器上的安全问题，这些安全问题很有可能将会是黑客攻击你的网上的敲门砖，他们几乎都和Javascript都有关系，你就要好好注意了. IE6，7，8，9，和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中，可以让用户进行XSS（跨站脚本）攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言（ 英文：HyperText Markup Language，HTML）是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全，超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素（inline）. 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：. 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求，网上找了很多，但是如果批量处理就会出现问题，最后找到了PD4ML，解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹，并且在文件夹中建立pd4fonts.properties ，配置文件中的内容如下.

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    .    网页标题.    标题.

HTML head 头标签

- - IT技术博客大学习
HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性. 移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要. 了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的.

动态绑定HTML

- - 破狼 Blog
在Web前端开发中，我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示，特别是在内容管理系统（CMS：是Content Management System的缩写），这样的需求，更是遍地皆是. 对于对angular的读者肯定首先会想到ngBindHtml，对,angular为我们提供了这个指令来动态绑定HTML，它会将计算出来的表达式结果用innerHTML绑定到DOM.

HTML编码规范

- - SegmentFault 最新的文章
这段时间在整理前端部分代码规范，初步想法是从HTML、CSS、Javascipt、项目文件目录四部分是整理. 之前已经整理完了 CSS编码规范，有兴趣可以了解下. [强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符. 对于非 HTML 标签之间的缩进，比如 script 或 style 标签内容缩进，与 script 或 style 标签的缩进同级.