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

10.27 知识总结（前端）

news 2026/5/17 1:02:01

一、 前端

 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;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;相控阵和差波束目…...

编程新知 2026/5/17 0:52:18

用STM32F103C8T6和HC-05蓝牙模块，从零DIY一辆蓝牙遥控小车（附完整代码与MIT App Inventor教程）

从零打造STM32蓝牙遥控小车&#xff1a;硬件配置到APP开发全指南 项目背景与核心价值 对于嵌入式开发初学者来说&#xff0c;理论知识和实际项目之间往往存在一道难以跨越的鸿沟。而一个完整的硬件项目实践&#xff0c;恰恰是填补这一空白的最佳方式。基于STM32F103C8T6和HC-05…...

编程新知 2026/5/17 0:36:48

顶伯 + 微软 TTS，3 分钟生成专业级解说配音

&#x1f3af; 顶伯 微软 TTS&#xff0c;3 分钟生成专业级解说配音告别繁琐录音&#xff0c;用顶伯文字转语音工具快速打造高品质配音。✨ 一、为什么选择顶伯与微软 TTS 的组合&#xff1f;在视频制作、课程讲解或产品演示中&#xff0c;配音质量直接影响观众体验。 顶伯文字…...

编程新知 2026/5/17 0:03:36

手把手教你用Python脚本给飞书机器人“喂”数据：Gerrit事件通知实战

Python自动化实战&#xff1a;用飞书机器人构建Gerrit事件通知系统 每当团队协作开发时&#xff0c;代码审查状态的实时同步总是让人头疼。想象一下&#xff1a;你刚提交的代码被同事点赞&#xff0c;或是某个关键补丁集终于通过审核——这些重要时刻如果能在飞书群里即时提醒&…...

编程新知 2026/5/16 22:17:57

终极指南：如何让苹果触控板在Windows上获得专业级体验

终极指南&#xff1a;如何让苹果触控板在Windows上获得专业级体验 【免费下载链接】mac-precision-touchpad Windows Precision Touchpad Driver Implementation for Apple MacBook / Magic Trackpad 项目地址: https://gitcode.com/gh_mirrors/ma/mac-precision-touchpad …...

编程新知 2026/5/16 21:47:27

2026届毕业生推荐的五大AI辅助论文方案解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在当下这个信息呈现爆炸态势的时代里&#xff0c;内容所具备的价值越发突显出来。不管是企业…...

编程新知 2026/5/16 20:38:53

AI赋能Anki：基于LLM与Prompt工程的智能制卡技能全解析

1. 项目概述&#xff1a;当Anki遇上AI&#xff0c;一个卡片技能的革命如果你和我一样&#xff0c;是个重度Anki用户&#xff0c;那你一定经历过这样的时刻&#xff1a;面对一本厚厚的教科书&#xff0c;或者一篇几十页的论文&#xff0c;想要把里面的核心知识点做成记忆卡片&am…...

编程新知 2026/5/16 20:19:32

免费AI编程助手搭建指南：基于本地大模型与开源工具链

1. 项目概述与核心价值最近在逛GitHub的时候&#xff0c;发现了一个挺有意思的项目&#xff0c;叫“Cursor-Ai-Free”。光看名字&#xff0c;可能很多朋友会以为这又是一个破解或者绕过付费限制的工具。但点进去仔细研究后&#xff0c;我发现它的定位和实现思路&#xff0c;其实…...

编程新知 2026/5/16 18:44:49

连锁品牌万店扩张的破局之道：用数字化营建体系，突破规模化瓶颈

在消费市场竞争日趋激烈的当下&#xff0c;连锁品牌的规模化扩张&#xff0c;早已不是 “砸钱就能跑通” 的简单命题。很多品牌手握充足资金&#xff0c;却在扩张到几十、上百家门店时陷入停滞&#xff1a;门店营建标准混乱、多项目统筹失控、资深项目经理一将难求&#xff0c;…...

编程新知 2026/5/16 18:16:23

开源破产法知识库：从实务场景到技术架构的深度解析与应用指南

1. 项目概述&#xff1a;一个律师的破产法知识库最近在GitHub上看到一个挺有意思的项目&#xff0c;叫zhang-lawyer-org/zhang-bankruptcy。光看这个名字&#xff0c;你大概能猜到&#xff0c;这是一个跟破产法相关的知识库&#xff0c;而且很可能是一位张律师&#xff08;或张…...

编程新知 2026/5/16 17:00:57