HTML基礎2

無序列表：

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

有序 列表：

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

輸入框：

<input type="text" placeholder="cat photo URL"> // 帶佔位符的文本輸入框

表單交互：

<form action="/submit-cat-photo"> //action參數表示將表單數據提交到哪一個接口進行處理
  <input type="text" required placeholder="cat photo URL"> //required屬性表示必填
  <button type="submit">Submit</button> //提交按鈕
</form>

單選按鈕：

單選就是你只能在多個選項中選擇一個，就比如你有不少追求者，但卻只能選擇一個結婚。

多選一的場景就用radio button(單選按鈕)

單選按鈕只是input輸入框的一種類型。

每個單選按鈕都應該嵌套在它本身的label(標籤)元素中。

注意：全部關聯的單選按鈕應該使用相同的name屬性。

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> //checked屬性表示默認選中
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <button type="submit">Submit</button>
</form>

複選按鈕：

當你在大學選課時，面對幾百門課程，而由於時間和精力，你只能從中選擇十幾門。

這樣的場景就用checkboxes（複選按鈕）。

複選按鈕是input的輸入框的另外一種類型。

每個複選按鈕都應該嵌套進label元素中。

全部關聯的複選按鈕應該具備相同的name屬性。

<form action="/submit-cat-photo">
  <label><input type="checkbox" name="personality" checked> 必須</label> //checked屬性表示默認選中
  <label><input type="checkbox" name="personality"> 統一</label>
  <label><input type="checkbox" name="personality"> 中國</label>
  <button type="submit">Submit</button>
</form>