首頁 >web前端 >html教學 >前端編碼習慣 —— html篇

前端編碼習慣 —— html篇

高洛峰
高洛峰原創
2017-02-14 16:05:441095瀏覽

前言

作為一個前端工程師,我們可能每天都要寫html、css、javascript,每個人寫出來的程式碼都飽含著自己的個人的style也有自己的編碼習慣和準則,下面和大家分享一下我的習慣和準則。

html

首先我們要對文檔進行規範,就要添加來對文檔進行規範。關於 w3c有對應的說明。

編碼統一採用utf-8,即可

頁中引css樣式或js時,不需要加上類型聲明。如:

<link rel="stylesheet" href="..."> 
<style>...</style> 
<script src="..."></script>     
<script></script>

省略圖片、樣式、腳本以及其他媒體文件 URL 的協議部分(http:,https:),除非文件在兩種協議下都不可用。這種方案稱為 protocol-relative URL,相對協定URL。好處是無論你是使用 HTTPS 還是 HTTP 存取頁面,瀏覽器都會以相同的協定請求頁面中的資源,同時可以節省一部分位元組。瀏覽器遇到相對 URL,會根據目前的網頁協議,自動在 // 前面加上相同的協議。如當前網頁是 http 訪問,那麼所有的相對引用 // 都會變成http://。 https 同理。如果你在本地查看,協議就會變成 file://。這種用法幾乎所有的瀏覽器都能支持,只有在 IE7/8 下會有一點小問題,就是透過相對 URL 引用的 CSS 檔案(無論 或 @import )會被下載兩次。所以對性能有一點影響。

<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
  background: url("https://www.google.com/images/example");
}
/* Recommended */
.example {
  background: url("//www.google.com/images/example");
}

標籤、屬性、屬性名稱全部⼩寫,屬性值⽤"" (雙引號) 引起來,每個雙標籤務必加對應的結束標籤(單標籤不遵循此標準,仍按原html 標準,即不需要以"/>"結束)。提醒:IE 下的頁⾯變形很多都與標籤未閉合或嵌套錯誤有關係。

標籤要依序合理嵌套.如:

<p><b></p></b>
需修改为:
<p><b></b></p>

⾥可以包含

,但是

⾥不允許包含

等區塊級元素;
    的⼦級不允許嵌套
  1. 以外的標籤,
    的⼦級不允許出現
    以外的標籤;像div之類的標籤只能放在li⾥⾯;的⼦級只允許嵌套, , 以及標籤,的⼦級只允許嵌套, 等表格類別標籤也不允許單獨出現。

    為了⽅便,建議

    需加action屬性,需加name和id屬性,並且最好有對應的
    ,
    標籤, 標籤⾥可以有任意標籤存在。如以下⼏種情況都是錯誤的:
    <table> 
        <input type="hidden"> 
        <tr>
            <td></td>
            <p></p>
        </tr> 
    </table>
    <ul> 
        <li></li> 
        <div></div> 
    </ul>
    
    需改为:
    <table>         
        <tr>
            <td><input type="hidden"> </td>
            <p></p>
        </tr> 
    </table>
    <ul> 
        <li><div></div></li>          
    </ul>

  2. 標籤必須被
      包裹,
      必須被
      包裹,類似的,
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:HTML學習筆記下一篇:HTML學習筆記