從0開始學HTML（二）

HTML <a> 標籤

<a href="http://www.google.com/index.html">google</a>
複製代碼

定義和用法

• 標籤訂義超連接，用於從一張頁面連接到另外一張頁面。
• 元素最重要的屬性是 href 屬性，它指示連接的目標。

href 屬性<a href="絕對URL|相對URL|錨URL">

• 絕對URL - 指向另外一個站點（好比 href="http://www.example.com/index.htm"）
• 相對URL - 指向站點內的某個文件（href="index.htm"）
• 錨URL - 指向頁面中的錨（href="#top"）

name 屬性<a name="anchor_name">

• anchor_name 錨的名稱。

提示： 在 HTML5中，<a> 標籤的name屬性已廢棄，之後將會刪除。可使用id屬性取代

download 屬性(html5)<a href="url" download="filename">

• filename 規定做爲文件名來使用的文本。

只有 Firefox 和 Chrome 支持 download 屬性。

target 屬性<a target="_blank|_self|_parent|_top|framename|value">

• _blank 在新窗口中打開被連接文檔。
• _self 默認。在相同的框架中打開被連接文檔。
• _parent 在父框架集中打開被連接文檔。
• _top 在整個窗口中打開被連接文檔。
• framename 在指定的框架中打開被連接文檔。
• name 屬性用於指定錨（anchor）的名稱。

HTML <img> 標籤

<img src="smiley.gif" alt="Smiley face" height="42" width="42">
複製代碼

定義和用法

• img 元素向網頁中嵌入一幅圖像。請注意，從技術上講， 標籤並不會在網頁中插入圖像，而是從網頁上連接圖像。
• <img> 標籤建立的是被引用圖像的佔位空間。
• <img> 標籤有兩個必需的屬性：src 屬性 和 alt 屬性。

title、alt 屬性<img title|alt="替代文本">

• 規定圖像的替代文本
• 若是圖像在 a 元素中描述目標連接
• 若是圖像僅供裝飾，使用 title|alt="替代文本"
• title、alt (注意：alt只在IE5.五、六、7中有效)

src 屬性<img src="絕對URL|相對URL">

• 絕對URL - 指向其餘站點（好比 src="http://www.example.com/"）
• 相對URL - 指向站點內的文件（好比 src="/i/image.gif"）

height 和 width 屬性<img width|height="pixels|percent">

• pixels 以像素爲單位的高度或寬度值。
• percent 以包含元素的百分比計的高度或寬度值。

usemap 屬性<img usemap="value">

• #mapname 要使用的 <map> 元素的 name 或 id 屬性

HTML<ul>標籤(無序列表)

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
複製代碼

定義和用法

• <ul> 標籤訂義無序列表。 將 <ul>標籤與 <li> 標籤一塊兒使用，建立無序列表。

type屬性<ul type="disc|circle|square">

• disc 默認值。實心圓。
• circle 空心圓。
• square 實心方塊。

HTML<ol>標籤(有序列表)

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
複製代碼

定義和用法

• <ol> 標籤訂義無序列表。 將 <ol>標籤與 <li> 標籤一塊兒使用，建立無序列表。

type屬性<ol type="1|a|A|i|I">

• 1默認。十進制數字 (1, 2, 3, 4)。
• a 字母順序的有序列表，小寫 (a, b, c, d)。
• A 字母順序的有序列表，大寫 (A, B, C, D)。
• i 羅馬數字，小寫 (i, ii, iii, iv)。
• I 羅馬數字，大寫 (I, II, III, IV) 。

HTML <dl> 標籤

<dl>
   <dt>計算機</dt>
   <dd>用來計算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
複製代碼

定義和用法

• <dl> 標籤訂義一個描述列表。
• <dl> 標籤與 <dt> （定義項目/名字）和 <dd> （描述每個項目/名字）一塊兒使用。

HTML<table> 標籤

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
<tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot>
複製代碼<tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> 複製代碼

定義和用法

• <table> 標籤訂義 HTML 表格。
• 簡單的 HTML 表格由table元素以及一個或多個tr、th 或 td 元素組成。
• tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
• 更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

border屬性<table border="pixels">

• pixels 規定表格邊框寬度。

cellpadding 屬性<table cellpadding="pixels|%">

• pixels、% 規定單元邊沿與其內容之間的空白。

cellspacing 屬性<table cellspacing="pixels|%">

• pixels、% 規定單元之間的空間。

frame 屬性<table frame="value">

• void 不顯示外側邊框。
• above顯示上部的外側邊框。
• below 顯示下部的外側邊框。
• hsides 顯示上部和下部的外側邊框。
• vsides 顯示左邊和右邊的外側邊框。
• lhs 顯示左邊的外側邊框。
• rhs 顯示右邊的外側邊框。
• box 在全部四個邊上顯示外側邊框。
• border 在全部四個邊上顯示外側邊框。

rules 屬性<table rules="value">

• none 沒有線條。
• groups 位於行組和列組之間的線條。
• rows 位於行之間的線條。
• cols 位於列之間的線條。
• all 位於行和列之間的線條。

width 屬性<table width="pixels|%">

• pixels 設置以像素計的寬度（例子：width="50"）。
• % 設置以包含元素的百分比計的寬度（例子：width="50%"）。

HTML<tr> 標籤

定義和用法

• <tr> 標籤訂義 HTML 表格中的行。
• tr 元素包含一個或多個 th 或 td 元素。

align 屬性<tr align="value">

• left 左對齊內容（默認值）。
• right 右對齊內容。
• center 居中對齊內容（th 元素的默認值）。

valign 屬性<tr valign="value">

