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

10.27 知识总结（前端）

news 2025/7/7 7:58:11

一、 前端

 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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/7/5 21:19:47

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/7/7 5:52:06

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/7/2 5:30:43

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/7/5 21:06:53

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/6/21 6:23:38

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/7/4 14:58:44

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/7/6 10:43:18

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/7/5 17:13:23

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05