form表单，css简介，css选择器，css样式操作
form表单
简介
表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序
以处理，从而使得Web服务器与用户之间具有交互功能。
表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击
提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
属性action
action属性：设置表单提交的服务器地址
method属性：设置表单提交的方式，一般有“GET”和“POST”方式, 不区分大小写
<body>
<form action="http://www.baidu.com" method="GET">
</form>
</body>
方法一：绝对 URL - 指向另一个网站
action="http://www.baidu.com"
会将表单提交到指定的地址
方法二：什么都不写
action="" 或（action="#"）
向当前页面提交表单
方法三：相对 URL - 指向网站内的一个文件
action="example.html"
向这个文件提交表单
input标签
type属性
text 单行文本框（注意这个是单行文本框并且还是input里type属性的值。多行文本框是一个标签）
date 日历展示
email 邮箱格式数据
password 密码框
radio 单选按钮，同一组的单选按钮name值一样，checked属性默认选中
checkbox 复选框，同一组的单选按钮name值一样，checked属性默认选中
file 文件选中按钮，文件上传按钮
form的enctype设置成multipart/form-data。method设置成post提交方式
form默认的enctype值application/x-www-form-urlencoded。特殊字符ASCII码。method默认get提交方式
name 数据的名字（相当于给数据写名字）
value 提交数据（如果给了一个value还给了属性值那么这个属性值会默认的出现在input中的。如果要将input中的数据提交要有一个name）
image 图片按钮（会将form表单的数据进行点击图片提交，同时会将鼠标的坐标进行提交，这个的作用主要就是可以把一张图片当成一个提交按钮）
submit 提交按钮（为保险起见不同浏览器编译出的不同在写这个属性是后面要加value属性）
reset 重置按钮（为保险起见不同浏览器编译出的不同在写这个属性是后面要加value属性）
hidden 隐藏按钮，值会被提交(常用场景：不想让用户看到的地方使用。主要作用是将input隐藏)
button 普通按钮
disabled：禁用
checked：默认选中
readonly：只读
提交按钮有哪些？
<input type="submt" value="">
<input type="image" src="" alt="">
<button></button> 写在表单内部的button
<button type="submit"></button>
重置按钮
<input type="reset" value="">
<button type="reset"></button>
普通按钮
<input type="button" value="">
<button type="button"></button>
"""
input标签中有两个非常重要的属性
1.name属性
类似于字典的key(前端程序员写)
2.value属性
类似于字典的value(用户自己传)
如果标签是选择类型的 那么还需要前端程序员自己填写value
用于区分具体数据含义
ps:我们在编写input标签的时候应该添加name属性
"""
select标签
国家:
selected:下拉项默认选中
<option></option>下拉项
国家:<select name="address">
<option selected value="0">China</option>
<option value="1">American</option>
<option value="2">Japan</option>
</select><br/><br/>
textarea标签
<textarea name="desc"></textarea>
lable标签
专门给input标签配文字说明 也可以不使用
方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
方式2
<label>用户名:
<input type="text">
</label>
效果展示：
form 表单
源码：
<h1>form 表单</h1>
<form action="" method="post">
<h2>注册</h2>
用户名:<input type="text" name="username" value="春游去动物园" readonly/><br/><br/>
密 码:<input type="password" name="userpass" disabled/><br/><br/>
性别:<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<input type="radio" name="sex" checked value="2"/>妖<br/><br/>
爱好:<input type="checkbox" name="hobby[]" checked value="0"/>吃
<input type="checkbox" name="hobby[]" checked value="1"/> 睡成猪
<input type="checkbox" name="hobby[]" value="2"/>LOL<br/><br/>
大头贴:<input type="file" name="pic" /><br/><br/>
国家:<select name="address">
<option value="0">China</option>
<option selected value="1">American</option>
<option value="2">Japan</option>
</select><br/><br/>
地区:<input type="text" name="address1" list="mylist"/>
<datalist id="mylist">
<option value="山西">山西</option>
<option value="洪洞">洪洞</option>
<option value="河南">河南</option>
<option value="南阳">南阳</option>
</datalist><br/><br/>
个性签名:<textarea name="jianjie" rows="5" cols="40"></textarea>
<input type="submit" value="登录"/>
<input type="reset" value="取消"/>
</form>
GET/POST请求
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方
法和 GET 方法。
1、 如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指
定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
2、 另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤
中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
get提交时参数直接暴露在URL上。与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
但是，在以下情况中，请使用POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
get/post区别：
1、Get方法是用来向服务器上获取数据，而Post是用来向服务器上传递修改数据。
2、Get将表单里的数据添加到action所指向的URL后面，并且两者之间使用“?”连接，而各个变量之间使
用“&”连接；
Post是将表单中的数据放在form的数据体中，按照变量和值对象的方式，传递到所指向的action.
3、Get是不安全的，因为在传输过程中，数据被放在请求的URL中，这样，用户可以直接在浏览器上看到
提交的数据，一些系统内部信息也一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
4、Get传输的数据量小，主要是受限与于URL长度限制，其中IE浏览器对URL的最大限度为2083个字符。
而post可以的传输大量的数据，所以在上传文件和大数据量时使用post。
5、Form提交默认为Get方法提交。
6、Get方式获取数据后，刷新不会有负面的影响，因为它只是获取数据，而Post方法刷洗页面重复提交可
能会产生不良的后果。
CSS基本选择器
1.标签选择器：选择器的名字代表html页面上的标签
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
<style type="text/css">
p{
font-size:14px;
}</style>
<body>
<p>css</p>
<p>html</p>
</body>
【总结】需要注意的是：
（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
2.ID选择器：规定用#来定义（名字自定义）
通过标签的id属性查找标签
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
border:3px dashed green;
}
</style>
</head>
<body>
<h2 id="mytitle">你好</h2>
</body>
id选择器的选择符是“#”。
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
HTML页面，不能出现相同的id，哪怕他们不是一个类型
3、类选择器：规定用圆点.来定义
通过标签的class属性查找标签(关键性符号是句点符)
<head>
<style type="text/css">
.oneclass/*定义类选择器*/{
width:800px;
}
</style>
</head>
<body>
<h2 class="oneclass">你好</h2>
</body>
和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次
class属性的特点：
特性1：类选择器可以被多种标签使用。
特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下
<h3 class="classone classtwo">我是一个h3啊</h3>
4.通用选择器
查找所有的标签
* {
color: blue;
}
CSS高级选择器
1.后代选择器 （父子之间一定要有空格）
1
2
E F 后代选择器 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内（也就是说所有在E元素里的F元素
都会被选择）
<style type="text/css">
#div1 p{
color: red;
}
</style>
<div id="div1">
<p>1</p>
<div id="div2">
<p>2</p>
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
儿子选择器（父子之间一定要有>）
1
2
E>F 儿子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
<style type="text/css">
#div1>p{
color: red;
}
</style>
<div id="div1">
<p>1</p>
<div id="div2">
<p>2</p>
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
3.相邻选择器 （父子之间一定要有+）
1
2
E+F 相邻选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面(匹配E元素，后面的第一个F元素)
<style type="text/css">
#div1+div{
width: 50px;
height: 10px;
background-color: red;
}
</style>
<div id="div1" >
<p>1</p>
<div id="div2">
<p>2</p>
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
弟弟选择器(关键符号是小波浪号)
1
2
E~F 弟弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素(匹配E元素后所有为F的元素)
<style type="text/css">
#div1~div{
margin: 10px;
width: 50px;
height: 10px;
background-color: red;
}
</style>
<div id="div1">
<p>1</p>
<div id="div2">
<p>2</p>
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
属性选择器
CSS3中共有7种属性选择器
1.E[attr]：只使用了属性名，并没有确定任何属性值。
a[target]{
background: gray;
}
//带有target属性的链接会得到灰色的背景
2.E[attr="value"]：指定了属性名，并指定了该属性的属性值。
a[target=blank]{
background-color: green;
}
//target="_blank"的链接会得到绿色的背景
3.E[attr~="value"]：指定了属性名，并指定了该属性的属性值，此属性值是一个词列表，并且以空格隔开，其中的词列表包含一个value值，而且“~”不可忽略。
[title~=flower]
//选择title属性包含单词“flower”的元素，并设置其样式
4.E[attr^="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value开头的。
div[class^="test"]{
background:#ccc;
}
//设置class属性值以“test”开头的所有div元素的背景颜色
5.E[attr$="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value结束的。
div[class$="test"]{
background: #ccc;
}
//设置class属性值以“test”结尾的所有div元素的背景色
6.E[attr*="value"]：指定了属性名，并指定了该属性的属性值，属性值中包含value。
div[class*="test"]{
background:#fff;
}
//设置class属性值包含“test”的所有div元素的背景颜色
7.E[attr|="value"]：指定了属性名，并且属性值是value或以"value"开头的值，
[lang|=en]
//选择lang属性值以“en”开头的元素并设置其样式
分组与嵌套
# 1.分组
div, p, span { 查找div或者p或者span
color: red;
}
# 2.嵌套
d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}
"""
综合玩法
玩法1
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
玩法2
div #d1 查找div内部id是d1的后代标签
#d1>.c1 查找id是d1的内部class包含c1的儿子标签
"""
伪类选择器
:link 选择地址没有被访问过的超链接元素
:visited 选择地址被访问过的超链接元素
:hover 选择鼠标悬停在上面的元素。
:active 选择鼠标在上面并且按键按下不松手的元素
:focus 选择获取焦点的元素。
# 1.鼠标悬浮
p:hover { 鼠标移动到p标签上方 字体颜色动态修改为橙色
color: orange;
}
# 2.获取聚点
input:focus { 输入框被鼠标左键选中(聚焦)
background-color: black;
}
