HTML编写规范

时间 2019-11-17

标签 html 编写规范栏目 HTML 繁體版

原文原文链接

一、代码风格

1.1 缩进与换行`与css同样`

1.2 命名

class必须单词所有字母小写，单词间以-分隔
class必须表明相应模块或部件的内容或功能，不得以样式信息进行命名

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>
复制代码

元素ID必须保证页面惟一同一个页面中，不一样的元素包含相同的 id，不符合 id 的属性含义。而且使用 document.getElementById 时可能致使难以追查的问题。
ID必须使用驼峰命名法
ID，class命名，在避免冲突并描述清楚的前提下尽量短

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>
复制代码

同一页面，应避免使用相同的name与ID

IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能得到不指望的元素。因此在对元素的 id 与 name 属性的命名须要很是当心。css

<input name="foo">
<div id="foo"></div>
<script>
// IE6 将显示 INPUT
alert(document.getElementById('foo').tagName);
</script>
复制代码

1.3 标签

标签名必须使用小写字母html

<p>Hello world!</p>
复制代码

对于无需自闭和的标签，不容许自闭和jquery

常见无需自闭和的标签有input、br、img、等编程

<input type="text" name="title">
复制代码

除HTML5 中规定容许省略的闭合标签外，其余不容许省略闭合标签。（对代码体积要求很是严苛的场景，能够例外）浏览器

<!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>

<!-- bad -->
<ul>
    <li>first
    <li>second
</ul>
复制代码

标签使用必须符合标签嵌套规则bash

好比：div不得置于p中，tbody必须置于table中异步

在css能够实现相同需求的状况下不得使用表格进行布局ide

在兼容性容许的状况下应尽可能保持语义正确性。对网格对齐和拉伸性有严格要求的场景容许例外，如多列复杂表单。工具

标签的使用应尽可能简洁，减小没必要要的标签布局

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

<!-- bad -->
<span class="avatar">
    <img src="image.png">
</span>
复制代码

1.4 属性

属性名必须使用小写字母

<!-- good -->
<table cellspacing="0">...</table>

<!-- bad -->
<table cellSpacing="0">...</table>
复制代码

属性值必须使用双引号包围

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

<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>
复制代码

布尔类型的属性，建议不添加属性值

<input type="text" disabled>
<input type="checkbox" value="1" checked>
复制代码

自定义属性推荐使用data-

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

<ol data-ui-type="Select"></ol>

1.5 语义化

咱们一直都在说语义化编程，语义化编程，可是在代码中不多有人彻底使用正确的元素。使用语义化标签也是有理由SEO的。

语义化是指：根据元素其被创造出来时的初始意义来使用它。意思就是用正确的标签干正确的事，而不是只有div和span。

二、通用

2.1 DOCTYPE

使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。

<!DOCTYPE html>
复制代码

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

有助于提升页面的可访问性，如：让语音合成工具肯定其所应该采用的发音，令翻译工具肯定其翻译语言等。

<html lang="zh-CN">
复制代码

2.2 `CSS`和`js`引入

引入css时必须指明rel="stylesheet"
引入css和js时无须指明type属性
样式放置于外部css中，功能放置于外部js中

结构-样式-行为的代码分离，对于提升代码的可阅读性和维护性都有好处。一、不使用超过一到两张样式表二、不使用超过一到两个脚本（学会用合并脚本）三、不使用行内样式（<style>.no-good {}</style>） 四、不在元素上使用 style 属性（<hr style="border-top: 5px solid black">） 五、不使用行内脚本（<script>alert('no good')</script>） 六、不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>） 七、不使用表象 class 名（i.e. red, left, center）

在head中引入页面须要的全部css资源

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

js应当放在页面的末尾，或采用异步加载
移动环境或只针对现代浏览器设计的 Web 应用，若是引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
复制代码

图片和 SVG 图形能被引入到 HTML 中的惟一理由是它们呈现出了与内容相关的一些信息。

三、head

3.1 title

页面必须包含title标签声明标题
title必须做为head的直接子元素，并紧随charset声明以后

3.2 favicon

保证favicon可访问

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循如下两种方法之一：一、在 Web Server 根目录放置 favicon.ico 文件。二、使用 link 指定 favicon。

<link rel="shortcut icon" href="path/to/favicon.ico">
复制代码

3.3 viewport

若页面须要在移动设备上使用，需设置viewport

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

四、图片

禁止img的src取值为空，延迟加载的图片也要增长默认的src

src 取值为空，会致使部分浏览器从新加载一次当前页面

避免为img添加没必要要的title属性

多余的title影响看图体验，而且增长了页面尺寸

为重要图片添加alt属性。

能够提升图片加载失败时的用户体验

添加width和height属性，以免页面抖动有下载需求的图片采用 img 标签实现，无下载需求的图片采用CSS 雪碧图实现。

一、产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载。二、无下载需求的图片，好比：icon、背景、代码使用的图片等，尽量采用 css 雪碧图实现。

四、表单

4.1 控件标题

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

有两种方式：一、将控件置于 label 内。二、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">
复制代码

4.2 按钮

使用button元素时必须指明type属性值 button 元素的默认 type 为 submit，若是被置于 form 元素中，点击后将致使表单提交。为显示区分其做用方便理解，必须给出 type 属性。

<button type="submit">提交</button>
<button type="button">取消</button>
复制代码

尽可能不要使用按钮类元素的name属性因为浏览器兼容性问题，使用按钮的name属性会带来许多难以发现的问题，具体状况可参照http://w3help.org/zh-cn/causes/CM2001

4.3 可访问性

负责主要功能的按钮在DOM中的顺序应靠前负责主要功能的按钮应相对靠前，以提升可访问性。若是在 CSS 中指定了 float: right 则可能致使视觉上主按钮在前，而 DOM 中主按钮靠后的状况。

<!-- good -->
<style>
.buttons .button-group {
    float: right;
}
</style>

<div class="buttons">
    <div class="button-group">
        <button type="submit">提交</button>
        <button type="button">取消</button>
    </div>
</div>

<!-- bad -->
<style>
.buttons button {
    float: right;
}
</style>

<div class="buttons">
    <button type="button">取消</button>
    <button type="submit">提交</button>
</div>
复制代码

在针对移动设备开发的页面时，根据内容类型指定输入框的 type属性。根据内容类型指定输入框类型，能得到能友好的输入体验。

<input type="date">
复制代码

五、多媒体

当在现代浏览器中使用 audio以及 video 标签来播放音频、视频时，应当注意格式。音频应尽量覆盖到以下格式：

视频应尽量覆盖到以下格式：

MP4
WebM
Ogg

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

只在必要的时候开启音视频的自动播放。