前端工程代码规范（二）——HTML

时间 2019-11-06

标签前端工程代码规范 html 栏目 HTML 繁體版

原文原文链接

总原则

缩进使用soft tab（4个空格）；
属性名全小写，用中划线作分隔符；
在属性上，使用双引号，而非单引号；
不要在自动闭合标签结尾处使用斜线。

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        <img src="xxx/xxx.png" alt="Company">

        <input type="text" value="xxx">
    </body>
</html>

HTML5 doctype

在页面顶部，用doctype来启用标准模式，使得每一个浏览器的展示都尽量地保持一致。虽然doctype不区分大小写，可是按照惯例，doctype大写，写法见上例。javascript

lang属性

根据html5规范css

应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。

经常使用的值有zh，en等，更细分的则有zh-cn(中国大陆)、zh-tw(中国台湾)、zh-hk(中国香港)html

<!DOCTYPE html>
<html lang="en-us">
    ...
</html>

字符编码与IE兼容模式

经过声明一个明确的字符编码，让浏览器轻松、快速的肯定适合网页内容的渲染方式，一般指定为'UTF-8'。
用 <meta>标签能够指定页面应该用什么版本的IE来渲染，不一样doctype在不一样浏览器下会触发不一样的渲染模式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>
    ...
</html>

引入CSS，JS

根据html5规范前端

一般在引入CSS和JS时不须要指明 type，由于 text/css 和 text/javascript 分别是他们的默认值。

<!-- External CSS -->
<link rel="stylesheet" href="xxx.css">

<!-- In-document CSS -->
<style>
    ...
</style>

<!-- External JS -->
<script src="xxx.js"></script>

<!-- In-document JS -->
<script>
    ...
</script>

boolean属性

boolean属性指不须要声明取值的属性，XHTML须要每一个属性声明取值，可是HTML5并不须要。html5

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

属性顺序（`推荐`）

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是为高可复用组件设计的，因此应处在第一位；
id更加具体且应该尽可能少用，因此将它放在第二位。java

<a class="..." id="..." data-modal="toggle" href="#">xxx</a>

<input class="form-control" type="text">

<img src="..." alt="...">

一些建议

尽可能避免用js生成标签，这会使得内容变得更难维护，性能也更差；
在编写HTML代码时，须要尽可能避免多余的父节点；
尽可能遵循HTML标准和语义，可是不该该以浪费实用性做为代价；
任什么时候候都要用尽可能小的复杂度和尽可能少的标签来解决问题。

目录索引

前端工程代码规范（一）——命名规则与工程约定
 前端工程代码规范（三）——CSS, SCSS
前端工程代码规范（四）——JSsegmentfault