网址:因特网如何运作

Содержание и основные понятия

返回目录
第6章 · 第6.3页
网址:因特网如何运作
每个站点都是服务器上的文件, 浏览器会变成一个美丽的页面。 让我们拆分网络的三大支柱: XML、 CSS 和 JavaScript 。
在第四章中 你发现浏览器正在发送
HTTP 请求
现在让我们来看看,
事实正是如此
浏览器如何将文本转换为页面 。
网络=
HTML
(结构)+
CSS
(设置)+
JavaScript
(行为)
· 基本全球环境基金
PLF 受伤害
EEEG 任务13
01
网络的三大支柱
HTML是骨架 CSS是衣服 JavaScript是肌肉
全球环境基金,全环基金
EEG 13
HTML — HyperText Markup Language
标记标记
页面结构:标题、段落、列表、链接、图像、表格、表格。
HTML —
非编程语言语言
标签描述它。
说
页面,非页面
怎么会?
它的工作原理。
HTML 示例
<h1>Привет, мир!</h1>
- 一级头衔。
<p>Это параграф.</p>
- 案文段落。
<a href="https://example.com">Ссылка</a>
-超链接
CSS — Cascading Style Sheets
形式
:颜色、字体、减损、元素位置、动画、适应性。
CSS 隔离
外观
调自
结构结构结构
一个CSS文件可以使整个网站系统化。
JavaScript - 编程语言
行为行为行为
和
互动性
* 处理点击、动画、请求服务器而不重新启动、确认表格。
联署材料是唯一奏效的编程语言
直接在浏览器中
.
📄
HTML
类比:建筑的骨架
它定义了结构:标题所在,文字所在,图片所在。没有 CSS ,它很丑,但可以读。
🎨
CSS
类比:油漆和修剪
使页面变得漂亮: 颜色、 字体、 阴影、 动画。 没有 TML , 没有什么可以应用 。
⚡
JavaScript
类比:电动和电梯
使页面实况化: 按钮有效, 数据被下载, 菜单打开 。
🛠️
HTML 实时编辑器
编辑右侧的代码 □ 结果
插数
更改左侧的 XML 代码 -- -- 结果将实时更新到右侧 。
02
前端和后端
客户和服务器部件:谁负责什么
全球环境基金,全环基金
EEG 13
前端(客户)
用户看到和互动的任何信息
浏览器
:
HTML
- 标注页面
CSS
- 风格和适应性
JavaScript
- 互动、动动动、AJAX要求
框架:反应、Vue、角、Svelte
后端( 储存)
工作的一切东西
服务器服务器
你看不到用户:
Web 服务器
- 接受 HTTP 请求, 提供文件( Nginx, Apache)
语文语文语文语言语言
— Python, Node.js, PHP, Go, Java, C#
数据库数据库数据库
- 保存数据( PostgreSQL、 MySQl、 MongoDB)
API
Frantend 与 backend 界面的界面(REST, GraphQL)
Frontend
用户浏览器
HTML
CSS
JavaScript
React / Vue / Angular
显示页面
Backend
服务器服务器
Python / Node.js
Nginx / Apache
PostgreSQL
REST API / GraphQL
逻辑+数据
HTTP 请求 (GT/api/data)
HTTP反应(JSON/HTML)
前端端请求前端显示后端进程
图1
网络应用程序架构:客户请求、服务器程序
03
网络服务器和主机服务
网站的实况和如何上网
全球环境基金,全环基金
Web 服务器
Web 服务器
- 程序(或计算机):
接受浏览器的 HTTP 请求
查找请求的文件或对答
送HTTP回来。
大众网络服务器:
Nginx
(静态和反向代理的快速)
Apache
(最老的,灵活)
东道主
东道主
该网站是一个永久的因特网服务器服务。
类型类型类型
说明说明
为了谁?
虚拟主机
一个服务器共享资源上的许多网站 。
博客、小网站
VPS
(虚拟服务器)
您的根接入“ kick” 服务器
中型项目、商店
选中服务器
租赁全体物理服务器
负担重重的项目
云云
(IaaS)
虚拟云车(AWS,Yandex云)
大型项目
静置托管
仅 HTML/CSS/JS 文件( GitHub Pages, Netlife)
着陆,文件
域和 DNS
域域域
(Alterna-edu.ru)是向登记员(REG.RU、GoDdddy)宣读和记录的网址的名称。
DNS
将域与服务器 &apos; s IP 地址连接
第6.2页
).
网站如何到达用户
1. 注册域名 . 2. 租赁主机 . 3. 将文件上传到服务器 . 4. 设置 DNS:IP服务器的域名~ 5. 网站可供全世界使用!
04
浏览器如何连接页面
从 HTML 文字到屏幕上的像素
PLF 受伤害
提交申请的五个步骤
HTML 分析
DOM(文件项目模型)是一棵元素树。
CSS 解析
CSSOM(CSS项目模型)是一棵风格树。
兼并
DOM + CSSOM →
Render Tree
(象形木)
Layout
(回流)是每个元素的尺寸和位置的计算法。
Paint
绘画( 油漆) 是屏幕上像素的绘图 。
HTML
文字文字文字
DOM
树树,树,
Render Tree
DOM + CSSOM
Layout
方 数
Paint
像素一样!
CSS
HTML + CSS DOM + SOM 和 SOM
图2
品牌化的五个阶段,从文本到像素
这有什么关系?
如果 CSS 下载时间长, 页面“ Migage ” (首页没有样式, 然后完成) 。 如果 JS 屏蔽, 则页面“ hangs ” 。 优化下载 = 快速网站 。
05
现代网络:SPA、API、CDN
你每天使用的网站如何?
PLF 受伤害
SPA — Single Page Application
单页应用程序
例如:Gmail、Telegram Web、Google地图。
添加: 它像桌面应用程序一样快速工作 。 minus: 对 SEA 来说更困难, 第一次下载较慢 。
API — Application Programming Interface
API
最流行的风格是弗兰特德用来与后端沟通的风格。
REST
:
方法方法方法
行动行动的行动
示例示例示例
GET /api/users
GG 列表
用户列表
GET /api/users/5
买一个
用户概况 5
POST /api/users
新建新的
新登记的新登记簿
PUT /api/users/5
更新整个更新
更改所有字段
PATCH /api/users/5
部分更新
只更改名称
DELETE /api/users/5
删除删除
删除用户
CDN — Content Delivery Network
CDN
世界各地存储内容副本的服务器网络,用户来自最近的地点,例如,Akamai Cloudflare。
它是如何一起工作的
你开球了
Telegram Web
(SPA) 浏览器下载 HTML/CSS/JS
CDN
(从最近的服务器快速调出)
AIP 请求
"播放聊天室X的留言" 后端答案
JSON
联署材料更新了网页,没有重启