前端学习02

最新推荐文章于 2023-05-31 09:39:00 发布

su小哲

最新推荐文章于 2023-05-31 09:39:00 发布

阅读量199

点赞数

文章标签：前端

# 每日测验

```python

"""

今日考题

1.列举字符串,列表，元组，字典每个常用的五个方法

2.描述下列常见内置函数的作用可用代码说明map,zip,filter,sorted,reduce

3.列举你所知道的面相对象中的__开头__结尾的方法及作用，越多越好

4.写出form标签几个关键性的属性及作用

5.列举你所知道的css选择器

"""

```

# 昨日内容回顾

* 表格标签

```html

<table>

<thead>

<tr> 一个tr就是一行

<th></th> 表头里面建议使用th加粗文本

</tr>

</thead> 表头

<tbody>

<tr>

<td></td> 表单里面的建议直接用td即可

</tr>

</tbody> 表单

</table>

补充:

table有一个border属性可以加一个比较丑的边框

针对tr可以设置rowspan、colspan

```

* form表单

```python

# 能够获取用户数据并且发送到后端

"""

action 控制数据的提交路径

1.不写默认朝当前页面所在的地址提交

2.写全路径

3.只写后缀 /index/ 能够自动补全当前页面所载的后端服务器ip:port(暂时不考虑)

method 控制请求方式

默认是get请求

也可以携带数据但是数据是直接破解在url后面的不安全并且大小有限制

url?username=jason&password=123

可以修改为post请求

携带的数据放在请求体里面的

enctype 控制数据的编码方式

默认是urlencoded 只能发送普通的文本不能发送文件

如果你要发送文件必须改为 formdata

发送文件必须要修改的两个参数

method = 'post'

enctype='...formdata'

"""

input标签获取用户数据的(输入选择上传...)

type可以书写的类型

text 普通文本

password 展示密文

date 日期

radio 单选

默认选择可以用checked(属性名和属性值一样的时候就可以简写)

checkbox 多选

默认选择可以用checked

file 获取文件

了解:可以加multiple 支持传多个文件

submit 触发form表单提交动作

button 什么功能都没有就是一个普通的按钮

reset 重置按钮

select标签下拉框默认是单选可以加multiple成多选

一个个下拉框选项是一个个的option标签

option标签默认选中可以加selected

</select>

textarea标签获取大段文本内容

label标签给input加上对于的注释信息不写其实也没有关系

input写在lable里面

label的for关联input的id值可以不嵌套

"""

获取用户数据的标签都应该都name属性

因为你需要给后端发送数据并且需要标明数据到底表示什么

name 字典的key

value 字典的value(用户数据)

需要用户选择的标签你需要自己加上value值

radio

checkbox

option

ps:如果你给获取用户输入的标签加了value值那么就类似于默认值

"""

ps:hidden、disable、readonly、placeholder

# 触发form表单提交数据的两种方式

type=submit

button按钮

```

* flask框架

```python

代码目前你不需要去研究我们写这个只是为了验证form表单的功能而已

```

* css

```python

# 注释

/**/ 由于前端代码都笔记多并且没有什么规律所以我们都会利用注释来帮助我们维护代码

# 语法结构

选择器 {

属性1:值;

属性2:值;

属性3:值;

}

# 选择器

1.基本选择器

id选择器

#d1 {}

类选择器

.c1 {}

标签选择器

div {}

通用选择器

* {}

p#d1.c1 <p id="d1" class="c1"></p> emmet插件

2.组合选择器

我们将前端标签的嵌套定义为父亲儿子后代兄弟等等关系

后代选择器

div p {} 只要是div内部的p都拿到

儿子选择器

div>p {} 只拿内部第一层级的p

毗邻选择器

div+p {} 紧挨着我的同级下一个

弟弟选择器

div~p {} 同级别下面所有的p

3.属性选择器 []

[username]

[username='jason']

input[username='jason']

ps:标签既可以有默认的书写 id class...

还可以有自定义的书写并且支持多个

```

# 今日内容

* 分组与嵌套

* 伪类选择器

* 伪元素选择器

* 选择器优先级

* css属性相关(操作标签样式)

### 分组与嵌套

```python

div,p,span { /*逗号表示并列关系*/

color: yellow;

}

#d1,.c1,span {

color: orange;

}

```

### 伪类选择器

```html

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

body {

background-color: black;

}

a:link { /*访问之前的状态*/

color: red;

}

a:hover { /*需要记住*/

color: aqua; /*鼠标悬浮态*/

}

a:active {

color: black; /*鼠标点击不松开的状态激活态*/

}

a:visited {

color: darkgray; /*访问之后的状态*/

}

p {

color: darkgray;

font-size: 48px;

}

p:hover {

color: white;

}

input:focus { /*input框获取焦点(鼠标点了input框)*/

background-color: red;

}

</style>

</head>

<body>

<a href="https://www.jd.com/">小轩在不在?</a>

<p>点我有你好看哦</p>

</body>

</html>

```

### 伪元素选择器

```python

p:first-letter {

font-size: 48px;

color: orange;

}

p:before { /*在文本开头同css添加内容*/

content: '你说的对';

color: blue;

}

p:after {

content: '雨露均沾';

color: orange;

}

ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)

```

### 选择器优先级

```python

"""

id选择器

类选择器

标签选择器

行内式

"""

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

1.选择器相同书写顺序不同

就近原则:谁离标签更近就听谁的

2.选择器不同 ...

行内 > id选择器 > 类选择器 > 标签选择器

精确度越高越有效

#d1 {

color: aqua;

}

/*.c1 {*/

/* color: orange;*/

/*}*/

/*p {*/

/* color: red;*/

/*}*/

</style>

</head>

<body>

<p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>

</body>

</html>

```

