TOP

HTML規范(一)
2017-10-10 16:46:08 】 瀏覽:10163
Tags:

前面的話

  HTML是描述網頁結構的超文本標記語言,HTML規范能夠使HTML代碼風格保持一致,使得HTML更容易理解和維護。本文將詳細介紹HTML規范

 

整體結構

【頁面頭部】

  1、文件應以“<!DOCTYPE ......>”首行頂格開始,推薦使用“<!DOCTYPE html>”

<!DOCTYPE html>

  2、必須聲明文檔的編碼charset,且與文件本身編碼保持一致,指定字符編碼的 meta 必須是 head 的第一個直接子元素。推薦使用UTF-8編碼<meta charset="utf-8">

<meta charset="utf-8">

  3、根據頁面內容和需求填寫適當的keywords和description

<meta name="description" content="不超過150個字符">
<meta name="keywords" content="">

  4、頁面title是不可缺少的一項,title 必須作為 head 的直接子元素,并緊隨 charset 聲明之后

<head>
    <meta charset="UTF-8">
    <title>頁面標題</title>
</head>

【資源引入】

  1、保證 favicon 可訪問

<link rel="shortcut icon" href="path/to/favicon.ico">

  2、引入 CSS 和 java script 時無須指明 type 屬性

  3、引入 CSS 時必須指明 rel="stylesheet"

<link rel="stylesheet" href="page.css">

  4、使用link將css文件引入,并置于head中;使用script將js文件引入优乐棋牌app下载,并置于body底部

  5、移動環境或只針對現代瀏覽器設計的 Web 應用,如果引用外部資源的 URL 協議部分與頁面相同,建議省略協議前綴。這是因為使用 protocol-relative URL 引入 CSS,在 IE7/8 下优乐棋牌app下载,會發兩次請求。是否使用 protocol-relative URL 應充分考慮頁面針對的環境

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

【結構優化】

  1、盡量遵循 HTML 標準和語義,但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度

  2、結構順序和視覺順序基本保持一致,按照從上至下、從左到右的視覺順序書寫HTML結構。有時為了便于搜索引擎抓取,也會將重要內容在HTML結構順序上提前

  3、結構、表現、行為三者分離,避免內聯

  4、每一個塊級元素都另起一行,每一行都使用Tab縮進對齊(head和body的子元素不需要縮進)。刪除冗余的行尾空格

  5、對于內容較為簡單的表格,建議將tr寫成單行

  6、可以在大的模塊之間用空行隔開,使模塊更清晰

 

代碼格式

【縮進】

  使用4個空格代替1個Tab(大多數編輯器中可設置)

<ul>
    <li>first</li>
    <li>second</li>
</ul>

【命名】

  1、class 必須單詞全字母小寫,單詞間以 - 分隔

  2、class 必須代表相應模塊或部件的內容或功能优乐棋牌app下载,不得以樣式信息進行命名

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

  3、同一頁面,應避免使用相同的 name 與 id。因為IE7-瀏覽器會混淆元素的 id 和 name 屬性, document.getElementById 可能獲得不期望的元素。所以在對元素的 id 與 name 屬性的命名需要非常小心

【標簽】

  1、標簽名必須使用小寫字母

  2、對于無需自閉合的標簽,不需要自閉合

  3、對 HTML5 中規定允許省略的閉合標簽,不允許省略閉合標簽

  4、HTML 標簽的使用應該遵循標簽的語義,且要符合標簽嵌套規則

<!-- good -->
<p>Hello StyleGuide!</p>
<!-- bad -->
<P>Hello StyleGuide!</P>

<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" />

<!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>
<!-- bad -->
<ul>
    <li>first
    <li>second
</ul>

【注釋】

  采用類似標簽閉合的寫法,與HTML統一格式;注釋文案兩頭空格,與CSS注釋統一格式

  開始注釋:<!-- 注釋文案 -->(文案兩頭空格)

  結束注釋:<!-- /注釋文案 -->(文案前加“/”符號,類似標簽的閉合)

  允許只有開始注釋

<!-- 頭部 -->
<div class="g-hd">
    <!-- LOGO -->
    <h1 class="m-logo"><a href="#">LOGO</a></h1>
    <!-- /LOGO -->
    <!-- 導航 -->
    <ul class="m-nav&q  
		

請關注公眾號獲取更多資料



首頁 上一頁 1 2 下一頁 尾頁 1/2/2
】【打印繁體】【】【】 【】【】【】 【關閉】 【返回頂部
上一篇CSS深入理解學習筆記之border 下一篇不同布局屬性瀏覽器兼容性匯總