当前位置： 首页 > news >正文

10.27 知识总结（前端）

news 文章来源：https://blog.csdn.net/weixin_66010453/article/details/134076363 2025/5/11 12:41:57

一、 前端

 1.1 什么是前端？

前端是所有跟用户直接打交道的都可以称之为是前端
比如：PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容
通俗点就是能够用肉眼看到的都是“前端”

1.2 为什么要学前端

 学了前端以后我们就可以做全栈工程师(会后端、会前端、会DB、会运维等)
咱们学前端不会学的太深入，能够写一些简单的页面，以及会调试别人写的页面和能够看懂一些别人的页面代码。

1.3  前端学习哪些内容

1. HTML   网页的骨架、只是负责显示一些内容，但是显示出来的内容不好看，没样式
2. CSS   对网页骨架的美化、让网页变得更加的好看而已
3. JavaScript # html、css都是不能动的，静态的，js就是让网页能够动起来，变得更加的美观
4. bootstrap、jQuery
称为是前端的三剑客!
学习一些前端配套的框架(库): bootstrap、jQuery、vue、react、angular.js

1.4 网址栏中输入地址回车，到看到页面的返回，整个过程发生了什么事?

1. 客户端输入网址向服务端发起请求
2. 服务端收到客户端的请求，处理请求
3. 服务端要给客户端做出响应
4. 把服务端返回的内容渲染(显示)到浏览器页面中
# 我们学习前端谁来翻译前端的代码? 浏览器(就是前端代码的执行环境)
学习前端只需有一个浏览器即可，浏览器就是前端的解释器

# 浏览器就是一个万能的客户端，超级客户端，言外之意，他可以作为很多服务端的客户端
比如：淘宝、腾讯视频、京东、等
"""我们自己能不能开发一个B/S架构的软件，能."""
开发一个服务端即可，浏览器已经存在了，让浏览器作为我们的客户端，你会写服务端吗?
利用socket写一个服务端，让浏览器作为我们的客户端

你说浏览器它是很多服务端的客户端，问题是：浏览器是怎么识别是哪个服务端的?
很多服务端必须都要遵循浏览器的规则，所以，浏览器才能够正常的识别他们(数据传出的规则)
这个规则是：协议(HTTP协议)

HTTP协议在那一层起的作用?
HTTP协议：最上层：应用层
TCP/UDP: 传输层
ip协议: 网络层

二、HTTP协议

2.1  HTTP协议的四大特性

    1. 基于请求和响应的(有请求，有响应)
    2. 它是基于TCP协议之上的应用层协议
    3. 无状态
         就是这个协议它不能够在浏览器中保存数据，现在使用的：淘宝、支付宝、京东等这些网站都需要登录
          cookie、session、token、jwt等保存的，他们才是真正的保存用户数据的
   4. 短链接

2.2  请求数据

请求首行(请求方式、协议和版本号)
    请求头(一大堆的k:v的键值对)
    换行符(\r\n)

2.3  响应数据

响应首行(响应状态码)
   响应头(一大堆的k:v的键值对)
   换行符(\r\n)

2.4  请求方式

 get
        """当朝服务端索要数据的时候，一般使用get请求方式"""
        https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?spm=a21bo.jianhua.201867-main.1.5af92a89NWpkvM&wh_pid=dailyAct-257518
        
        https://huodong.taobao.com/index/v1/?k=v&k1=v1&k2=v2
        https://huodong.taobao.com/func
        def index()
            # 需要参数?
        def func()

post
        """当朝服务端提交数据的时候，一般采用post请求"""
        post请求，参数在哪里传递?

面试题： get和post的区别?

1. get:
            索要数据的时候使用
            传参方式：在网址栏的问号后面：key=value的键值对方式
            数据传递不安全
            数据传递的时候，携带的数据量是有限制的，大概4KB左右的数据