# css属性相关

```PYTHON

<style>

p {

background-color: red;

height: 200px;

width: 400px;

}

span {

background-color: green;

height: 200px;

width: 400px;

/*行内标签无法设置长宽就算你写了也不会生效*/

}

</style>

```

### 字体属性

```python

p {

/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的写多个备用*!*/

/*font-size: 24px; !*字体大小*!*/

/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

/*color: red; !*直接写颜色英文*!*/

/*color: #ee762e; !*颜色编号*!*/

/*color: rgb(128,23,45); !*三基色数字范围0-255*!*/

/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度范围是0-1*!*/

/*当你想要一些颜色的时候可以利用现成的工具

1 pycharm提供的取色器

2 qq或者微信截图功能

也可以多软件结合使用

}

```

### 文字属性

```python

p {

/*text-align: center; !*居中*!*/

/*text-align: right;*/

/*text-align: left;*/

/*text-align: justify; !*两端对齐*!*/

/*text-decoration: underline;*/

/*text-decoration: overline;*/

/*text-decoration: line-through;*/

/*text-decoration: none;*/

/*在html中有很多标签渲染出来的样式效果是一样的*/

font-size: 16px;

text-indent: 32px; /*缩进32px*/

}

a {

text-decoration: none; /*主要用于给a标签去掉自带的下划线需要掌握*/

}

```

### 背景图片

```html

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

#d1 {

height: 500px;

background-color: red;

}

#d2 {

height: 500px;

background-color: green;

}

#d3 {

height: 500px;

background-image: url("222.png");

background-attachment: fixed;

}

#d4 {

height: 500px;

background-color: aqua;

}

</style>

</head>

<body>

</body>

</html>

```

### 边框

```html

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

p {

background-color: red;

border-width: 5px;

border-style: solid;

border-color: green;

}

div {

/*border-left-width: 5px;*/

/*border-left-color: red;*/

/*border-left-style: dotted;*/

/*border-right-width: 10px;*/

/*border-right-color: greenyellow;*/

/*border-right-style: solid;*/

/*border-top-width: 15px;*/

/*border-top-color: deeppink;*/

/*border-top-style: dashed;*/

/*border-bottom-width: 10px;*/

/*border-bottom-color: tomato;*/

/*border-bottom-style: solid;*/

border: 3px solid red; /*三者位置可以随意写*/

}

#d1 {

background-color: greenyellow;

height: 400px;

width: 400px;

border-radius: 50%; /*直接写50%即可长宽一样就是圆不一样就是椭圆*/

}

</style>

</head>

<body>

<p>穷人被diss到了哭泣.png</p>

<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>

</body>

</html>

```

### display属性

```PYTHON

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

/*#d1 {*/

/* !*display: none; !*隐藏标签不展示到前端页面并且原来的位置也不再占有了但是还存在于文档上*!*!*/

/* display: inline; !*将标签设置为行内标签的特点*!*/

/*}*/

/*#d2 {*/

/* display: inline;*/

/*}*/

/*#d1 {*/

/* display: block; !*将标签设置成块儿级标签的特点*!*/

/*}*/

/*#d2 {*/

/* display: block;*/

/*}*/

/*#d1 {*/

/* display: inline-block;*/

/*}*/

/*#d2 {*/

/* display: inline-block; !*标签即可以在一行显示又可以设置长宽*!*/

/*}*/

</style>

</head>

<body>

<div style="visibility: hidden">单纯的隐藏位置还在</div>

</body>

</html>

```

### 盒子模型

```python

"""

盒子模型

就以快递盒为例

快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)

盒子的厚度(标签的边框 border)

盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)

物体的大小(内容 content)

如果你想要调整标签与标签之间的距离你就可以调整margin

浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除

"""

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

body {

margin: 0; /*上下左右全是0

/*margin: 10px 20px; !* 第一个上下第二个左右*!*/

/*margin: 10px 20px 30px; !*第一个上第二个左右第三个下*!*/

/*margin: 10px 20px 30px 40px; !*上右下左*!*/

}

/*p {*/

/* margin-left: 0;*/

/* margin-top: 0;*/

/* margin-right: 0;*/

/* margin-bottom: 0;*/

/*}*/

#d1 {

margin-bottom: 50px;

}

#d2 {

margin-top: 20px; /*不叠加只取大的*/

}

#dd {

margin: 0 auto; /*只能做到标签的水平居中*/

}

p {

border: 3px solid red;

/*padding-left: 10px;*/

/*padding-top: 20px;*/

/*padding-right: 20px;*/

/*padding-bottom: 50px;*/

/*padding: 10px;*/

/*padding: 10px 20px;*/

/*padding: 10px 20px 30px;*/

/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/

}

</style>

</head>

<body>

</body>

</html>

```

### 浮动

```python

"""浮动的元素没有块儿级一说本身多大浮起来之后就只能占多大"""

只要是设计到页面的布局一般都是用浮动来提前规划好

<style>

body {

margin: 0;

}

#d1 {

height: 200px;

width: 200px;

background-color: red;

float: left; /*浮动浮到空中往左飘*/

}

#d2 {

height: 200px;

width: 200px;

background-color: greenyellow;

float: right; /*浮动浮到空中往右飘*/

}

</style>

```

```python

su小哲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习02

前端学习02
复制链接

扫一扫

前端学习02

“相关推荐”对你有帮助么？