前端介绍

# 前端简介

# 前端

任何与用户直接打交道的操作界面，都可以称之为前端
- 比如：电脑界面、手机界面、平板界面等
前端基础
- html
  - 页面的内容、骨架
- css
  - 页面的样式、外观
- JavaScript
  - 页面的动态效果
前端就是死记硬背，没有多少逻辑
而前端框架是提前给你封装好了很多操作，只需要按固定的语法调用即可

# 后端

类似于幕后操作者，不直接与用户打交道

# 软件开发架构

# 客户端/服务端 (C/S)

客户端和服务端通过Socket进行交互

# 浏览器/服务端 (B/S)

浏览器像服务端发送HTTP请求
服务端接收HTTP请求，并返回相关响应
浏览器接收响应，并根据特定的规则解析渲染成页面展示给用户

# HTTP协议

# 介绍

超文本传输协议，用来规定服务端和浏览器之间数据交互的格式

# 四大特性

基于请求/响应
基于TCP/IP的应用层协议
无状态

- 不保存任何一次请求响应的状态
- 所以有时需要借助一些专门用来记录状态的技术，cookie、session、token...等等

无/短连接

- 请求一次响应一次，然后断开TCP连接

# 请求数据格式 (请求报文)

请求首行
- 标识HTTP协议版本、当前请求方式(Get/Post)
- 常用请求方式
  - Get
    - 一般用于向服务器要数据
    - 也可以携带参数请求，参数放在url后面
  - Post
    - 一般用于向服务器提交数据
请求头
- 一堆k,v键值对
\r\n
- 用于标识分隔请求头和请求体
请求体
- 向服务器提交数据时才会用到

# 响应数据格式 (响应报文)

响应首行
- 标识HTTP协议版本、响应状态码
响应头
- 一堆k,v键值对
\r\n
- 用于标识分隔响应头和响应体
响应体
- 服务端返回给浏览器的数据

# 常见状态码

2xx
- 服务端接受到请求并成功响应了数据
- 比如：200：请求响应成功
3xx
- 重定向
- 比如：
  - 301：永久重定向，浏览器会记录重定向URL，下次直接由浏览器去进行跳转，不再经过服务器
  - 302：临时重定向，浏览器不会记录重定向的URL，每一次重定向都会经过服务器请求
4xx
- 请求错误
- 比如：
  - 403：当前请求不合法、或者没有访问权限
  - 404：请求资源不存在
5xx
- 服务器内部错误

# Socket实现Http服务端

# 实现例子

import socket
server = socket.socket()
server.bind(('127.0.0.1', 80))
server.listen(5)
while 1:
    conn, addr = server.accept()
    # 接受HTTP请求
    data = conn.recv(1024)
    print(data)
    # 返回HTTP响应
    up = b'HTTP/1.1 200 OK\r\nName: test\r\n\r\nHELLO WORLD!'
    with open('index.html', 'rb') as f:
        content = f.read()
        conn.send(up + content)
    conn.close()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 注意

我们通常是读取文件的数据来作为响应体的数据
由于HTTP是无连接的协议，所以客户端接收到响应后，会立即关闭连接
- 所以服务端应该一次性将响应报文进行返回
- 所以每当服务端发送完响应后，也应该关闭连接，以释放系统资源

# HTML简介

超文本标记语言，如果想要让浏览器渲染我们所写的代码，就必须遵循HTML语法
我们在浏览器所看到的页面，大都是由HTML代码构成的

# HTML注释语法

# 单行注释

<!--这是一条注释-->

# 多行注释

<!--
多行注释1
多行注释2
... ...
-->

1
2
3
4
5

# 注意

由于HTML代码非常的杂乱且多，所以我们一般使用注释来划分区域，方便我们后续的查找
例如：

<!--导航条开始-->
... ...
导航条所有的html代码
... ...
<!--导航条结束-->

1
2
3
4
5

# HTML文档结构

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

1
2
3
4
5

<!DOCTYPE html>
- 用于声明该文档的HTML版本，告诉浏览器用哪种HTML版本的规范来解读该HTML文档
- 此处的<!DOCTYPE html>是html5的声明
head
- head内的标签用于定义一些配置，是给浏览器看的，不会展示给用户看
body
- body内的标签是用于渲染给用户看的，代码写什么浏览器就渲染展示什么

# 注意

HTML代码是没有格式的，全部写在一行也没有问题，但对其进行换行、缩进可以大幅提高可读性

# emmet插件

# 介绍

主流的代码编辑器都支持emmet插件，它可以帮助我们快速的补全标签
输入标签及指令后，按回车或Table即可补全

# 语法

当前节点
- 直接输入标签名即可，会生成出指定标签
子节点
- [标签名1]>[标签名2]>[标签名3]>...
- 例如：

html>head>meta
# 生成出：
<html>
<head>
    <meta>
</head>
</html>

1
2
3
4
5
6
7

兄弟节点
- [标签名1]+[标签名2]+[标签名3]+...
- 例如：

head+body
# 生成出：
<head></head>
<body></body>

1
2
3
4

上级节点
- [标签名1][>或者+][标签名2]^[标签名3]...
  - 需要在其他语法的基础上使用，单独无法使用
  - 多少个^就是往上多少级，比如：^^就表示上上级
- 例如：

html>head>meta^body
# 生成出：
<html>
<head>
    <meta>
</head>
<body></body>
</html>
# 这里的^是接在meta后面所以在meta的上一级，也就是body和head成了兄弟关系

1
2
3
4
5
6
7
8
9

重复
- [标签名]*[重复的个数]
  - *号后面添加数字表示重复生成的标签个数
- 例如：

p*3
# 生成出：
<p></p>
<p></p>
<p></p>

1
2
3
4
5

分组
- [标签名1]>(标签名2>标签名3)+[标签名4]...
  - ()括号里面的内容为一个代码块，表示括号内部与外面的层级无关
- 例如：

body>(p>b)>(p>i)
# 生成出：
<body>
    <p><b></b></p>
    <p><i></i></p>
</body>

1
2
3
4
5
6

属性
- 标签名[属性名1 属性名2...]
  - 不指定属性值
- 标签名[属性名1="值" 属性名2="值"...]
  - 指定属性值
- 例如：

p[aaa bbb]
生成出：
<p aaa="" bbb=""></p>

1
2
3

编号
- $*[数值]
  - 代表从 1 开始递增到填写的数值
- $@[起始数值]*[递增次数]
  - @[起始数值]代表指定起始从什么数开始递增
  - [递增次数]表示从其起始值开始递增几次
- 几个$符号，就代表用0补全几位数，如：$$就表示用0补全2位数
- 例如：

h$*3
# 生成出：
<h1></h1>
<h2></h2>
<h3></h3>

h$@2*3
# 生成出：
<h2></h2>
<h3></h3>
<h4></h4>

test$$$*3
# 生成出：
<test001></test001>
<test002></test002>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

文本
- [标签名]{文本}
  - 可以和$组合使用
    - [标签名]$*3{文本$}
- 例如：

p{test}
# 生成出：
<p>test</p>

h$*3{test$}
# 生成出：
<h1>test1</h1>
<h2>test2</h2>
<h3>test3</h3>

1
2
3
4
5
6
7
8
9

id属性
- [标签名]#[标签id]
  - 可以和.组合使用
- 例如：

p#test
# 生成出：
<p id="test"></p>

1
2
3

class属性
- [标签名].[class名]
  - 可以和#组合使用
- 例如：

p#test
生成出：    
<p class="test"></p>

1
2
3

# 标签

# 简介

HTML代码中形如 <...> 的叫做标签或者元素

# 单双标签分类方式

双标签
- 有头有尾的标签
- 比如：<h1></h1>
单标签(自闭合标签)
- 比如：<img/>

# 行级块级标签分类方式

块级标签 (块级元素)
- 独占一行，对宽度的属性值生效
- 如果不给宽度，块级元素就会默认为浏览器（或父类）的宽度，即：100%的宽
行级标签 (行内元素)
- 可以一行存在多个标签，对宽高属性值不生效，完全靠内容撑开宽高，内容多大，就占多大

# 标准文档流介绍

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式
标准文档流分为两种等级：块级元素和行内元素

# 标签属性介绍

标签属性就是定义在标签<>中的键值对，一般用于控制标签的功能、样式等

# 标签的两个重要属性

id值
- 标签的标识id，同一个页面中的不同标签的id值应当都设为唯一的，不能重复
- 在任意标签的属性中，指定即可 id="标签id值"
  - 例如：<p id="p01">Hello World!<\p>
class值
- 类似于面向对象中的继承，一个标签可以继承多个class值，继承后就能获得该class的样式等

# 自定义标签属性

标签不仅可以指定自带的属性，还可以指定自定义的属性
例如：<p username="niuniu">test<\p>

# 标签嵌套规则

块级标签内部可以嵌套任意块级标签和行级标签
- 但<p></p>是特例，它只能嵌套行级标签
行级标签可以嵌套行级标签，但不能嵌套块级标签

# head内常见标签

# meta标签

<meta ... />
- meta用于定义有关网页的元信息，一般定义于文档的头部，不包含任何内容
- meta有两个属性：http-equiv和name属性
  - http-equiv用于向浏览器传回一些有用的信息，以帮助正确的显示网页内容
  - name主要用于描述网页，便于搜索引擎机器人对网页进行信息查找和信息分类
