day17-HTML 表单标签和css基础

一 表单标签

表单标签 - form
是一个容器标签，本身单独用没有意义，一般需要结合表单相关的标签（input、select、text area）来使用
它可以对表单标签中所有用户信息收集相关的标签的内容进行整体的重置和提交。
action属性 - 后端数据接口的地址
method属性 - 请求方式（get/post）

二 input标签的使用

input是表单相关标签，可以放在form标签中做数据的提交和重置

2.1 type = “text”

type属性 - 设置标签类型
text（默认值） - 普通文本输入框
value属性 - 和输入框中的内容是关联的
name属性 - 用来区分不同的数据和对数据进行提交的（因为提交数据是以 name=value 的形式提交的）
placeholder属性 - 设置输入的提示信息
maxlength属性 - 设置输入信息的最大长度
disabled属性 - 设置为disabled，表示标签不可用
label标签 - 点击label中的内容，可以让label后面的输入框处于编辑状态
for属性 - 和input中的id关联

<label for="i1">用户名：label> 
<input placeholder="请输入阿康" type="text" maxlength="5" name="账号" id="i1" value="阿康" />
<br>
<br>
<label for="i2">密  码： label>
<input type="text" name="密码" id="i2" value="" />

2.2 type = “password”

value属性 - 和输入框中的内容是关联的
name属性 - 用来区分不同的数据和对数据进行提交的（因为提交数据是以 name=value 的形式提交的）
placeholder属性 - 设置输入的提示信息
maxlength属性 - 设置输入信息的最大长度
disabled属性 - 设置为disabled，表示标签不可用
label标签 - 点击label中的内容，可以让label后面的输入框处于编辑状态
for属性 - 和input中的id关联

<label for="i3">密码：</label><input id="i3" type="password" name="pw" placeholder="请输入密码" />

2.3 type = “radio”

radio - 单选按钮
value属性 - 单选选中的时候被选中的值（选项值）
name属性 - 除了提交和区分以外，还可以将相同的name作为同一个组，在同一个组中只能选中一个选项
checked属性 - 值设为checked表示默认选中
label标签 - 点击label中的内容，可以让label中的内容处于选中状态
for属性 - 和input中的id关联

<input type="radio" name="w" value="已婚" id="i6" /><label for="i6">已婚label>
<input type="radio" name="w" value="未婚" id="i7" /><label for="i7">未婚label>
<input type="radio" name="w" value="保密" id="i8" checked="checked" /><label for="i8">保密label>

2.4 type = “checkbox”

checkbox - 复选按钮
value属性 - 单选选中的时候被选中的值（选项值）
name属性 - 除了提交和区分以外，还可以将相同的name作为同一个组，在同一个组中只能选中一个选项
checked属性 - 值设为checked表示默认选中
label标签 - 点击label中的内容，可以让label中的内容处于选中状态
for属性 - 和input中的id关联

<input type="checkbox" name="sport" id="s1" value="乒乓球" /><label for="s1">乒乓球label>
<input type="checkbox" name="sport" id="s2" value="篮球" /><label for="s2">篮球label>
<input type="checkbox" name="sport" id="s3" value="游泳" /><label for="s3">游泳label>
<input type="checkbox" name="sport" id="s4" value="羽毛球" /><label for="s4">羽毛球label>

2.5 type = “button”

button - 按钮
value属性 - 按钮上的文字

<button type="button">删除button>

2.6 type = “submit和reset”

submit - 提交属性
将当前表单中所有设置了name属性的标签内容，以 name=value的形式提交给接口
reset - 重置按钮
将当前表单中所有表单相关的标签状态变成初始状态

<input type="submit" value="提交"/>
<input type="submit" value="重置"/>

三 select和textarea

3.1 下拉列表：select-option

name属性 - 是select属性，用于提交和区分
value属性 - 是option属性，表示当前选项的值和提交数据
selected属性 - 是option属性，设置默认选中的项
option标签内容 - 用来展示选项

