設計 HTML 圖片與圖片邊框間的距離 設計 HTML 圖片與圖片邊框間的距離可以利用
CSS 的
padding 屬性來設計，
padding 是所謂的內距，用來調整
盒子模型 中的元素與邊框之間的距離，以
HTML 預設的圖片來說，圖片本身與圖片邊框其實是連在一起的，所以很多人可能從來都不知道圖片有邊框，網頁設計師可以利用
padding 將圖片與邊框間的距離拉大以增加視覺效，也可以搭配陰影的效果來設計立體浮起來的視覺感覺。
CSS padding 內距屬性的語法 padding: 內距;
CSS 的 padding 屬性只要設定好內距就能使用，內距的設定方式可以是一次設定好四個邊或是每個邊獨立分開設計，詳細的用法可以參閱我們在《
CSS padding 內距屬性與用法範例 》篇的內容。
設計 HTML 圖片與圖片邊框間的距離實際範例 <img src="upload/20151214185452.png" style="border:2px #ccc solid;padding:5px;"><br>
<img src="upload/20151214185452.png" style="border:2px #ccc solid;padding:10px;"><br>
<img src="upload/20151214185452.png" style="border:2px #ccc solid;padding:20px;">
範例的效果
為了讓各位讀者朋友們可以看到利用
CSS padding 所創造出來的
HTML 圖片與圖片邊框間的距離效果，範例總共準備了三張圖片，分別將圖片與邊框間的距離設定為 5px, 10px 以及 20px，數字越大代表距離越大，效果應該很明顯吧！另外，範例語法中的 border 是用來設定圖片邊框用的，在這裡我們將邊框粗細設定為 2px、顏色為灰色。
HTML 表格增加背景圖片語法 HTML 表格增加背景圖片的語法普遍分為兩種，第一種就是傳統的
HTML background 屬性，直接將背景圖片套用在表格上，第二種方式是用
CSS 的
background-image 屬性替表格增加背景圖片，兩者的差別在哪裡呢？傳統的
HTML background 使用簡便，但背景圖片較難跟表格大小配合，而
CSS 的
background-image 則可以讓圖片很輕易的與表格寬度、高度完美結合，以下分為這兩種設計方式的範例給各位參考，原則上是建議使用
CSS 的設計語法，畢竟
CSS 已經大規模的取代傳統
HTML 設計模式了。
範例一、用 HTML background 替表格增加背景圖片 <table background="背景圖片網址" style="width:200px;height:133px;" border="1">
範例呈現效果
範例一是個簡單的四欄位表格，我們使用了
HTML background 插入一個寬度為 200px 及高度為 133px 的背景圖片，如果單純的把背景圖片插入表格，其實效果不會這麼好，因為表格預設的欄位也沒有這麼大格，所以我們在後面加上了
CSS 的 style 來宣告表格的寬度與高度，讓整個表格的大小與背景圖片吻合，看起來會比較漂亮些，HTML background 屬性與
CSS 搭配在一起設計也是蠻容易的，若您對於網頁表格的設計規則或是傳統的
HTML 背景設計方式有興趣，請參閱這兩篇。
接著我們來進一步的看範例二如何純用
CSS 完成表格背景圖片的使用。
範例二、用 CSS background-image 替表格增加背景圖片 <table style="background-image:url(背景圖片網址);width:200px;height:133px;" border="1">
範例呈現效果
範例二與範例一最大的差異在於把
HTML backgroucd 取消，直接在
CSS 的 style 裡宣告
background-image 標準的背景圖片設計屬性，可以與後面的表格寬度（width:200px;）、高度（height:133px;）完美結合，
CSS 對於網頁元素的尺寸設計比傳統的
HTML 更嚴謹。這裡有幾篇關於
CSS 的背景設計系列，建議仔細研究看看。
有了以上幾個
CSS 背景設計的技巧，不只是可以用在網頁表格上，其他許多的網頁元素如
DIV 區塊、
span 區域甚至是整個網頁（body）的背景圖片都可以使用，應用範圍相當廣泛，這也是
CSS 設計的優點。
HTML Table 表格邊框顏色與樣式設計 HTML Table 表格邊框顏色與樣式可以用
css 的
border-width 、
border-color 與
border-style 三種屬性來設計，也可以直接使用
css border 邊框屬性一次直接寫完，語法更簡潔且容易維護，一般普通的情況，表格的四個邊框幾乎都是一樣的顏色，僅有少數的時候會需要替四個不同方向設計不同的邊框，無論是哪一種情況，
css 都可以做得到，本篇介紹將提供幾個不同的範例，讓各位讀者看到不同的
HTML 表格邊框設計方式，這些範例幾乎所有主流的瀏覽器都支援。
HTML Table 表格邊框顏色與樣式設計範例一、四個邊框相同 <table style="
border:3px #cccccc solid; " cellpadding="10" border='1'>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
</table>
<table style="
border:3px #FFD382 dashed; " cellpadding="10" border='1'>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
</table>
<table style="
border:8px #FFD382 groove; " cellpadding="10" border='0'>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
</table>
呈現效果
範例一提供了兩種不同邊框顏色與樣式的表格，可以看到差異主要在 table 開頭標籤內的 border 設定，其他如 cellpadding 與
HTML 本身的 border 都只是要讓範例比較清楚而已。請注意、
css 的 border 與
HTML 預設的 table border 不一樣，
HTML 的 border 代表所有的框線而不是邊框，前兩個表格 border="1" 代表所有表格的框線都是 1，第三個表格的 border='0' 代表所有框線都是 0，所以各欄位間的框線也消失，若要進一步研究 HTML 表格設計的規則，請參閱這一篇：
HTML table 表格 。
在範例一中，我們都沒有使用到 border-color 或 border-style 獨立的寫法，若您對 css border 本身的框線設計技巧或各種效果的獨立寫法有興趣，這幾篇值得研究。
看完範例一的介紹，對於表格的四個邊框設計應該有所概念，範例二是不同邊框的設計方式，請繼續閱讀。
HTML Table 表格邊框顏色與樣式設計範例二、不同的邊框效果 <table style="border-top:3px #FFD382 solid;border-bottom:3px #82FFFF solid; " cellpadding="10" border='0'>
呈現效果
範例二中使用了
css border 設計上邊框與下邊框的語法，其中 border-top 用來設計上邊框，而 border-bottom 則用來設計下邊框，
css 的四個邊框各有不同的表示方式，在需要獨立修改某個邊框的時候非常實用。
border-top ← 用來設計上邊框。 border-right ← 用來設計右邊框。 border-bottom ← 用來設計下邊框。 border-left ← 用來設計左邊框。
範例二只設計了上邊框以及下邊框的風格，所以左邊框與右邊框都是沒有顯示的，所以用
css border 屬性來設計表格邊框，有寫出來的才會顯示，沒寫出來的邊框預設為 none，即不顯示。分別替各個方向設計比較費時，但可以設計出獨具風格的邊框樣式。
CSS background-color 背景顏色 CSS background-color 的功能用來設定網頁背景顏色，也可以用來設定網頁元素的背景顏色，例如
DIV 區塊、
span 區域、
表格 背 景甚至是文字背景顏色，都可以使用 background-color 的技巧來設計，background-color 可以使用的顏色值包含顏色英文名稱、十六進位制色碼以及 RGB 色碼，是 CSS 標準的網頁與元素背景顏色設計方式，所有的主流瀏覽器都支援 background-color 的屬性。
CSS background-color 基本語法 background-color: 顏色名稱或色碼 ;
語法中的顏色名稱或色碼可以自由決定，更多顏色請查詢：
色碼表 。
CSS background-color 語法範例一、網頁背景 <body style="background-color:gray;">
如範例所示，在網頁的 </body> 標籤中加入「style="background-color:gray;"」這樣的寫法，代表整個網頁的背景顏色都是灰色，gray 是灰色的英文名稱，也可以從
色碼表 中挑選更多的顏色，調整出不同的網頁背景顏色，來搭配整體的風格設計。
CSS background-color 語法範例二、DIV 區塊背景顏色 <div style="background-color:#FFBB73;">修改 DIV 區塊的背景顏色</div>
<div style="background-color:pink;">修改 DIV 區塊的背景顏色</div>
<div style="background-color:rgb(232,106,192);">修改 DIV 區塊的背景顏色</div>
以上範例呈現如
修改 DIV 區塊的背景顏色
修改 DIV 區塊的背景顏色
修改 DIV 區塊的背景顏色
範例中製作了三個不同顏色的
DIV 區塊，分別使用十六進位制的色碼、顏色的英文名稱以及 RGB 色碼，三種表示方式寫法的差別僅在顏色值，同樣的技巧還可用在其他的網頁元素，若想採用圖片當成背景，請參閱：
CSS background-image 背景圖片 。
修改超連結顏色 修改超連結的顏色通常可以讓網頁內的
超連結 較為符合整體的網頁設計風格，早期常見的網頁內
超連結 ，會採用預設的藍色顯示，閱讀過的
超連結 則是用紫色顯示，隨著網頁設計水準的提升，單就這樣的預設顏色，幾乎難以滿足高水準的設計風格，本篇將提供兩種不同的方式，來修改網頁超連結的顏色，都是
CSS 的技巧，這也是多數設計師會採用的方式，絕大多數的主流瀏覽器都支援以下範例。
修改超連結顏色方法一、直接在 <a> 標籤內修改 <a href="#" style="color:red;">修改超連結顏色為紅色</a>
以上寫法將輸出
直些在 <a> 標籤內修改顏色是比較簡單的一種方式，也是執行順序最高的一種，語法中的『style="color:red"』就是規定此條
超連結 的顏色為紅色，從《
色碼表 》裡還可以找到更多的顏色，當設計師把整個網頁的超連結顏色統一設計為某一種顏色，但其中幾條超連結必須使用不同的顏色，就可以使用這樣的技巧，瀏覽器會以 <a> 標籤內的顏色為優先顯示
。
修改超連結顏色方法二、另外寫 CSS 來修改，全網頁 <style>
a {
color:green;
}
</style>
<a href="#">修改超連結顏色為綠色</a>
以上寫法將輸出
第二種方法是在 <style> 標籤裡，另外寫
CSS 語法來管理網頁超連結的顏色，語法中 a 開頭的意思代表要設計「
a href 」的樣式，也就是網頁內超連結的樣式，其中『color:green』代表除了有額外設計顏色的
超連結 之外，其他所有
超連結 顏色都是綠色，同樣可以在《
色碼表 》找到其他顏色來取代，這樣的寫法適合一次管理整個網頁內的所有超連結，是許多大型商業網站會採用的方法。
修改超連結顏色 修改超連結的顏色通常可以讓網頁內的
超連結 較為符合整體的網頁設計風格，早期常見的網頁內
超連結 ，會採用預設的藍色顯示，閱讀過的
超連結 則是用紫色顯示，隨著網頁設計水準的提升，單就這樣的預設顏色，幾乎難以滿足高水準的設計風格，本篇將提供兩種不同的方式，來修改網頁超連結的顏色，都是
CSS 的技巧，這也是多數設計師會採用的方式，絕大多數的主流瀏覽器都支援以下範例。
修改超連結顏色方法一、直接在 <a> 標籤內修改 <a href="#" style="color:red;">修改超連結顏色為紅色</a>
以上寫法將輸出
直些在 <a> 標籤內修改顏色是比較簡單的一種方式，也是執行順序最高的一種，語法中的『style="color:red"』就是規定此條
超連結 的顏色為紅色，從《
色碼表 》裡還可以找到更多的顏色，當設計師把整個網頁的超連結顏色統一設計為某一種顏色，但其中幾條超連結必須使用不同的顏色，就可以使用這樣的技巧，瀏覽器會以 <a> 標籤內的顏色為優先顯示
。
修改超連結顏色方法二、另外寫 CSS 來修改，全網頁 <style>
a {
color:green;
}
</style>
<a href="#">修改超連結顏色為綠色</a>
以上寫法將輸出
第二種方法是在 <style> 標籤裡，另外寫
CSS 語法來管理網頁超連結的顏色，語法中 a 開頭的意思代表要設計「
a href 」的樣式，也就是網頁內超連結的樣式，其中『color:green』代表除了有額外設計顏色的
超連結 之外，其他所有
超連結 顏色都是綠色，同樣可以在《
色碼表 》找到其他顏色來取代，這樣的寫法適合一次管理整個網頁內的所有超連結，是許多大型商業網站會採用的方法。
HTML5 video 影片標籤 HTML5 video 是影片標籤，可以在瀏覽器中很容易的插入影片，還能夠設定影片長、寬、增加影片播放控制列、是否自動播放、是否自動重覆播放等功能，雖然使用 HTML5 video 影片標籤來播放影片相當的容易，但現階段要考慮瀏覽器的支援情形，例如 IE 9 才開始支援 HTML5 video 標籤，其他主流的瀏覽器如 Firefox、Chrome、Opera、Safari 都有支援，但影片格式也有所差異，後方介紹。
HTML5 video 影片標籤語法 <video src="影片連結" controls></video>
HTML 5 <video> 標籤裡的 src 是最重要的屬性，影片連結就放在 src= 的右方引號內，另外可以加入幾個控制選項屬性，例如加入 controls 會出現控制功能列、加入 width 可以設定影片寬度、加入 height 可以控制影片高度、加入 loop 可以重覆播放、加入 autoplay 可以在影片準備好時自動播放、加入 preload 會在網頁載入時就準備播放，不過如果同時使用 autoplay 與 preload，會以 autoplay 屬性為主。
瀏覽器對 HTML5 video 影片標籤以及影片格式的支援 HTML 5 目前所支援的影片格式有三種，分別為 ogg、mpeg 4、WebM，這麼多種格式不知道要怎麼選擇也沒關係，<video> 標籤有支援多重影片功能，也就是說，可以將同一個影片，準備三種不同的格式，當網友用不同的瀏覽器開啟時，<video> 標籤會自動根據當時的瀏覽器，播放適合該瀏覽器所支援的影片格式，這樣就解決不知道該用哪種格式的問題了，但像是 IE 7、IE 8 等較舊的瀏覽器，本身並不支援 <video> 標籤，所以依然無法順利播放影片，以下準備了一張表格，提供給各位參考。
瀏覽器 ogg MPEG 4 WebM FireFox 4.0 支援 不支援 支援 Chrome 5.0 支援 支援 支援 Safari 3.0 不支援 支援 不支援 Opera 10.5 支援 不支援 支援 IE 9 不支援 支援 不支援
這 張表上的瀏覽器支援影片格式可能隨著瀏覽器的進化而有所改變，建議在使用影片格式同時，多測試當時的各家瀏覽器支援情況，目前看來 Opera 與 IE 的支援格式剛好相反，Safari 與 IE 的支援格式剛好相同，而 Chrome 則是所有格式都支援，Google 果然是 HTML 5 支持者。雖然有三種格式可以選擇，但其實仔細看，不難發現，準備 ogg 與 mp4 兩種格式，就可以滿足大部分的瀏覽器了。
HTML 5 <video> 影片標籤範例 <video width="360" height="270" controls>
以上範例輸出結果
在範例中，我們使用了多重影片載入的方式，運用了 ogg 與 mp4 這兩種影片格式，讓 <video> 標籤自動根據瀏覽器判斷要顯示哪一種格式，且 ogg 與 mp4 剛好也涵蓋了以上幾個主流瀏覽器的支援範圍，所以正常來說應該都可以順利播放。另外，我們也在 <video> 標籤中使用了調整影片寬度（width）與高度（height）的屬性，且增加了 controls 讓影片有播放功能列，可以調整音量、選擇影片播放位置、開始與暫停、全螢幕等，大至上的影片播放功能也差不多是這樣。最後提醒一下，雖然 HTML 5 <video> 標籤用來播放影片相當的容易，但影片的內容就顯得相當重要，絕對不要在網頁上，使用未經授權的任何影片，避免侵害他人智慧財產權。
替 HTML5 Video 額外增加影片控制選項 HTML5 video 影片播放功能可以說是
HTML5 的一項重要功能，雖然說瀏覽器內建的 HTML5 video 播放器幾乎都有控制選項，但有的時候設計內容還是會需要額外的控制選項，來搭配整體的風格，基於瀏覽器
DOM 的 API 連接功能，我們可以很容易的製作額外的控制功能鍵，與 HTML5 video 播放器做橋接，進而達到控制影片播放的功能，例如開始播放、暫停影片或是調整影片顯示大小等。
HTML5 Video 基本語法 <video src="影片連結" controls></video>
語法中的影片連結與 controls 有多種技巧，詳細語法請參閱：
HTML5 video 影片標籤 。
範例一、控制 HTML5 Video 影片大小 <script language="javascript">
以上範例輸出
範例中製做了開始播放以及暫停撥放影片的按鈕，當選擇其中一個按鈕，將會觸發
JavaScript 的事件，與 Video 產生溝通，透過
DOM 的
document.getElementById 取得 id 為 MovieShow 的影片，並要求播放（play）或暫停（pause），預設的影片在網頁載入時並不會播放，所以暫停功能剛開始無法使用，選擇播放影片後，隨時都可以使用 暫停功能，若接著再要求播放時，影片會接著剛剛暫停的時間點，繼續開始播放，而不是重新開始，當然，也可以透過
JavaScript if...else... 製作出整合暫停與播放的功能的單一鍵。
範例二、控制 HTML5 Video 暫停與播放 範例中製做了開始播放以及暫停撥放影片的按鈕，當選擇其中一個按鈕，將會觸發
JavaScript 的事件，與 Video 產生溝通，透過
DOM 的
document.getElementById 取得 id 為 MovieShow 的影片，並要求播放（play）或暫停（pause），預設的影片在網頁載入時並不會播放，所以暫停功能剛開始無法使用，選擇播放影片後，隨時都可以使用 暫停功能，若接著再要求播放時，影片會接著剛剛暫停的時間點，繼續開始播放，而不是重新開始，當然，也可以透過
JavaScript if...else... 製作出整合暫停與播放的功能的單一鍵。
範例二、控制 HTML5 Video 暫停與播放 控制播放器大小的方式與上一個範例類似，但要注意的是 HTML5 video 播放器大小需要同時設定寬度（width）與高度（height）才不容意出現瑕疵，他不像
HTML img 的特性在各瀏覽器中，只要給出寬度，通常就會自動縮放圖片大小，HTML5 video 的影片本身也許會等比例縮放，但整個播放範圍卻不是每個瀏覽器都會自動等比例縮放，所以設計師在製作調整大小功能的時候，應該要把寬度與高度的比例算出 來，並寫入程式碼中，盡量避免網友在使用調整大小功能時，出現網頁版塊出現非預期推擠的情況。
HTML textarea 文字輸入欄位背景圖片 替 HTML textarea 文字輸入欄位背景圖片可以使用 css 的
background-image 背景圖片屬性，通常還會搭配上 textarea 的寬度（width）與高度（height）屬性，避免背景圖片與
textarea 的大小不合而變形的情況，本篇介紹將展示如何替
textarea 加入背景圖片的語法及範例效果，讓原本平淡無味的
textarea 變得比較有質感一些，幾乎所有主流的瀏覽器都支援這種寫法。
HTML textarea 文字輸入欄位背景圖片範例 <textarea style="background-image:url(背景圖片);width:600px;height:400px;">
呈現效果
範例的重點在開頭
textarea 內的 style 語法，首先
background-image 是用來設定背影圖片的屬性，url 小括號內就是圖片的位置（即網址，最好不要使用外部圖檔，以免產生無法預期的破圖現像），接著設定的寬度為 600px（width：600px;）及高度 400px（height:400px;），這樣設定是因為背景圖片也是同樣的規格，如此一來才能讓準備好的背景圖片完美填滿整個
textarea 文字輸入欄位的範圍，如果你對 textarea 文字欄位語法或 css 的 background-image 屬性用法還不是很熟悉，請參考這兩篇的內容。
使 用背景圖片要注意幾個重點，首先是不可以隨意盜用網路上的圖片，要尊重別人的智慧財產權，再來是背景圖片最好不要太過搶眼，淡化效果或是材質圖片都會比完 全不處理的照片來得適合，因為太清楚的照片很容易讓網友填寫文字時，產生不舒適感，甚至直接放棄填寫。最後，如果你覺得採用背景圖片太麻煩，還要自己準備 圖片，不如直接改背景顏色來得有效率，你可以參考這篇的介紹內容。
無論是修改 textarea 的背景圖片或背景顏色，都應該盡量與整體網頁風格搭配。
HTML meta 標籤 HTML meta 標籤可以用來提供網頁內容的資訊給瀏覽器或是搜尋引擎，例如網頁內容的描述、網頁重要關鍵字、網頁編碼等都是常用 meta 來標示的網頁資訊，另外還有網頁作者、網頁發佈時間、所使用的編輯器等較不重要的資訊，也可以透過 META TAG 來標示，META 的功能僅是用來註明這些網頁資訊，且提供給瀏覽器或是搜尋引擎，並非是要給寫給瀏覽網頁的＂人＂看的內容。
HTML meta 標籤寫在 head 範例 <head>
標準的 <meta> 標籤沒有結尾，直接將參數寫在 <meta> 內即可，一個網頁內可以有很多個不同的 <meta> 標籤，全部都要寫在 head 標籤內，範例中的
title 標籤是用來標示網頁標題用的，可以寫在 <meta> 標籤之前，也可以寫在 <meta> 標籤之後。
傳統的 HTML meta 標籤的功能，共有兩個重要的部分，分別為 name 與 http-equiv，隨著 HTML 的版本更新，到現在最新的
HTML5 已經開始支援 charset 的語法，以下就這三個部分製作成表，提供給各位參考。
HTML meta name 常用屬性 語法 說明 <meta name="description" content="網頁簡短描述"> 用來寫網頁的簡短描述。 <meta name="keywords" content="網頁關鍵字"> 用來放置網頁關鍵字。 <meta name="author" content="作者姓名"> 記錄網頁的作者名稱 <meta name="generator" content="編輯器名稱"> 用來記錄網頁編輯器名稱 <meta name="copyright" content="網頁版權"> 用來標示網頁的版權或著作權聲明 <meta name="distribution" content="網頁發佈地區"> 用來記錄網頁的發佈地區
最 常用到的 meta tag 其實僅有前面兩個，也就是 name=descript 以及 name=keywords，每個 meta 使用 name 的時候，都會搭配 content 來呈現資訊內容，簡單來說，name 代表資訊項目，content 代表資訊值。
HTML meta http-equiv 常用屬性 語法 說明 <meta http-equiv="Content-Type" content="text/html"; charset="uft-8″> 網頁內容的種類以及編碼 <meta http-equiv="Content-Language" content="zh-TW"> 網頁所使用的語言種類 <meta http-equiv="Refresh" content="time"> 自動更新網頁的時間 <meta http-equiv="Pragma" content="no-cache"> 禁止瀏覽器用快取開啟網頁 <meta http-equiv="windows-Target" content="_top"> 強制在單一視窗中顯示網頁
HTML 5 新增的 meta 功能 語法 說明 <meta charset="UTF-8"> 設定網頁編碼，UTF-8 是萬國碼
HTML5 可說是 HTML 網頁進化幅度非常大的一個版本，僅需用如此簡短的寫法就能夠標示網頁的編碼，也隨著 UTF-8 萬國碼的普及，建議各位設計師在設計網頁時，盡量以 UTF-8 為主，畢竟這樣在較多國家不同版本的瀏覽器，比較不容易出錯。
HTML img title 滑鼠移經顯示文字標示 HTML img title 的用法與
img alt 類似，但實際用途並不一樣，img title 用來當滑鼠移經（mouseover）圖片時，顯示圖片的文字標示，這樣的好處是可以增加網友對該張圖片的認識，可以用來為圖片加上一點點的文字標示。
HTML img title 語法範例 <img src="圖片網址" title="要顯示的圖片標示文字">
要顯示的圖片標示文字可以用繁體中文，字數建議不要太多，僅對圖片做簡單的文字標示即可。
HTML img title 圖片標題範例 <img src="upload/20140906122827.jpg">
<img src="upload/20140906122827.jpg" title="這是圖片標題文字">
範例呈現的效果
我 們在範例中準備了兩張圖片，左邊的那張圖片沒有使用 img title，而右邊的那張則有使用 img title，從範例輸出的結果可以測試，當滑鼠移到左邊的範例圖片上並不會有任何的效果，但是當滑鼠移至右邊的範例圖片上，就會顯示出圖片標題文字，這就 是 HTML img title 的實際效果。提醒各位，圖片的標題文字不要寫太多，太過冗長反而失去意義。
HTML select option 下拉式選單 HTML select option 是下拉式選單，通常用在表單（
HTML Form ）中，可以自己設定選項（option），每個選項給不同的值，例如讓網友選擇年齡、居住縣市、購買款式等等都是常見的應用。
<form>
呈現結果如
此 範例中的 <select name="YourLocation"> 是下拉式選單的開頭，而 </select> 是結尾，這裡的 name 是此下拉式選單的名稱，可以自己設定，建議使用英文字母做為選單的名稱，包在裡面的每個 <option></option> 標籤則是選項，每個選項都有一個獨特的值（value），用來判斷網友所選擇的項目，value 的部分是讓程式讀的，不會顯示在頁面上，建議使用英文字母，而 <option></option> 中的文字就是讓網友看的內容，可以使用中文或符號，一個簡單的 select option 下拉式選單大致上就完成了。
HTML select option 下拉式選單除了可以放在表單中，也可以放在網頁中直接使用，再透過
JavaScript 的事件製作一些特效，例如有些人會用 onchange 做跳頁選單，當網友選擇好項目後，自動轉到新的頁面，不需要按送出按鈕。
HTML input text 文字輸入欄位 HTML input text 文字輸入欄位用來讓網友輸入文字，與
input password 不同，input text 並不會將文字轉變為隱藏符號，而只是單純的顯示網友所輸入的內容，且僅能顯示單行文字，要顯示多行內容請使用
textarea 標籤。
HTML input text 文字輸入欄位範例 <form>
呈現結果
請輸入文字： 由於 input text 通常用在
HTML Form 表單讓網友填資料，所以要放在 <form></form> 標籤中，這樣當網友填好資料並送出表單後，才能夠順利將資料送到後端的程式處理。範例中的 name 指的是這個欄位的名稱，可以自己設定，建議用英文字母編寫。
除此之外，可以使用
CSS 來將 input text 設計出更漂亮的風格，例如寬度、內距（
padding ）、邊框（
border ）、背景（
background ）甚至是文字的字型（
font-family ）等，如果想要做些互動特效，還可以加上
JavaScript 的事件，變化相當多。
HTML Radio Buttons 選項按鈕 Radio Buttons 在
HTML 表單中用來讓網友一次選擇一個項目，且僅能選擇一個項目，若要可以選擇多個項目，可以使用
Checkboxes 而不是 Radio Buttons 選項按鈕，當你設定一組 Radio Buttons 的 name 都相同時，網友僅能就這組 Radio Buttons 選擇其中之一的項目。
HTML Radio Buttons 選項按鈕範例 <form>
呈現結果如
這 個範例我們設定台灣各地區的地名讓網友選擇居住區域，為了縮短篇幅，只寫了台北與桃園兩個地區。可以看到 Radio Buttons 的基本寫法是 <input type="radio"> 這個樣子，裡面包含了 name 與 value 兩個重點，我們統一設定 name="location"，代表這是一組的選項按鈕，所以網友一次僅能選擇一個地區，value 就是該選項的值，此值是用在送出表單後，讓
PHP 等程式讀取用的，網友在網頁上不會看到。
Radio Buttons 選項按鈕常常與 Checkboxes 核取方塊混搭使用，應用上的差別是 Radio Buttons 通常用單選，而 Checkboxes 則常用在可以選擇許多項目的情況，要怎麼斟酌就看當時表單設計上的需求而定。
HTML form Checkboxes HTML form Checkboxes 用在表單（
HTML form ）做為核取方塊使用，當你決定給網友許多選項去選擇，例如會員註冊的時候，勾選他的興趣，可以只選擇一項，也可以選擇多項，甚至是不勾選，送出表單後，就可以使用
PHP 來取得網友所選擇的項目。
HTML form Checkboxes 範例 <form>
呈現結果如
正如一開始所說的 checkbox 是用在表單中的應用，所以範例中我們用表單標籤 <form></form> 將三個 checkbox 選項包起來，除了用在表單之外，你也可以將 checkbox 用在其他
JavaScript 的應用上，不過那需要其他
JavaScript 語法的技巧，不在此篇介紹範圍內。
範例的每個 checkbox 都有相同的 name，如此一來我們可以輕鬆的將三個 checkbox 歸類為一組，而每個 checkbox 的 value 都不一樣，在網友勾選完他們的興趣並送出表單後，
PHP 程式才能判斷哪些有勾選，哪些沒有勾選。
HTML blockquote 縮排語法 寫文章的時候偶爾會用到縮排的技巧讓文章更有整體感，在 HTML 的文章編排中，可以使用 <blockquote> 標籤來達到縮排效果，而且重覆使用可以縮排更多個單位，這樣的技巧也可以用在部落格的文章中，看看以下的範例就知道如何使用囉！
範例一、HTML blockquote 縮排語法，僅縮一個單位 <blockquote>這裡是縮排文字</blockquote>
呈現效果
僅使用一組 <blockquote> 標籤將文字包含在內，這樣就可以縮排一個單位。
範例二、HTML blockquote 縮排語法，縮兩個單位 <blockquote><blockquote>這裡是縮排文字</blockquote></blockquote>
呈現效果
由範例二可以看到我們一次使用了兩個 <blockquote> 標籤，相較於範例一，已經成功的縮了兩個單位的縮排距離，你也可以嘗試多單位的縮排，只要用更多 <blockquote> 標籤層層包覆即可。
HTML button style 最基本的
HTML button 可以使用 <button> 標籤來製做，這樣的好處是語法簡單，幾乎各瀏覽器都支援，但是當你的網頁需要有比較特殊的美工設計時，單純的按鈕不見得可以搭配美美的版型，所以這時候，可以加上一些 style 來裝飾，而這些 style 通常都是
CSS 語法，你可以在我們的
CSS 分類中找到許多好用的語法，這篇文章簡單的做幾個 HTML button style 的範例給各位參考。
範例一、透過 style 修改 button 的背景顏色與文字顏色 <button type="button" style="background-color:blue;color:white;">我是按鈕</button>
此範例中我們採用的 style 來宣告樣式的語法，其中 background-color:blue 指的是背景顏色為藍色，而 color:white 則代表文字是白色，這些顏色你都可以自己決定，依照版型做搭配。
範例二、透過 style 修改 button 的邊框 <button type="button" style="background-color:blue;color:white;border:5px #cccccc solid;">我是按鈕</button>
延續範例一的按鈕，我們加入了邊框的語法，border:5px #cccccc solid 這段語法代表的是邊框寬度設定為 5px、邊框顏色設定為灰色，框線的款式為實體線（solid），如此一來，這個 button 就有灰色的邊框囉！
範例三、透過 style 修改 button 的背景圖片 <button type="button" style="background-image:url(圖片網址);width:80px;height:25px;">我是按鈕</button>
範例三比較特別一點，我們直接把背景顏色改成圖片的呈現方式，為了 button 的大小可以與圖片完整的融合在一起，所以還加上的寬度與高度的設定，用這樣的技巧，你可以自己設計與網頁風格融合的按鈕背景圖片。
HTML button onclick 跳頁做法範例，也可以回上一頁 HTML 的 Button 按鈕的應用範圍很廣泛，最常見的用法當然就是送出表單，不過 Button 還可以與 JavaScript 搭配製做出許多其它好用的應用，例如開啟新視窗（
window.open ）或利用 onclick 事件製做跳頁，也就是按下按鈕後，會自動轉到另一個網頁，這篇就是要教你如何製作 button onclick 的跳頁，共有兩個範例，分別是 onclick 後回到首頁以及 onclick 後回到上一頁。
範例一、假設我們要跳到本站首頁，語法如下 <input type ="button" onclick="javascript:location.href='http://www.wibibi.com'" value="回到 Wibibi 首頁"></input>
呈現結果
其中 onclick 的時候，我們用了 JavaScript 的 location.href 語法，將網頁帶到本站首頁，你也可以將網址改為其它網頁，button 的 value 指的是按鈕的値，這個也可以自己設定。
範例二、button onclick 後回到上一頁，語法如下 <input type ="button" onclick="history.back()" value="回到上一頁"></input>
範例中，我們採用了 history.back() 的語法，代表的是回到瀏覽器紀錄的上一頁，這也代表如果沒有紀錄，就不會有反應。回到上一頁的做法有很多，我們也有詳細的介紹，請看延伸閱讀。
HTML button image 圖片按鈕 HTML 預設的按鈕如果不能滿足你的頁面需求，除了可以用
CSS 語法來做些邊框或顏色的修改之外，還可以直接用圖片（image）來修飾，當然如果能再加上一些些
CSS 語法修飾也許會更好看。
圖片按鈕範例一、單純的 HTML button image <button type="button"><img src="圖片網址"></button>
在範例一中，用的是 HTML 原本的 <button> 標籤，把圖片（image）包在裡面，呈現結果就像上方這樣。
圖片按鈕範例二、透過 CSS 語法設計 <input type="button" style="background-image:url(圖片網址);width:80px;height:25px;">
第二個範例用
CSS 修飾過後，是不是 button 與 image 更能融合再一起了呢？
background-image 是 CSS 語法中用來規定背景圖片用的，我們的範例圖片規格為長 80px、寬 25px，所以把長寬一併寫在 style 裡面，呈現效果比單純 HTML 的設計更加漂亮。
HTML hr 分隔線標籤用法 HTML 中的 <HR> 標籤袋表的是水平分隔線，早在早期的 HTML 語法就已經存在的 <HR> 標籤，幾乎所有主流的瀏覽器都支援，
<hr> 分隔線語法範例
這是標題
在 這個範例中，文章標題與文章內容間將會插入一條水平分隔線，HR 大寫或小寫都可以，預設 HTML hr 的粗細為 1，所以看起來蠻粗一條的，寬度則為 100%，也就是分隔線的寬度會隨著網友螢幕的寬度而改變，如果想改變 HR 分隔線的樣式，可以用類似以下這樣的範例。
<hr size="8px" align="center" width="100%">
範例的意思是將這條分隔線的粗細設定為 8px（蠻粗的，為了範例呈現效果較為顯著才設定這麼粗），水平置中對齊，寬度為 100%（跟預設的一樣），你也可以嘗試改變參數，設計一條不一樣的分隔線。
HTML button reset 清除表單按鈕 你一定常常看到這樣的應用，例如填個會員註冊表單或是訂購表單，會有一個清除重填的按鈕（
HTML button ），這樣的按鈕當然是用來快速清除表單資料，方便網友重新填寫而設計的，這樣的按鈕在 HTML 中只需要靠 reset 的設定就可以做到。
語法範例
<form>
呈現結果
範 例說明：我們在表單 <form> 中用了兩個 <input> 標籤，分別是 text 與 reset，text 是用來輸入文字的文字區塊，而 reset 就是本篇介紹的重點，清除表單資料，在範例的呈現結果中，你輸入的文字，只要按下清除表單，馬上就會清空囉！
滑鼠移入就會自動停止的網頁跑馬燈語法 網頁跑馬燈的多種呈現方式造就了相當多的應用，除了一般常見的單純跑動方式之外，如果用在像是最新消息這的資訊欄中，最好是能夠加上滑鼠移入就會自動停止的效果，比較貼近使用者的需求。
滑鼠移入自動停止的跑馬燈語法
<marquee onMouseOver="this.stop()" onMouseOut="this.start()">這裡放要跑的文字或圖片</marquee>
呈現效果
這裡放要跑的文字或圖片
比較特別的是在跑馬燈的設定中，我們加入了
Javascript 的語法，onMouseOver 的意思是當滑鼠移入的時候，執行 this.stop() 的命令，也就是停止跑馬燈，onMouseOut 則是代表滑鼠移走的時候，執行 this.start() 的命令，讓跑馬燈繼續跑動。
