前端工程师样式指南 - HTML

前端工程师样式指南 - HTML

一般格式规则

字母大小写

仅使用小写。
所有代码均使用小写，该规则适用于 HTML 元素名、属性和属性值（文本/ CDATA 除外）。

不推荐：

主页

推荐：

主页

末尾空白

删除行尾空格。
行尾空格属于多余的符号，会使 diff 更加难以阅读。

不推荐：

什么?

__

推荐：

一往情深深几许？深山夕照深秋雨。

如果使用 Sublime Text，你可在用户设置（User Settings）JSON 文件（可在文本编辑器的菜单中找到）中添加以下代码，每当你以此方法储存文件时，去除行尾空格操作便会自动完成：

"trim_trailing_white_space_on_save": true

缩进

整个文件中的缩进应保持前后一致，使用 Tab、2个空格或4个空格都可以，但需保持前后一致。

一般元规则

编码

使用 UTF-8（无 BOM）。
确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。在 HTML 模板中设置编码并用 记录。

注释

在可行和必要时，对代码进行注释。
用注释解释代码的覆盖范围、目的和作用以及使用和选择各解决方案的原因。

任务项

用 TODO: 标注待办事项和任务项：
仅用关键词 TODO 标注待办事项，不要使用 @@ 等其他格式的字样。在任务项前加冒号，如： TODO: 待办任务

推荐：

    
风吹云，云随风，风云变幻

HTML 样式规则

文件类型

使用 HTML5 。
所有 HTML 文件均应使用 HTML5 （ HTML 语法）：
不要结束自结束元素，即编写
，而不是
。

HTML 有效性

使用有效的 HTML。
使用有效的 HTML 是可测量的基准质量，可确保 HTML的合理使用并有助于了解技术要求和限制。

不推荐：

这是一篇文章。

推荐：

    
        
        
    
    
        
黑夜给了我黑色的眼睛，我却用它来寻找光明。。
    

语义

根据目的使用 HTML 。
根据元素的预期作用使用元素。例如，针对标题使用标题元素，针对段落使用 p 元素，针对锚点使用 a 元素等。根据目的使用HTML 对提高可访问性、再利用程度和代码效率十分重要。

不推荐：

All recommendations

推荐：

All recommendations

多媒体应变计划

为多媒体设置备用内容。
确保为图片、视频或通过画布呈现的动画对象等多媒体提供其他访问方式。对于图片而言，使用有意义的 Alt 文本，对于视频，使用音频转述资料和字幕（如有）。
为方便访问，需提供备用内容，若没有 alt 属性，盲人用户将难以辨别图片的内容，其他用户也可能无法理解视频或音频的内容。
针对具有会引入冗余的 alt 属性的图片和无法立即使用 CSS 的装饰性图片，使用备用内容，即 alt="" 。

不推荐：

![](udacity.png)

推荐：

![](udacity.png)

关注点分离

将结构、描述和行为相互分离。
将结构（标记）、描述（样式）和行为（脚本设计）严格分开，将三者间可能发生的相互作用降至最低。
也就是说，确保文件和模板仅含有 只用于结构目的 HTML 。将所有描述性事物移至样式表，将所有行为性事物移至脚本。此外，尽可能少地连接文件和模板中的样式表和脚本，以便使接触面积最小化。
将结构、描述和行为相互分离对维护十分重要。相比对样式表和脚本进行更新，更改 HTML 文件和模板的成本往往更高。

实体引用

不要使用实体引用。
若文件、编辑器和小组之间均使用同样的编码（ UTF-8 ），则无需使用 — 、” 和 or ☺ 等实体引用。
只有 HTML 中含有特殊意义的字符（如 < 和 &）以及控制和“隐式”字符除外。

不推荐：

欧元的货币符号是： “&eur;”

推荐：

欧元的货币符号是： “€”

类型属性

忽略样式表和脚本的类型属性。
不要针对样式表和脚本使用类型属性。由于 HTML 意味着文本 /css 和文本 /javascript 为默认设置，在此类语境中无需设置类型属性。在老式浏览器中，也可以安全进行此项操作。

不推荐：

推荐：

不推荐：

推荐：

HTML 格式规则

一般格式

所有代码块、列表和表元素均需另起一行，所有子元素均需缩进。
每一个代码块、列表和表元素均需另起一行，与元素的样式相独立（因为 CSS 允许元素在每一个显示属性中担任不同的角色）。
此外，代码块、列表和表元素的子元素也需进行缩进（如果你遇到列表项间存在空白的问题，可以将所有 li 元素放置在一行）。

推荐:

    
啊！船长！我的船长！


    
啊．船长，我的船长！我们艰苦的航程已经终结，
    
这只船安然渡过了一切风浪，我们寻求的奖赏已经获得。
    
港口在望，我听见钟声在响，人们都在欢呼，
    
目迎着我们的船从容返航，它显得威严而英武。
    
可是，啊，心啊！心啊！心啊！
    
啊．殷红的鲜血长流，
    
在甲板上，那里躺着我的船长，
    
他已倒下，已死去，已冷却。
    
啊，船长，我的船长！起来吧，起来听听这钟声，
    
起来，——旌旗正为你招展——军号正为你发出颤音。
    
为你．送来了这些花束和花环。
    
为你，熙攘的群众在呼唤，转动着多少殷切的脸。
    
这里，船长！亲爱的父亲！
    
你头颅下边是我的手臂！
    
在甲板上像是在一场梦里，
    
你已倒下，已死去，已冷却。
    
我们的船长不作回答，他的双唇惨白而寂静，
    
我的父亲不能感觉我的手臂，他已没有脉息、没有知觉，
    
我们的船已安全抛锚碇泊，已经结束了它的航程，
    
胜利的船从险恶的旅途归来，我们寻求的已赢得手中。
    
欢呼吧，啊，海岸！轰鸣，啊，洪钟！
    
可是，我却轻移悲伤的步履，
    
在甲板上，那里躺着我的船长，
    
他已倒下，已死去，已冷却。


    

        

            
姓名
            
职业
        
    
    

        

            
瓦尔特·惠特曼
            
诗人
        
    

HTML 引号

在引用属性值时，使用双引号。

不推荐：

登陆

推荐：

登陆