前端工程程式碼規範（二）——HTML

micherwa發表於2018-05-26
前端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大寫，寫法見上例。

lang屬性

根據html5規範

應在html標籤上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應當怎麼去發音和翻譯。

常用的值有zh，en等，更細分的則有zh-cn(中國大陸)、zh-tw(台灣)、zh-hk(中國香港)

<!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並不需要。

<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更加具體且應該儘量少用，所以將它放在第二位。

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

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

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

一些建議

  • 儘量避免用js生成標籤，這會使得內容變得更難維護，效能也更差；
  • 在編寫HTML程式碼時，需要儘量避免多餘的父節點；
  • 儘量遵循HTML標準和語義，但是不應該以浪費實用性作為代價；
  • 任何時候都要用盡量小的複雜度和儘量少的標籤來解決問題。

目錄索引

前端工程程式碼規範（一）——命名規則與工程約定
前端工程程式碼規範（三）——CSS, SCSS
前端工程程式碼規範（四）——JS


相關文章