html編程規範-借鑑淘寶的KISSY

時間 2019-11-10

標籤 html 編程規範借鑑淘寶 kissy 欄目 HTML 简体版

原文原文鏈接

基本規範

語義

使用符合語義的標籤書寫html文檔，選擇恰當的元素表達所需的含義。 javascript

大小寫

元素的標籤和屬性必須小寫，屬性值必須加雙引號。 css

縮進

使用四個空格來表示縮進，不要使用tab鍵
在塊狀元素，列表，表格元素使用新行，而且對它的子元素進行縮進。

空格

除去沒必要要的空格 html

嵌套

元素嵌套遵循HTML Script嵌套規則，只用firefox的插件：HTML Validator 進行檢查。 java

正確區分自閉合元素和非自閉合元素。瀏覽器

引號

使用雙引號來標識html的屬性工具

自定義屬性

經過給元素設置自定義屬性來存放與javascript交互的數據，屬性名格式爲data-xx 佈局

DOCTYPE

頁面文檔類型統一使用HTML5 DOCTYPE. 編碼

編碼

推薦使用utf-8編碼 url

註釋

建議對超過十行的頁面模塊進行註釋，以下降開發人員的嵌套成本和後期維護的成本。 spa

協議

若是鏈接和當前頁面所使用的協議一致則忽略鏈接的協議的部分

TODO

使用TODO來標記待作的事情，便於後期搜索

在TODO後添加（姓名）來表示分類

焦點分離

將表現，行爲和結構分離，不要在html和模版中加入除告終構之外的東西。

在文檔中引入儘量少的樣式和腳本。

元素

結構性元素

P表示段落，只能包含內聯元素，不能包含塊級元素。
div自己沒有特殊意義，可用於佈局，幾乎能夠包含任何元素
br表示換行符
hr表示水平分割線
h1-h6表示標題，其中h1表示當前頁面最重要的內容的標題
blockquote表示引用，能夠包含多個段落，請勿純粹爲了縮進而使用blockquote，大部分瀏覽器默認將blockquote渲染成帶有左右縮進
pre表示一段格式化好的文本

頭部元素

title,每一個頁面必須有並且只能有一個title元素
base可用場景：首頁，頻道等大部分連接都爲新窗口打開的頁面
link，link引入css資源，可省去media和type屬性，須要有rel屬性
stype，type默認爲text/css 能夠省略
script type屬性能夠省略

文本元素

a:a存在href屬性的時候表示連接，無href可是有name屬性表示瞄
em,strong : em表示句意強調，加與不加會引發語義變化，可用於表示不一樣的心情或者語調；strong表示重要性的強調，可用於局部或者全局，strong強調的是重要性，不會改變句意。
abbr表示縮進
sub,sup主要用於數學和化學公式，sup還能夠用於腳註
span自己沒有特殊含義
ins.del 分別表示從文檔中增長（插入）和刪除。

媒體元素

img:請勿將img元素做爲定位佈局的工具，不要用他來顯示空白圖片，給img元素添加alt屬性
object:能夠用來插入flash

列表元素

dl表示關聯列表，dd是對dt的解釋，dt和dd的對應關係比較隨意。一個dt對應多個dd,多個dt對應一個dd,多個dt對應多個dd；能夠用於名詞/單詞解釋，日程列表，站點目錄
ul:用於無序列表
ol:表示有序列表，可用於排行榜等
li表示列表項，必須是ul和ol的子集

表單元素

推薦使用bottom代替input，可是必須聲明type
推薦使用fieldset，legend組織表單
表單元素的name不能設置爲action,enctype,method,novalidate,target,submit會致使表單提交混亂的。

文檔模版

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Sample page</title>
        <link rel="stylesheet" href="css_example_url" />
    </head>
    <body>
        <div id="page">
            <div id="header">
                頁頭
            </div>
            <div id="content">
                主體
            </div>
            <div id="footer">
                頁尾
            </div>
        </div>
        <script src="js_example_url"></script>
        <script>
        // 你的代碼
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

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