HTML相關規範學習

前面的話

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

 

整體結構

【頁面頭】

　　1、文件應以「.. ...>」首行頂格開始，建議使用「」

nbsp;html>

　　2、必須聲明文件的編碼charset，且與文件本身編碼保持一致，指定字元編碼的 meta 必須是 head 的第一個直接子元素。建議使用UTF-8編碼

<meta>

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

#

<meta><meta>

　　4、頁title是不可缺少的一項，title 必須作為 head 的直接子元素，並且緊接著 charset 聲明之後

<meta>

【資源引入】

　　1、保證 favicon 可存取

#

<link>

　　2 、引入 CSS 與 JavaScript 時無須指明 type 屬性

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

<link>

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

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

<script></script>

【結構最佳化】

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

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

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

　　4、每一個區塊等級元素都另起一行，每一行都使用Tab縮排對齊（head和body的子元素不需要縮排）。刪除冗餘的行尾空格

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

　　6、可以在大的模組之間用空行隔開，使模組更清楚

 

程式碼格式

【縮排】

　　使用4個空格取代1個Tab（大多數編輯器中可設定）

• first
• second

【命名】

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

　　2、class 必須代表對應模組或部件的內容或功能，不得以樣式資訊命名

<!-- good --><div></div><!-- bad --><div></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><!-- bad --><input><!-- good -->

• first
• second

• first
• second

#【註解】

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

　　開始註解：（文案兩頭空格）

　　結束註解：（文案前加上「/」符號，類似標籤的閉合）

　　允許只有開始註解

<!-- 头部 --><div>
<!-- LOGO --><h1 id="a-LOGO-a"><a>LOGO</a></h1>
<!-- /LOGO --><!-- 导航 --><ul>
<li><a>NAV1</a></li>
<li><a>NAV2</a></li>
<!-- 更多导航项 -->
</ul>
<!-- /导航 -->
</div><!-- /头部 -->

【屬性】

　　1、屬性和值全部小寫

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

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

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

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

<!-- good -->

... ... <!-- good --><script></script><script></script><script></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="/static/imghwm/default1.png" data-src="#" class="lazy" alt="HTML相關規範學習" >

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

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

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

【表单】

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

<label><input> 我已确认上述条款</label>

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

<button>提交</button><button>取消</button>

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

<input>

【多媒体】

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

<audio><source><source><object><embed></embed></object></source></source></audio><video><source><source><object><embed></embed></object></source></source></video>

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

 

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