一、form标签
1、表单标签（form）
专门用来进行用户信息收集的一个标签，一般结合表单相关的标签 来使用才用意义
表单相关标签：input、select、textarea等
主要提供form中子标签的内容的提交和重置功能
action属性：提交的路径（提供接口）
method属性：提供的方式（post/get）
2、input标签
inpu标签是表单相关标签，可以在form标签中使用，也可以单独使用
1）type
input标签会因为type的不同，功能完全不一样
2）name -- 区分；提交（相当于字典的key）
要不要给这个属性赋值，注意看：A、需不需要区分不同的内容
B、需不需要提交这个input的值
3）value
value的意义会根据type值的不同而不一样；但是表单提交的时候，提交的都是value的值
（1）text文本输入框
name -- 区分；提交（相当于字典的key）
value -- 给这个属性赋值是在设置输入框的默认值；
修改输入框的内容，会改变这个属性的值。
placeholder -- 输入框为空的时候的默认显示值
maxlength -- 输入框最多能输入的内容的长度
（2） password
密码输入框
value -- 给这个属性赋值是在设置输入框的默认值；
修改输入框的内容，会改变这个属性的值。
placeholder -- 输入框为空的时候的默认显示值
maxlength -- 输入框最多能输入的内容的长度
3)单选按钮 -- radio
name属性 -- 如果多个选项是一组数据必须保证他们的属性值一样，才能做到多个选项单选。
value属性 -- 不能显示，只是用来提交的
checked属性 -- 给这个属性赋值为checked，让按钮处于默认选中状态
补充：可以通过将label的for属性和按钮的id属性保持一致，
让label和input关联
4)复选按钮 -- checkbox
name属性 -- 如果多个选项是一组数据必须保证他们的属性值一样，才能做到多个选项单选。
value属性 -- 不能显示，只是用来提交的
checked属性 -- 给这个属性赋值为checked，让按钮处于默认选中状态
5）普通按钮 -- button
value属性 -- 按钮上显示的内容
补充:button标签
6)重置按钮 -- reset
重置当前重置按钮所在的form标签中所有的相关按钮的值
7)提交按钮 --submit
以“name=value”的方式，提交当前form中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<input type="text" name="tel" maxlength="" value="" placeholder="请输入收集号码"/>
<br />
<input type="password" name="pw" maxlength="11" value="" placeholder="请输入收集号码"/>
<br />
<input type="radio" name="sex" value="男" checked="checked" id="sex1"/><label for="sex1">男</label>
<input type="radio" name="sex" value="女" id="sex2"/><label for="sex2">女</label>
<br />
<input type="checkbox" name="intest" id="id1" value="餐饮"/><label for="id1">餐饮</label>
<input type="checkbox" name="intest" id="id2" value="游戏"/><label for="id2">游戏</label>
<input type="checkbox" name="intest" id="id3" value="工厂"/><label for="id3">工厂</label>
<br />
<input type="button" name="" id="" value="" />
<button><img src="img/aaa.ico" alt="无法显示" /></button>
<br />
<input type="reset" name="" id="" value="重置" />
<input type="color" name="" id="" value="" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
二、下拉菜单
1、下拉菜单
select标签 -- 整个下拉列表
option标签 -- 列表中的选项
optgroup标签 -- 一个列表选项分组，通过label属性值类设置分组名
只是在显示上对选项进行分区，不影响提交结果
2、多行文本域
多行文本域 -- textarea
提供一个可以换行的输入框
name属性 -- 和以前的一样
rows属性 -- 行数、控制输入框的默认高度
cols属性 -- 列数、控制输入框的默认宽度
maxlength属性 -- 控制输入内容的最大长度
placeholder属性 -- 默认值
autofocus属性 -- 值设置为autofocus，页面刷新的时候自动成为焦点（自动成为编辑区）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<select name="city">
<option value="四川">四川</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="内蒙古">内蒙古</option>
<option value="新疆">新疆</option>
<option value="海南">海南</option>
<option value="贵州">贵州</option>
</select>
<br />
<br />
<select name="city2">
<optgroup label="四川"></optgroup>
<option value="四川">四川</option>
<option value="巴中">巴中</option>
<option value="成都">成都</option>
<option value="绵阳">绵阳</option>
<optgroup label="广东"></optgroup>
<option value="广东">广东</option>
<option value="珠海">珠海</option>
<option value="东莞">东莞</option>
</select>
<textarea placeholder="请输入内容" name="" rows="" cols="" maxlength="5"></textarea>
<input type="submit" value=""/>
</form>
</body>
</html>
三、无语义标签
div标签和span标签，都是无语义标签，
使用div一般用于对网页中的内容分块和分组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="">
<a href="https://www.baidu.com">百度一哈</a>
</div>
<div id="">
<a href="https://www.baidu.com">百度一哈</a>
</div>
<span id="">
<a href="https://www.baidu.com">百度一哈</a>
</span>
<span id="">
<a href="https://www.baidu.com">百度一哈</a>
</span>
</body>
</html>
网友评论