表格

為了有實際效果可以參考，用codepen練習了一下

<table>表格｜由行row(直)跟列column(橫)組成

• <td> 表格內容標籤
  • 預設padding為0，border-spacing為2px
  • 可以包含HTML元素、圖片、列表、其他表格等...
• <caption>表格標題標籤 (應在<table>之後)
• <tr> 行row(直)標籤
• <th> 行row(直)內標頭標籤
  • 預設: 粗體置中、預設為橫式
  • 若為直式則在每一個tr加一個th
  • 合併列(橫) <th colspan="幾欄">表格內容</th>
  • 合併行(直) <th rowspan="幾欄">表格內容</th>

表格CSS樣式

• border屬性｜添加表格邊框
• border-collapse: collapse; 更改表格預設的雙線框，改為實心
• border-radius: 10px; 儲存格邊框變圓角
• border-style 更改邊框樣式
  • dotted 虛線
  • dashed 底線
  • solid 實心
  • none 定義無邊界
  • hidden 定義隱藏邊框
• border-color 更改邊框顏色
• border-bottom 屬性添加到所有 tr元素以獲得水平分隔符
• :nth-child(even)橫的 斑馬紋
  -可寫成直的、也可直、橫交叉寫
• 使用:hover讓滑鼠滑過時強調選擇器

列表

為了有實際效果可以參考，用codepen練習了一下

HTML 無序列的列表

• 以<ul>標籤開頭
  －　每個列表項都以 <li>標記開頭。
• <ul>還可以有<ul>
• <li>可以包圖像or連結
• list-style-type屬性
  • disc 預設屬性
  • circle 圓點
  • square 正方形
  • none 取消圖形
• li {float: left;}　可作為nav的寫法

HTML 有序的列表

• 以<ol>標籤開頭
  －　每個列表項都以<li>標記開頭。
  • <ol>還可以有<ol>
  • <li>可以包圖像or連結
  • <ol type="1"> 更改有序數字的樣式
    • type="1"
    • type="A"
    • type="a"
    • type="I"
    • type="i"
  • <ol start="50">控制序列從幾開始往下排列、

HTML 描述列表

• <dl>標籤定義描述列表
  • 標籤<dt>定義術語（名稱），<dd>標籤描述每個術語

表單

<form>｜收集用戶輸入發送到服務器進行處理 詳細

• 在from中寫上action使用指定提交表單時要使用的HTTP方法
  • 預設HTTP方法為GET
  • 如果標單數據包含敏感信息、個人信息，請使用POST
• <label>定義許多表單元素的標籤
  • 同一個表單中<label>的for屬性應該和<input>的id屬性一樣，才能綁定
• <fieldset>為表單內容作群組(一個框框起來)
  • <legend>為群組的標題
• <input> 搭配type可以用多種方式呈現
  • <input type="text"> 可以輸入文字(預設可輸入20字符)
  • <input type="radio"> 圓點單選按鈕 (選擇多個選項之一)
  • <input type="radio"> 勾勾選擇框 (選擇多個選項中零個或多個)
  • <input type="submit"> 提交表單按鈕
    • 指定表單數據用URL發送method="get"，提交表單預設的HTTP方法是GET
    • target指定提交表單後視窗的反應
  • <input type="button"> 可點擊的按鈕
  • <input list="名稱"> + <datalist id="名稱"> 可以做出下拉列表
• <select>指定一個下拉式選項
  • 搭配option使用增加選項
  • 搭配size可以指定看見的選項數量
  • autocomplete用戶輸入完自動完成值
  • novalidate提交表單時，不會被驗證
  • multiple允許用戶選擇多個值
• <textarea>定義一個可以輸入很多字的框框
  • rows屬性指定文本區域可見的行數
  • cols屬性指定文本區域可見的寬度
• <output>表示計算的結果

<form>
  <input type="radio" id="選項" name="選項" value="選項">
  <label for="選項">顯示給用戶看的的選項文字</label><br>
</form>