前端工程代碼規範（二）——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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。