❏ 認識 - 清單標籤
如果你今天在看食譜網站，隨意點進去一道菜色中，它會透過條列的方式讓你知道可以怎麼備料，也會用依序列點的方式教你做菜，這時候要如何使用 HTML 的標籤來列出這些清單和依序列點呢？有一個語法可以輕鬆完成清單的效果。
清單的標籤語法如下：
<ol>有序清單</ol>
<ul>無序清單</ul>
倘落我們希望這個食譜中的步驟，是有順序的清單內，來告訴大家使用的步驟，這時候就可以使用 來呈現，那麼當我們訂好呈現方式為依照順序，我們就得在 ol 的標籤裡放入清單，而清單就可以用 來表示，還記得前一天提過，如果要在標籤裡再夾個標籤，可以用縮排書寫，而這個一層裡面又包著一層的架構，我們稱為巢狀架構，說明了那麼多，我們用語法來看看到底要怎麼做出有序清單！
我們今天希望頁面顯示畫面如下
1.打開冰箱
2.拿出啤酒
3.大口喝下
這時語法可以怎麼寫呢？
顯示畫面為：
當你發現標籤裡面還包著標籤的時候，形成了一個階層結構，通常我們會稱這樣為巢狀標籤。而結構的第一層，我們通常會稱之為父層，而第二層則會稱之為子層。
值得一提的是，當你開始出現階層結構時，記得縮排原則，第二層的子層要彼此對齊，父齊的也要彼此對齊，就算沒對齊，畫面也能正常顯現，這時候你一定會好奇，既然有無對齊，效果都會出來，那為什麼要對齊？
未來當你的專案日益龐大，程式碼越來越多，當階層越清楚，要修改的時候，也能輕易找出需要調整的程式碼！如果階層做得好，未來有一天需要接手別人的專案或別人接手你的專案，你都能快速知道這個網站的架構。
❏ 認識 - 表格標籤
如果你想建立表格的話，可以使用 標籤來讓瀏覽器幫忙做成表格，顯示在使用者的畫面上，但是表格之類的欄位又要怎麼設定呢？這時候就會搭配 <tr> 表示列 和 <td> 表示欄來定義你的表格。
<table>
<tr>
<td>紅色</td>
<td>藍色</td>
<td>白色</td>
</tr>
<tr>
<td>大</td>
<td>中</td>
<td>小</td>
</tr>
</table>
還記得我剛剛說過 tr 是表示橫行的列，所以這個表單裡面有兩組的 ，裡頭各包個三個 直行的欄。
顯示畫面為：
如果你這表格想要增加標題列呢？這時候就可以使用 來呈現。
<table>
<tr>
<th>顏色</th>
<td>紅色</td>
<td>藍色</td>
<td>白色</td>
</tr>
<tr>
<th>形狀</th>
<td>大</td>
<td>中</td>
<td>小</td>
</tr>
</table>
顯示畫面為：
這裡按照表格需求排列出橫排和直列，如果需要隔線的話，則會需要 CSS 的幫忙，這等到後面我們再做更多介紹，撇開隔線，大家對於要如何製作出一份表格的語法是否清楚多了呢？
❏ 認識 - 表單標籤
有的時候網頁上會想要有一個表單，讓大家填寫基本資料，若想在頁面上製作一份表單，這時候你可以使用 標籤來，就能做出讓使用者提交或和網頁互動的表單，提到表單則有幾個重要的屬性要讓你知道：
action 這個屬興指得是當表單提交後要做什麼行動，而 action 的值則表示使用者填好的內容送到哪裡，action 之後的值通常為一個網址（URL）。
<form action="網址">
</form>
使用到 target 屬性的目的，來指定瀏覽器要在哪裡顯示表單送出後回應的結果。那會使用到的值的又有哪些？
- blank：新視窗打開連結
<form action="網址" target="blank">這裡就是放表單內容
</form>
- self：在同一個視窗打開連結
<form action="網址" target="self">這裡就是放表單內容
</form>
- parent：將結果顯示在現在分頁上的前上一個視窗
<form action="網址" target="parent">這裡就是放表單內容
</form>
因此你在使用 form 標籤時，就可以使用以上屬性來產生使用者點擊後的行為，看是要在新視窗打開連結又或是在另一視窗打開。
❏ 認識 - 輸入標籤
而 form 標籤，其實就是表單的外觀，把 form 標籤當作父層標籤，底下子層標籤就可以繼續用 input 標籤來呈現想請使用者輸入的欄位。
如果有點抽象，就用我們的生活經驗來思考，當你在填寫一份問卷的時候，通常會需要填入姓名、電話號碼或是 email 等資訊，你有想過是怎麼透過 HTML 做出來的嗎？我們透過介紹其他標籤的方式，來嘗試做一份表單看看：
單行文字
如果我們希望使用者填寫的是簡短的單行文字，這時候 input 標籤的屬性可以用 type 來表示，它的值則可以用 text，意指這個表單內所需要填入的內容為單行文字。
呈現樣式如下：
提示文字
這時候，如果你希望在框內加入提示文字，來引導人填寫需要的文字，這時候就可以用屬性 placehoder，這時候值則是填寫你希望顯示給點擊者看的人的提示文字。
顯示畫面為：
如果你想填寫其他的值，例如網站連結、emal 和電話，這時候就會有幾個特定的值可以使用。
<form action="網址" >
姓名<input type="text" placeholder="eg.陳小姐" ></input>
email<input type="email"></input>
電話<input type="tel"></input>
網址<input type="url"></input>
</form>
呈現樣式如下：
在 HTML 中，如果今天是一個單選框，我們會使用 type 的屬性，並搭配 radio 的值，這樣的語法指的是使用者只能從幾個預先定義的選項中選擇其中之一。
以下是一個單選框的範例：
這裡我們看到，input 標籤的 type 屬性設置為搭配 radio的值，表示它是一個單選框，我們還可以再加上 name 的屬性，幫這群同系列的組合，給個共同的 name 屬性，而值則是填入 seanson的分類，為了用來識別這個同一個組合是什麼分類。這時候加入每個 input 標籤還有一個不同的 value 屬性，它的值用於指定表單元素的預設值或使用者輸入的值。
多選題：核選方塊
在 HTML 中，多選題的核選方塊通常使用 input 標籤的 type 屬性，值則是會用 checkbox，為了允許使用者可以一次選擇多個選項。
紅
綠
黃
顯示畫面為：
因此我們知道，要設計多選或是單選的表單，在 type 屬性填入 radio 單選或是 checkbox 多選的值即可。
不管是單選還是多選，有些表單選項會希望一開始就是被勾選的狀態，無論是預設值也好，又或是為了提醒也好，這時候就可以用 check 屬性來處理，當你在該選項加入這個屬性之後，使用者點擊之前，就會發現預設提示勾選值，但是使用者還是可以頻藉著自己主觀想法來選擇。
例如以下的程式碼，就會發現使用者在點選之前，已經有被提示的字詞了：
<input type="checkbox" name="color" value="選項1">紅
<input type="checkbox" name="color" value="選項2" checked >綠
<input type="checkbox" name="color" value="選項3">黃
顯示畫面為：
❏ 認識 - label 標籤
label 標籤主要用來定義其他標籤且能與該標籤建立關聯，例如我們常會使用到勾選的選項，但是有時可以勾選的圈圈或是核選的方格太小，讓人體驗感受差，這個時候就可以用 lable 選項來建立關聯。
<label for="red">紅色</label>
<input type="checkbox" id="red" name="color" value="選項1">
<label for="green">綠色</label>
<input type="checkbox" id="green" name="color" value="選項2" checked>
<label for="yellow">黃色</label>
<input type="checkbox" id="yellow" name="color" value="選項3">
在這個例子中，label 會搭配 for 屬性來跟 input 裡的 id 屬性進行連結，這樣你就不一定要點到那個框框或方塊才能做選擇，只要滑到該文字，就能成功完成點擊，對使用者來說也比較友善，切記 for 屬性和 id 屬性必須一致，才能完成連結唷。
在 HTML 中，當使用者填寫完表單後，可以透過表單中的「送出」按鈕提交表單的內容，並且把表單內容發送到伺服器端進行處理。以下是一些常見的表單「送出」按鈕的屬性：
<input type="submit" value="送出">
在這個範例中，input 標籤的 type 屬性被設定為 submit"，代表這是一個表單「送出」按鈕。value屬性設置為"送出"`，代表按鈕上顯示的文字內容為「送出」。當按下這個按鈕時，表單的內容會被提交到指定的地方。
iThome鐵人賽
看影片追技術