- 而content则是属性对应的值
常用meta标签
- 指定文档的编码类型：<meta http-equiv="content-Type" charset="UTF8">
- 提高网页被搜索引擎查询出来的概率 (SEO查询)：<meta name="keywords" content="关键字1, 关键字2...">
- 被搜索引擎查询出来后，显示在网页下方的描述性信息：<meta name="description" content="描述信息">

# title标签

<title></title>
- 用于定义网页标题，浏览器选项栏会显示的标题

# style标签

<style></style>
- 用于定义网页css样式

# script标签

<script></script>
- 用于书写定义js脚本
- 也可以引入外部js脚本文件
  - 可以通过本地、网络的方式引入

# link标签

<link ...>
- 用于引入外部css样式文件，可以通过本地或网络的方式引入

# body内常用标签

# 常用块级标签

div标签
- <div></div>
- 用于对网页的各个部分进行区域(层)划分
  - 在构造网页时，提前使用div标签占位，以划分布局好页面的各个的区域，方便后面调整样式
  - 一个大的div内嵌一个个小的div，就像一块大地皮内规划一个个建筑
无序列表标签 (常用)
- <ul><li>第1项</li><li>第2项</li>...</ul>
- 页面布局时，只要是排版一致的数据，基本上都是用的ul标签
- 属性
  - type=""
    - 指定列表的项目符号的类型，一般用不到
    - disc - 实心圆(默认)
    - circle - 空心圆
    - square - 实心方块
    - none - 无符号
有序列表标签 (了解)
- <ol><li>第1项</li><li>第2项</li>... ...</ol>
  - 属性
    - type=""
      - 指定列表的项目符号的类型
      - 1 - 数字
      - A - 字母
      - I - 罗马数字
    - start=""
      - 指定列表的起始序号
      - 如：2、B、II
标题列表标签 (了解)
- <dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容2</dd>... ...</dl>

# 基本块级标签

h标签
- <h1~6>1~6级标题标签</h1~6>
  - 一共有6个标题标签
- 例如：

<h1> 1级标题标签 </h1>
... ...
<h6> 6级标题标签 </h6>

1
2
3

p标签
- <p>段落标签</p>
  - 每个<p></p>标签就是一个段落
hr标签
- <hr>
  - 水平分割线

# 常用行级标签

span标签
- <span></span>
  - 用于将文本独立出来设置单独的样式
img标签
- <img src="">
  - 图片标签用于在页面中展示图片
- 属性
  - src="image/test.jpg"
    - 图片源，可以是本地路径、也可以是网络url
    - 也可以是图片的二进制数据
  - alt="描述信息"
    - 只在图片加载不出来时，才会展示的描述信息
  - title="悬浮信息"
    - 当鼠标悬浮在图片上时，会展示的提示信息
    - 如果没有配置alt，那么当图片加载不出来时，也会展示该信息，如果配置了alt则alt优先
  - width="1920px"
    - 图片宽度，单位一般为px像素 (默认)
    - 也可以指定%为单位，以浏览器当前页面百分比展示，浏览器缩放图片也会跟着缩放
  - height="1080px"
    - 图片高度，单位同图片width一致
a标签
- <a href="">...</a>
  - 链接标签用于跳转到指定资源或锚点
  - 链接标签在被点击时，会跳转到指定的页面资源、或者跳转到当前页面的指定标签(锚点)
- 属性
  - href=""
    - 目标页面资源，可以是本地路径的页面、也可以是网络url
    - 目标标签位置 (锚点功能)，可以跳转到当前页面的指定标签(锚点)位置
      - 指定为：#+目标标签的id值，例如：#h01
  - target=""
    - 指定跳转方式
    - _self - 在当前页面进行跳转 (默认)
    - _blank - 新建页面进行跳转

# 基本行级标签

b标签
- <b>加粗</b>
i标签
- <i>斜体</i>
u标签
- <u>下划线</u>
s标签
- <s>删除线</s>
br标签
- <br>
- 换行标签

# body内特殊字符

 
- 空格，一个 表示一个空格
>
- 同等于>大于号
- 这是为了防止与标签的>混淆
<
- 同等于<小于号
- 这是为了防止与标签的<混淆
&
- 同等于&符号
¥
- 同等于￥符号

# 浏览器与前端报错

即便前端代码错误发生报错，浏览器也不会轻易地就将其展示出来，因为浏览器是面向用户的。
所以报错只能通过开发者工具(F12) 进行查看。

#前端

← 网络IO模型与协程 Bootstrap5框架笔记→