HTML常用
頭部標籤
<title></title>
<script></script>
<style></style>
<link>
<meta>
強調標籤
<em></em> 斜體
<strong></strong> 粗體
<span></span>標籤
<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>了不起的蓋茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天，一個想要成名名叫尼克•卡拉威（託比•馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私爲王，股票飛漲的時代。爲了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>
</body>
</html>
<q></q>標籤 引用別人說的話 默認樣式“” 文本不需要再加入雙引號
<blockquote></blockquote>標籤 長文本引用 在瀏覽器中是縮進樣式 文本不需要再加入雙引號
<hr/>標籤 添加水平橫線
<hr />標籤和<br />標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
<address></address>標籤 加入地址信息 在瀏覽器上顯示斜體
<code></code>標籤 在網頁中加入代碼 是一行
如果是多行代碼用<pre></pre>標籤
<pre> 標籤的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
<ol></ol>標籤 圖書銷售排行榜
<ol>
<li>前端</li>
<li>後臺</li>
</ol>
在網頁中顯示爲
給div命名
<div id="版塊名稱">…</div>
<table>標籤 表格
創建表格的四個元素：
table、tbody、tr、th、td
<table>…</table>：整個表格以<table>標記開始、</table>標記結束
<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完纔會顯示。如右側代碼編輯器中的代碼
<tr>…</tr>：表格的一行，所以有幾對tr表格就有幾行。
<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列
<th>…</th>：表格的頭部的一個單元格，表格表頭
表格中列的個數，取決於一行中數據單元格的個數
table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
表頭，也就是th標籤中的文本默認爲粗體並且居中顯示
<table>
<tbody>
<tr>
<th>班級</th>
<th>學生數</th>
<th>平均成績</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
用css樣式給表格加入邊框
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
表格的標題和摘要
摘要 不會在瀏覽器顯示出來
<tablesummary="表格簡介文本">
標題 顯示在表格上方
<table>
<caption>標題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎瞭解鏈接地址的內容（語義化更友好）
<ahref="目標網址" target="_blank">click here!</a>
使用mailto在網頁中鏈接email地址
如果mailto後面同時有多個參數的話，第一個參數必須以“?”開頭，後面的參數每一個都以“&”分隔。
點擊鏈接會打開電子郵件應用，並自動填寫收件人等設置好的信息，如下圖：
<img>標籤 插入圖片
<img src="圖片地址"alt="下載失敗時的替換文本" title = "提示文本">
舉例：
<img src = "myimage.gif" alt = "MyImage" title = "My Image" />
src：標識圖像的位置；
alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。
表單
<form method="傳送方式" action="服務器文件"></form>
action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
method ： 數據傳送的方式（get/post）。
<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" />
<label for="pass">密碼:</label>
<input type="password" name="pass" />
</form>
文本/密碼輸入框
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
type：
當type="text"時，輸入框爲文本輸入框;
當type="password"時, 輸入框爲密碼輸入框。
name：爲文本框命名，以備後臺程序ASP 、PHP使用。
value：爲文本輸入框設置默認值。(一般起到提示作用)
<form>
姓名：
<input type="text" name="myName">
<br/>
密碼：
<input type="password" name="pass">
</form>
表單中需要大段文字時 <textarea rows="行數" cols="列數">文本</textarea>
cols：多行輸入域的列數。
rows：多行輸入域的行數。
在<textarea></textarea>標籤之間可以輸入默認值。
單選框 複選框
<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 取值一定要一致，比如上面例子爲同一個名稱“radioLove”，這樣同一組的單選按鈕纔可以起到單選的作用。
表單中的提交按鈕
<input type="submit" value="提交">
type：只有當type值設置爲submit時，按鈕纔有提交作用
value：按鈕上顯示的文字
表單中的重置按鈕
<input type="reset" value="重置">
form表單中的label標籤
label標籤不會向用戶呈現任何特殊效果，它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）。
<label for="控件id名稱">
標籤的 for 屬性中的值應當與相關控件的id 屬性值一定要相同。
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
下拉列表框
value
selected="selected"：
設置selected="selected"屬性，則該選項就被默認選中。
在瀏覽器中顯示的結果
下拉列表的多項選擇
在<select>標籤中設置multiple="multiple"屬性，就可以實現多選功能，在 windows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用
Command +單擊），可以選擇多個選項。如下代碼：