前言
作為一個前端工程師，我們可能每天都要寫html、css、javascript，每個人寫出來的程式碼都飽含著自己的個人的style也有自己的編碼習慣和準則，下面和大家分享一下我的習慣和準則。
html
-
首先我們要對文件進行規範，就要新增<!DOCTYPE html>來對文件進行規範。關於<!DOCTYPE html> w3c有相應的說明。 傳送門
-
編碼統一採用utf-8,<meta charset=”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 檔案（無論 <link> 或 @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> -
<div>⾥可以包含<p> ，但是<p>⾥不允許包含<div>等塊級元素；<ul>和<ol>的⼦級不允許巢狀<li>以外的標籤，<dl>的⼦級不允許出現<dt>和<dd>以外的標籤；像div之類的標籤只能放在li⾥⾯；<table>的⼦級只允許巢狀<caption>, <thead>, <tfoot>, <tbody>以及<tr>標籤，<tr>的⼦級只允許巢狀<td>，<th>標籤，<td>標籤⾥可以有任意標籤存在。如以下⼏種情況都是錯誤的：
<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> -
<li>標籤必須被 <ul>或 <ol>包裹，<dt>和<dd>必須被<dl>包裹，類似的，<thead>, <tbody>等表格類標籤也不允許單獨出現。
-
<input>和<button>必須指明預設的type，<form>必須有預設的 method，這樣可避免在不同瀏覽器下產⽣⾏為上的差異。
-
為了⽅便，建議<form>需加action屬性，<input>需加 name和id屬性，並且最好有對應的<label>標籤，<option>需加value屬性，a標籤需加href屬性。
-
為增強語義化，按鈕⽤ <button> ⽽不⽤ <input>。
-
頁⾯不⽤ table 做佈局，也不要在本該⽤表格的地⽅⽤ <ul> 或其它標籤代替，table 的⽬的是⽤來顯⽰表格狀的資料。
(a) ⼀般內聯元素，包括但不限於<a>, <abbr>, <b>, <cite>, <code>, <del>, <dfn>, <em>, <i>,<img>,<input>,<ins>,<kbd>,<label>,<mark>,<q>, <samp>,<span>,<strong>, <sub>, <sup> 前後⽆需換⾏; 在塊元素或⼀些內聯塊元素，包括但不限於 <address>, <area>,<article>,<aside>,<audio>,<bdo>,<blockquote>,<body>,<button>,<canvas>, <caption>,<col>,<colgroup>,<command>,<datalist>,<dd>,<details>,<div>,<dl>, <dt>, <embed>, <filedset>, <figcaption>, <figure>, <footer>, <form>, <frame>, <frameset>,<h1>-<h6>,<head>,<header>,<hgroup>,<hr>,<html>,<iframe>,<legend>, <li>,<link>,<meta>,<meter>,<nav>,<object>,<ol>,<optgroup>,<options>,<output>, <p>, <param>, <pre>, <progress>, <ruby>, <script>, <section>, <select>, <source>, <style>, <summary>, <table>, <tbody>, <tfoot>, <thead>, <ul>, <video>, <tr>, <th>, <td>, <textarea>, <time> 前後需換⾏，中間可以不換⾏; 在 <br>, <wbr> 前⾯不換⾏， 後⾯換⾏。(b) html 程式碼採⽤4個空格縮排，不要⽤tab縮排，以保持在各個編輯器中顯⽰⼀致。
(c) 連續的多空格請使⽤ ，去除程式碼⾏尾空格。 -
合理使用換行、縮排、空格，使程式碼整潔。
-
html 功能塊之間寫明註釋，以便於此功能塊的功能說明或巢狀提⽰，註釋亦精不亦多。
<!-- START header --> <div id="header"> ... </div> <!-- END header --> -
視情況為連結新增 title，圖⽚要新增 alt 及 title。
-
把css調⽤寫在head頭部，不需預先執⾏的JS儘量寫在頁⾯尾部，不要在 html 程式碼中間插入script程式碼塊，script程式碼塊應與html之間留⼀個空⾏，script程式碼塊開頭⽆需縮排，如：
<div class="mod"> <ul class="list"> <li> <a href="">list 1</a> <a href="">list 2</a> <a href="">list 3</a> </li> </ul> </div> <script> // all javascript code function abc() { // function`s code } </script> -
不在html中混合JS及event事件。
-
明確指定圖⽚的width和 height。不僅對seo有⽤，對因各種原因⽆法顯⽰圖⽚的情況下，也能保持佈局樣式基本不變。
-
通過給元素設定⾃定義屬性來存放與JS互動的資料，屬性名格式為 data-xx(-xx)，中間⽤中 劃線連線，例如：data-lazyload-url。
-
禁⽌單獨⽤ <div> 標籤做容器，使⽤ <div> 時必須⾄少帶有⼀個類名。更不要它代替<p>標籤，因為 <div> 標籤沒有明確的含義，應該根據各標籤的語義，做到該⽤什麼標籤就⽤什麼標籤。