<select name="province">
			<option value="四川省" selected="selected">四川省option>
			辽林省option>
			广东省option>
			云南省option>
		select>
		
		<select name="city">
			成都市option>
			德阳市option>
			绵阳市option>
		select>

3.2 optgroup - 选项分组标签

label属性 - 分组名

<select name="">
			 <optgroup label="辽林省">
			 	
			 optgroup>
		 	<option value="沈阳">沈阳option>
			大连市option>
			盘锦市option>
			铁岭市option>
			
			<optgroup label="四川省">optgroup>
			成都市option>
			德阳市option>
			绵阳市option>
		 select>

3.3 textarea - 多行文本域

rows属性 - 设置一次最多能显示的行数（默认是2）
cols属性 - 设置一行的列数
placeholder属性 - 占位符
name属性 - 用于区分和提交
maxlength属性 - 设置最大的输入长度

<textarea rows="4" cols="40" placeholder="请输入你的意见">textarea>

四 div和span

div和span
div和span本身无语义，也是HTML中比较轻量级的标签

1. span - 用于一行显示多个内容的时候
2. div - 主要用于界面标签的分块和分组

五 css基础

5.1 什么是css（样式表）

css（Cascading Style Sheets） - 层叠样式表
css是web标准中的表现标准，主要用于设置网页内容的样式和布局

5.2 css代码写在哪儿

内联样式表：将样式表（css代码）写在标签的style属性中(样式只能作为一个标签)
内部样式表：将样式表写在style标签中（样式只能作用于当前html文件中所有标签）
外部样式表：将样式表写在外部得css文件中，然后在html文件中用link导入（样式可作用于所有的html中的所有的标签）

优先级：内联优先级>内部样式表、外部样式表（谁后写谁的优先级高）

5.3 css怎么写

语法：
选择器{属性名1：属性值1；属性名2：属性值2；…}

说明：
①选择器 - 选中当前需要设置样式的标签（写内联样式表需要省略 ‘选择器{}’）
②属性 - 以 属性名:属性值 得形式存在，多个属性之间必须用;隔开

				a.常用的属性：color 	-	文字颜色；
						   background-color 	-	背景颜色；
						   font-size 	-	文字大小
						   width 	-	宽度
						   height 	-	高度
				
				b.常用的值：数字（数字如果用来表示大小，那么值后面必须加单位：px）
						   颜色：a.颜色的英文单词，例如：red，green，yellow等
								b.rgb值（通过调节红色、绿色和蓝色的值来调出不同的颜色，范围是0~255）
								rgb(red,green,blue) rgb(255,0,0) rgb(0,255,0)
								rgba(red,green,blue,透明度)，透明度的取值范围0~1
								c.16进制颜色值：#6位的16进制数 #ff0000 #00ff00

六 选择器

选择器是用来选中指定标签来添加样式的
常用的选择器:

6.1 id选择器：在标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签

注意：同一个id值在当前页面中只有一个标签

6.2 类选择器：在标签的class属性值前加.作为一个选择器，选中class属性是指定值的标签。

.c1{} - 选中classs是c1的所有标签
注意：同一个class可以作用不同的标签，同一个标签可以同时拥有多个class值（有多个的时候中间用空格隔开）

6.3 元素选择器：直接将标签名作为选择器，选中当前页面中所有指定的标签

p{} - 选中所有的p标签

6.4 通配符：将*作为选择器，选中当前页面中所有的标签

6.5 群组选择器：将多个其他的选择器用逗号隔开作为一个选择器，选中每个独立的选择器选中的标签

p,.c1,#p1{} - 选中所有的p标签、class是c1的标签以及id是p1的标签
a,img{} - 选中所有的图片和超链接

6.6 后代选择器：将多个选择器用空格隔开作为一个选择器

div p{} - 获取所有是div后代的p标签
div .p1 - 选中div中所有class是p1的标签（div和.p1的标签时候带关系）

6.7 子代选择器：将多个选择器用>隔开作为一个选择器（只是儿子一代）

div>p{} - 选中所有div标签中子标签的p标签
div>.p1 - 选中所有div标签中子标签的class是p1的标签