前端规范——HTML

HTML规范

1. 代码风格

1.1 缩进与换行

● [建议] 使用tab键作为一个缩进层级，vscode设置tabSize为2。

示例：

<!-- good -->
<div>
  <ul>
    <li>首页</li>
    <li>个人中心</li>
  </ul>
</div>

<!-- bad -->
<div>
    <ul>
      <li>首页</li>
      <li>个人中心</li>
    </ul>
</div>

1.2 命名

★ [强制] class的值必须是 kebab-case 短横拼写法

示例：

<!-- good -->
<div class="menu-item"></div>

<!-- bad -->
<div class="menuitem"></div>
<div class="menuItem"></div>

★ [强制] class命名必须具有语义化,不能以样式信息命名

示例：

<!-- good -->
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

<!-- bad -->
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>

★ [强制] id必须保证页面唯一

解释：同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。

★ [强制] 同一页面，应避免使用相同的 name 与 id

解释：IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。

1.3 标签

★ [强制] 对于自闭合标签，必须使用自闭合

示例：

<!-- good -->
<input type="text" name="title" />
<!-- bad -->
<input type="text" name="title">

★ [强制] 标签使用必须符合标签嵌套规则。

解释：比如 div 不得置于 p 中，tbody 必须置于 table 中，行内元素里面不能嵌套块级元素。

HTML 标签的使用应该遵循标签的语义。

解释：比如 div 不得置于 p 中，tbody 必须置于 table 中，行内元素里面不能嵌套块级元素。

• p - 段落
• h1,h2,h3,h4,h5,h6 - 层级标题
• strong,em - 强调
• ins - 插入
• del - 删除
• abbr - 缩写
• code - 代码标识
• ul - 无序列表
• ol - 有序列表
• dl,dt,dd - 定义列表

标签的使用应尽量简洁，减少不必要的标签。

示例：

<!-- good -->
<img class="avatar" src="image.png">
<!-- bad -->
<span class="avatar">
    <img src="image.png">
</span>

1.4 属性

● [建议] 属性名建议使用小写字母。

示例：

<table cellspacing="0">...</table>

★ [强制] 属性值必须用双引号包围。

示例：

<!-- good -->
<script src="esl.js"></script>
<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>

2. 图片

★ [强制] 2.1 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。

解释：src 取值为空，会导致部分浏览器重新加载一次当前页面。

★ [强制] 2.2 避免为 img 添加不必要的 title 属性。

解释：多余的 title 影响看图体验，并且增加了页面尺寸。

★ [强制] 2.3 为重要图片添加 alt 属性。

解释：可以提高图片加载失败时的用户体验。

★ [强制] 2.4 添加 width 和 height 属性，以避免页面抖动。

3. 表单

3.1 控件标题

★ [强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。

::: tip 有两种方式：
1.将控件置于 label 内。
2.label 的 for 属性指向控件的 id。
:::
推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。
示例：

<label>
  <input type="checkbox" name="confirm" value="on"> 我已确认上述条款
</label>
<label for="username">用户名：</label> <input type="textbox" name="username" id="username">

3.2 按钮

★ [强制] 使用 button 元素时必须指明 type 属性值。

解释：button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。
示例：

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

4.多媒体

★ [强制] 当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时，应当注意格式。

解释：

音频应尽可能覆盖到如下格式：

• MP3

• WAV

• Ogg
  视频应尽可能覆盖到如下格式：

• MP4

• WebM

• Ogg

★ [强制] 在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。

★ [强制] 在 object 标签内部提供指示浏览器不支持该标签的说明。

示例：

<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>

5.模板中的HTML

★ [强制] 模板代码的缩进优先保证 HTML 代码的缩进规则。

示例：

<!-- good -->
{if $display == true}
<div>
  <ul>
  {foreach $item_list as $item}
    <li>{$item.name}<li>
  {/foreach}
  </ul>
</div>
{/if}
<!-- bad -->
{if $display == true}
  <div>
    <ul>
  {foreach $item_list as $item}
      <li>{$item.name}<li>
  {/foreach}
    </ul>
  </div>
{/if}

★ [强制] 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。

示例：

<!-- good -->
<li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>
<!-- bad -->
<li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>

● [建议] 在循环处理模板数据构造表格时，若要求每行输出固定的个数，建议先将数据分组，之后再循环输出。

示例：

<!-- good -->
<table>
  {foreach $item_list as $item_group}
  <tr>
    {foreach $item_group as $item}
    <td>{ $item.name }</td>
    {/foreach}
  <tr>
  {/foreach}
</table>
<!-- bad -->
<table>
  <tr>
    {foreach $item_list as $item}
    <td>{ $item.name }</td>
        {if $item@iteration is div by 5}
    </tr>
    <tr>
        {/if}
    {/foreach}
  </tr>
</table>