• top 對內容進行上對齊。
• middle 對內容進行居中對齊（默認值）。
• bottom 對內容進行下對齊。

HTML<td> 標籤

定義和用法

• <td> 標籤訂義 HTML 表格中的標準單元格。
• HTML 表格有兩類單元格：
  • 表頭單元 - 包含頭部信息（由 th 元素建立）
  • 標準單元 - 包含數據（由 td 元素建立）
• td 元素中的文本通常顯示爲正常字體且左對齊。

align 屬性<td align="value">

• left 左對齊內容（默認值）。
• right 右對齊內容。
• center 居中對齊內容。

valign 屬性<td valign="value">

• top 對內容進行上對齊。
• middle 對內容進行居中對齊（默認值）。
• bottom 對內容進行下對齊。

colspan 屬性<td colspan="number">

• number 設置單元格可橫跨的列數。

註釋：colspan="0" 指示瀏覽器橫跨到列組的最後一列。

rowspan 屬性<td colspan="number">

• 設置單元格可橫跨的行數。

註釋：rowspan="0" 指示瀏覽器橫跨到表格部分的最後一行（thead、tbody 或者 tfoot）。

HTML<form> 標籤

action 屬性<form action="URL">

• URL 向何處發送表單數據。
  • 絕對URL - 指向其餘站點（好比 src="www.example.com/example.htm"）
  • 相對URL - 指向站點內的文件（好比 src="example.htm"）

enctype 屬性<form enctype="value">

• application/x-www-form-urlencoded在發送前編碼全部字符（默認）
• multipart/form-data 不對字符編碼。 在使用包含文件上傳控件的表單時，必須使用該值。
• text/plain 空格轉換爲 "+" 加號，但不對特殊字符編碼。

method 屬性<form method="post|get">

target 屬性<form target="value">

• _blank 在新窗口中打開。
• _self 默認。在相同的框架中打開。
• _parent 在父框架集中打開。
• _top 在整個窗口中打開。
• framename 在指定的框架中打開。

HTML <input> 標籤<input type="value">

• button 定義可點擊按鈕（多數狀況下，用於經過 JavaScript 啓動腳本）。
• checkbox 定義複選框。
• file 定義輸入字段和 "瀏覽"按鈕，供文件上傳。
• hidden 定義隱藏的輸入字段。
• image 定義圖像形式的提交按鈕。 <input type="image" src="submit.gif" alt="Submit" >
• password 定義密碼字段。該字段中的字符被掩碼。
• radio 定義單選按鈕。
• reset 定義重置按鈕。重置按鈕會清除表單中的全部數據。
• submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器。
• text 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。

src 屬性<input src="url">

• URL 做爲提交按鈕使用的圖像的URL。
  • 絕對 URL - 指向另外一個站點（好比 src="www.example.com/submit.gif"）
  • 相對 URL - 指向網站內的文件（好比 src="submit.gif"）

alt 屬性<input alt="value">

• value 圖像 input 的替代文本。

alt 屬性只能與 <input type="image"> 配合使用。它爲圖像輸入規定替代文本。

checked 屬性<input checked="checked">

• checked 預先選定複選框或單選按鈕。

checked 屬性規定在頁面加載時應該被預先選定的 input 元素。
checked 屬性 與 <input type="checkbox"> 或 <input type="radio"> 配合使用。
checked 屬性也能夠在頁面加載後，經過 JavaScript 代碼進行設置。

disabled 屬性<input disabled="disabled">

• disabled 禁用一個 input 元素。

maxlength 屬性<input maxlength="characters">

• characters 輸入字段中容許的最大字符數。

readonly 屬性<input readonly="value">

• readonly 把輸入字段設置爲只讀。

readonly 屬性規定輸入字段爲只讀。
readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。

name 屬性<input name="value">

• name 元素的名稱。

name 屬性規定 input 元素的名稱。
name 屬性用於對提交到服務器後的表單數據進行標識
註釋：只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

placeholder 屬性<input placeholder="text">

該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。
註釋：placeholder 屬性適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password。

HTML <select> 標籤

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
複製代碼

multiple 屬性<select multiple="value">

• multiple 規定可同時選擇多個選項。

HTML <frameset> 標籤

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>   
複製代碼

定義和用法

• rameset 元素可定義一個框架集。它被用來組織多個窗口（框架）。每一個框架存有獨立的文檔。在其最簡單的應用中，frameset 元素僅僅會規定在框架集中存在多少列或多少行。必須使用 cols 或 rows 屬性。

frameset的cols屬性<frameset cols="25%,50%,25%">

• pixels|%|*定義框架集中列的數目和尺寸。

frameset的rows屬性<frameset rows="25%,50%,25%">

• pixels|%|*定義框架集中行的數目和尺寸。

HTML <frame> 標籤

name屬性<frame name="value">

• name 規定框架的名稱。

src屬性<frame scrolling="value">

• URL 規定在框架中顯示的文檔的 URL。

定義和用法

• <frame> 標籤訂義 frameset 中的一個特定的窗口（框架）。
• frameset 中的每一個框架均可以設置不一樣的屬性，好比 border、scrolling、noresize 等等。

frameborder屬性<frame frameborder="value">

• 規定是否顯示框架周圍的邊框。
• 0 不顯示
• 1 顯示

noresize屬性<frame noresize="noresize">

• noresize 規定沒法調整框架的大小。

scrolling屬性<frame scrolling="value">

• 規定是否在框架中顯示滾動條。
• auto 在須要的時候顯示滾動條。
• yes 始終顯示滾動條（即便不須要）。
• no 從不顯示滾動條（即便須要）。