HTML(二)

HTML基础:

一、列表

1.创建一个无序列表

无序列表以 <ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾。

<ul>
  <li>牛奶</li>
  <li>奶酪</li>
</ul>

2.创建一个有序列表

有序列表以<ol>开始，中间包含一个或多个<li>元素，最后以</ol>结尾。`

<ol>
  <li>加菲猫</li>
  <li>哆啦A梦</li>
</ol>

二.表单

1.文本框：

Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。

<input type="text"
 placeholder="this is placeholder text">

2.表单：

通过给form表单添加一个action属性，
表单提交时，表单数据将被发送到action属性所给的地址中

3.表单添加提交按钮

让我们来给表单添加一个submit提交按钮，当点击提交按钮时，表单中的数据将会被发送到action属性指定的地址上。

    <button type="submit">提交</button>
    

4.给表单添加一个必填字段

当你设计表单时，你可以指定某些字段为必填项(required)，只有当用户填写了该字段后，才可以提交表单。

如果你想把文本输入框设置为必填项，在input元素中加上required属性就可以了

<input type="text" required>

5.单选按钮

单选按钮只是input输入框的一种类型。
每一个单选按钮都应该嵌套在它自己的label（标签）元素中。
所有关联的单选按钮应该拥有相同的name属性。

最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。
例如:

<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" type="radio" name="indoor-outdoor">outdoor
</label>

这样会创建两个按钮,并且只能选其中一个

6.复选框是 input 选择框的一种类型。

每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的复选框应该拥有相同的 name 属性

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
    <label for="hare"><input id="hare" type="checkbox" name="personality"> hare</label>
    <label for="no"><input id="no" type="checkbox" name="personality"> no</label>

这就创建了三个复选框按钮

7.发送给服务器的数据

提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>

这里有两个 radio 单选框。 当用户提交表单时，如果 indoor 选项被选中，表单数据会包含：indoor-outdoor=indoor。 也就是所选项的 name 和 value 属性值。
如果没有指明 value 属性值，则会使用默认值做为表单数据提交，也就是 on。 在这种情况下，如果用户选中 “indoor” 选项然后提交表单，表单数据则会包含 indoor-outdoor=on。 这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容

8.给单选按钮和复选框添加默认选中项

用 checked 属性把第一个复选框和单选按钮都设置为默认选中。
在一个 input 元素里面添加 checked 这个词，即可实现。

<input type="radio" name="test-name" checked>

9.元素嵌套

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。

它也是 HTML 中出现频率最高的元素。

和其他普通元素一样，你可以用

来标记一个 div 元素的开始，用

来标记一个 div 元素的结束。