前端初级知识点1

su小哲

于 2022-11-05 20:38:03 发布

阅读量158

点赞数

文章标签：网络 html

# 每日测验

```python

"""

今日考题

1.ascii,gbk,utf-8,gbk的区别

2.请用至少两种方式实现m与n值交换m=10,n=5

3.什么是深浅拷贝

4.什么是HTTP协议

5.列举你所知道的HTML标签

"""

```

# 昨日内容回顾

* Web的本质

```python

"""

浏览器

服务端

文件(html文件)

"""

课程web方向

前端 django bbs

```

* HTTP协议

```python

"""

HTTP协议的由来(sql语句由来)

浏览器只有一个如何兼容N多个服务端

"""

# 四大特性

1 基于请求响应

2 基于TCP/IP作用于应用层之上的协议

3 无状态

无论来多少次都待你如初见

如何做到保存用户状态？？？

cookie、session、token

4 无/短链接

请求来我响应你之后就没有联系了

长链接:websocket(群聊功能、服务端主动给客户端发送消息)

# 请求数据格式

请求首行(HTTP协议的版本，当前请求方式)

请求头(一大堆k，v键值对)

请求体(并不是所有的请求方式都有请求体,get没有post有)

# 响应数据格式

响应首行(HTTP协议的版本，响应状态码)

响应头(一大堆k，v键值对)

响应体(浏览器展示给用户看的内容)

# URL

统一资源定位符类似于坐标，网址

# 请求方式

1.get请求

朝别人要数据(也是可以携带参数的，只不过参数不是放在请求体里面的,而是直接放在url的后面)

url?username=jason&password=123

2.post请求

朝别人提交数据

# 响应状态码

"""用简短的数字来表示一大串提示性信息"""

1XX:服务端已经成功接收到了你的数据正在处理你可以继续提交

2XX:请求成功(200 OK)

3XX:重定向(你想访问A页面但是给你调到了B页面)

4XX:请求错误(404请求资源不存在、403请求不符合条件)

5XX:服务端内部错误(500)

ps:上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息

公司A

1000:

1001:

1002:

公司B

2001:

2002:

2003:

...

```

* HTML

```python

"""

超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可)

书写网页的一套标准

除了HTML可以书写前端页面之外

还有XML也可以书写前端页面

odoo框架内部的前端页面全部是用XML书写

公司内部管理软件 ERP

"""

# 注释

# 文档结构

<html>

<head></head>：都不是给用户看的主要是给浏览器看的一些配置信息

<body></body>：body书写的所有的内容都是给用户看的

</html>

```

* head内常用标签

```python

title 定义网页标题信息

style 内部支持直接书写css代码

link 引入外部css文件

script 内部可以书写js代码并且也可以引入外部js文件

meta 定义网页源信息

keywords

description

```

* body内基本标签

```python

"""

块儿级标签：独占一行

h1～h6 标题标签

p段落标签

行内标签：自身文本多大占多大就多大

u i b s

"""

# 特殊符号

空格  

大于 >

小于 <

& &

® ® 商标版权

¥ ￥

```

* 常用标签

```python

"""

div：网页初期划定区域范围

span：划定文本的

"""

# a标签

链接标签

href

1.可以放一个url点击自动跳转

2.还可以放其他标签的id值锚点功能

target

控制是否在当前页跳转

_self

_blank

# img标签

图片标签

src

1.可以放图片的路径本地或者线上

2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑)

alt

图片加载不出来的时候展示的提示信息

title

鼠标悬浮在图片上之后展示的提醒信息

height、width

单独调整某一个另外一个会自动等比例缩放

如果两个都调整了可能会出现图片的失真

# 标签一般情况下都需要有两个重要的属性

id值

唯一标示同一个页面不能有重复

class值

类似于类的继承可以有多个

```

* 标签的分类

