首頁 >web前端 >html教學 >HTML相關規範學習

HTML相關規範學習

巴扎黑
巴扎黑原創
2017-07-19 16:43:571198瀏覽

前面的話

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

 

整體結構

【頁面頭】

  1、文件應以「」首行頂格開始,建議使用「<!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 與 JavaScript 時無須指明 type 屬性

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

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

  4、使用link將css檔案引入,並置於head中;使用script將js檔案引入,並置於body底部

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

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js?1.1.11"></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 必須代表對應模組或部件的內容或功能,不得以樣式資訊命名

<!-- 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標籤的使用應該遵循標籤的語義,且要符合標籤巢狀規則

Hello StyleGuide!

Hello StyleGuide!

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

#【註解】

  採用類似標籤閉合的寫法,與HTML統一格式;註釋文案兩頭空格,與CSS註解統一格式

  開始註解:(文案兩頭空格)

  結束註解:(文案前加上「/」符號,類似標籤的閉合)

  允許只有開始註解

<!-- 头部 --><div class="g-hd"><!-- LOGO --><h1 class="m-logo"><a href="#">LOGO</a></h1><!-- /LOGO --><!-- 导航 --><ul class="m-nav"><li><a href="#">NAV1</a></li><li><a href="#">NAV2</a></li><!-- 更多导航项 --></ul><!-- /导航 --></div><!-- /头部 -->

【屬性】

  1、屬性和值全部小寫

  2、屬性值必須用雙引號包圍

  3、布林類型的屬性,建議不添加屬性值

#  4、自訂屬性建議以 xxx- 為前綴,建議使用 data-

  5、可以省略style標籤和script標籤的type屬性

<!-- good --><table cellspacing="0">...</table><!-- bad --><table cellSpacing="0">...</table><!-- good --><script src="esl.js?1.1.11"></script><!-- bad --><script src=&#39;esl.js&#39;></script><script src=esl.js></script>

【屬性順序】

  HTML 屬性應該按照特定的順序出現以保證易讀性

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

 

特殊元素

【图片】

  1、禁止 img 的 src 取值为空,否则会导致部分浏览器重新加载一次当前页面

  2、为图片添加 alt 属性,提高图片加载失败时的用户体验

  3、避免为 img 添加不必要的 title 属性,多余的 title 影响看图体验,并且增加了页面尺寸

  4、为图片添加 width 和 height 属性,以避免页面抖动

<img src="#" alt="#" width="#" height="#">

  5、有下载需求的图片采用 img 标签实现,无下载需求的图片采用 CSS 背景图实现

  产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片,以 img 形式实现,能方便用户下载

  无下载需求的图片,比如:icon、背景、代码使用的图片等,尽可能采用 css 背景图实现

【表单】

  1、有文本标题的控件使用 label 标签将其与其标题相关联。最好将控件置于 label 内,以减少不必要的 id

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

  2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit,如果被置于 form 元素中,点击后将导致表单提交

<button type="submit">提交</button><button type="button">取消</button>

  3、在针对移动设备开发的页面时,根据内容类型指定输入框的 type 属性,能获得友好的输入体验

<input type="date">

【多媒体】

  1、在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素,并使用退化到插件的方式来对多浏览器进行支持

<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"><object width="100" height="50" data="audio.mp3"><embed width="100" height="50" src="audio.swf"></object></audio><video width="100" height="50" controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg"><object width="100" height="50" data="video.mp4"><embed width="100" height="50" src="video.swf"></object></video>

  2、只在必要的时候开启音视频的自动播放

 

以上是HTML相關規範學習的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn