整理了HTML編碼的一些東西，鑑於這東西已經被很多人都說過了，我這裏算是個總結吧，後面部分會添加一些自己想說的東西。
1、<!DOCTYPE HTML>
讓瀏覽器自己選擇渲染頁面的標準，同時爲了擁抱未來
2、<meta charset="utf-8" />
定義頁面字符編碼，精簡的代碼，同樣的效果
3、樣式文件放頭部，且儘量減少引入的文件數量
<head>
<!--CSS樣式-->
<link rel="stylesheet" href="xxx.min.css" />
</head>
複製代碼
4、腳本文件放底部，當發佈項目的時候儘量壓縮合並
<body>
<!--JS代碼-->
<script src="xxx.min.js"></script>
</body>
複製代碼
5、爲頁面添加註釋
<!--頭部header-->
<header></header>
<!--頭部header-->
<div class="content"></content>
<!--底部Footer-->
<footer></footer>
複製代碼
6、縮進和換行
使用4個空格作爲一個縮進層級，大多數時候，開發工具幫助我們完成了此項內容。
// 不建議
<ul><li><a href="#"></a></li><li><a href="#"></a></li></ul>
// 建議
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
複製代碼
7、標籤閉合
// 不建議
<br >
<p> xxxx
<p>xxxx
// 建議
<br />
<p>xxx</p>
<p>xxx</p>
複製代碼
8、標籤名小寫，標籤屬性值添加雙引號
// 不建議
<P data-id=p1></P>
// 建議
<p data-id="p1"></p>
複製代碼
9、使用CSS爲頁面添加圖片
當然頁面上的動態內容還是必須使用<img src="#" />標籤的
10、爲圖片標籤添加alt和title屬性，圖片的src屬性不能爲空
<img alt="" title="" src="#" />
複製代碼
11、爲頁面當中的塊結構底部添加空白行
<header>
<h1>w3cfuns</h1>
</header>
<div class="content">
// something
</div>
<footer>
<p class="copyRight"></p>
</footer>
複製代碼
12、去除樣式引用和腳本引用當中的type屬性
13、標籤語義化
結構性元素：
p：表示段落，只能包含內聯元素，不能包含塊級元素
div：本身舞特殊含義，可用於佈局，幾乎可以包含任何元素
br：表示換行符
hr：表示水平分隔符
h1-h6：表示標題。其中h1用於表示當前頁面最重要內容的標題，建議每個頁面只有一個H1標籤
blockquote：表示引用，可以包含多個段落。請勿純粹爲了縮進而使用blockquote，大部分瀏覽器默認將blockquote渲染爲帶有左右縮進
pre：表示一段格式化好的文本頭部元素：
title：每個頁面必須有且僅有一個title元素
base：可用場景——首頁，頻道等大部分鏈接爲新窗口打開的頁面
link：用於引入CSS資源時，可省去media和type屬性
style：type默認爲text/css，可以省去
script：type屬性可以省去；不贊成使用lang屬性；不要使用古老的<!-//-->這種hack腳本，它用於阻止第一代瀏覽器將腳本顯示成文字；列表元素：
ul：表示無須列表
ol：表示有序列表，可用於排行榜等；
li：表示列表項，必須是ol/ul的子元素
dl：表示關聯列表，dd是對dt的解釋；dt和dd的對應關係比較隨意：一個dt對應多個dd、多個dt對應一個dd、多個dt對應多個dd,都合法；可用於名稱單詞解釋、日程列表、站點目錄；文本元素：
a：存在href屬性時表示鏈接，無href屬性但有name屬性表示錨點
em,strong,i,b：表示句意強調，加與不加會引起語義變化，可用於表示不同的心情或語調；strong表示重要性強調，可用於局部或全局，strong強調的是重要性，不會改變句意；
abbr：表示縮寫
sub,sup：主要用於數學和化學公式，sup還可用於腳註
span：本身舞特殊含義
ins,del：分別表示從文檔中增加（插入）和刪除表單元素：
推薦使用button代替input，但必須聲明type屬性
推薦使用fieldset,legend組織表單
表單的name不能設定爲action，enctype,method,novalidate,target,submit會導致表單提交混亂
上面說的都是一些基本的東西，在開發過程當中多注意養成習慣就好了，一方面是爲了網頁的性能優化，另一方面是爲了團隊之間的可維護性。下面是在HTML開發過程當中我自己的想法，分享出來給大家參考參考。
首先就是先背熟HTML標籤以及相對應每個標籤的含義和附加的屬性，只有在掌握了每一種HTML標籤的的含義，我們才能夠更合理的把他們應用到我們的頁面當中，萬丈高樓平地而起，這些看是很基礎的東西，有時候會搞的我們崩潰，踏踏實實把這些瞭解清楚，真的很重要，儘管不全部瞭解他們仍然能夠勝任日常的工作，但要是想在這條路上走的長久，還是建議熟被他們，這應該花費不了多長時間。
然後就是閱讀別人網站的源代碼，模仿開始，多看看那些優秀網站的源代碼，瞭解下他們是如果針對頁面上的組件編寫結構代碼的。比如：下拉框、選項卡、橫向圖片輪播，瀑布流，留言板，商品篩選，商品列表和商品詳情等等，然後比較下它們之間的不一樣，區別在哪裏，相同點在哪裏，自己消化之後就可以爲我所用了，當然這部分工作平常不用去做，等到我們拿到設計師做好的效果圖的時候，再去了解應該會比較有動力一些。
接下來就是搭建頁面的框架，我強力抗議，在一張頁面的HTML結構代碼沒有寫完之前，就動手開始寫CSS樣式，一定要先把頁面的整個HTML代碼結構定義好了之後，再去寫你的CSS樣式表。在開始寫CSS樣式表之前，你可以打開它在瀏覽器當中查看下，看看在沒有樣式表的時候，能不能像讀文章一樣知道，哪裏是標題，哪裏是列表，哪裏是段落，哪裏是重複的內容。
下面就可以開始編寫CSS樣式表了，找出頁面當中那些是可以複用的部分，定義好class類名，一步一步編寫，最後項目差不多結束的時候，優化CSS樣式文件，提取可複用的部分，進行精簡。
關於前端項目文件結構目錄的一些見解，下次有機會在說吧，如果你有好的工作方法方式，優美的項目文檔結構方案，也可以分享下！
筆記作者：拾荒者
筆記鏈接：http://www.w3cfuns.com/blog-5435321-5402088.html
原創聲明：此筆記被 拾荒者 標註爲原創筆記，未經作者同意轉載必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利。