```python

"""

分类1:

双标签

单标签

<img/>

分类2:

块儿级标签:独占一行可以设置长宽

div p

注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签

但是p标签只能嵌套行内标签

行内标签:自身文本多大就占多大不能设置长宽

span a img

PS：上述的规定只是HTML书写规范如果你不遵循不会报错

浏览器会自动帮你解除嵌套关系

"""

```

* 列表标签

```python

页面上只要是带有规则的排序文字一般用的都是无序列表

有序列表

标题列表

```

# 今日内容概要

* 表格标签(只要是展示数据一般都可以使用表格标签)

* 表单标签(重要:获取前端用户数据发送给后端)

* 偷窥一下后端框架的基本使用(flask)

* css层贴样式表(选择器)

### 表格标签

```python

jason 123 read

egon 123 dbj

tank 123 hecha

...

<table>

<thead>

<tr> 一个tr就表示一行

<th>username</th> 加粗文本

<td>username</td> 正常文本

</tr>

</thead> 表头(字段信息)

<tbody>

<tr>

<td>jason</td>

</tr>

</tbody> 表单(数据信息)

</table>

<table border="1"> 加外边宽

<td colspan="2">egon</td> 水平方向占多行

<td rowspan="2">DBJ</td> 垂直方向占多行

# 原生的表格标签很丑但是后续我们一般都是使用框架封装好的很好看

```

### 表单标签

```python

"""

能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器

"""

# 写一个注册功能

<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端

action:控制数据提交的后端路径(给哪个服务端提交数据)

1.什么都不写默认就是朝当前页面所在的url提交数据

2.写全路径:https://www.baidu.com 朝百度服务端提交

3.只写路径后缀action='/index/'

自动识别出当前服务端的ip和port拼接到前面

host:port/index/

<label for="d1"> 第一种直接讲input框写在label内

username:<input type="text" id="d1">

</label> 第二种通过id链接即可无需嵌套

<label for="d2">password:</label>

ps:input不跟label关联也没有问题

"""

label 和 input都是行内标签

"""

input标签就类似于前端的变形金刚通过type属性变形

text:普通文本

password:密文

date:日期

submit:用来触发form表单提交数据的动作

button:就是一个普普通通的按钮本身没有任何的功能但是它是最有用的，学完js之后可以给它自定义各种功能

reset:重置内容

radio:单选

默认选中要加checked='checked'

<input type="radio" name="gender" checked='checked'>男

当标签的属性名和属性值一样的时候可以简写

<input type="radio" name="gender" checked>女

checkbox:多选

<input type="checkbox" checked>DBJ

file:获取文件也可以一次性获取多个

hidden:隐藏当前input框

钓鱼网站

select标签默认是单选可以加mutiple参数变多选默认选中selected

</select>

textarea标签获取大段文本

# 能够触发form表单提交数据的按钮有哪些(一定要记住)

1、<input type="submit" value="注册">

2、<button>点我</button>

# 所有获取用户输入的标签都应该有name属性

name就类似于字典的key

用户的数据就类似于字典的value

<p>gender:

<input type="radio" name="gender">男

<input type="radio" name="gender">女

<input type="radio" name="gender">其他

</p>

```

# 验证form表单提交数据

