一、form表单
1. form表单有什么用
- 能够获取用户输入的信息（输入，选择， 上传的文件），并且将这些数据全部发送给后端
2. form表单的用法
（1）有两个重要参数：
- action ： 控制数据提交的地址
- 三种书写方式：
- 不写 ， 默认就是朝当前这个页面所在的地址提交数据
- 写全路径，如
http://www.baidu.com - 只写路径后缀（/index/）
- 三种书写方式：
- method ： 控制数据提交的方式
- get form表单默认是get请求
- post
- enctype 控制前端朝后端提交数据的编码格式
- 默认是urlencoded
form表单如果想要传输文件 必须要做两件事
1.method必须是post
2.必须将默认的urlencoded换成formdata
- 默认是urlencoded
<body>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
</form>
</body>
（2）input 结合 label 一起使用
<body>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
1. 绑定id值方法一
<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后在浏览器中点击label标签内文字任何的位置都可以自动选中input框
2. 绑定id值方法二
<label for="d2">用户名:</label>
<input type="text" id="d2">
</form>
<body>
（3）input的type参数
- 根据input的type属性的参数的不同，展示不同的功能，以下都是type的参数
- text 普通文本
- password 输入的内容，会变成密文
- date 日期
- radio 单选圆圈
- checkbox 多选 打钩
- hidden 隐藏
- file 传文件
- button 普通按钮，没有任何意义。然而却是最多的，你可以给它绑定js事件
- reset 重置按钮
- submit 提交按钮，能够自动触发form表单提交数据的动作
-
input标签的其他属性
- disable 属性 ，禁用该input框
- value属性 ， 设置默认值
-
选择的标签，如何默认选中
- radio
- 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(
******)
- 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(
- checkbox
- 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(
******)
- 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(
- radio
-
select标签 ：下拉框
- 一个个的option标签就是一个个的选项
- 默认是单选
- 你可以给select标签加一个multiple参数，就可以变成多选
- 在option标签中添加selected属性类似checked，就可以默认选中
-
textarea 标签 获取大段文本
-
能够触发form表单提交数据的动作的两个标签
- input标签的type = submit
- button标签（input标签的type参数也有button，两者作用不一样）
-
所有获取用户输入的标签，都应该有name属性（
*******）- name属性就类似于字典的key
- input框获取到的用户输入都会自动放到input框的value属性中，无需自己在添加value属性
-
针对所有选择框来说，传到后端的数据，由value属性接收再传到后端，所以要手动添加value属性。
-
form表单如果要提交文件数据，必须修改以下参数
enctype="multipart/form-data"
二、CSS
1. 什么是css
-
css就是层叠样式表
-
css就是用来控制html标签样式的，让其在浏览器上渲染的样式更合适，好看。
2. 注释
-
单行注释：
/*单行注释*/ -
多行注释：
/* 多行注释`1 多行注释2 */ -
注释的作用
- 通常我们在写css的时候，都会单独写一个css文件，里面只有css代码
- 这时，就用注释来标注和区分一个个功能
3. css的语法结构
- 选择器 {属性1：属性值1}
4. css的三种引入方式
-
通过head标签内部的link标签引入外部的css文件（最正规的用法）
<link rel="stylesheet" href="css文件路径（只能放相对路径）"> -
直接在html页面上的head内通过style标签直接书写css代码
<style>
h1 {
color: green;
}
</style>
-
行内式（直接在标签内部通过style属性直接书写），不推荐使用
<h1 style="color: orange">我是Oscar</h1>
5. css 查找标签方法
（1）基本选择器
-
元素选择器（即标签选择器）
让页面上的所有该标签都变成红色 标签名 { color: red; } -
id选择器
让id为该id值的标签变成绿色 (# + id值) #id值 { color: green; } -
类选择器
让类中有c1的标签都变成粉红色 (. +类值) .c1 { color: pink; } -
通用选择器
让页面的所有标签都变成橘黄色 * { color: orange; }
（2）组合选择器
-
后代选择器
只要在标签内部都算作该标签的后代，用1个空格连接 如div 内部的所有span标签： div span { color: red; } -
儿子选择器
表示一个标签内部的第一层标签。用 > 连接 如 div内的第一个span是儿子标签，第二个是div的孙子标签 <div> <span>adff</span> # div 的儿子标签 <p>dsfsadf # div 的儿子标签 <span>iuiuio</span> # div 的孙子标签 </p> </div> 儿子选择器语法： div>span { color: green; } -
弟弟选择器
属于同一级别标签的标签1的之下的标签都是标签1的弟弟标签， 用 ~ 连接 <div>div <span>div里面的span</span> <p>div里面的p <span>div里面的p里面的span</span> </p> <span>div里面最下面的span</span> </div> <p>ppp</p> # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。 <span>span</span> # div 的弟弟标签 <p>ppp</p> # div 的弟弟标签 <span>span</span> # div 的弟弟标签 弟弟选择器语法： div~span { color : yellow } -
毗邻选择器
毗邻选择器 标签1的下方的第一个同级别标签 ，用 + 连接 <div>div <span>div里面的span</span> <p>div里面的p <span>div里面的p里面的span</span> </p> <span>div里面最下面的span</span> </div> <p>ppp</p> # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。 <span>span</span> # div 的弟弟标签 <p>ppp</p> # div 的弟弟标签 <span>span</span> # div 的弟弟标签 div+span { color: aqua; }
（3）属性选择器
-
标签的补充
- 任何的标签都有自己的默认的属性 id class
- 标签还支持你自定义任何数量的属性(也就意味着可以让标签帮你携带一些额外的数据)(
******)
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 1.含有某个属性名的标签 2.含有某个属性名并且属性值是...的标签 3.找p标签并且含有某个属性名并且属性值是...的标签 */ [password] { color: red; } [username='jason'] { color: black; } span[username='jason'] { color: red; } </style> </head> <body> <p username="jason">ppp</p> <p username="oscar">ppp</p> <p username="sean">ppp</p> <span username="jason">span</span> <span password="123">span</span> <div password>div</div> </body> </html>
（4）伪类选择器
-
hover状态所有标签都有 -
a标签有四种状态
1.没有被点击过
2.鼠标悬浮上面
3.点击之后不松手
4.点击之后 再回去依次对应上面a标签的4种状态 <style> a:link { color: red; } a:hover { /*hover表示的就是悬浮的意思*/ color: black; } a:active { color: orange; } a:visited { color: pink; } input输入框的聚焦状态： input:focus { background-color: orange; } 普通文本的鼠标悬浮状态： span:hover { background-color: pink; } </style> -
input输入框的两种状态
-
我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus；
-
鼠标移出去之后的状态 叫做input框失去焦点
-
（5）伪元素选择器
-
(清除浮动带来的负面影响)，可以通过css添加文本内容
p标签的文本信息首个字符变大且变成红色： p:first-letter { font-size: 48px; color: red; } p标签的文本信息首个字符前面加绿色的 * ，content的内容不能被选中 p:before { content: '*'; color: green; } p标签的文本信息末尾加上蓝色的 ？ ，content的内容不能被选中 p:after { content: '?'; color: blue; }6.选择器的优先级
1.选择器相同的情况下 引入方式不同
遵循就近原则 谁离标签更近 就听谁的 ， 行内选择器优先级最高
2.选择器不同的情况下
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器
7.分组与嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
***************分组写法，把同等级标签写在一起*********************
div,span,p {
color: blue;
}
****************嵌套，各种选择器放在一起写，前提是他们对应的标签要是同等级的标签。用逗号隔开****************
#d1,.c1,p {
color: orange;
}
</style>
</head>
<body>
<div id="d1">div</div>
<span class="c1">span</span>
<p class="c2">
p
</p>
</body>
</html>