HTML基础_Day02

HTML基础

一、列表

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

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

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

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

二、form表单

1.input输入框

<input type="text">

注意：input输入框是没有结束标记的。
2.Placeholder占位符
Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。（没输入之前的默认文本）

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

3.创建一个表单
通过给form表单添加一个action属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。

<form action="/url-where-you-want-to-submit-form-data"></form>

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

<button type="submit">this button submits the form</button>

5.给表单添加一个必填字段
如果你想把文本输入框设置为必填项，在input元素中加上required属性就可以了。

<input type="text" required>

确保input元素中有required属性，否则无法提交表单。
6.创建一组单选按钮
单选按钮只是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>

7.创建一组复选框
复选框是input输入框的另一种类型。
每一个复选框都应该嵌套在它自己的label元素中。
所有关联的复选框应该拥有相同的name属性。
最佳实践是在label元素上设置for属性，让其值与复选框的id属性值相等，这样就在label元素和它的子元素复选框之间创建了一种链接关系。

<label for="1">
	<input id="1" type="checkbox" name="check">足球        
</label>
<label for="2">
	<input id="2" type="checkbox" name="check">篮球
</label>
<label for="3">
	<input id="3" type="checkbox" name="check">网球
</label>

8.给单选按钮和复选框添加默认选中项
通过给input元素添加checked属性，可以设置某个单选按钮或多选按钮被默认选中。

<label for="indoor">
	<input id="indoor" type="radio" name="indoor-outdoor" checked>Indoor
</label>
//单选
<label for="1">
	<input id="1" type="checkbox" name="check" checked>足球        
</label>
//复选

你坚持看到了这儿，谢谢你的阅读！