编码器的作用和功能_HTML编码规范

1 前言

HTML作为一种描述网页结构的超文本标记语言，在百度得到了广泛的应用。本文档的目标是使HTML代码风格一致，易于理解和维护。

2 代码风格 2.1 缩进和换行 [强制] 使用4个空格作为缩进级别，不允许使用2个空格或制表符。

说明：对于非HTML标签之间的缩进，如or style标签内容的缩进，与or style标签的缩进处于同一级别。

例子：

    
first
    
second

[建议] 每行限制为 120 个字符。

解释：

太长的代码难以阅读和维护。但考虑到HTML的特殊性，没有硬性要求。

2.2 命名【强制】类必须全部小写字母，单词之间必须用-分隔。 【强制】类必须代表相应模块或组件的内容或功能，并且不能使用样式信息命名。

例子：

[强制] 元素id在页面中必须是唯一的。

解释：

同一个页面中，不同元素包含相同的id，不符合id的属性含义。并使用 .可能会导致难以追踪的问题。

【建议】建议id中所有单词都小写，单词之间用-分隔。同一项目的风格必须一致。 【建议】id和class名尽量短，同时避免冲突，描述清楚。

例子：

[强制] 禁止为钩子脚本创建没有样式信息的类。

解释：

类不允许仅用于选择某些元素。类应该具有清晰的语义和风格。否则很容易导致CSS类泛滥。

使用id和属性选择作为钩子是更好的方法。

[强制]避免在同一页面使用相同的名称和id。

解释：

会混淆元素的 id 和 name 属性，您可能会得到意想不到的元素。因此，在命名元素的 id 和 name 属性时需要非常小心。

一个好的做法是对 id 和 name 使用不同的命名法。

例子：

2.3 标签 【强制】标签名称必须使用小写字母。

例子：

Hello StyleGuide!
Hello StyleGuide!

【强制】不需要自动关闭的标签不允许自动关闭。

解释：

常见的不需要自关闭的标签有input、br、img、hr等。

例子：

【强制】对于HTML5中允许省略的结束标签，不允许省略结束标签。

解释：

对于代码大小要求非常严格的场景可以例外。例如：第三方页面使用的传送系统。

例子：

    
first
    
second


    
first
    
second

【强制】标签使用必须符合标签嵌套规则。

解释：

例如div不能放在p中，tbody必须放在table中。

详细的标签嵌套规则请参见HTML DTD中的定义部分。

【建议】HTML标签的使用应遵循标签的语义。

解释：

以下是常见的标签语义

例子：

Esprima serves as an important building block for some JavaScript language tools.
Esprima serves as an important building block for some JavaScript language tools.

【建议】当CSS可以达到同样的要求时，不应该使用表格进行布局。

解释：

只要兼容性允许，就应该保持语义正确性。对于网格对齐和可拉伸性有严格要求的场景，例如多列的复杂表单，可以例外。

【建议】标签的使用应尽可能简洁，减少不必要的标签。

例子：

2.4 属性 【强制】属性名称必须使用小写字母。

例子：

...
...

[强制] 属性值必须用双引号引起来。

解释：

不允许使用单引号，也不允许使用引号。

例子：

【建议】对于类型属性，建议不要添加属性值。

例子：

【建议】建议自定义属性以xxx-为前缀，推荐以data-为前缀。

解释：

使用前缀有助于区分自定义属性和标准定义的属性。

例子：

3 概述 3.1 【强制】使用HTML5启用标准模式。建议使用大写。

例子：

[建议] 启用 IE Edge 模式。

例子：

[建议] 在 html 标签上设置正确的 lang 属性。

解释：

帮助提高页面的可访问性，例如让语音合成工具确定它应该使用的发音，让翻译工具确定它应该翻译成的语言等。

例子：

3.2 编码 【强制】页面必须使用缩写形式并明确指定字符编码。指定字符编码的元必须是 head 的第一个直接子元素。

解释：

请参阅文章可以使用 HTML5 吗？

例子：

    
        
        ......
    
    
        ......
    

[建议] HTML 文件使用BOM-free UTF-8 编码。

解释：

UTF-8编码具有更广泛的适应性。在使用程序或工具处理文件时，BOM 可能会造成不必要的干扰。

3.3 CSS及引入 【强制】引入CSS时，必须指定rel=""。

例子：

【建议】引入CSS时无需指定type属性。

解释：

text/css和text/是type的默认值。

[建议] 将表示定义放在外部 CSS 中，将行为定义放在外部 CSS 中。

解释：

结构-风格-行为的代码分离有利于提高代码的可读性和可维护性。

【建议】在head中引入页面所需的所有CSS资源。

解释：

在页面渲染过程中，新的CSS可能会导致元素的样式被重新计算和绘制，从而导致页面闪烁。

【建议】应该放在页面末尾，或者异步加载。

解释：

将其放置在页面中间会阻塞页面的渲染。出于性能原因，除非必要，否则请遵循此建议。

例子：

[建议] 对于移动环境或仅为现代浏览器设计的 Web 应用程序，如果引用外部资源的 URL 的协议部分与页面相同，建议省略协议前缀。

解释：

