1.表单标签
- 表单标签（form）
表单标签的作用：用来收集与用户信息 - 实质是将表单标签作为容器，收集表单标签中其他标签的信息
本身没有任何显示效果
action属性：设置提交地址
method属性：提交方式（post/get）
点提交按钮提交的时候，将表单所有相关标签以name=value的形式，
按照method属性提供的提交方式，提交给action属性对应的接口
- form标签提供了两大功能，a.统一提交. b.重置
<form action="" method="get">
</form>
2.input标签(单标签)
既可以放在form标签中，也可以不放在form标签中，单独使用
type属性 - type对应的值不一样，input标签体现的功能不一样
<form action="">
<!--a.type=text
文本输入框
name属性 - 专门用来区分不同的信息，相当于字典的key，
value属性 - 标签内容，指向输入框的内容，设值其实是给文本框设置默认值
placeholder属性 - 当输入框中没有内容的时候，显示的提示信息
maxlength属性 - 设置文本输入最大个数
-->
<font>账号： <input type="text" name="tel" id="" value="" placeholder="手机号..." maxlength="11"/><br /></font>
<font>验证码：<input type="text" name="email" id="" value="" placeholder="验证码..." /><input type="button" value="获取验证码"/><br /></font>
<!--密码输入框-->
<font>密码： <input type="password" name="password" value="123456" placeholder="密码"/><br /></font>
<!--ridio - 单选按钮
name属性 - 要求同一组的数据的name值必须一致，才能单选。
value属性 - 不可见。专门用于数据提交，或者区分被选中的值
checked="checked" - 让单选按钮处于选中状态
-->
<font>男<input type="radio" name="sex" value="boy" checked="checked"/></font>
<font>女<input type="radio"name="sex" value="girl"/></font><br />
<font>未婚<input type="radio" name="marry" value="未婚" checked="checked"/></font>
<font>已婚<input type="radio"name="marry" value="已婚"/></font><br />
<!--checkbox - 复选按钮
name属性 - 要求同一组的数据的name值必须一致，才能单选。
value属性 - 不可见。专门用于数据提交，或者区分被选中的值
-->
<font>打球</font><input type="checkbox" name="hobby" value="打球"/>
<font>睡觉</font><input type="checkbox" name="hobby" value="睡觉"/>
<font>打豆豆</font><input type="checkbox" name="hobby" value="打豆豆"/>
<font>吃饭<input type="checkbox" name="hobby" value="吃饭"/></font><br />
<!--button -普通按钮
value属性 - 按钮上显示的文字
-->
<input type="button" name="账号" id="账号" value="注册" />
<input type="email" name="email" id="" value="" placeholder="邮箱号" />
<!--submit - 提交按钮
点击提交按钮会自动提交当前form中所有设置了name属性的相关标签的值
以‘name=value’方式提交
-->
<input type="submit" value="提交" /><br />
<!--reset - 重置按钮
将当前form标签中所有的标签状态设置为出事状态
-->
<input type="reset" name="" id="" value="重置" />
</form>
3.按钮标签
- 按钮标签（button）
双标签，中间内容部分更灵活
<button><img src="img/130224121314.jpg" alt="图片" width="50" height="40"/><p>登陆</p></button>
显示image.png
4.下拉菜单
下拉菜单（select - option）
select属性 - 代表整个下拉菜单
name属性 - 区分和提交
option标签 - 下拉菜单中的选项
内容 - 显示部分
value属性 - 提交的内容
selected=“selected” - 设置默认值
opgroup标签 -分组
<font>考试科目</font><select name="学科">
<optgroup label="理科">
<option value="语文">语文</option>
<option value="数学">数学</option>
<option value="英语">英语</option>
<option value="物理">物理</option>
</optgroup>
<optgroup label="文科">
<option value="语文">历史</option>
<option value="数学">政治</option>
<option value="英语">地理</option>
</optgroup>
</select><br />
<select name="province">
<option value="四川">四川省</option>
<option value="广东">广东省</option>
<option value="广西">广西省</option>
<option selected="selected">湖南省</option>
<option value="湖北">湖北省</option>
<option value="江西">江西省</option>
</select><br />
<select name="city">
<option value="成都">成都市</option>
<option value="广州">广州市</option>
<option value="南宁">南宁市</option>
<option value="长沙">长沙市</option>
<option value="武汉">武汉市</option>
<option value="南昌">南昌市</option>
</select>
</form>
显示image.png
5.多行文本输入框
- 多行文本输入框（textarea）
可以输入多行内容，并且内容超出范围可以滚动
name属性 - 提交和区分
rows属性 - 一次可以显示的行数（决定高度）
cols属性 - 列数（决定宽度）
placeholder - 提示语句
内容相当于value
<textarea name="" rows="5" cols="10" maxlength="8" placeholder="意见">内容</textarea>
显示image.png
6.div和span
- div和span标签是无语义标签
一般用来将网页中的标签进行分组和分模块使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span标签是无语义标签
一般用来将网页中的标签进行分组和分模块使用
-->
<div>
<div>div</div>div
</div>
</div>
<span>
span <span>span</span>
</span>
</body>
</html>
显示image.png
