Web基础知识

news2025/1/24 22:46:59

1,Web基本概念和常识

        ①web应用:网站(广义上的PC,手机app)

        ②浏览器(Browser):也称用户代理,web客户端,主要有IE、Edge、Chrome、Firefox、腾讯浏览器,360浏览器等……我们在初学web的过程中最好使用chrome浏览器

        ③web服务器(web server):也称HTTP服务器(HTTP server),主要有Apache、Tomcat、Netty……我们在初学阶段主要使用tomcat

        

理论上 chrome和tomcat可以运行在不同的电脑上,但在我们学习阶段chrome和tomcat都运行在同一台电脑上,我们在web学习阶段所做的主要内容是给tomcat提供一些素材资源,这样不同的素材在chrome上显现的就是不同的内容

2,关于资源(暂时先理解为一组文件)

所谓的开发Web应用,就是开发一组资源(表现一组文件)

用户所在的浏览器直接和web服务器对接,一个web服务器可以开多家店,我们要做的就是提供要买的东西,也就是资源 

Chrome上的一个开发工具(chrome---三个点---更多工具---开发者工具)

网络面板的保留日志,停用缓存要勾上

3,URL:唯一的一个资源

①  在浏览器中输入了一个URL后浏览器的处理过程:

        (1)浏览器根据URL,去Server获取唯一的资源

        (2)浏览器分析该资源,可以让浏览器访问更多的资源

        (3)浏览器按照一定的规则整合这些资源

        (4)渲染(展示)这些资源,这样的话我们就在浏览器中看到了网页的效果

        由此我们可以更深刻的认识到我们在进行web应用的开发过程其实就是开发资源,并且一个唯一的URL背后可能有很多条资源,资源也有不同的种类

②  每个资源都需要在网络中存在一个唯一的标识,每个资源都有一个唯一的URL

        URI: Unique Resource Identifier(唯一的资源定位符)这只是一个抽象的概念

        URL:Unique Resource Location (俗称的网址)URL可以理解为是URI的一个子集

③   URL的基本格式:

  1. 网络上的电脑(主机)很多,通过Ip,域名(domain)确定唯一的主机
  2. 主机上还有很多程序(进程),通过端口(port)确定唯一的程序

                 通过前两点可以找到Web服务器

     3.通过资源路径(path)确定是具体哪个资源

④  资源的生成方式:静态vs动态

        提前把内容写好,直接输出——静态资源

        根据运行时条件,生成内容——动态资源

⑤   资源的内容类型:

        任何格式都可以作为资源类型

        主要掌握:html类型,css类型,javascript类型

4,一个Web应用下的资源之间的关系

        概念上,web资源相互独立,但实践中为了完成一个业务动作,这些资源之间是相互配合的

        web应用一般都有自己的主入口:这个资源的路径是 / ,这个 / 是可以省略的,或者用index.xxx

5,浏览器和服务器之间的请求与应答

浏览器和服务器之间进行通话的格式,或者说是约定的一种协议就称为HTTP协议

6,三种主要的资源类型

主要掌握HTML、CSS、JS(JavaScript)三种类型的资源

他们都是文本资源,但文本格式不同

 以下便是他们三个的大致语言格式:

三种资源类型的主要功能:

 他们整体称之为web开发中的前端三剑客

以上就是对web背景知识的相关介绍,接下来就要走进web前端三剑客的详细学习

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

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

相关文章

nvm 安装使用及配置淘宝下载镜像

NVM介绍 NVM全称node.js version management ,专门针对node版本进行管理的工具,通过它可以安装和切换不同版本的node.js。 MVM下载 githhub下载地址,选择nvm-setup.zip:安装版,推荐使用 https://github.com/coreyb…

Antv X6 动态连线

这是我实际开发项目中&#xff0c;利用 X6 开发的一个关系图。具备连线功能。这里我尽可能全的记录整个开发思路和部分编码&#xff0c;如果你也用了 X6 希望对你有帮助。 创建画布 代码有删减&#xff0c;以下展示的代码全都有删减 index.vue <template><div id&q…

React组件化的额外知识补充

文章目录React的额外补充Portals的使用Fragment的使用严格模式StrictModeReact的额外补充 Portals的使用 某些情况下&#xff0c;我们希望渲染的内容独立于父组件&#xff0c;甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM 元素上的)。 Portal 提供了一种…

【vue】 vue-router安装和配置方法

vue-router 是 vue.js 官方的路由插件&#xff0c;里面组件和 URL 的映射关系由 vue-route 帮我们管理。 在 vue-router 的单页面应用中&#xff0c;页面的路径的改变就是组件的切换。 第一步&#xff1a; 1.正常初始化项目的时候&#xff0c;会有个 vue-router 供我们选择。…

在VSCode中配置代码自动 eslint 格式化(修改eslint规则、eslint忽略文件)

一、Eslint Eslint 是用来检测和规范代码格式的工具&#xff0c;应用在工程化项目中&#xff0c;可以保证项目代码格式的一致性和规范性&#xff0c;大大提升了代码的可读性。 二、配置过程 本博客是讲述对一个已经引用 eslint 依赖Nuxt项目&#xff08;vue项目应该相同&…

vue-cli脚手架的下载安装(靠谱)

