前端規範1-HTML規範

時間 2019-11-09

標籤前端規範 html 欄目 HTML 简体版

原文原文鏈接

HTML規範

1代碼風格（參1，）

使用Tab字符（四個空格長度）

層級關係太多時儘可能寫在一行，但保證每行代碼不宜過長

例，代碼不宜過長

例，儘可能寫在一行javascript

2命名（參1，）

class必須使用小寫，單詞間使用-，而不是_(下劃線)來鏈接

儘可能語義化（優先英文及英文縮寫，其次拼音，再次使用使用部件位置等方式（例如con-left））

例

id必須保證本頁面惟一

同一頁面應避免name和id命名相同（IE混淆），參1

解釋：IE6的兼容問題

3標籤（參1，）

在保證語義化與樣式的前提下，儘量的減小標籤數量

標籤名必須使用小寫（例<p></p>）

閉合標籤

另起一篇討論，連接：

標籤使用必須符合標籤嵌套規則

另起一篇討論，連接：

HTML標籤遵循標籤語義化

另起一篇討論，連接：

標籤的使用盡可能簡潔，減小沒必要要的標籤，減小層級，扁平化

4屬性名

必須使用小寫字母

屬性值必須使用雙引號，而不是單引號，參1，

自定義屬性建議使用xxx-爲前綴，推薦使用data-，參1

順序（參1，ctrl+F:屬性順序）

class

name

data-*

src, for,type,href

title,alt

aria-*,role

Boolean屬性

布爾值類型的屬性（屬性值==屬性），建議不添加屬性值

一個元素中 Boolean 屬性的存在表示取值 true，不存在則表示取值 false。

例：

5head內部標籤（參1通用）

使用<!DOCTYPE html>

使用IE Edge模式，參1（可是如今用不到該屬性，暫時保留）

建議設置<html lang="zh-CN">

利於語言工具翻譯發音

字符編碼必須是<head>標籤中的第一個<meta>

title 必須做爲 head 的直接子元素，並緊隨 charset 聲明以後。

引入CSS時必須指明rel="stylesheet"，參1

引入CSS和JS時無需指明type屬性(由於指明的值便是默認值)

JS腳本放在頁面的底部或採用異步加載

引入CSS和JavaScript 時不須要指明 type。

使用favicon，瀏覽器默認請求Web Server根目錄下的favicon.ico，必須使用如下方法的其中一種

1.在 Web Server 根目錄放置 favicon.ico 文件

2.使用 link 指定 favicon。

viewport

6註釋

註釋兩端用空格，結束註釋使用反斜槓"關閉"。

例

圖片

禁止img的src爲空，延遲加載的圖片也要有默認的src

避免加沒必要要的title屬性，爲重要圖片加alt屬性

這兩個也有異議，另起一篇討論，連接：

添加weidth和height屬性，避免頁面抖動

這裏的意思應該是在圖片未加載完時和加載完圖片後圖片尺寸變化影響頁面佈局

須要用戶下載的圖片使用img標籤而不是使用background背景圖

使用sprite雪碧圖

表單

控件標題（<label>標籤）

1.將控件置於 label 內。（推薦）

2.label 的 for 屬性指向控件的 id。

例子：

按鈕

使用button元素必須指明type屬性值（提交submit和取消button）

爲提升可訪問性重要的標籤代碼應該在前（例如提交在重置前面），使用樣式控制

在針對移動設備開發的頁面時，根據內容類型指定輸入框的 type 屬性。

當使用 JavaScript 進行表單提交時，若是條件容許，應使原生提交功能正常工做。

多媒體

音頻：MP三、WAV、Ogg

視頻：MP四、WebM、Ogg

優先使用audio和video標籤訂義音視頻，且在object標籤中指示瀏覽器不支持的標籤說明。

盡力不要自動播放。

模板

相關標籤/搜索

每日一句

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