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>
#【註解】
採用類似標籤閉合的寫法,與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='esl.js'></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中文網其他相關文章!