今日学习内容总结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; } 语义是输入框被鼠标左键选中，聚焦的效果