今日学习内容总结3.7
作者：互联网
今日学习内容总结
在上周的学习中，我们已经对前端的学习迈开脚步了。我们了解了什么是前端，所以接下来的学习依旧是以前端为主的学习。在上周的学习中，我们首先学习HTML语言。HTML是一门标签语言，并不是编程语言。我们对html的学习其实主要是对html中的标签进行学习。而今天主要学习的就是，让标签具有独特的表现形式的方法。css方法。
from表单
在了解css之前，我们需要对from表单进行了解学习。
from表单简介
表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
from表单的属性
# 表单标签的格式
< form action＝"url" method=get|post name=“myform” >< /form >
1. name: 表单提交时的名称
2. action： 提交到的地址
3. method：提交方式，默认为get
from表单属性
action属性
# from支持HTML的全局属性
# action 控制数据的提交地址
# 方式1:写全路径
action="http://www.aa7a.cn/user.php"
# 方式2:写后缀(自动补全IP和PORT)
action="user.php"
# 方式3:不写(朝网页所在的地址提交)
action=""
input标签
# input标签 获取用户各中类型数据的标签
input标签的三个重要属性
1. type 他是代表input的类型
2. name 他就是后台取值的依据(key)
3. val 他是我们输入的值，也是后台需要的值
# 写法
<input type="" name="">
# type属性
1. text 表示普通的文本，明文输入
2. password 输入的也是文本，密文输入
3. number 输入的是数字，不是数字不让输入
4. submit 提交按钮，提交form表单的内容
5. button 普通的按钮，默认没有任何的功能(意味着以后可以给它添加任意的功能，通过js)
6. radio 单选框
6.1. 我们需要注意的是单选框的所有的name值必须相同
6.2. 如果name不相同，就说明不在同一个选择方位，也就不存在单选，然后想要在后台取到他的值，你必须在定义的时候给附上一个值给value，这样才能取到值
7. checkbox 复选框，内容和单选框一样 他们都可以通过添加checked="checked"设置默认值
7.1. 如果属性名和属性值相同 可以简写checked
8. file 选择文件，可以选择文件提交给后台
9. date 日历展示
10. email 邮箱格式数据
11. reset 重置页面填写的数据
select标签
# select标签 select标签是一个下拉框的形式让用户进行选择选项
# 写法
<select>
<option></option>
<option></option>
</select>
select标签中必须包含option标签才能显示属性。select中有全局属性name，这个name是后台又来进行取值的，每个option标签的文本内容是显示给用户看的，我们需要取的是option标签中的value属性，所以在开始必须给option的value赋值。后台通过select的name取值，直接取到的就是对应option的value，如果我们向让他默认选择某个option，可以在option标签中加入selected属性，如果都不加，默认是显示第一个。
textarea标签
# textarea 文本框标签
# 写法
<textarea name="desc"></textarea>
与input中的text一样都是输入文本的，但是textarea标签没有字数的限制，并且输入框可以拖拉。
lable标签
# lable标签 专门给input标签配文字说明
# 写法
# 方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
# 方式2
<label>用户名:
<input type="text">
</label>
网络请求方式
最常见的网络请求方式有两种：
1.get请求
朝服务端索要数据
2.post请求
朝服务端提交数据
``
get与post的区别：
要想使用GET和POST请求跟服务器进行交互，得先了解一个概念：参数就是传递给服务器的具体数据，比如登录时的帐号、密码。
get与post做一个对比：GET和POST的主要区别表现在数据传递上。
**get**
在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如：http://www.test.com/login?username=123&pwd=234&type=JSON。由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB，最多只能携带2kb左右。
**post**
发给服务器的参数全部放在请求体中，post请求是在请求体中组织数据。
post与get的选择建议：
```python
1. 如果要传递大量数据，比如文件上传，只能用POST请求
2. GET的安全性比POST要差些，如果包含机密\敏感信息，建议用POST
3. 如果仅仅是索取数据（数据查询），建议使用GET
4. 如果是增加、修改、删除数据，建议使用POST
css
css简介
CSS是Cascading Style Sheet的缩写。译作”层叠样式表单“。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以控制许多仅使用HTML无法控制的属性。HTML是一种标记性语言。当在浏览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标签，并根据内置的解析规则将网页元素呈现出来。
CSS层叠样式表是一系列格式设置的规则，它们控制网页内容的外观。使用CSS设置页面格式时，可以将内容与表现形式分开。网页内容（即HTML代码）驻留在HTML文件自身中，而用于定义代码表现形式的CSS规则驻留在另一个文件（外部样式表）或HTML文档的另一部分（通常为文件头部分）中。使用CSS可以更加灵活地控制具体的页面外观，从精确的布局定位到特定的字体和样式。
CSS允许控制HTML无法独自控制的许多属性。CSS格式设置规则由选择器和声明两部分组成，其中选择器是标识格式元素的术语（如p、h1、类名或id），声明用于定义元素样式。CSS的主要优点是提供了便利的更新功能。
引入css的方式
1.head内style标签内部直接编写css代码
建议在小白学习阶段可以使用 方便查看
2.head内link标签引入外部css文件
工作中一般使用的都是link形式 符合标准
3.标签内部通过style属性直接编写
第三种也称之为"行内式"是最不推荐使用的一种方式
因为它会将HTML和CSS柔和到一起 增加了耦合度
css基本选择器
标签选择器
直接通过标签名查找标签。
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。
类选择器
类选择器又分单类选择器和多类选择器。但是这里先介绍单类选择器。
要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:
# html 中
<p class="deadline">...</p>
<h2 class="deadline">...</h2>
# css中
p.deadline { color: red;}
h2.deadline { color: red;}
点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。
id选择器
ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：
# html中
<p id="top-para">...</p>
<p id="foot-para">...</p>
# css中
#top-para {} #foot-para {}；
这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。id选择器正是通过标签的id属性查找标签的。
通用选择器
# 查找所有的标签的选择器
* {
color: blue;
}
css的组合选择器
标签之间的关系
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
通过嵌套层级来表示亲属关系：
1. 对于div1来说div2、p2、span2都是儿子
2. 对于div2、p2、span2来说div1就是父亲
3. 对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
4. 对于span2来说div2、p2是哥哥 span2是弟弟
5. div1内部所有的标签无论层级都可以称之为是div1的后代
儿子选择器
# 在儿子选择器中关键符号是大于符号
#d1 > span {
color: red;
}
语义是查找id为d1标签内部所有的儿子span
后代选择器
# 在后代选择器中的关键符号是空格
#d1 span {
color: red;
}
语义是查找id为d1标签内部所有的后代span
毗邻选择器
# 在毗邻选择器中的关键符号是加号
#d1 + a {
color: red;
}
语义是查找id是d1标签同级别下面紧挨着第一个a标签
弟弟选择器
# 在弟弟选择器中的关键符号是小波浪号
#d1 ~ a {
color: red;
}
语义是查找id是d1标签同级别下面所有a标签
属性选择器
属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。
三种查找方式
1.方式1:直接通过属性名查找
[type] {
background-color: red;
}
2.方式2:属性名是type并且值是text的标签
[type='text'] {
background-color: red;
}
3.方式3:属性名是type并且值是text的div标签
div[type='text'] {
background-color: red;
}
css的分组与嵌套
分组查找方式：
div, p, span {
color: red;
}
语义是查找div或者p或者span
嵌套查找：
#d1, .c1, span {
color: red;
}
语义查找id是d1或者class包含c1或者span
额外用法：
1. div#d1 查找id是d1的div标签
2. div.c1 查找class包含c1的div标签
3. div #d1 查找div内部id是d1的后代标签
4. #d1>.c1 查找id是d1的内部class包含c1的儿子标签
伪类选择器
实现鼠标悬浮的效果：
p:hover {
color: orange;
}
语义鼠标移动到p标签上方 字体颜色动态修改为橙色
获取聚焦的方法：
input:focus {
background-color: black;
}
语义是输入框被鼠标左键选中，聚焦的效果
标签：总结,color,标签,表单,学习,3.7,nbsp,选择器,属性 来源： https://www.cnblogs.com/blank1210/p/16192135.html