2.post：
            提交数据的时候使用
            在请求体里面
            数据传递更加安全
            数据传递没有限制，想传多少传多少

 2.5 响应状态码

1xx: 代表的是请求数据成功，但是这个时候还可以继续往服务端提交数据
    2xx: 200 OK 代表的是请求成功
    3xx：301 302 代表的是重定向
    4xx: 404 Not Found 代表的是资源找不到
    5xx：500 502 服务器内部错误(出现网页打不开的情况)

三、 HTML介绍

你在网页中所能够看到的花里胡哨的东西都是HTML标签
<h1>hello python</h1>
<h5>hello python</h5>
<a href='http://baidu.com'>click me</a>
<img src=''>

3.1 在哪写

 1. pycharm
2. 直接在浏览器中写
3. 直接在txt文本也可以
4. vscode

3.2  html文档介绍

<head> 标签里面写的内容一般不是让用户看的，给程序员看的
<body> 标签才是用户看的，在body里面写什么，浏览器就显示什么，head里面写的代码是对body中的代码做控制

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
</head>
<body>

</body>
</html>

 3.3 如何打开一个html文档

1. 直接点击pycahrm右上角的浏览器图标
2. 直接找到文档所在的位置，右键选择使用浏览器打开即可
"""浏览器就是前端的解释器，所有的前端代码都是有浏览器来翻译的"""

3.4  head标签中常用的标签

 <title>Title</title> 就是浏览器标签页上显示的内容
        <title>Title</title>
<!--    <style>-->
<!--        /*写css样式的*/-->
<!--        a {-->
<!--            color:  red;-->
<!--        }-->
<!--    </style>-->
    <link rel="stylesheet" href="my.css">
<!--    <script>-->
<!--        alert(123)-->
<!--    </script>-->
    <script src="my.js"></script>

 3.5 body中常用的标签

# 基本标签:
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    <p>段落标签</p>

    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

    <!--换行-->
    <br>

    <!--水平线--><hr>
# 特殊字符
    内容    对应代码
    空格    &nbsp;
    >    &gt;
    <    &lt;
    &    &amp;
    ¥    &yen;
    版权    &copy;
    注册    &reg;

相关文章：

10.27 知识总结（前端）

一、 前端 1.1 什么是前端&#xff1f; 前端是所有跟用户直接打交道的都可以称之为是前端 比如&#xff1a;PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容 通俗点就是能够用肉眼看到的都是“前端” 1.2 为什么要学前端 学了前端以后我们就可以做全栈工…...

编程日记 2023/10/27 23:49:32

操作系统(02326)考试题库

博客主页&#xff1a;https://tomcat.blog.csdn.net 博主昵称&#xff1a;农民工老王 主要领域&#xff1a;Java、Linux、K8S 期待大家的关注&#x1f496;点赞&#x1f44d;收藏⭐留言&#x1f4ac; 目录 单选题多选题主观题 单选题 把并发进程中与共享变量有关的程序段称为…...

编程日记 2023/10/27 23:48:31

LeetCode题：70爬楼梯，126斐波那契数

目录 70&#xff1a;爬楼梯 题目要求&#xff1a; 解题思路&#xff1a;&#xff08;类似斐波那契数&#xff09; 递归解法&#xff1a; 非递归解法&#xff1a; 126&#xff1a;斐波那契数 题目要求&#xff1a; 解题思路&#xff1a; 递归解法&#xff1a; 非递归解…...

编程日记 2023/10/27 23:47:30

VTK OrientationMarker 方向 三维坐标系 相机坐标轴 自定义坐标轴

本文 以 Python 语言开发 我们在做三维软件开发时&#xff0c;经常会用到相机坐标轴&#xff0c;来指示当前空间位置&#xff1b; 坐标轴效果&#xff1a; 相机方向坐标轴 Cube 正方体坐标轴 自定义坐标轴&#xff1a; Code&#xff1a; Axes def main():colors vtkNamedC…...

编程日记 2023/10/27 23:46:29

