歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

HTML5 編碼規范

在編寫HTML時,可能有一些方面不夠規范,在通過對《HTML5編碼規范》的學習後,采用代碼注解的方式,做相關的整理,方便今後回顧。

HTML5新增的標簽和廢除的標簽  http://www.linuxidc.com/Linux/2016-01/127516.htm

40 個重要的 HTML5 面試題及答案   http://www.linuxidc.com/Linux/2015-12/126824.htm

HTML5與CSS3基礎教程(第8版)中文高清版 PDF  http://www.linuxidc.com/Linux/2015-12/125734.htm

HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm 

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm 

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm 

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm 

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm 

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm 

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm 

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm 

<!DOCTYPE html> <!-- HTML5 doctype 標准模式(standard mode)的聲明,這樣能夠確保在每個浏覽器中擁有一致的展現-->
<html lang="zh-CN"> <!-- 語言屬性 有助於語音合成工具確定其所應該采用的發音,有助於翻譯工具確定其翻譯時所應遵守的規則等等 -->
<head>

    <!-- 字符編碼 通過明確聲明字符編碼,能夠確保浏覽器快速並容易的判斷頁面內容的渲染方式 -->
    <meta charset="UTF-8">

    <!-- IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。
    除非有強烈的特殊需求,否則最好是設置為 edge mode,從而通知 IE 采用其所支持的最新的模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <title>Page title</title>

    <!-- External CSS 根據 HTML5 規范,在引入 CSS 文件時一般不需要指定 type 屬性,因為 text/css 是它的默認值 -->
    <link rel="stylesheet" href="code-guide.css">

    <!-- In-document CSS -->
    <style>
        /* ... */
    </style>

    <!-- JavaScript 根據 HTML5 規范,在引入 JavaScript 文件時一般不需要指定 type 屬性,因為 text/javascript 是它的默認值 -->
    <script src="code-guide.js"></script>

</head>
<body>

<!-- 屬性順序 HTML 屬性應當按照以下給出的順序依次排列,確保代碼的易讀性。
      class
      id, name
      data-*
      src, for, type, href
      title, alt
      aria-*, role
    class 用於標識高度可復用組件,因此應該排在首位。id 用於標識具體組件,應當謹慎使用(例如,頁面內的書簽),因此排在第二位 -->
<a class="..." id="..." data-modal="toggle" href="#">
    Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

<!-- 布爾(boolean)型屬性 不用賦值 元素的布爾型屬性如果有值,就是 true,如果沒有值,就是 false -->
<select>
    <option value="1" selected>1</option>
</select>

<!-- JavaScript 放在 body 底部加載可增快頁面渲染速度 -->
<script src="code-guide.js"></script>
</body>
</html>

Copyright © Linux教程網 All Rights Reserved