HTML的一些小講解(特殊字元、表格、表單)
<特殊字元>
因為在HTML中可能有些字元很難顯示，譬如說我們想在網頁中顯示<font>的字樣，font
一定可以顯示，但<跟>符號會被認為是標籤符號，結果就是整個內容被視為無效標籤。
如果要輸入這些特殊的符號，可以在html中寫入這些代替：
< "<"小於
&rt; ">"大於
& "&"&符號
" "空格
" """雙引號
<表格>
<table></table>表格
這個標籤可以宣告要製造一個表格，但單有這個標籤沒有用處，它只負責表示表格這個
整體，是用來增加表格屬性的。如果要製造表格的內容，我們需要幾個子標籤：
<tr></tr>列
<td></td>行
<th></th>標題行
表格的製作比較類似這樣的形式：
□→□→□→□...
↓
□→□→□→□...
↓
□→□→□→□...
...
每列為一單位(就是一個<tr>標籤)，每列又以<td>作為一行。所以，假設我們要製作寬為
1，高為2的表格(之後簡稱1x2)，就是這樣子寫：
<table>
<tr> <!--第一列開始，還有我是註解-->
<td>hello</td> <!--第一列第一行-->
</tr>
<tr> <!--第二列開始-->
<td>hello</td> <!--第二列第一行-->
</tr>
</table>
這樣就會產生如下的表格了
□
□
又如果我們要製造3x3，就以此類推繼續寫：
<table>
<tr>
<td>aaa</td> <td>bbb</td> <td>ccc</td>
</tr>
<tr>
<td>aaa</td> <td>bbb</td> <td>ccc</td>
</tr>
<tr>
<td>aaa</td> <td>bbb</td> <td>ccc</td>
</tr>
</table>
那<th>標籤呢？用法跟<td>完全一樣，但是其中的文字會是粗體置中，通常用來製作表
格的起頭。大部分情況，可以跟合併標籤一起使用(待會再說)。
注意可能目前你所製造出來的表格沒有框線，這是正常的，因為框線必須透過指定一些屬
性來製作。通常大部分的屬性，<table>標籤所用的屬性<td>也大多能用。
<table>屬性：
align:對齊方式
background:背景圖片，值是圖片的路徑
bgcolor:背景顏色
border:表格外框粗細
bordercolor:表格框線顏色
bordercolordark:表格框線暗面顏色
bordercolorlight:表格框線亮面顏色
cellpadding:表格框線與內容間的空白量，允許使用數字(像素)或百分比為值
cellspacing:設定格與格間的空白量，也允許使用數字或百分比為值
class:CSS的類別選取器定義樣式用
dir:文字方向
height width:表格的寬高
id:元素名稱
style:CSS的樣式定義規則
summary:表格的簡短註解(不會顯示)
title:滑鼠移到表格時的註解文字
其中表格還有很多的設定可以透過style的CSS設定來達成。
<td>屬性(只列出td獨有的屬性，當然，th也共用)：
colspan:水平合併表格，決定此格會佔據幾欄的位置。
rowspan:垂直合併表格，決定此格佔據幾列的位置。
valign:指定垂直對齊方式，可用值有三種：
top:置頂對齊
middle:置中對齊(預設值)
bottom:置底對齊
所以，如果今天想要建造一個2x2的表格，但是第一列的那格橫跨兩格，可以這樣：
<table>
<tr>
<td colspan=2>this is title</td>
</tr>
<tr>
<td>aaa</td> <td>bbb</td>
</tr>
</table>
又如果想要把2x2表格的第一行全部合併，則：
<table>
<tr>
<td rowspan=2>this<br>is<br>title</td> <td>aaa</td>
</tr>
<tr>
<td>bbb</td>
</tr>
</table>
此時第二列的<tr>標籤中就必須少一個<td>。
來個複雜一點的好了，假設想要製作這樣的表格：
┌─┬─┬─┬─┐
│CE│／│＊│－│
├─┼─┼─┼─┤
│１│２│３│ │
├─┼─┼─┤＋│
│４│５│６│ │
├─┼─┼─┼─┤
│７│８│９│ │
├─┴─┼─┤＝│
│ ０ │。│ │
└───┴─┴─┘
就變成這樣做了：
<table>
<tr>
<td>CE</td> <td>/</td> <td>*</td> <td>-</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td rowspan=2>+</td>
</tr>
<tr>
<td>4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td> <td>9</td> <td rowspan=2>=</td>
</tr>
<tr>
<td colspan=2>0</td> <td>.</td>
</tr>
</table>
表格大約就講解到這樣...其實如果有志想把作業作成像討論區那種表格的人可以練習
練習。
<表單>
表單簡單說就是一份由Client客戶端來填寫的東西，填寫的內容可以透過javascript或
php等語言做處理，這些語言這裡不討論，這裡只討論一些表單的標籤而已。
<form></form>表單
宣告一份表單，跟表格一樣，這個標籤沒有任何作用，只會宣告一些表單整體的屬性。
所有表單的元素標籤如下：
<input>輸入資料
雖說是輸入資料用，<input>標籤透過給定屬性之後，幾乎可以給定所有的表單元件。
這個標籤同時是單獨使用。
<input>屬性：
type:指定input標籤的元件型態，值有以下這些：
button:製造按鈕
checkbox:核取方塊
file:文字欄位附加一個"瀏覽"的按鈕
hidden:製造一個看不見的欄位
image:產生一張圖片，使用者按下圖片後送出表單資料
password:產生密碼欄位，輸入的資料以密碼型態顯示
radio:單選式方塊
reset:製造"重設"按鈕
submit:製造"送出"按鈕
text:產生文字欄位
其他屬性可能對某些元件有效，有些則無效，分述如下：
align:對齊方式
→image
alt:滑鼠的註解文字
→image
autocomplete:值是布林值，將文字與密碼的欄位自動輸入，使用者就不需再重新輸入
一次。
→text,password
checked:預設核取，該元件開始就會是選取的狀態，沒有指定值。
→button,checkbox
class:CSS類別選取器定義樣式用
→全部
disabled:設定是否啟用這個元件，值是布林值
→全部，不包含hidden
hspace vspace:設定元件左右/上下空白量
→button,image
id:元素名稱
→全部
maxlength:設定文字欄位最長的輸入字元數
→text,password
name:元件的名稱，會是送出標單時的名稱，值是任意文字
→全部
readonly:不能更改文字欄位的內容，值是布林值
→text,password
size:元件的寬度，單位是字元
→全部，不包含hidden
src:圖片檔的路徑
→image
style:CSS樣式定義規則
→全部
title:滑鼠移到元件的註解文字
→全部，不包含hidden
width:元素的寬度
→全部，不包含hidden
<select></select>下拉選單
建立一個下拉選單，只有這個標籤並不會有效果，必須配合子標籤<option></option>
使用。
語法是這樣的：
<select>
<option value="1">第一項</option>
<option value="2">第二項</option>
<option value="3">第三項</option>
</select>
其中每一個選項是以option標籤來定義，option的屬性value則決定當表單回傳時，這個
選單的回傳值。
另外，如果要把option的選項分組，可以使用<optgroup></optgroup>。
<select>
<optgroup>第一組
<option>1-1</option>
<option>1-2</option>
</optgroup>
<optgroup>第二組
<option>2-1</option>
<option>2-2</option>
</optgroup>
</select>
<select>屬性：
align:對齊方式
class:CSS類別選取器定義樣式用
id:元素名稱
multiple:改為"多選式選單"，沒有指定值
name:元件名稱，回傳的時候必備
size:選單顯示數，如果數字小於選項數目，就會是下拉選單，預設值為1
style:CSS樣式定義規則
title:註解
<option>屬性：
class:CSS類別選取器定義樣式用
dir:文字方向
selected:預設的選項，沒有指定值
value:該選項的值，會是選單的回傳值
<textarea></textarea>文字方塊
製作一個可輸入多行文字的方塊。放在標籤內的文字會變成文字方塊內的預設文字。
<textarea>屬性：
class:CSS類別選取器定義樣式用
cols:文字方塊最多的一行容納字元數(簡單說就是寬度)，超過這個數字的輸入會斷行
rows:文字方塊最多容納幾行，就是指高度
contenteditable:設定文字方塊的內容是否可更改，值是布林值
disabled:設定文字方塊啟用與否，沒有指定值
id:元素名稱
name:元件名稱，回傳值時必備
readonly:設定元素內容為唯讀，沒有指定值
style:CSS樣式定義規則
title:註解
wrap:決定文字方塊中的分行方式，可用值有三種：
soft:超過文字方塊寬度(cols)時自動斷行(預設值)
hard:會斷行，傳回時會產生斷行字元
off:不斷行
<fieldset></fieldset>表單區塊
繪製一個矩形把內容的表單集結起來。
今天暫且寫到這...應該再一篇就可以講完html了。
寫鋼彈去囧
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.121.11.252
※ 編輯: joehuang92 來自: 59.121.11.252 (12/26 11:47)
→
12/26 12:30, , 1F
12/26 12:30, 1F
推
12/26 16:45, , 2F
12/26 16:45, 2F
→
12/26 17:29, , 3F
12/26 17:29, 3F