form标签和input标签
1.表单标签(form)
专门用来进行用户信息收集的一个标签，一般要结合表单相关的标签来使用才有意义
表单相关标签：input、select、textarea等
主要提供form中子标签的内容的提交和重置功能
- action属性：提交路径(接口)
- method属性：提交方式(post/get)
<form action="" method="post">
</form>
2.input标签
input标签是表单相关的标签-可以在form标签中使用，也可以单独使用
type
input标签会因为type的不同，功能完全不一样name - 区分输入框；提交(相当于字典的key)
要不要给这个属性赋值，主要看：1) 需不需要区分不同的内容需不需要提交input标签的值
value
value的意义会根据type值的不同而不一样；但是表单提交的时候提交的都是value的值
input提交都是通过name-value的方式提交数据
1) 文本输入框 - text
a. value属性 - 给这个属性赋值是在设置输入框的默认值；修改输入框的内容，会改变这个属性的值
b. placeholder - 输入框为空的时候的默认显示信息(一般用于提示)
c. maxlength - 输入框最多能输入的内容长度
<font>账号:</font>
<input type="text" name="tel" value="" placeholder="请输入手机号码" maxlength=""/>
<br />
2) 密码输入框 - password
a.value属性 - 给这个属性赋值是在设置输入框的默认值；修改输入框的内容，会改变这个属性的值
b.placeholder - 输入框为空的时候的默认显示信息
c.maxlength - 输入框最多能输入的内容长度
<font>密码:</font>
<input type="password" name="pwd" value=""/>
<br />
3) 单选按钮 -radio
a. name属性 - 如果多个选项是一组数据必须保证它们的name属性值一样才能做到多个选项单选
b. value属性 - 不能显示，只是用来提交数据(但是必须有值，不然没有数据提交)
c. checked - 给这个属性赋值为checked让按钮处于默认选中状态
补充：可以通过将label的for属性和input的id属性保持一致，让label和input进行关联
(比如：input的radio和label关联，即可通过点击label和点击radio功能一样)
<font>性别:</font>
<input type="radio" name="sex" id="sex1" value="" /><label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="" /><label for="sex2">女</label>
<br />
4) 复选按钮 - checkbox
a. name属性 - 如果多个选项是一组数据必须保证它们的name属性值一样(分组)
b. value属性 - 不能显示，只是用来提交数据(但是必须有值，不然没有数据提交)
c. checked - 给这个属性赋值为checked让按钮处于默认选中状态(复选框一般不用默认状态)
同样也可以通过设置for和id相同的名字和label绑定，实现复选框和label关联
<input type="checkbox" name="interest" id="in1" value="餐饮"/><label for="in1">餐饮</label>
<input type="checkbox" name="interest" id="in1" value="游戏"/><label for="in2">游戏</label>
<input type="checkbox" name="interest" id="in1" value="旅游"/><label for="in3">旅游</label>
<br />
5) 普通按钮- button
value属性 - 按钮上显示的内容
补充：button标签(可以设置为图片按钮)
<input type="button" name="" id="" value="登录"/>
<button><img src="img/aaa.ico"/></button><br />
6) 重置按钮 - reset
重置当前按钮所在的form标签中的[所有]的相关标签的值(只对在form标签中的有效)
<input type="reset" name="" id="" value="重置" />
7) 提交按钮 - submit
以'name=value'的方式提交当前form标签中的内容
<input type="submit" value="提交" />
下拉菜单
2.下拉菜单
select标签 - 整个下拉列表
option标签 - 列表中的选项
optgroup - 一个列表选项分组，通过label属性值来设置分组名
(只是在显示上对选项进行分区，不影响提交结果)
<form action="" method="get">
<select name="provice">
<option 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>
</select>
<br />
</form>
2.多行文本域 - textarea
提供一个可以换行输入的输入框
rows - 行数，影响输入框的默认高度
cols - 列数，影响输入框的默认宽度
maxlength - 输入的内容的长度
autofocus - 值设置为autofocus,页面刷新和加载时的时候自动获得焦点
required - 值为required，规定文本区域为必填项
<textarea autofocus="" name="content" cols="" rows="" placeholder="请输入评论内容"></textarea>
无语义标签
div标签和span标签都是无语义标签，使用div一般用于对网页中的内容分块和分组
span和div两个标记都可以独立出区块，都是作为容器标记广泛应用在HTML中
区别：
span和div区别在于，div是一个块级元素，它包含的元素会自动换行。
而span是行内元素，在它的前后不会换行。
span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。
span可以作为div的子元素，但div不能是span的子元素。
CSS基础
1.什么是CSS
CSS又叫样式表(层叠样式表),是web标准中的表现标准，专门用来针对网页中内容的布局和样式
现在绝大部分使用的是CSS3
2.怎么写CSS
.语法
选择器{属性1:属性值1;属性2:属性值2}.说明
a.选择器 - 选中需要设置样式的标签;在内联样式表中选择需要省略
b.{} - 固定写法
c.属性 - 属性是以'属性:属性值'的形式成对儿出现，多个属性要用分号隔开
d.值 - 如果是数字表示大小,数字后边必须加单位: px(像素), em(空格数)
颜色值：颜色的英文单词、#十六进制颜色值、rgb(r,g,b)、rgba(r,g,b,透明度)
rgb颜色：r-red(0-255),g-green(0-255),b-blue(0-255)
rgb(255,0,0) == #ff0000 == 'red'
rgb(0,255,0) == #00ff00 == 'green'
rgb(0,0,255) == #0000ff == 'blue'
rgb(0,0,0) == #000000 == 'black'
rgb(255,255,255) == #ffffff == 'white'
透明度 - 0(完全透明) - 1(完全不透明)
3.写在哪儿
内联样式表：将样式表写在标签的style属性中
只作用于一个固定的标签内部样式表：将样式写在style标签中
作用于当前html中所有标签外部样式表：将样式表写在css文件中，然后在html中通过link标签导入
可以作用于所有的html中的所有标签
复用性：外部>内部>内联
优先级：内联样式表的优先级任何情况下都是最高的
内部和外部的优先级看顺序，谁后写谁优先级高(覆盖..)
4.常见属性
color:设置标签中的字体颜色
background:设置标签的背景颜色
font-size:字体大小
width:标签宽度
height:标签高度
<!--2.内部样式-->
<style type="text/css">
/*这里写css代码*/
div{
color: orange;
background-color: darkgoldenrod;
}
h1{
color: aquamarine;
}
</style>
<!--3.外部样式-->
<link rel="stylesheet" type="text/css" href="css/01-test.css" />
选择器
1.什么是选择器
通过选择器选中标签
2.选择器的写法
元素选择器(标签选择器)
直接将标签名作为选择器，选中当前html中对应的所有标签
如：a{} - 选中当前html中所有的a标签id选择器
(所有标签都有一个id属性，值自己设置，但是要保证一个html中id值唯一)
将标签的id属性值前面加#作为选择器
如：#a1 - 选中当前html中id值是a1的标签类选择器(class选择器)
将标签的class属性的值前面加.作为选择器，选中class属性值是指定值的标签
如：.a2 - 选中当前html中所有class属性值为a2的所有标签通配符
将*作为选择器，选中当前html中所有的标签群组选择器
将多个单独选择器用逗号隔开来作为一个选择器，选中每个独立选择器对应的标签
如：p,a{} - 选中所有的p标签和a标签
div,#a{} - 选中所有的div标签和id值是a的标签
.c1,.c2{},#p1, - 选中id值是p1，class值是c1和c2的所有标签后代选择器
将多个选择器用空格隔开来作为一个选择器
div p{} - 选中所有div标签中的p标签
伪类选择器
1.伪类选择器
普通选择器选中的是html中不同的标签；伪类选择器选中的是标签的不同状态
2.语法
普通选择器：状态{属性1:属性值1;属性2:属性值2;...}
- link - 超链接初始状态，对于a标签来说，link对应的状态是a标签中的链接从来没有成功访问过(一般只在a标签进行设置)
- visited - 超链接成功访问过的状态
- hover - 鼠标悬停在标签上对应的状态(不止超链接，其他标签也常用)
- active - 鼠标按住标签不放对应的状态(主要作用在超链接和按钮)
3.选择器的权重值(优先级)
权重越大优先级越高，但是内联样式表的优先级永远最高
元素选择器的权重：0001 == 1
class选择器的权重：0010 == 2
id选择器的权重：0100 == 4
伪类选择器的权重：0001 == 1
群组选择器的权重：看单独每个选择器的权重 (后面写的属性优先级更高，因为覆盖)
后代选择器的权重:所有选择器的权重之和
