前段知识与基础应用

news2024/11/24 0:22:49

前端知识

什么是前端:所有和用户打交道的操作页面,我们都称之为前端

例如:pc页面,浏览器的主页面,手机页面等等,可以用肉眼看到的就是前端

什么是后端:

就是一堆代码,用户不能够直接看到,不直接与用户打交道的都是后端

常见的后端:Python、Java、Go、等

前端三剑客

1. HTML                网页的骨架,只是负责显示一些内容,但是内容不好看,没样式

2.CSS                   对网页内容进行优化,使得页面更加的美化,漂亮。

3. JavaScript          HTML和css是不能动的静态的,而        js可以让网页动起来,变得更加的美观。

关于前端学习的框架:bootstrap,jQuery,vue,react,angular.js



什么是HTML

html(超文本标记语言Hypertext Markup Language, HTML)一种创建网页的标记语言,本质上是浏览器可识别的规则(协议),我们按照规则写网页,浏览器在进行渲染,对于不同的浏览器,同一个标签可能有不同的解释,这是兼容性的问题。

网页文件的拓展名一般为:html或htm。html只是标记语言,并不是编程语言。

前端编写

编写前端的步骤

        1. 编写服务器

        2.浏览器可以作为我们的客户端

        3. 浏览器无法正常显示是因为没有按照浏览器的规则(协议)去编写

        4. http协议最主要的内容就是规定了浏览器与服务器之间的数据交互的方式