工控安全与网络安全有什么不同？

在当代&#xff0c;全球制造业正在经历一场前所未有的技术变革。工业4.0不仅代表着自动化和数据交换的进步&#xff0c;它还揭示了工业自动化、智能制造与系统集成的融合。这种集成为企业带来了效率和质量的双重提升&#xff0c;但同时也暴露出新的安全隐患。工控系统成为了这一…...

编程日记 2023/10/27 23:45:28

性能测试工具：Jmeter介绍

JMeter是一个开源的Java应用程序&#xff0c;由Apache软件基金会开发和维护&#xff0c;可用于性能测试、压力测试、接口测试等。 1. 原理 JMeter的基本原理是模拟多用户并发访问应用程序&#xff0c;通过发送HTTP请求或其他协议请求&#xff0c;并测量响应时间、吞吐量、并发…...

编程日记 2023/10/27 23:43:26

Golang Struct 继承的深入讨论和细节

1&#xff09;结构体可以使用嵌套匿名结构体所有的字段和方法&#xff0c;即&#xff1a;首字母大写或者小写的字段、方法&#xff0c;都可以使用。 type A struct {Name stringage int }func (a *A) SayName() {fmt.Println("A say name", a.Name) }func (a *A) s…...

编程日记 2023/10/27 23:42:25

Android11分区介绍

1.分区汇总 3566及3568分区对应如下： rockdev/Image-rk3566_rgo/ ├── boot.img ├── dtbo.img ├── MiniLoaderAll.bin ├── misc.img ├── parameter.txt ├── recovery.img ├── super.img ├── uboot.img └── vbmeta.img 2.分区说明 分区 说明 boo…...

编程日记 2023/10/27 23:40:23

goland无法调试问题解决

goland 无法调试问题解决 golang 版本升级后&#xff0c;goland 无法进行调试了 首先请看自己下载的版本是否有误 1.apple系 M系列芯片的 arm64版本 2.apple系 intel系列芯片的x86_64 3.windows系 intel解决如下&#xff1a; 查看gopath ericsanchezErics-Mac-mini gww-api…...

编程日记 2023/10/27 23:39:22

关于近期IP-Guard新版本客户端重复发送邮件的问题处理说明

关于近期新版本客户端重复发送邮件的问题处理说明 一、问题描述 近期部分客户反馈，升级到新版本的客户端（4.81.341.0、4.82.621.0及以上），使用SMTP协议发送邮件时，会出现重复发送邮件的情况，主要表现为以下两种现象： Outlook发送包含大量收件人的邮件时，收件人邮箱可能…...

编程日记 2023/10/27 23:38:19

linux java 启动脚本

#!/bin/sh## java env #export JAVA_HOME/data/jdk1.8.0_121 #export JRE_HOME$JAVA_HOME/jre## service name #当前目录 SERVICE_DIR$(cd dirname $0; pwd) echo "$SERVICE_DIR" #jar包路径 JAR_DIRls -ltr $SERVICE_DIR/*.jar| tail -1 echo "JAR_DIR $JAR_DI…...

编程日记 2023/10/27 23:36:12

Node.js 的 CommonJS ECMAScript 标准用法

目录 一、前言二、CommonJS 标准使用方法 三、ECMAScript 标准使用方法 四、常用命令总结 一、前言 本文主要是介绍 Node.js 的 CommonJS & ECMAScript 标准用法 如果对你有帮助&#xff0c;欢迎三连 收藏点赞关注&#xff01;&#xff01;&#xff01; ---- NickYoung 二、…...

编程日记 2023/10/27 23:35:12

Mysql数据库 4.SQL语言 DQL数据查询语言 查询

DQL数据查询语言 从数据表中提取满足特定条件的记录 1.单表查询 2.多表查询 查询基础语法 select 关键字后指定要查询到的记录的哪些列 语法&#xff1a;select 列名&#xff08;字段名&#xff09;/某几列/全部列 from 表名 [具体条件]&#xff1b; select colnumName…...

