以下內容整理於慕課網：http://www.imooc.com/learn/9
一個HTML文件是有自己固定的結構的。
1 <html> 2 <head>...</head> 3 <body>...</body> 4 </html>
代碼講解：
1.
<html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。
2.
<head></head>標簽用於定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽，頭部標簽在下一小節中會有詳細介紹。
3.
<body></body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
4.
<p></p>是文章的段落標簽
5.
<hx></hx>表示文章標題（x表示數字，為文章標題等級1-6）
6.
<em></em>表示斜體
7.
<strong></strong>表示加粗
8.<style>
span{
在這里配置樣式，比如文字大小，顏色等
}
</style>
<span></span>設置單獨樣式
9.
<q></q>引用，會自動加上雙引號
10.
<blockquote></blockquote>縮進
11.
<br />換行
12.
輸入空格
13.
<hr/>添加水平橫線
14.
<address></address>輸入地址信息（默認以 斜體表示）
15.
<code></code>代碼標簽
16.
<pre></pre>大段代碼標簽
17.無序列表
<ul>
<li>內容</li>
<li>內容</li>
<li>內容</li>
</ul>
18.有序列表(列表會自動加上序號)
<ol>
<li>內容</li>
<li>內容</li>
<li>內容</li>
</ol>
19.
<div>…</div>：划分區域（獨立邏輯）
20.
<div id="版塊名稱">…</div>：划分板塊並給板塊命名
21.表格展示（沒有框線）
1 <table> 2 <tbody> 3 <tr> 4 <th>班級</th> 5 <th>學生數</th> 6 <th>平均成績</th> 7 </tr> 8 9 <tr> 10 <td>一班</td> 11 <td>30</td> 12 <td>89</td> 13 </tr> 14 </tbody> 15 </table>
22.
<table summary = "內容"></table>為表格添加摘要
23.
<caption></caption>為表格添加標題
24.
<a href = "網址" title = "提示">..</a>加入網頁鏈接（在當前頁面打開）
25.
<a href="目標網址" target="_blank">..</a>加入網頁鏈接（新建頁面）
26.在網頁中鏈接Email地址
如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。
27.
<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">：為網頁插入圖片
28.表單標簽：表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
<form method="傳送方式" action="服務器文件">
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>表單標簽</title> 6 </head> 7 <body> 8 <form method="post" action="save.php"> 9 <label for="username">用戶名:</label> 10 <input type="text" name="username" id="username" value="" /> 11 12 <br/> 13 14 <label for="pass">密 碼:</label> 15 <input type="password" name="pass" id="pass" value="" /> 16 17 <input type="submit" value="確定" name="submit" /> 18 <input type="reset" value="重置" name="reset" /> 19 </form> 20 </body> 21 </html>
輸出：
29.輸入大段內容：（文本域）
<textarea cols = "50" rows = "10">..</textarea>
cols = "行數"
rows = "列數"
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>文本域</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>個人簡介：</label> 10 <textarea cols = "50" rows = "10">在這里輸入內容...</textarea> 11 <input type="submit" value="確定" name="submit" /> 12 <input type="reset" value="重置" name="reset" /> 13 </form> 14 </body> 15 </html>
輸出：
30.單選/復選框
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時，控件為單選框
當 type="checkbox" 時，控件為復選框
2、value：提交數據到服務器的值（后台程序PHP使用）
3、name：為控件命名，以備后台程序 ASP、PHP 使用
4、checked：當設置 checked="checked" 時，該選項被默認選中
（同一組的單選按鈕，name 取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>單選框、復選框</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>性別:</label> 10 <label>男</label> 11 <input type="radio" value="1" name="gender" /> 12 <label>女</label> 13 <input type="radio" value="2" name="gender" /> 14 </form> 15 </body> 16 </html>
輸出：
31.下拉框表<select>..</select>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>下拉列表框</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>愛好:</label> 10 <select> 11 <option value="看書">看書</option> 12 <option value="旅游" selected = "selected">旅游</option> 13 <option value="運動">運動</option> 14 <option value="購物">購物</option> 15 </select> 16 </form> 17 </body> 18 </html>
輸出：
<select>..</select>下拉框列表
selected = "selected"：默認選中
32.下拉框表支持復選:multiple = "multiple"
<select multiple = "multiple">..<select>
輸出：
（在 windows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項）
33.提交按鈕
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>提交按鈕</title> 6 </head> 7 <body> 8 <form method="post" action="save.php"> 9 <label for="myName">姓名：</label> 10 <input type="text" value=" " name="myName " /> 11 <input type="submit" value="提交" name="submitBtn" /> 12 </form> 13 </body> 14 </html>
輸出：
34.重置按鈕
在33中把type的值改為reset.
35.form表單中的label標簽
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用 戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
<label for="控件id名稱">
注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>form中的lable標簽</title> 6 </head> 7 8 <body> 9 <form> 10 <label for="male">男</label> 11 <input type="radio" name="gender" id="male" /> 12 <br /> 13 <label for="female">女</label> 14 <input type="radio" name="gender" id="female" /> 15 <br /> 16 <label for="email">輸入你的郵箱地址</label> 17 <input type="email" id="email" placeholder="Enter email"> 18 19 <br/><br/> 20 21 你對什么運動感興趣：<br /> 22 <label for="jog">慢跑</label> 23 <input type="checkbox" name="jog" id="jog" /><br /> 24 <label for="climb">登山</label> 25 <input type="checkbox" name="climb" id="climb" /><br /> 26 <label for="basketball">籃球</label> 27 <input type="checkbox" name="basketball" id="basketball" /> 28 29 </form> 30 31 </body> 32 </html>
輸出：