前端BS的架构

        我们在编写TCP服务端的时候,针对客户端的选择可以是自己写的客户端代码,也可以是浏览器充当客户端(b/s本质也是c/s架构

搭建服务端

把浏览器作为客户端访问

import socket
server = socket.socket()
server.bind(('127.0.0.1', 8000))
server.listen(3)

while True:
    sock, addr = server.accept()
    data = sock.recv(1024)
    sock.send(b'hello')
    sock.close()

访问结果:

拒绝访问

浏览器请求发送给了服务端,服务端也做出了响应,但是浏览器并不认识反馈的结果,所以被视为无效反馈。

原因:服务端没有按照浏览器的规则(协议)去反馈结果。

解决方法:统一使用浏览器交互数据的方式(http协议)

返回的过程

1. 客户端向服务端发送请求

2. 服务端收到客户端的请求并处理

3. 服务端对客户端的请做出响应

4.把服务端返回的内容渲染(显示)到浏览器页面中

我们学习前端只需要一个客户端浏览器即可浏览器就是前端的解释器

HTTP协议

四大特性

请求响应:客户端发送请求,服务端响应请求,服务端不会主动给客户端发消息,除非使用其他网络协议。

基于TC,ip作用于应用层之上的协议,该协议属于应用层。

无状态:服务端不会保存客户端的状态(  cookie、session、token、jwt等保存的,他们才是真正的保存用户数据的)

无(短)连接:客户端与服务端不会长久保持连接(两者请求响应之后立刻断绝关系)

请求数据:

请求首行(请求方式,协议,版本号)

请求头(一堆k:v键值对)

响应数据

响应首行(响应状态码)

基本常见的状态码


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

面试题:请说出常见的响应状态码(1xx 2xx 3xx 301 201)
业务状态码


    响应状态码:具体的状态码:HTTP 响应的格式及状态码_http返回格式-CSDN博客

响应头(一大堆的k:v的键值对)

换行符/r/n

请求方式:

get:当朝服务端索要数据的时候,一般使用get请求方式

post:
    当朝服务端提交数据的时候,一般采用post请求

HTML介绍

网页中一些图片等都是HTML标签

<h1>hello python</h1>
<h5>hello python</h5>
<a href='http://baidu.com'>click me</a>
<img src=''>

写代码的方式

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

我们在send(b‘HTTP/1.1 200 ok \r\n\r\n hello web’)

符合http协议

import socket
server = socket.socket()
server.bind(('127.0.0.1', 8000))
server.listen(3)

while True:
    sock, addr = server.accept()
    data = sock.recv(1024)
    sock.send(b'HTTP/1.1 200 OK \r\n\r\n hello web')
    # sock.send(b'hello')
    sock.close()

执行结果

执行成功了显示出外面所输入的内容

读取文件中的内容:

import socket
server = socket.socket()
server.bind(('127.0.0.1', 8000))
server.listen(3)

while True:
    sock, addr = server.accept()
    data = sock.recv(1024)
    sock.send(b'HTTP/1.1 200 OK \r\n\r\n')
    with open('a.txt','rb')as f:
        sock.send(f.read())


    sock.close()

html文档结构

超文本标记语言是所有浏览器显示页面的必备。

格式为:

<!DOCTYPE html>     所有的代码都必须写在html标签里面
<!--head开始-->
<head>      head一般不是写给用户看的
    <meat charset="utf8"><!--使用utf8编码-->
    <title>'注释的写法'</title>      网页的标签在浏览器的标题栏里
</head>
<body><body>        body中的数据是给用户看的
<style>
    这是写css样式的
<style>
<html>
<!--head 结束-->

	HTML标签分类
		单标签(自闭和标签)
			<img />  
		双标签(有开始有结束) 有头有尾
			<a></a>

head中常用的标签

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;

等等

具体的可以参考:前端body内常用标签_网页body里面都有神马标签-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1147754.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

游戏和内容创作者福音,Intel蝰蛇峡谷Nuc12SNKi7迷你主机:双十一降价来袭,从9999降至5999

引言 随着双十一购物节的到来&#xff0c;各大品牌纷纷推出了一系列优惠活动&#xff0c;其中备受关注的Intel蝰蛇峡谷Nuc12SNKi7迷你主机也迎来了降价。这款迷你主机以其独特的外观、卓越的性能以及灵活的应用场景&#xff0c;在市场上备受瞩目。此次双十一活动期间&#xff…

【网络协议】聊聊TCP如何做到可靠传输的

网络是不可靠的&#xff0c;所以在TCP协议中通过各种算法等机制保证数据传输的可靠性。生活中如何保证消息可靠传输的&#xff0c;那么就是采用一发一收的方式&#xff0c;但是这样其实效率并不高&#xff0c;所以通常采用的是累计确认或者累计应答。 如何实现一个靠谱的协议&…

✔ ★【备战实习(面经+项目+算法)】 10.29学习

✔ ★【备战实习&#xff08;面经项目算法&#xff09;】 坚持完成每天必做如何找到好工作1. 科学的学习方法&#xff08;专注&#xff01;效率&#xff01;记忆&#xff01;心流&#xff01;&#xff09;2. 每天认真完成必做项&#xff0c;踏实学习技术 认真完成每天必做&…

AD9371 官方例程HDL详解之JESD204B RX侧格式配置

AD9371 系列快速入口 AD9371ZCU102 移植到 ZCU106 &#xff1a; AD9371 官方例程构建及单音信号收发 采样率和各个时钟之间的关系 &#xff1a; AD9371 官方例程HDL详解之JESD204B TX侧时钟生成 &#xff08;三&#xff09; 参考资料&#xff1a; UltraScale Architecture G…

前端Vue框架系列—— 学习笔记总结Day03

❤ 作者主页&#xff1a;欢迎来到我的技术博客&#x1f60e; ❀ 个人介绍&#xff1a;大家好&#xff0c;本人热衷于Java后端开发&#xff0c;欢迎来交流学习哦&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 如果文章对您有帮助&#xff0c;记得关注、点赞、收藏、…

Leetcode—274.H指数【中等】

2023每日刷题&#xff08;十三&#xff09; Leetcode—274.H指数 算法思想 参考自灵茶山艾府 实现代码 int minValue(int a, int b) {return a < b ? a : b; }int hIndex(int* citations, int citationsSize){int cnt[5001] {0};int i;for(i 0; i < citationsSize; …

pandas笔记

read_csv读取之后&#xff0c;会返回DataFrame格式的文件读取去掉头的文件 import pandas as pd df pd.read_csv(file.csv, headerNone)按列名读取某一列 pd[列名]按索引读取n列 如读取前13列所有行的值 pd.iloc[:,:13]忽略掉第一行&#xff0c;读取剩下所有行 原表格的…

GZ035 5G组网与运维赛题第6套

2023年全国职业院校技能大赛 GZ035 5G组网与运维赛项&#xff08;高职组&#xff09; 赛题第6套 一、竞赛须知 1.竞赛内容分布 竞赛模块1--5G公共网络规划部署与开通&#xff08;35分&#xff09; 子任务1&#xff1a;5G公共网络部署与调试&#xff08;15分&#xff09; …

IconWorkshop 6软件官方下载:制作ICO/ICON图标、编辑、转换图标

我们都知道在这个版本中&#xff0c;你甚至能够打开 Macintosh(R) 图标并将其转换为 Win(R) 格式。我们必须承认加强的与 Adobe(R) 和 Jasc(R) 色彩文件相兼容的色板和调色板管理系统。可以说这些功能随时都方便易用&#xff1a;内置的浏览器能够用缩略图的形式浏览文件&#x…

Leetcode周赛369补题(3 / 3)

目录 1、找出数组的K-or值 - 位运算 模拟 2、数组的最小相等和 - 分情况讨论 3、使数组变美的最小增量运算数 - 动态规划dp 1、找出数组的K-or值 - 位运算 模拟 100111. 找出数组中的 K-or 值 思路&#xff1a; 根据范围&#xff0c;我们可以枚举0~30位&#xff0c;然后在…

二叉搜索树 和 哈希表 (JAVA)

目录 二叉搜索树 二叉搜索树的插入 二叉搜索树的查找 二叉搜索树的删除 哈希表 哈希冲突 闭散列 线性探测法 二次探测法 开散列 开散列代码实现&#xff1a; 插入元素 删除元素 查找元素 二叉搜索树 先了解以下二叉搜索树是啥&#xff0c;概念如下&#xff1a…

L2-2 老板的作息表

L2-2 老板的作息表 分数 25 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 新浪微博上有人发了某老板的作息时间表&#xff0c;表示其每天 4:30 就起床了。但立刻有眼尖的网友问&#xff1a;这时间表不完整啊&#xff0c;早上九点到下午一点干啥了&#xff1f; 本题就请你…

30个前端和设计必备网站,让你的工作更轻松!

说在前面 当今互联网时代&#xff0c;前端开发和设计领域变化迅速&#xff0c;每天都会有新技术和工具不断涌现。无论你是一名前端工程师还是一名设计师&#xff0c;都需要不断了解最新的前沿技术和工具。下面是30个前端和设计经常会用到的网站&#xff0c;以及每个网站的功能介…

程序设计语言

编译解释 传参还是传值 编译原理

洛谷 B2029 大象喝水 C++代码

题目描述 AC Code #include<bits/stdc.h> using namespace std; int main() {int h,r;cin>>h>>r;double val;val3.14*r*r*h;int ans20000/val;ans;cout<<ans<<endl;return 0; }

Springmvc 讲解(1)

文章目录 前言一、SpringMvc1、简介2、核心组件和调用流程2.1 涉及组件的理解 3、小案例快速体验3.1场景需求3.1.1 导入依赖3.1.2 controller声明3.1.3 核心配置类3.1.4 环境搭建3.1.6 配置tomcat3.1.7 测试 二、SpringMvc 接收参数1.路径设置注解2、param接收参数四种类型2.1 …

Linux下的IMX6ULL——开发板的第一个APP和驱动实验(三)

前言&#xff1a; 万事开头难&#xff0c;如果我们在开发板上开发出第一个应用程序&#xff0c;第一个驱动程序&#xff0c;那么后续的开发就会稍微简单点&#xff0c;下面让我们来进行第一个应用程序和第一驱动程序的开发吧。 目录 一、开发板的第1个APP实验 1.通过Git仓库…

Day 13 python学习笔记

模块 内置模块 加密 加密是成本与时间的问题 不可逆加密 哈希加密&#xff0c;单向性&#xff0c;唯一性。 可逆加密 对称加密&#xff1a;加密与解密采用同一密匙&#xff08;如文件压缩时设置密码&#xff09; DES算法 非对称加密&#xff1a;采用一对密匙&#xff0c;公匙、…

邦邦资讯|邦邦机器人10月新鲜事来袭,请查收

01 邦邦机器人研发中心徐汇新址落成 立足新起点 实现新跨越 10月初&#xff0c;邦邦机器人成立徐汇研发中心&#xff0c;历时半年的策划、设计、讨论、施工&#xff0c;正式落定上海市徐汇区桂林路406号华鑫中心1号楼505室&#xff0c;“这是邦邦机器人发展史的又一座重要里程…

java代码审计-不安全的配置-Tomcat任意文件写入(CVE-2017-12615)

Tomcat任意文件写入&#xff08;CVE-2017-12615&#xff09; 影响范围&#xff1a;Apache Tomcat 7.0.0 - 7.0.79 (windows环境) 当 Tomcat 运行在 Windows 操作系统时&#xff0c;且启用了 HTTP PUT 请求方法&#xff08;例如&#xff0c;将 readonly 初始化参数由默认值设置…