前端知识与基础应用

这篇具有很好参考价值的文章主要介绍了前端知识与基础应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端知识

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

例如: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博客文章来源地址https://www.toymoban.com/news/detail-723115.html

到了这里,关于前端知识与基础应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Cookie基础知识

    一、简介 ​ Cookie (也称为 HTTP Cookie 、 Web Cookie 、浏览器 Cookie 等等)是服务器发送到用户浏览器并保存在本地的一小块数据,该数据通常是用户账号相关的信息,不同浏览器对 Cookie 的数量和大小限制不同,但一般来说,单域名下设置的 cookie 不能超过30个,单条 cookie 的大

    2024年02月12日
    浏览(43)
  • 前端基础知识

    创建工作区 es6基础 vue axios 切换node.js 初始化项目 修改访问接口 代码编写 将token放到请求头中传递 下载npm 下载需要的nodejs (nvm install 10.23.0 ) ,然后 use 选择下载的nodejs ( nvm use 10.23.0 ) 查看npm下的所有nodejs : nvm ls 修改成本地的 举例说明: 勾选复选框 点击批量删除 发

    2024年02月12日
    浏览(44)
  • 前端算法基础知识

    数组 数组是一种线性数据结构,可以存储同类型的数据元素。数组具有随机访问性,可以通过下标访问其中的元素,时间复杂度为O(1)。 链表 链表也是一种线性数据结构,不同于数组,链表中的元素不是连续存储的,每个元素包含一个指向下一个元素的指针。链表不支持随机

    2024年02月03日
    浏览(31)
  • 前端Angular框架基础知识(一)

    1.1 数据绑定 数据驱动DOM:将组件 类 (.ts文件)中的数据显示在组件 模板 (.html文件)中,当类中的数据发生变化会自动同步到模板中. Angular中使用差值表达式进行数据绑定, {{ }}语法 1.2 属性绑定 1.2.1 普通属性 使用【属性名称】为元素绑定DOM对象属性 使用【attr.属性名称】为元

    2024年01月17日
    浏览(40)
  • 【前端知识】React 基础巩固(十三)——列表渲染

    在 React 中没有像 Vue 模块语法中的 v-for 指令,而是需要我们通过 JS 代码的方式组织数据,转成 JSX 在 React 中,展示列表最多的方式就是使用数组的 map 高阶函数 在展示数组前,有时会进行一些处理 过滤一些内容(filter 函数) 截取数组中的一部分内容(slice 函数) 列表中的

    2024年02月10日
    浏览(51)
  • 【前端知识】React 基础巩固(二十七)——Fragment

    Fragment 允许将子列表分组,而无需向 DOM 添加额外节点 可以采用语法糖 / 来替代 Fragment,但在需要添加 key 的场景下不能使用此短语 查看Fragment应用后的效果

    2024年02月16日
    浏览(58)
  • Websocket、Session&Cookie、前端基础知识

    目录 1.Websocket Websocket与HTTP的介绍 不同使用场景 Websocket链接过程 2.SessionCookie Cookie的工作原理 Session的工作原理 区别 3.前端基础知识 HTTP: 1. HTTP 是单向的,客户端发送请求,服务器发送响应。每个 HTTP 或 HTTPS 请求每次都会新建与服务器的连接,并且在获得响应后,连接将自

    2024年02月10日
    浏览(43)
  • 【前端知识】React 基础巩固(二十八)——StrictMode

    StrictMode 是一个用来突出显示应用程序中潜在问题的工具 与 Fragment 一样,StrictMode 不会渲染任何可见的 UI 为后代出发额外的检测和警告 严格模式检查仅在开发模式下运行,不影响生产构建 严格模式检查什么? 识别不安全的生命周期 使用过时的 ref API 检查意外的副作用 组件

    2024年02月16日
    浏览(48)
  • 【前端知识】React 基础巩固(四十)——Navigate导航

    新建Login页面,在Login中引入Navigate,实现点击登陆按钮跳转至 /home 路径下: 当路由均无匹配时,通过Navigate跳转至NotFound界面,其中 * 为通配符: 构建NotFound.jsx 在App.jsx中配置NotFound: 构建Home的子路由页面: HomeRecommend.jsx HomeRanking.jsx 利用 Route 嵌套子路由,实现Home页面下的

    2024年02月14日
    浏览(61)
  • 现代前端开发者的自我迷失,你还会前端基础知识吗?

    通常来说,我认为情况并不算糟糕,熟练的手可以几乎做到一切。然而,最近我注意到一些事情改变了我对这个行业的看法。似乎在这些无尽的趋势、范式和新奇玩意中,我们忘记了前端开发的支柱(意思是忘记了基础知识,没有轮子没法写代码了)。 在这篇文章中,我想分

    2023年04月08日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包