```python

# 接下来的框架代码无需掌握看一下效果即可

pip3 install FLASK

form表单默认提交数据的方式是get请求数据是直接放在url后面的

http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on

你可以通过method指定提交方式

针对用户选择的标签用户不需要输入内容但是你需要提前给这些标签添加内容value值

<p>gender:

<input type="radio" name="gender" value="male">男

<input type="radio" name="gender" checked value="female">女

<input type="radio" name="gender" value="others">其他

</p>

<p>hobby:

<input type="checkbox" name="hobby" value="basketball">篮球

<input type="checkbox" checked name="hobby" value="football">足球

<input type="checkbox" checked name="hobby" value="doublecolorball">双色球

</p>

<p>province：

</select>

</p>

"""

form表单提交文件需要注意

1.method必须是post

2.enctype="multipart/form-data"

enctype类似于数据提交的编码格式

默认是urlencoded 只能够提交普通的文本数据

formdata 就可以支持提交文件数据

"""

"""下面的代码无需掌握你只需要关心form表单即可"""

from flask import Flask, request

app = Flask(__name__)

# 当前url既可以支持get请求也可以支持post请求如果不写默认只能支持get请求

@app.route('/index/',methods=['GET','POST'])

def index():

print(request.form) # 获取form表单提交过来的非文件数据

# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])

print(request.files) # 获取文件数据

file_obj = request.files.get('myfile.png')

file_obj.save(file_obj.name)

return 'OK'

app.run()

# 针对用户输入的标签。如果你加了value 那就是默认值

<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>

disable 禁用

readonly只读

```

# CSS

层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看

```python

# 注释

/*单行注释*/

多行注释1

多行注释2

多行注释3

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)

/*这是博客园首页的css样式文件*/

/*顶部导航条样式*/

...

/*左侧菜单栏样式*/

...

/*右侧菜单栏样式*/

...

# css的语法结构

选择器 {

属性1:值1;

属性2:值2;

属性3:值3;

属性4:值4;

}

# css的三种引入方式

1.style标签内部直接书写(为了教学演示方便我们用第一种)

<style>

h1 {

color: burlywood;

}

</style>

2.link标签引入外部css文件(最正规的方式解耦合)

3.行内式(一般不用)

<h1 style="color: green">老板好要上课吗?</h1>

```

```python

"""

css的学习流程

1.先学如何查找标签

css查找标签的方式你一定要学会

因为后面所有的框架封装的查找语句都是基于css来的

css选择器很简单很好学不要有压力!!!

2.之后再学如何添加样式

"""

```

# CSS选择器

### 基本选择器

```python

# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器

<style>

/*id选择器*/

/*#d1 { !*找到id是d1的标签将文本颜色变成绿黄色*!*/

/* color: greenyellow;*/

/*}*/

/*类选择器*/

/*.c1 { !*找到class值里面包含c1的标签*!*/

/* color: red;*/

/*}*/

/*元素(标签)选择器*/

/*span { !*找到所有的span标签*!*/

/* color: red;*/

/*}*/

/*通用选择器*/

/** { !*将html页面上所有的标签全部找到*!*/

/* color: green;*/

/*}*/

</style>

```

### 组合选择器

```PYTHON

"""

在前端我们将标签的嵌套用亲戚关系来表述层级

<div>div

<p>div p

</p>

</div>

div里面的p span都是div的后代

p是div的儿子

p里面的span是p的儿子是div的孙子

div是p的父亲

...

"""

# 后代选择器

# 儿子选择器

# 毗邻选择器

# 弟弟选择器

/*后代选择器*/

/*div span {*/

/* color: red;*/

/*}*/

/*儿子选择器*/

/*div>span {*/

/* color: red;*/

/*}*/

/*毗邻选择器*/

/*div+span { !*同级别紧挨着的下面的第一个*!*/

/* color: aqua;*/

/*}*/

/*弟弟选择器*/

div~span { /*同级别下面所有的span*/

color: red;

}

```

### 属性选择器

```python

"""

1 含有某个属性

2 含有某个属性并且有某个值

3 含有某个属性并且有某个值的某个标签

"""

# 属性选择器是以[]作为标志的

/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/

/* background-color: red;*/

/*}*/

/*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/

/* background-color: orange;*/

/*}*/

/*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/

/* background-color: wheat;*/

/*}*/

```

### 总结

```python

"""

1.form表单所有相关的标签都需要掌握

2.后端框架稍微了解一下激发兴趣

3.选择器练习一下

"""

```

su小哲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端初级知识点1

前端初级知识点1
复制链接

扫一扫

前端初级知识点1

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