HTML基礎知識

表單執行個體

實際用在HTML中的标簽有form、 input、 textarea、 select和option。

表單标簽form定義的表單裡頭，必須有行為屬性action，它告訴表單當送出的時候将内容發往何處。

可選的方法屬性method告訴表單資料将怎樣發送，有get（預設的）和post兩個值。常用到的是設定post值，它可以隐藏資訊（get的資訊會暴露在URL中）。

input标簽是表單世界中的“老大”。有10種形式，概括如下：

■ <input type="text" />是标準的文本框。它可以有一個值屬性value，用來設定文本框裡的預設文本。 

■ <input type="password" /> 像文本框一樣，但是會以星号代替使用者所輸入的實際字元。 

■ <input type="checkbox" />是複選框，使用者可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked，像這樣的格式<input type="checkbox" checked="checked" />. 

■ <input type="radio" /> 與複選框相似，但是使用者隻可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked，使用方法跟複選框一樣。 

■ <input type="file" /> 是展示你電腦上的檔案的一個區域，就像你在一個軟體中打開或者儲存一個文檔一樣。 

■ <input type="submit" /> 是一個被點選後送出表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本（下面的button和reset類型也可以這樣，稍後介紹），如下： <input type="submit" value="Ooo. Look. Text on a button. Wow" />. 

■ <input type="image" />以圖像代替按鈕文本，src屬性是必須的，像img标簽一樣。 

■ <input type="button" />是一個如果沒有其他代碼的話什麼都不做的按鈕。 

■ <input type="reset" /> 是一個點選後會重置表單内容的按鈕。 

■ <input type="hidden" /> 不會顯示任何東西，它用來傳輸諸如使用者正在用的頁面的名字或者Email位址等表單必須傳輸的東西。 

注意輸入标簽input也是用“/&gt;”自關閉的。

多行文本輸入框标簽textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols，用法像這樣：

<textarea rows="5" cols="20">A big load of text here</textarea>

標明标簽select與選項标簽option一起可以制作一個下拉選框。是這樣工作的：

<select>

<option value="first option">Option 1</option>

<option value="second option">Option 2</option>

<option value="third option">Option 3</option>

</select>

Table執行個體

<table border="1">

<tr>

<th>Column 1 heading</th>

<th>Column 2 heading</th>

<th>Column 3 heading</th>

</tr>

<td>Row 2, cell 1</td>

<td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>

<td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>

<td>Row 3, cell 2</td>

<td>Row 3, cell 3</td>

<td>Row 4, cell 2</td>

<td>Row 4, cell 3</td>

</table>

首先，我們在第一行中用td标簽取代了th标簽。td是标準的資料單元格，th是單元格表頭。像td标簽一樣，這些th标簽也要用在tr标簽裡邊。

在一些td标簽中，我們用到了colspan和rowspan屬性。在浏覽器中檢視，你會發現，在第二行中兩個單元格代替了三個，第二個單元格橫跨了兩列。colspan屬性，意即“列跨越”，将會跨越指定數目的單元格。就是說，在這個例子中不再需要第三個td标簽──兩個單元格個已經合并成一個。

rowspan屬性跟colspan屬性類似，顯而易見，它将跨越行。又，它跨越的單元格應該被删除。在這個例子中，因為它跨越了四行，這一行隻有兩個單元格。

與那個簡單的3x4，12個單元格的表格，我們也來算一下這些有合并單元格的表格數目。盡管隻有10個單元格，但裡面包含了2個跨越。

Js執行個體

Javascript事件像HTML标簽的屬性一樣使用。事件是發生在HTML元素上的某些行為，如什麼時候被點選了或者什麼時候失去焦點。

可以使用的事件有：

◆ onblur（使用在表單元素中，當元素失去焦點的時候執行） 

◆ onchange（使用在表單元素中，當某些東西改變是執行） 

◆ onclick（滑鼠點選一個元素時執行） 

◆ ondblclick（滑鼠輕按兩下一個元素時執行） 

◆ onfocus（使用在表單元素中，當元素獲得焦點時執行） 

◆ onkeydown （按下某個按鍵時執行） 

◆ onkeypress（按下和釋放某個按鍵時執行） 

◆ onkeyup（釋放某個按鍵時執行） 

◆ onload（在body标簽中使用，載入頁面的時候執行） 

◆ onmousedown（按下滑鼠按鍵時執行） 

◆ onmousemove（滑鼠光标在元素上移動時執行） 

