前端

什么是前端？

任何与用户直接打交道的操作界面都可以称之为是一个前端

web服务的本质

浏览器窗口输入一个网址按下回车都发生了那些事情

朝着指定的服务端发送请求
服务端接收相应的请求
服务端返回相应的响应
浏览器接收响应，按照特定的规则渲染页面展示给用户看

HTTP协议

HTTP协议：超文本传输协议，规定了浏览器与服务端之间数据传输的格式

HTTP协议的四大特性

基于请求响应（一次请求对应一次响应）
基于TCP/IP作用于应用层之上的协议
无状态（不保留客户端的状态）
无连接

长链接 websocket(类似于HTTP协议的大补丁) 聊天室相关

数据格式

请求格式

①：请求首行（请求方式协议版本）

②：请求头（一大堆k,v键值对）

③：空行

④：请求体（携带的数据，并不是一直都有，有时候可能是空的，取决于请求方式）

响应格式

①：响应首行（响应状态码）

②：请求头（一大堆k,v键值对）

③：空行

④：响应体（浏览器展示给用户看的数据）

响应状态码（用数字来表示一大堆提示信息）

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

2XX：200 请求成功，服务端已经反悔了你想要的数据

3XX：重定向（原本想访问A页面但是内部自动给转到了B页面）

4XX：404 请求资源不存在，403你当前不具备请求该资源的条件

5XX：500 服务端内部错误（有可能是机房着火了宕机了也可能爆炸了）

PS：公司内部可以自己定制自己的响应状态码

请求方式

1.get请求

向服务端获取数据（类似于浏览器窗口输入www.baidu.com获取百度首页）

2.post请求

向服务端提交数据

类似于登录注册功能

HTML（超文本标记语言）

如果想让你的页面能够被浏览器识别并展示出好看的样子，你就必须手写HTML代码

浏览器能够识别的语言很少只有：HTML/XML、CSS、JS

PS：XML也可以写前端页面，主要用于odoo框架中，书写企业内部管理软件

HTML注释

注释是代码之母

单行注释：<!- -单行- ->

多行注释：<!- -多行注释1- ->

多行注释2- ->

由于HTML页面结构比较复杂，内容比较多，不便于后期的维护，修改通常在写页面的时候通常用下面的方式来人为的划分代码区域

例如：

<!--顶部导航栏开始-->

<!--顶部导航栏结束-->
<!--左侧菜单栏开始-->

<!--左侧菜单栏结束-->

HTML文档结构

<html>
    <head></head>:head内存放的内容不是给用户看的，是给浏览器去识别相应的操作的
    <body></body>:body内存放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>

HTML文档打开方式

1.pycharm自动调用浏览器打开（推荐）

2.手动查找路径之后选择浏览器打开

标签的分类1

1.双标签

2.自闭合标签

标签的分类2

1.块级标签

独占一行 h1-h6、p、br、hr、div

①：块级标签内可以嵌套任意的块级标签和行内标签

②：特例：p虽然是块级标签，但是他的内部只能嵌套行内标签，不能嵌套块级标签

如果嵌套了没有关系，只是不符合HTML语法规范

2.行内标签

自身文本多大，就占多大 u、s、i、b、span

行内标签内部不能嵌套块级标签和行内标签

PS：书写标签的时候，只需要写标签的名字，之后Tab键就可以自动补全（emmet插件）

emmet插件：专门补全HTML代码的插件

head内常用的标签

title：定义网页标题
style：内部支持直接写CSS代码
link：引入外部的CSS文件
script：①：内部可以直接编写js代码 ②：可以通过src属性引用外部js代码
meta：name属性
- keywords
  
  description

URL（统一资源定位符就是网页地址）

body内常用的标签

基本标签

h1-h6：标题标签
s：删除线
b：加粗
u：下划线
i：斜体
p：独占一行
br：换行
hr：分割线

特殊符号

& nbsp; 空格
& gt; 大于
& lt；小于
& amp; 与
& yen; 人民币
& copy; 版权标识
& reg; 注册商标

常用标签

div 块级标签
span 行内标签
- 本身没有任何特殊意义
  
  但是这两个确实是使用最多的，用来做前期的页面布局的
img 图片标签
- src
  - 可以写一个网站的图片地址
  - 可以写本地图片地址
  - url（自动向该url发送get请求获取数据）
- alt
  - 当图片加载不出来的时候，默认展示的提示信息
- title
  - 当鼠标悬停在图片上的时候，展示的提示信息
- width,height
  - 修改一个属性，另一个也会随之等比例缩放（当值图片失真）
  - 强行修改两个属性，图片会失真
a 链接标签
- href
  - 放一个url，点击就会跳转到该url所对相应的资源
- target
  - 控制是否在当前页面跳转
    - 默认是在当前页面跳转
      - _self
    - 新建页面跳转
      - _blank
- 锚点功能
  - href不单单可以写url，也可以写另外一个a标签id值
  - 点击就会跳转到该id值所对应的a标签所在的位置

标签应该具备的属性

id属性：类似于身份证号用来唯一标识当前HTML页面中的某一个标签
- 在同一个HTML页面中 id值不能重复
class属性：类似于面型对象的继承
- 直接引用别的类的样式

列表标签

无序列表
- ul
  - li
    
    只要页面上出现了比较有规律排列的文本基本上都可以用无序列表来实现
有序列表
- ol
  - li
标题列表
- dl
  - dt标题
  - dd内容

表格标签

<!--展示网站数据的时候  一般情况下可以使用表格标签-->
<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
先表格标签 先写结构 然后写数据

一个tr就是一行
th和td之分   一个加粗一个不加粗  
通常情况下表头用th,表单内容用td

表单标签

form标签

获取用户输入（输入，选择，上传文件……）并且将数据打包发送给后端
action参数

用来控制数据提交的路径（到底是哪个后端服务器提交数据）

三种写法
- 不写默认就是向当前页面所在的地址提交数据
- 全路径（https://www.baidu.com）
- 只写路径后缀（/index/）
input标签：获取用户输入
- typ属性
  - text 普通文本
  - password 密文
  - date 日期
  - radio 多选一
  - checkbox 多选多
    
    默认选中 checked="checked"
    
    当标签的属性名和属性值相同的时候，可以只写属性名
```
女<input type="radio" name="gender" checked="checked">
简写
女<input type="radio" name="gender" checked>
```
  - reset 重置
  - button 普通按钮
  - submit 触发form表单提交动作
  - file 获取文件

select标签：下拉列表

一个个选项就是一个个option标签

默认是单选的

可以加一个multiple改成多选

<select name="" id="" multiple>
  <option value="">小明</option>
  <option value="">小红</option>
  <option value="">小张</option>
  <option value="">小王</option>
</select>
<!--如何让option标签默认选中
加selected="selected"-->  
<select name="" id="" multiple>
  <option value="" selected="selected">小明</option>
  <option value="">小红</option>
    <!--当标签的属性名和属性值相同的时候，可以只写属性名-->
  <option value="" selected>小张</option>
  <option value="">小王</option>
</select>

textarea标签：获取大段文本
label标签

通常配合input一起使用的

属性“for”用来填写对应的input标签id值

点击label标签内的内容会自动让对应的input标签聚焦

能够触发from表单提交数据的按钮

<input type="submit">
<!--可以通过value属性来指定按钮文本内容-->
<input type="submit" value="注册">
<button>点我</button>

input获取到的用户输入就类似于是字典的value

inpu中的name属性就类似于是字典的key

前端——基础和常用标签

前端