HTML相關規範學習
前面的話
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='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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
