专业HTML5的书写原则

 

一、一般原则

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

二、格式

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

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

例子:

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

例子:

三、属性顺序

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

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

例子:

四、空白

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

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

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

五、命名

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

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

下面是糟糕的命名：

这是更好一点的命名：

六、实例

含各种约定的例子：

 

---