◆ onmouseout（滑鼠光标移開元素時執行） 

◆ onmouseover（滑鼠光标移到元素上時執行） 

◆ onmouseup（當釋放滑鼠按鍵時執行） 

◆ onreset（用在表單元素中，當表單重置時執行） 

◆ onselect（用在表單元素中，當元素被選擇時執行） 

◆ onsubmit（用在表單元素中，當表單送出時執行） 

◆ onunload（用在body标簽中，當關閉頁面時執行）

标簽選擇

下面這些是你可能會經常碰到的可以有更好選擇的标簽：

◆ b 可以用來産生粗體元素。使用strong（意味着強烈強調）代替更有意義，或者用CSS來完成這項工作，增加font-weight: bold的規則，用來表明粗體元素。 

◆ i可以用來産生斜體元素。使用em（表示強調），這也更有意義。或者可以用CSS來表現斜體：font-style: italic 

◆ big可以産生更大字型。使用标題（如h1，h2等，當文本本來就是一個标題時）代替，增加了意義，或簡單地在CSS中使用font-size屬性，擷取更多的控制權。 

◆ small 可以産生小字型。CSS（font-size）再一次取得更多的控制權。 

◆ hr 可用用來展現一條水準線。在CSS中用hr設計很少見，CSS的border-top，border-bottom屬性或者樸素的圖像做這個效果會更好。 

上述的标簽與最新的HTML标準盡管都相容，但對内容卻沒有任何好标簽應有的意義。They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.

◆ u可以為元素産生下劃線。它提醒着下劃線文本還很多連接配接關聯。這就是這個标簽死了很久的原因——你不必給非連接配接文本下劃線。 

◆ center可以用來居中在元素内部的元素。CSS屬性text-align允許不僅僅是center，還有left、right和justify。 

◆ menu用來建立菜單清單。它并沒有ul做的完美，在因為無序清單更通用，ul高高地站在menu的屍體上。 

◆ layer和div元素相似，都由CSS絕頂位置。這僅僅能在老版本的Netscape中工作，是以再也沒有什麼用。 

◆ blink或者marquee。大聲說不！它們應該像本身意義一樣被期待，但有着十分有限的支援，和，隻會産生非常，非常惡心的笑話。 

◆ font，可以用來定義元素的字型名稱，尺寸和顔色，在标簽世界中理所當然地獲得了臭名昭著标簽之王榮譽稱号。舊的網站（甚至新的也有）像滿世界的瘟疫之蟻一樣布滿整個頁面。大部分的font标簽激增是從網頁制作軟體帶來的，把font标簽包括顔色和尺寸用在每一個元素。font标簽被濫用到出現在目前的每一個重複元素的（如，每次你使用p元素），而CSS，則可以用一條簡短的代碼來應用重複元素，甚至控制整個網站。使用CSS方法，不僅可以使頁面比被大量font标簽寄生的更苗條，而且更容易維護因為你所需要做得隻是改變CSS檔案中的一行，而不是逐一修改每一個font标簽。這也增加了維護一個一直保持設計風格一緻的網站的可能性。font标簽和不恰當的表格使用是兩個産生網頁不必要臃腫的主要原因。

可能你認為你正在使用良好的标簽，但還是有一些麻煩的寄生蟲屬性潛伏，它們随時會冒出來。

◆ name用來為一個元素指定一個名字，它在如input的表單元素中完全被接受，但在其它地方，name的工作已經被id屬性取代。 

◆ text和bgcolor可以在body起始标簽中定義頁面的基本文本顔色和背景顔色。CSS的color和background-color屬性在應用到body選擇符時也可以做到。 

◆ background可以在body标簽中指定一個背景圖畫。CSS會做得更好，用如background-image的屬性來處理背景圖檔。 

◆ link、alink、vlink在body标簽中用來指定連接配接（未通路，激活和已通路）。CSS寶貝── :link、:active和:visited會做這項工作。 

◆ align可以用來對齊某個元素的内容（比如 <div align="center">Stuff</div>），但是，像center标簽，CSS的text-align屬性是新的老闆。 

◆ target可以用不同的方式打開一個連接配接，最常用的是打開新視窗（比如<a href="wherever.html" target="_blank">Help me</a>）。看起來不錯，但你不要對你的網站這樣做。使用者并不預期不可思議的東西（比如新視窗）出現，而且最常用的浏覽工具是浏覽器的後退按鈕，如果你打開新視窗，這将不可用。它是非法和不易用的。