作爲一個名副其實的菜鳥，第一次寫網頁，緊張、茫然、興奮。做出一個小東西就興奮的嗷嗷叫！
一行行代碼敲下去，成果躍然屏幕上，那種興奮感和成就感讓人回味十足。
好的習慣必定事半功倍
1、標籤多數都是成對的，所以在寫出開頭的同時，一定要把小尾巴給補上。
否則一小塊代碼有可能就讓你就揪掉你爲數不多的幾根頭髮。（別問我怎麼知道，我會告訴你是親測？）
2、有包含關係的代碼，被包的代碼都得縮進。不縮進，一會兒你就找不到誰是誰的爸爸，而這個“<div></div>”的兒子又在哪裏。
3、在頁面佈局的時候最好把最主要的幾個塊先擺出來，給他們都選上不同的背景顏色。這樣做的好處是：對於菜鳥，想象能力差，代碼邏輯不清晰，
所以在調試的時候，我關注不同顏色的變化就很容易知道自己在修改哪一個地方。
【那些必不可少的標籤】
（1）<link rel="icon" href="填上你想要插入圖片的相對地址"/>：這個<link/>標籤有很多種用法，我這裏rel的值是“icon”，
所以就是大家所看的標題欄前面的小圖標的插入方法。
（2）<title>標題文字</title>:頁面總得有個標題吧？
（3）<meta></meta>: 用於給瀏覽器和搜索引擎看。常見的寫法有兩種：
①<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
②<meta charset="utf-8" /> （html5中都這樣寫，別問我爲什麼）
瞭解：①http-equiv，用於寫給瀏覽器看，用來描述文檔類型和字符編碼；
②中文編碼採用的兩種編碼格式：gb2312，簡體中文的編碼格式；utf-8，萬國碼的編碼格式。
③<meta name= "keywords" content= "淘寶,網上購物,在線交易,交易市場" />
<meta name= "description" content= "淘寶網-亞洲最大、最安全的網上交易平臺……" />
name,用於寫給搜索引擎看，用來描述搜索關鍵字和描述；
關鍵字：name=“keywords”，有多個關鍵字，在congtent中用逗號分隔；
網頁描述：name=“description”，用於搜索引擎搜索時顯示網頁摘要；
（4）<base href="new/addr"/>//指定當前文檔默認基地址；
<base target=“_blank”/>當前文檔所有超鏈接打開方式。
html的塊級標籤：顯示爲“塊”狀，前後隔一行。（塊級標籤自帶換行，且行間距大）
（5）【基本的塊級標籤】
<br/> 換行符
<hr/>水平線
<h1></h1>~<h6></h6> 第一級標籤到第六級標籤
<p></p> 段落標籤
<blockquote cite="……"></blockquote> 引用標籤，cite標註引用來源
<pre></pre> 預格式標籤，保留html中原有的格式。（回車、空格也有效）
（6）【基於佈局的塊級標籤】
有序列表：<ol>
<li>列表項1</li>
<li>列表項2</li>
</ol>
無序列表：<ul>
<li>列表項1</li>
<li>列表項2</li>
</ul>
定義列表：<dl>
<dt>標題</dt>
<dd>描述1</dd>
</dl>
定義描述標籤：<figure>
<img src="img/computer.jpg" alt="漂亮的風景" >
<figcaption>漂亮的風景</figcaption>
</figure>
分區標籤：<div></div>,用於把頁面劃分爲不同的分區，可以通過CSS設置寬度、高度、邊框、背景色各種屬性；
注意：①：div-ul(ol)-li:常用於分類導航或菜單等；
②：div-dl-dt-dd:常用於圖文混編的場合；
③：table-tr-td:常用於圖文佈局或顯示數據；
（7）【行級標籤】：（按行逐一顯示，不會自動換行）
<span></span>:用於包裹字體，修改字體樣式；比如：
<span style="color:red; font-size:24px; background-color:#00F;">哈哈哈</span>
<img />:圖片標籤。src=””導入圖片地址；alt=””圖片不顯示看到的文字；title=“”鼠標指上去看到的文字；
align=“”圖片周圍的文字相對於圖片的位置（上、中、下）
Src裏面地址的寫法：
① 直接寫絕對路徑，但是不建議。因爲上傳服務器後，絕對路徑會變化；
文件夾的上一層用“../文件夾名字/圖片名字”；
③ 網絡鏈接：直接將網上圖片的地址放在src中。（網上圖片刪除的話，鏈接也會失效）
<em>em標籤，表示強調！瀏覽器中顯示效果爲傾斜！</em>
<strong>Strong標籤，強調程度比em要高，瀏覽器中顯示爲加粗！</strong>
<i>i標籤，普通的傾斜，沒有強調意思。</i>
<b>b標籤，普通的加粗，沒有強調作用。</b>
<small>比正常字體小1號，可以嵌套使用，多一個small小1號。當字體爲最小字號時，small不起效果！</small>
<big>比正常字體大一號，同上！</b>
<q>表示短的引用，瀏覽器解釋爲加引號！</q>
<s>有誤文本，瀏覽器表示爲加刪除線</s>
<code>代碼格式：不具備pre的預格式功能，瀏覽器解釋爲等寬字體。</code>
<bdo>定義文字方向，有dir屬性，dir="ltr"：從左往右，dir="rtl"：從右往左</bdo>
<kbd>表示鍵盤輸入的文字，瀏覽器解釋爲等寬字體。</kbd>
<sup>上標文字</sup> <sub>下標文字</sub> <u>下劃線</u>
<a></a>:超鏈接標籤，鏈接文字或鏈接圖片放在兩個標籤之間；
href=””,放鏈接的地址；可以是網絡鏈接，
也可以是本地html文件，本地文件相對路徑確認方式與img相同。
title=“”放鼠標移上去後顯示的文字；
target=“”，放鏈接打開的位置。_blank,新頁面打開；_self,本頁面打開（默認）
① 頁面間跳轉：略；
② 本頁面錨鏈接：
首先，定義一個錨點：<a name=”top”></a>
然後，設置一個超鏈接，跳轉到錨點：<a href=”#top”>鏈接</a>
③ 頁面間的錨鏈接：
首先，在目標頁面，定義一個錨點，方式同上；
然後，本頁面設置超鏈接，跳轉到錨點：<a href=”目標頁.html#top”>鏈接</a>
④ 功能性鏈接：
常見的：mailto:[email protected] 發送郵件
<input />:輸入框或按鈕，自閉合標籤，常用元素有：
type=””，類型，可以是文本框、密碼框、單選框、複選框、按鈕、圖片。
name=“”，名字，用於代表你這個input標籤。
Value=””,默認值，用於顯示在按鈕或者文本框上面的默認值。
（8）【表格table】
Table可以在開始標籤中直接設置邊框各種屬性：
<table width="100%" border="1" bordercolor="#FF0000" style="text-align:center;">
屬性解釋：
cellspacing="0"單元格之間的間距爲0；
cellpadding="2"單元格中的內容距邊框距離爲2；
Bgcolor:#FFF; 單元格背景顏色，不建議使用，用style=”background-color:#999;”替代。
Background：背景圖，可以用style=”background-image:……;”替代。
Bordercolor：邊框顏色。
style="border-collapse:collapse;" 合併單元格之間的邊框；
style="text-align:center"表格中所有單元格的文字居中；
表格跨列：colspan=“3” 表格跨行：rowspan=“2”
【表格的結構化】
<thead>: thead表示表格頭部，無論放在表格任何位置，均爲表格最頂部一行。
<tr>
<th></th>：thead中，用th代替td，單元格中文字默認居中加粗。
</tr>
</thead>
<tbody></tbody>: 表格的主體部分，即原來正常的tr和td；
<tfoot></tfoot>: 表格的底部，無論代碼放在表格任何位置，均爲表格最後一行。
<caption>表格標題：不論寫在表格任何位置，均在表格最上方顯示！</caption>
【表格的直列化】
<colgroup> 可選中某列或者多列，並賦id，與css配合修改一列或多列共同的屬性
<col id="one" span="2"/> 前兩列
<col id="" span="2"/> 後兩列
</colgroup>
（9）【表單form】
寫法：<form action="" method="post"> 許多個input </form>
action,是表單將要提交的地址；
不安全。所以常用post傳參方式。
注意：
①input的name表示當前這個input，而value則是這個input當中的值，傳參的使用採用“name=value”的形式進行傳參，參照上面鏈接框中的地址。
②單選框，radio：憑藉name確認是否爲一組。
name相同則爲同一組，即本組只能選擇其中一個；name不同，則爲不同組別。
單選框 可以設置默認選中其中一個，只需要在<input>中加入checked=“checked”；
而submit才具有提交表單的作用，submit在提交的時候會提交整張form表單，即<form>到</form>
④type=“image”,圖形提交按鈕，也具有提交作用，功能與submit相同；
⑤checked="checked"：默認選中；
hidden="hidden"隱藏；
disabled="disabled"不能被點擊；
⑥文本域：<textarea></textraea>
文本域可以通過style修改樣式。overflow:hidden;隱藏滾動條（也會隱藏掉超出的文字）。overflow:scroll;顯示滾動條。overflow:auto;
自動（根據文字的多少，自動確定是否顯示滾動條），
也可以通過overflow-x或者overflow-y只修改x軸或y軸的滾動條樣式。
readonly，可以設置文本域爲只讀；cols設置列寬，rows設置行高；
style=”resize:none;”設置文本域的大小不能被改變；
⑦<select></select>下拉框,每一個選項就是一個<option></option>
option中常見的標籤屬性：
title:鼠標指上去後，可以看到的文字，一般與option標籤中文字相同；
value:當前option的值，如果寫了value，那麼傳參時傳遞的是value的值；如果沒有寫value，那麼傳參傳遞的是<option></option>中間的文字；
selected：默認選中項；
<optgroup></optgroup> :將option進行分組
<legend>表單的標題</legend>
<fieldset></fieldset>:表單外圍框線，可以將表單中所有標籤包裹起來
tabindex屬性：按下Tab鍵時，選中的次序。Tabindex=“1”,代表按下tab鍵時第一個選中的元素。
<a><input><select><texteara><button>支持tabindex屬性。