编程日记 2023/10/27 23:34:11

俄罗斯黑客利用Roundcube零日漏洞窃取政府电子邮件

导语&#xff1a;最近&#xff0c;一起涉及Roundcube Webmail的零日漏洞被俄罗斯黑客组织Winter Vivern利用&#xff0c;攻击了欧洲政府机构和智库。这一漏洞已经存在至少一个月&#xff0c;直到10月16日&#xff0c;Roundcube开发团队才发布了安全补丁来修复这个Stored Cross-…...

编程日记 2023/10/27 23:33:10

【Javascript】ajax（阿甲克斯）

目录 什么是ajax? 同步与异步 原理 注意 写一个ajax请求 创建ajax对象 设置请求方式和地址 发送请求 设置响应HTTP请求状态变化的函数 什么是ajax? 是基于javascript的一种用于创建快速动态网页的技术&#xff0c;是一种在无需重新加载整个网页的情况下&#xff0c…...

编程日记 2023/10/27 23:32:08

Spring MVC的常用注解

目录 RequestMapping 例子&#xff1a; RequestMapping 支持什么类型的请求 使 RequestMapping 只支持特定的类型 RestController 通过 HTTP 请求传递参数给后端 1.传递单个参数 注意使⽤基本类型来接收参数的情况 2.传递多个参数 3.传递对象 4.RequestParam 后端参数…...

编程日记 2023/10/27 23:31:08

vim 使用文档笔记

1. i&#xff1a;进入编辑模式 2. ESC&#xff1a;进入一般命令模式 3. h 或 ←&#xff1a;光标向左移动一个字符 4. j 或 ↓&#xff1a;光标向下移动一个字符 5. k 或 ↑&#xff1a;光标向上移动一个字符 6. l 或 →&#xff1a;光标向右移动一个字符 7. num&#xf…...

编程日记 2023/10/27 23:29:05

274. H 指数

文章目录 一、题目1、题目描述2、基础框架3、原题链接 二、解题报告1、思路分析1.1 方案一1.2 方案二 2、时间复杂度3、代码详解3.1 方案一3.2 方案二 三、本题小知识 一、题目 1、题目描述 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论…...

编程日记 2023/10/27 23:28:04

0基础学习PyFlink——用户自定义函数之UDTAF

大纲 UDTAFTableAggregateFunction的实现累加器定义创建累加 返回类型计算 完整代码 在前面几篇文章中&#xff0c;我们分别介绍了UDF、UDTF和UDAF这三种用户自定义函数。本节我们将介绍最后一种函数&#xff1a;UDTAF——用户自定义表值聚合函数。 UDTAF UDTAF函数即具备了…...

编程日记 2023/10/27 23:27:03

SQLi靶场

SQLi靶场 less1- less2 &#xff08;详细讲解&#xff09; less 1 Error Based-String (字符类型注入) 思路分析 判断是否存在SQL注入 已知参数名为id&#xff0c;输入数值和‘ 单引号‘’ 双引号来判断&#xff0c;它是数值类型还是字符类型 首先输入 1 &#xff0c; 发现…...

编程日记 2023/10/27 23:26:02

重庆开放大学学子们的好帮手

作为一名电大学员&#xff0c;我有幸目睹了一个令人惊叹的学习工具的诞生——电大搜题微信公众号。这个创新应用为重庆开放大学&#xff08;广播电视大学&#xff09;的学子们提供了便捷、高效的学习资源&#xff0c;成为他们的得力助手。 重庆开放大学是一所为全日制在职人员提…...

编程日记 2023/10/27 23:25:01

机器学习-学习率：从理论到实战，探索学习率的调整策略

目录 一、引言二、学习率基础定义与解释学习率与梯度下降学习率对模型性能的影响 三、学习率调整策略常量学习率时间衰减自适应学习率AdaGradRMSpropAdam 四、学习率的代码实战环境设置数据和模型常量学习率时间衰减Adam优化器 五、学习率的最佳实践学习率范围测试循环学习率&a…...