找了半天才找到一个靠谱的安装教程&#xff0c;分享给你们。 1. 先下载node.js&#xff0c;下载地址&#xff1a;Download | Node.jsNode.js is a JavaScript runtime built on Chromes V8 JavaScript engine.https://nodejs.org/en/download/直接进入下载电脑对应的版本&…

vue-cli创建vue项目详细步骤

一、安装node环境&#xff08;建议使用LTS&#xff09; Download | Node.js 二、下载vue和vue-cli脚手架 命令&#xff1a;npm i -g vue ; npm i -g vue/cli 三、在想要创建的位置路径下打开cmd&#xff08;直接点击路径输入cmd即可打开当前位置的终端&#xff09; 四、创建v…

Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)

前言 本次用element-ui的table组件&#xff0c;简单案例演示下前后端数据交互。 前提声明&#xff1a;如果不知道如何在vue中引入element-ui&#xff0c;可以先看下这篇文章:Vue引入并使用Element-UI组件库的两种方式 静态页面 首先先写一个静态页面吧&#xff0c;数据都是…

Vue3的vue-router路由详解

这篇文章是接着【三分钟快速搭建Vue3webpack项目】的内容做的开发&#xff0c;有基础的可以跳过 【三分钟快速搭建Vue3webpack项目】&#xff0c;直接看以下的内容。 Vue3的vue-router路由详解&#xff1a; 首先安装路由依赖模块&#xff1a; npm install vue-router4 所需…

618快到了送上自制前端小项目(html css js)

目录 &#x1f6a9;.自定义播放器 &#x1f3e0;.图片自动消失 ✨.小轮播图 &#x1f383;.旋转音乐盒 前言&#xff1a;这些小项目全都是自创的。 如果需要应用&#xff0c;或则转发的话请与 博主联系&#xff0c;感谢你们的理解&#xff0c; 1.自定义播放器 在页面中放置…

云化Web IDE,在线开发新模式

目录 前言 一、初识云IDE 二、CSDN 云IDE 1、如何使用云IDE 2、使用云IDE 三、云IDE的使用感受 四、总结 前言 工欲善其事必先利其器&#xff0c;作为程序员&#xff0c;我们在编写代码的时候&#xff0c;一定会选用一款得心应手的工具。就像行走江湖的侠客&#xff0c;手…

vue项目打包优化的方法

1.按需加载第三方库 例如 ElementUI、lodash 等 a, 装包 npm install babel-plugin-component -D b, babel.config.js module.exports {"presets": ["vue/cli-plugin-babel/preset"],"plugins": [["component",{"libraryNa…

uniapp中的分享功能实现(APP,小程序,公众号)

uniapp中的分享功能实现(APP,小程序&#xff0c;公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share&#xff0c;uni-app的App引擎已经封装了微信、QQ、微博的分享SDK&#xff0c;开发者可以直接调用相关功能。可以分享到微信、QQ、微博&#xff0c;每个…

【Web前端】一文带你吃透CSS(上篇)

前端学习路线小总结: 基础入门:HTML CSS JavaScript三大主流框架:VUE REACT Angular深入学习:小程序 Node jQuery TypeScript 前端工程化一起学习CSS吧! 一.CSS简介1.什么是CSS?二.CSS语法1.语法规则2.注释三.CSS选择器

Vue打包后加载太慢,访问时间太久,记录项目的整个优化过程

问题背景 最近在做一个Vue项目时&#xff0c;在打包上线的时候发现项目部署完第一次访问时间特别慢&#xff0c;整个登录页面加载用了8-10秒&#xff0c;很明显这个速度达不到项目上线的要求&#xff0c;于是开始了对项目打包之后增快加载速度的研究。 未优化前的项目加载时间…

Vue3 响应式原理

响应式原理 Vue2 使用的是 Object.defineProperty Vue3 使用的是 Proxy 2.0的不足 对象只能劫持 设置好的数据&#xff0c;新增的数据需要Vue.Set(xxx) 数组只能操作七种方法&#xff0c;修改某一项值无法劫持。 reactive和effect的实现 export const reactive <T e…

Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.

报错信息 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 您正在使用Vue的仅运行时版本,并而模板编译器不可用。 可…

手把手教你如何对接支付宝支付接口(奶爸级别)

支付宝支付接口步骤&#xff1a;第一步&#xff1a;第二步&#xff1a;如何让支付宝将付款成功的通知&#xff0c;回调到你本机&#xff0c;我使用的是内网穿透&#xff1a;Natapp步骤&#xff1a; 第一步&#xff1a;准备支付宝相关的参数&#xff0c;如appId、公私钥 第二步…

vite中静态资源(css、img、svg等)的加载机制及其相关配置

什么是静态资源&#xff1f; 简单来说&#xff0c;我们开发完一个项目后&#xff0c;需要把它打包&#xff08;一般是dist文件夹&#xff09;&#xff0c;并部署在服务器上。那么&#xff0c;这个打包后的dist文件夹都是静态资源&#xff1b;在我们写项目时&#xff0c;图片、…

JS类型转换

JS中的类型转换方式一般分为三类&#xff1a;转为String型&#xff0c;转为数字型&#xff0c;转为布尔型。 一.转为String型 1.toString() 通过变量.toString()可以将其他类型的变量转换为字符串型&#xff08;null和undefined没有toString()方法&#xff09; let age 18;…