使用-URL来引入CSS。在IE7/8下，会发送两个请求。是否使用 - URL 应考虑页面的预期上下文。

例子：

4 head4.1 title [强制] 页面必须包含title标签来声明标题。 [强制] title 必须是 head 的直接子元素，并且紧跟在声明之后。

解释：

如果标题中包含ASCII以外的字符，浏览器在解码之前需要知道字符编码类型，否则可能会造成乱码。

例子：

4.2 【强制】保证无障碍。

解释：

如果未指定，大多数浏览器将请求 Web 根目录中的 .ico。为了确保可访问性并避免 404，必须遵循以下两种方法之一：

将 .ico 文件放置在 Web 根目录中。使用链接来指定。

例子：

4.3 【建议】如果页面想要适合移动端，需要指定页面。

解释：

meta标签可以设置可视区域的宽度和初始缩放大小，以避免移动设备上页面显示异常。

例如，当页面宽度小于980px时，如果你想对iOS设备友好，你应该设置宽度值以适应你的页面宽度。同时，由于不同的移动设备分辨率不同，设置时应使用-width和-变量。

另外，为了正常工作，页面内容样式布局设计也必须进行相应调整，例如避免绝对定位等，更多信息请参考Web Guide的介绍

5 图片 【强制】img src 值禁止为空。延迟加载图片还需要添加默认src。

解释：

如果 src 值为空，某些浏览器将重新加载当前页面。参考： ＃

[建议] 避免给img添加不必要的title属性。

解释：

多余的标题影响图片观看体验并增加页面大小。

[建议] 为重要图片添加alt属性。

解释：

可以改善图片加载失败时的用户体验。

[建议] 添加宽度和属性以避免页面晃动。 【建议】需要下载的图片使用img标签，不需要下载的图片使用CSS背景图片。

解释：

产品标志、用户头像、用户生成的图片等有潜在下载需求的图片都以img的形式实现，可以方便用户下载。不需要下载的图片，比如图标、背景、代码中使用的图片等，尽量使用CSS背景图片来实现。 6 表格 6.1 控件标题 [强制] 具有文本标题的控件必须使用 label 标记将其与其标题关联起来。

解释：

有两种方法：

将控件放置在标签内。 label的for属性指向控件的id。

推荐使用第一种方法，减少不必要的ID。如果 DOM 结构不允许直接嵌套，则应使用第二种。

例子：

 我已确认上述条款
用户名： 

6.2 按钮 【强制】使用元素时必须指定type属性值。

解释：

该元素的默认类型是，如果放置在表单元素内，单击将导致表单被提交。为了显示和区分其功能以便于理解，必须给出type属性。

例子：

<button type="submit">提交
取消

【建议】尽量不要使用按钮元素的name属性。

解释：

由于浏览器兼容性问题，使用按钮的name属性会导致很多难以发现的问题。具体情况请参考本文。

6.3 辅助功能（A11Y） [建议] 负责主要功能的按钮应放在 DOM 的最前面。

解释：

负责主要功能的按钮应该相对靠近前面，以提高可访问性。如果在CSS中指定float:right，可能会导致主按钮在视觉上位于前面，但在DOM中位于后面。

例子：

    

        提交
        取消
    



    取消
    提交

【建议】使用表单提交时，条件允许的情况下应使原生提交功能正常工作。

解释：

当浏览器JS运行不正常或者JS关闭时，提交功能将不起作用。如果正确指定了表单元素的属性和表单控件的名称属性，则提交仍然可以继续进行。

例子：

<form action="/login" method="post">
    

    

【建议】开发移动设备页面时，根据内容类型指定输入框的type属性。

解释：

根据内容类型指定输入框类型，以获得友好的输入体验。

例子：

7 多媒体 【建议】在现代浏览器中使用音频和视频标签播放音频和视频时，应注意格式。

解释：

音频应尽可能涵盖以下格式：

视频应尽可能涵盖以下格式：

【建议】在支持HTML5的浏览器中优先使用音频和视频标签来定义音频和视频元素。 [建议] 使用回归插件来支持多种浏览器。

例子：

[建议] 仅在必要时启用音频和视频的自动播放。 [建议] 在标签内提供注释，表明浏览器不支持该标签。

例子：

8 模板中的HTML 【建议】模板代码的缩进首先要保证HTML代码的缩进规则。

例子：

{if $display == true}

    

    {foreach $item_list as $item}
        
{$item.name}

    {/foreach}
    

{/if}
{if $display == true}
    

        

    {foreach $item_list as $item}
        
{$item.name}

    {/foreach}
        
    
{/if}

【建议】模板代码的基本原则应该是保证单个HTML标签语法的正确性。

例子：

{ $item.type_name }
{ $item.type_name }

【建议】循环处理模板数据建表时，如果要求每行输出固定数量，建议先将数据分组，然后循环输出。

例子：

    {foreach $item_list as $item_group}
    
        {foreach $item_group as $item}
        
        {/foreach}
    
    {/foreach}
{ $item.name }


    {foreach $item_list as $item}
    
        {if $item@iteration is div by 5}
    
        {/if}
    {/foreach}

{ $item.name }