1.表单列表
表单标签一般用来做用户信息收集，单独用没有意义，一般是结合相关标签来使用(input，select，textarea)
表单标签可以对包含在这个标签中的其他标签做信息的提交和重置
action：提交位置（接口相关）
method：请求方式（get/post）
2.select和textarea
select标签 - 代表整个下拉列表
option标签 - 代表列表中的每个选项
可以通过设置selected属性的值为'selected'，来让这个选项默认选择
optgroup标签 - 设置label的值来对当前下拉菜单的内容进行分组
textarea标签 - 输入框，可以同时显示多行内容(可以自动换行和上下滚动)
name属性 - 区分和提交
cols - 列数(一行显示的文字的数量，影响输入框的宽度)
rows - 行数(不滚动最多能显示的行数，影响输入框的高度)
placeholder - 占位符
maxlength - 限制输入的字符的个数
3.div和span
1.div和span都是无语义标签：网页中内容分组分块，都可以使用div作为容器
2.html中标签分类：行内标签、块级标签
块级标签：一个占一行，例如：div、h1、p、列表、table、tr、form、option...
行内标签：一行显示多个，例如：span、font、td、input、select、textarea...
01表单标签（form）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表单标签（form）
表单标签一般用来做用户信息收集，单独用没有意义，一般是结合相关标签来使用(input，select，textarea)
表单标签可以对包含在这个标签中的其他标签做信息的提交和重置
action：提交位置（接口相关）
method：请求方式（get/post）
-->
<!--2.input标签
单标签
1)type属性：
决定输入框的样式
text(默认) - 普通的文本输入框
2)name属性：
这个属性主要用来区分数据的。***提交的时候是以name=value形式提交***
3)value属性：
单标签中的value相当于双标签的内容；但是value值只能是文本
设置value属性其实就是设置输入框中默认显示的内容；修改内容其实是在修改value值
-->
<form action="" method="get">
<!--1.text：文本输入框
placehorder - 占位符（提示信息）
maxlength - 最多输入字符个数
-->
<input type="text" name="tel" value="110" placeholder="请输入电话号码" maxlength="6"/>
<input type="text" name="email" value="" />
<!--2.password:密码输入框
placehorder - 占位符(提示信息)
maxlength - 最多输入字符个数
-->
<input type="password" name="密码" value="" placeholder="请输入密码(3-8)" maxlength="8"/>
<br />
<!--3.radio：单选按钮
name - 同一组数据对应的name值设置成一样的才能做到单选
value - 这儿的value只是用于数据提交，不能显示
checked - 设置为checked让按钮处于默认选择状态
-->
<input type="radio" name="sex" id="s1" value="男生" checked="checked"/><label for="s1">男</label>
<input type="radio" name="sex" id="s2" value="女生" /><label for="s2">女</label>
<br />
<!--让文字和按钮关联
文字用label标签显示，设置for属性的值为想要关联的按钮的id的值
这样做，点击文字和点击按钮的效果一样
-->
<input type="radio" name="marry" id="m1" value="已婚" /><label for="m1">已婚</label>
<!--<input type="radio" name="marry" value="已婚" /><font>已婚</font>-->
<input type="radio" name="marry" id="m2" value="未婚" /><label for="m2">未婚</label>
<input type="radio" name="marry" id="m3" value="保密" checked="checked"/><label for="m3">保密</label>
<br />
<!--4.checkbox：复选按钮
name - 同一组数据的name值要一样
value - 这儿的value只是用于数据提交，不能显示
-->
<input type="checkbox" name="interest1" id="i1" value="教育" checked="checked"/><label for="i1">教育</label>
<input type="checkbox" name="interest2" id="i2" value="互联网" /><label for="i2">互联网</label>
<input type="checkbox" name="interest3" id="i3" value="银行" /><label for="i3">银行</label>
<br />
<!--5.button：普通按钮
value - 对应的值会显示在按钮上
-->
<input type="button" name="" value="登录" />
<br />
<!--6.submit：提交按钮
这个按钮的点击事件是将当前所在的form标签中，
设置了name属性的相关标签的数据以'name=value'的形式提交
-->
<input type="submit" value="提交" />
<!--7.reset：重置按钮
这个按钮的点击事件是将当前所在的form标签中，所有标签设置成初始状态
-->
<input type="reset" value="重置" />
<!--8.其他类型-->
<input type="color" name="" id="" value="" />
<input type="file" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="datetime" name="" id="" value="" />
</form>
<!--2.button标签-->
<button><img src="img/1.jpg"/></button>
</body>
</html>
02 select下拉菜单和textarea多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.下拉菜单(列表)
select标签 - 代表整个下拉列表
option标签 - 代表列表中的每个选项
可以通过设置selected属性的值为'selected'，来让这个选项默认选择
optgroup标签 - 设置label的值来对当前下拉菜单的内容进行分组
-->
<select name="province">
<optgroup label="省"></optgroup>
<option value="四川省">四川省</option>
<option value="云南省">云南省</option>
<option value="吉林省">吉林省</option>
<option value="黑龙江">黑龙江省</option>
<optgroup label="直辖市"></optgroup>
<option selected="selected" value="北京">北京</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
</select>
<select name="city">
<option value="成都市">成都市</option>
<option value="绵阳市">绵阳市</option>
<option value="巴中市">巴中市</option>
<option value="宜宾市">宜宾市</option>
<option value="雅安市">雅安市</option>
<option selected="selected" value="北京">北京</option>
</select>
<!--2.多行文本域
textarea标签 - 输入框，可以同时显示多行内容(可以自动换行和上下滚动)
name属性 - 区分和提交
cols - 列数(一行显示的文字的数量，影响输入框的宽度)
rows - 行数(不滚动最多能显示的行数，影响输入框的高度)
placeholder - 占位符
maxlength - 限制输入的字符的个数
-->
<textarea name="message" rows="5" cols="" placeholder="请输入消息" maxlength="200">默认文字</textarea>
</body>
</html>
03 div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css基础.css"/>
</head>
<body>
<!--
1.div和span都是无语义标签：网页中内容分组分块，都可以使用div作为容器
2.html中标签分类：行内标签、块级标签
块级标签：一个占一行，例如：div、h1、p、列表、table、tr、form、option...
行内标签：一行显示多个，例如：span、font、td、input、select、textarea...
-->
<div id="">
div1dfsdf
</div>
<div id="">
div2
</div>
<span id="">
span1
</span>
<span id="">
span2
</span>
</body>
</html>
