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>