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 中出现频率最高的元素。
和其他普通元素一样,你可以用