<特殊字元> 因為在HTML中可能有些字元很難顯示，譬如說我們想在網頁中顯示<font>的字樣，font 一定可以顯示，但<跟>符號會被認為是標籤符號，結果就是整個內容被視為無效標籤。 如果要輸入這些特殊的符號，可以在html中寫入這些代替： &lt; "<"小於 &rt; ">"大於 &amp; "&"&符號 &nbsp; " "空格 &quot; """雙引號 <表格> <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)