HTML基礎之常用標簽
Meta 標簽介紹
Meta的屬性有兩種：name和http-equiv
name屬性用於描述網頁，對應於content
- <meta name="Generator" contect="">用以說明生成工具（如Microsoft FrontPage 4.0）等；
- <meta name="KEYWords" contect="">向搜索引擎說明你的網頁的關鍵詞；
- <meta name="DEscription" contect="">告訴搜索引擎你的站點的主要內容；
- <meta name="Author" contect="你的姓名">告訴搜索引擎你的站點的制作的作者；
- <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow"> 其中的屬性說明如下：
- 設定為all：文件將被檢索，且頁面上的鏈接可以被查詢；
- 設定為none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
- 設定為index：文件將被檢索；
- 設定為follow：頁面上的鏈接可以被查詢；
- 設定為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
- 設定為nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。
http-equiv
http-equiv顧名思義，相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
meat標簽的http-equiv屬性語法格式是：＜meta http-equiv="參數" content="參數變量值"＞ ；其中http-equiv屬性主要有以下幾種參數：
- Expires(期限)
說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到服務器上重新傳輸。
＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞ - Pragma(cache模式)
說明：是用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定後一旦離開網頁就無法從Cache中再調出
用法：
＜meta http-equiv="Pragma" content="no-cache"＞
註意：這樣設定，訪問者將無法脫機瀏覽。
- Refresh(刷新) 說明：自動刷新並指向新頁面。
＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞ 註意：其中的2是指停留2秒鐘後自動刷新到URL網址。
- Set-Cookie(cookie設定)
說明：如果網頁過期，那麽存盤的cookie將被刪除。
＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞ - Window-target(顯示窗口的設定)
說明：強制頁面在當前窗口以獨立頁面顯示。
＜meta http-equiv="Window-target" content="_top"＞ 註意：用來防止別人在框架裏調用自己的頁面。
- content-Type(顯示字符集的設定)
＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞ - Pics-label(網頁等級評定)
<meta http-equiv="Pics-label" contect=""> 說明：在IE的internet選項中有一項內容設置，可以防止瀏覽一些受限制的網站，而網站的限制級別就是通過meta屬性來設置的。
8.Page_Enter、Page_Exit
設定進入頁面時的特殊效果
<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion= 12)">設定離開頁面時的特殊效果
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion= 12)"> - 設定網頁的到期時間
<meta http-equiv="expires" content="0"> - 關鍵字,給搜索引擎用的
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> - 頁面描述
<meta http-equiv="description" content="This is my page"> link標簽
- 引用外部css
引用title圖片 （icon) 例如：
<link rel="icon" href="1.icon">
字符集
- utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312
- gb2312 簡單中文
- GBK包含全部中文字符 繁體
- BIG5 繁體中文
- UTF-8則包含全世界所有國家需要用到的字符
表格（table）
1.<table>
<table>...</table>標簽用於在HTML文檔中創建表格。它包含表名和表格本身內容的代碼。表格的基本單元是單元格，用<td>...</td>標簽定義。
2.<tr>
表格行用<tr>標簽定義，由單元格構成。多個行結合在一起就構成一個表格，這反映在用於創建表格的HTML語法中。表格的每一行都用<tr>標簽表示，並用相應的</tr> 結束?
3.<td>
- 表格的每一行又有若幹表格單元格，用<td>...</td>標簽表示。TD是"表格數據( Table Data)”的英文縮寫。<td>標簽定義一個列，嵌套於<tr>標簽內。
- border屬性是最常用的屬性，可用於定義表格的單元格和結構。該屬性指定邊框的厚度，如果其值設置為零(0)，則不顯示邊框。
創建表格的基本語法：
<table>
<tr>
<td>單元格內容</td>
</tr>
</table>屬性
| 屬性名 | 含義 | 常用屬性值 |
|---|---|---|
| Border | 設置邊框 默認為0 沒有邊框 | 單位為px 像素值 |
| Cellspacing | 設置單元格與單元格之間的距離 | 單位為px 像素值 默認2px |
| Cellpadding | 設置文字與單元格之間的距離 | 單位為px 像素值 默認2px |
| Width | 設置表格的寬度 | 單位px |
| Height | 設置表格高度 | 單位px |
| Align | 設置表格在網頁中的對齊方式 | Left 左 |
Right 右
Center 居中
bgcolor | 設置背景顏色| white ,red,green
caption 元素定義表格標題
caption 標簽必須緊隨 table 標簽之後。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。
<th>標記及其屬性
表頭一般位於表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標記<th></th>替代相應的單元格標記<td></td>即可。
表格的結構
- 在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳，具體 如下所示：
- <thead></thead>：用於定義表格的頭部，必須位於<table></table>標記中，一般包含網頁的logo和導航等頭部信息。
- <tfoot></ tfoot >：用於定義表格的頁腳，位於<table></table>標記中<thead></thead>標記之後，一般包含網頁底部的企業信息等。
- <tbody></tbody>：用於定義表格的主體，位於<table></table>標記中<tfoot></ tfoot >標記之後，一般包含網頁中除頭部和底部之外的其他內容。
表單(form)
語法：
<form name="form_name" action="url" method="get|post">…</form>- Name ：定義表單的名稱
- Method: 定義表單結果從瀏覽器傳送到服務器的方式，默認參數為：get ；
- Action ：用來指定表單處理程序的位置(服務器端腳本處理程序）
- Fieldset：把表單分組
- Legend：分組名稱
input控件
<input type=“控件類型”>在上面的語法中，<input />標記為單標記，type屬性為其最基本的屬性，其取值有多種，用於指定不同的控件類型。除了type屬性之外，<input />標記還可以定義很多其他的屬性
textarea控件
如果需要輸入大量的信息，就需要用到<textarea></textarea>標記。通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數" rows="顯示的行數">
文本內容
</textarea>- Cols:相當於寬度
- Rows:相當於高度
select控件
在HTML中，要想制作如下圖所示的下拉菜單，就需要使用select控件
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>值得一提的是，在HTML中，可以為<select>和<option>標記定義屬性，以改變下拉菜單的外觀顯示效果
標簽語義化
標簽語義化概念：
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）
標簽語義化意義：
- 網頁結構合理
- 有利於seo:和搜索引擎建立良好溝通，有了良好的結構和語 義你的網頁內容自然容易被搜索引擎抓取
- 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）
- 便於團隊開發和維護
標簽語義化（註意事項）
- 盡可能少的使用無語義的標簽div和span；
- 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利
- 不要使用純樣式標簽，如：b、font、u等，改用css設置
- 需要強調的文本，可以包含在strong或者em標簽中strong默認樣式是加粗（不要用b），em是斜體（不用i）
HTML基礎之常用標簽