编程日记 2023/10/27 23:24:00

【Vue3-Flask-BS架构Web应用】实践笔记1-使用一个bat脚本自动化完整部署环境

前言 近年来&#xff0c;Web开发已经成为计算机科学领域中最热门和多产的领域之一。Python和Vue.js是两个备受欢迎的工具&#xff0c;用于构建现代Web应用程序。在本教程中&#xff0c;我们将探索如何使用这两个工具来创建一个完整的Web项目。我们将完成从安装Python和Vue.js到…...

编程日记 2023/10/27 23:22:59

工作小计-GPU硬编以及依赖库 nvcuvidnvidia-encode

工作小计-GPU编码以及依赖库 已经是第三篇关于编解码的记录了。项目中用到GPU编码很久了&#xff0c;因为yuv太大&#xff0c;所以编码显得很重要。这次遇到的问题是环境的搭建问题。需要把开发机上的环境放到docker中&#xff0c;以保证docker中同样可以进行GPU的编码。 1 定…...

编程日记 2023/10/27 23:21:58

前端 JS 经典：宏任务、微任务、事件循环（EventLoop）

1. 前言概览 js 是一门单线程的非阻塞的脚本语言 单线程&#xff1a;只有一个主线程处理所有任务 非阻塞&#xff1a;有异步任务&#xff0c;主线程挂起这个任务&#xff0c;等异步返回结果再根据一定规则执行 2. 宏任务与微任务 都是异步任务宏任务&#xff1a;script 标签&a…...

编程日记 2023/10/27 23:20:56

电子邮件发送接收原理（附 go 语言实现发送邮件）

前言 首先要了解电子邮件的发送接收&#xff0c;不是点到点的。我想给你传达个消息&#xff0c;不是直接我跑到你家里喊你&#xff1a;“嘿&#xff0c;xxx&#xff0c;是你的益达&#xff0c;快拿走”。 而是类似快递的发送收取方式&#xff0c;是有服务器的中转的。我先将我…...

编程日记 2023/10/27 23:19:55

体系结构评估——（三）风险承担者

风险承担者分为系统生产者、系统消费者、系统服务人员和其他四大类。 其中系统生产者有&#xff1a;软件系统架构师、开发人员、维护人员、集成人员、测试人员、标准专家、 性能工程师、安全专家、项目经理、产品线经理。 系统消费者有&#xff1a;客户、最终用户、应用开发…...

编程日记 2023/10/27 23:17:54

【HarmonyOS】元服务卡片展示动态数据，并定点更新卡片数据

【关键字】 元服务卡片、卡片展示动态数据、更新卡片数据 【写在前面】 本篇文章主要介绍开发元服务卡片时&#xff0c;如何实现卡片中动态显示数据功能&#xff0c;并实现定时数据刷新。本篇文章通过实现定时刷新卡片中日期数据为例&#xff0c;讲述展示动态数据与更新数据功…...

编程日记 2023/10/27 23:16:52

SaveFileDialog.OverwritePrompt

SaveFileDialog.OverwritePrompt 获取或设置一个值&#xff0c;该值指示如果用户指定的文件名已存在&#xff0c;Save As 对话框是否显示警告。 public bool OverwritePrompt { get; set; } OverwritePrompt 控制在将要在改写现在文件时是否提示用户 https://vimsky.com/…...

编程日记 2023/10/27 23:14:50

oracle统计信息

1. 查看表的统计信息 1.建表 SQL> create table test as select * from dba_objects;2.查看表的统计信息 select owner, table_name, num_rows, blocks, avg_row_lenfrom dba_tableswhere owner SCOTTand table_name TEST; OWNER TABLE_NAME NUM_ROWS BLO…...

编程日记 2023/10/27 23:13:48