从0开始学习搭网站的第一天

  • 前言,以下内容学习自mdn社区,感兴趣的朋友可以直接去看原文章
  • web技术

    目录

    • web机制
      • 互联网是怎么运作的
      • 网站服务器是什么
      • 什么是URL?
      • 什么是web服务器?
      • 什么是域名
      • 什么是超链接
      • 什么是网页DOM
      • goole浏览器开发者工具

web机制

互联网是怎么运作的

五分钟告诉你互联网是如何工作的
这一部分的知识如果有计算机网络的基础就更好理解,视频中讲了互联网的工作机制和信息的传输机制

  • 计算机之间两两相连传输信息过于复杂,因此产生了路由器,用于管理信息的传输,我们需要把我们的网络连接到互联网服务提供商(ISP)。ISP 是一家可以管理一些特殊的路由器的公司,这些路由器连接其他 ISP 的路由器。你的网络消息可以被 ISP 捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。
  • ip地址和域名用来标识计算机
  • 互联网是基础设施,Web 是建立在这种基础设施之上的服务。Web 服务器可以发送一些浏览器可以理解的信息在这里插入图片描述
    在这里插入图片描述

网站服务器是什么

首先你知道网站是多个网页相互链接的集合,那么网站服务器,就是一台托管一个或多个网站的计算机。“托管”意思是所有的网页和它们的支持文件在那台计算机上都可用。网络服务器会根据每位用户的请求,将任意网页从托管的网站中发送到任意用户的浏览器中。

什么是URL?

举个例子在这里插入图片描述
这些都是URL,你可以将它理解为网页的地址,它由以下几个部分组成在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

什么是web服务器?

web 服务器一词可以代指硬件或软件,或者是它们协同工作的整体。

  1. 硬件部分,web 服务器是一台存储了 web 服务器软件以及网站的组成文件(比如,HTML 文档、图片、CSS 样式表和 JavaScript 文件)的计算机。它接入到互联网并且支持与其他连接到互联网的设备进行物理数据的交互。
  2. 软件部分,web 服务器包括控制网络用户如何访问托管文件的几个部分,至少是一台 HTTP 服务器。一台 HTTP 服务器是一种能够理解 URL(网络地址)和 HTTP(浏览器用来查看网页的协议)的软件。一个 HTTP 服务器可以通过它所存储的网站域名进行访问,并将这些托管网站的内容传递给最终用户的设备。

基本上,当浏览器需要一个托管在网络服务器上的文件的时候,浏览器通过 HTTP 请求这个文件。当这个请求到达正确的 web 服务器(硬件)时,HTTP 服务器(软件)收到这个请求,找到这个被请求的文档(如果这个文档不存在,那么将返回一个 404 响应),并把这个文档通过 HTTP 发送给浏览器。


  • 静态 web 服务器(static web server由一个计算机(硬件)和一个 HTTP 服务器(软件)组成。我们称它为“静态”是因为这个服务器把它托管文件的“保持原样”地传送到你的浏览器。

  • 动态 web 服务器(dynamic web server)由一个静态的网络服务器加上额外的软件组成,最普遍的是一个应用服务器和一个数据库。我们称它为“动态”是因为这个应用服务器会在通过 HTTP 服务器把托管文件传送到你的浏览器之前会对这些托管文件进行更新

  • 在 web 服务器上,HTTP 服务器负责处理和响应传入的请求。当收到一个请求时,HTTP 服务器首先要检查所请求的 URL 是否与一个存在的文件相匹配。

    1. 如果是,网络服务器会传送文件内容回到浏览器。
    2. 如果不是,服务器会检查是否应该动态生成请求所需的文件(参见静态和动态内容)。
    3. 如果两种处理都不可能,网络服务器会返回一个错误信息到浏览器,最常见的是 404 Not Found。404 错误太常见以至于很多网页设计者花费许多时间去设计 404 错误页面。

什么是域名

  • 域名实际上就是把ip地址映射为人容易记住的网站名,比如www.baidu.com,域名和服务器一样,需要购买才能长期拥有

什么是超链接

在这里插入图片描述

正如我们所说的,链接是一段链接到 URL 的文本,我们使用链接来跳转到另一个文档。关于链接,有一些细节值得考虑:

链接的类型

  • 内链
    内链是你的网页之间的链接。没有内部链接,就没有网站(当然,除非是只有一页的网站)。

  • 外链
    外链是从你的网页链接到其他人的网页的链接。没有外部链接,就没有 web,因为 web 是网页的网络。使用外部链接提供除你自己维护的内容之外的信息。

  • 传入链接
    传入链接是从其他人的网页链接到你的网页的链接。这只是从被链接者的角度看到的外部链接。请注意,当有人链接到你的网站时,你不必链接回去。

什么是网页DOM

网页DOM是HTML的树形结构表示,可以通过JavaScript操控DOM来修改网页
在这里插入图片描述

  • DOM的核心概念在这里插入图片描述
  • 常见的DOM操作在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

goole浏览器开发者工具

开发者工具教学

  • 今天实在没啥状态,就先学到这吧,练会枪去

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

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

相关文章

java小灶课详解:关于char和string的区别和对应的详细操作

char和string的区别与操作详解 在编程语言中,char和string是用于处理字符和字符串的两种重要数据类型。它们在存储、操作和应用场景上存在显著差异。本文将从以下几个方面详细解析两者的区别及常见操作。 1. 基本定义与存储差异 char: 定义:…

黑马linux笔记(03)在Linux上部署各类软件 MySQL5.7/8.0 Tomcat(JDK) Nginx RabbitMQ

文章目录 实战章节:在Linux上部署各类软件tar -zxvf各个选项的含义 为什么学习各类软件在Linux上的部署 一 MySQL数据库管理系统安装部署【简单】MySQL5.7版本在CentOS系统安装MySQL8.0版本在CentOS系统安装MySQL5.7版本在Ubuntu(WSL环境)系统…

[Transformer] The Structure of GPT, Generative Pretrained Transformer

The Structure of Generative Pretrained Transformer Reference: The Transformer architecture of GPT models How GPT Models Work

浅谈云计算04 | 云基础设施机制

探秘云基础设施机制:云计算的基石 一、云基础设施 —— 云计算的根基![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1fb7ff493d3c4a1a87f539742a4f57a5.png)二、核心机制之网络:连接云的桥梁(一)虚拟网络边界&#xff…

国内主流的Spring微服务方案指南

构建一个完整的 Spring 微服务方案涉及多个关键组件的集成与配置,包括服务注册与发现、配置管理、API 网关、负载均衡、服务调用、熔断与限流、消息中间件、分布式追踪、服务网格、容器编排以及数据库与缓存等。以下将结合前述内容,详细介绍一个完整的中…

解锁 JMeter 的 ForEach Controller 高效测试秘籍

各位小伙伴们,今天咱就来唠唠 JMeter 里超厉害的 “宝藏工具”——ForEach Controller,它可是能帮咱们在性能测试的江湖里 “大杀四方” 哦! 一、ForEach Controller 是啥 “神器” 想象一下,你手头有一串神秘钥匙,每…

【QT】QComboBox:activated信号和currentIndexChanged信号的区别

目录 1、activated1.1 原型1.2 触发机制1.3 使用场景1.4 连接信号和槽的方法1.4.1 方式一1.4.2 方式二 2、currentIndexChanged2.1 原型2.2 触发机制2.3 使用场景2.4 连接信号和槽的方法 1、activated 1.1 原型 [signal] void QComboBox::activated(int index) [signal] void…

PHP 循环控制结构深度剖析:从基础到实战应用

PHP 循环控制结构深度剖析:从基础到实战应用 PHP提供了多种控制结构,其中循环控制结构是最常见的结构之一。它们使得我们能够高效地重复执行一段代码,直到满足某个条件为止。本文将从PHP循环的基础知识出发,逐步分析其在实际项目…

根据浏览器的不同类型动态加载不同的 CSS 文件

实现思路: 安装并引入 vue 项目相关的 CSS 文件:首先确保你有为不同浏览器准备了不同的 CSS 文件(例如,style-chrome.css,style-firefox.css,style-ie.css 等)。 在 index.js 中根据浏览器类型…

JAVA之单例模式

单例模式(Singleton Pattern)是一种设计模式,用于确保一个类只有一个实例,并提供一个全局访问点来获取该实例。在软件设计中,单例模式常用于控制对资源的访问,例如数据库连接、线程池等。以下是单例模式的详…

Rust 1.84.0 发布

Cargo 依赖版本选择改进 稳定了最小支持 Rust 版本(MSRV)感知的解析器,该解析器会优先选择与项目声明的 MSRV 兼容的依赖版本,减少了维护者支持旧工具链的工作量,无需手动为每个依赖选择旧版本。可以通过.cargo/config…

sosadmin相关命令

sosadmin命令 以下是本人翻译的官方文档,如有不对,还请指出,引用请标明出处。 原本有个对应表可以跳转的,但是CSDN的这个[](#)跳转好像不太一样,必须得用html标签,就懒得改了。 sosadmin help 用法 sosadm…

【WPS】【WORDEXCEL】【VB】实现微软WORD自动更正的效果

1. 代码规范方面 添加 Option Explicit:强制要求显式声明所有变量,这样可以避免因变量名拼写错误等情况而出现难以排查的逻辑错误,提高代码的健壮性。使用 On Error GoTo 进行错误处理:通过设置错误处理机制,当代码执行…

Kafka 分区管理

分区是主题的子集,每个主题可以被分割成多个分区,一个分区有一个主副本(Leader)及一个或多个从(Follower)副本。分区允许将数据分布在多个broker上,这样可以提高数据的处理能力、并行性及可靠性…

ES6的高阶语法特性

一、模板字符串的高级用法 1.1.模板字符串的嵌套 模板字符串的嵌套允许在一个模板字符串内部再嵌入一个或多个模板字符串。这种嵌套结构在处理复杂数据结构或生成具有层级关系的文本时非常有用。 1. 嵌套示例 假设我们有一个包含多个对象的数组,每个对象都有名称、…

Linux 容器漏洞

定义:Linux 容器漏洞是指在容器技术(如 Docker、LXC 等)运行环境中存在的安全弱点。这些漏洞可能存在于容器镜像本身、容器运行时(如 runc)、容器编排工具(如 Kubernetes)或者容器与主机之间的交…

【论文阅读+复现】High-fidelity Person-centric Subject-to-Image Synthesis

以人物为中心的主体到图像的高保真合成,CVPR2024 code:CodeGoat24/Face-diffuser: [CVPR2024] Official implementation of High-fidelity Person-centric Subject-to-Image Synthesis. paper:2311.10329 背景 研究问题:这篇文…

详解如何自定义 Android Dex VMP 保护壳

版权归作者所有,如有转发,请注明文章出处:https://cyrus-studio.github.io/blog/ 前言 Android Dex VMP(Virtual Machine Protection,虚拟机保护)壳是一种常见的应用保护技术,主要用于保护 And…

基于华为atlas的重车(满载)空车(空载)识别

该教程主要是想摸索出华为atlas的基于ACL的推理模式。最终实现通过煤矿磅道上方的摄像头,识别出车辆的重车(满载)、空车(空载)情况。本质上是一个简单的检测问题。 但是整体探索过程比较坎坷,Tianxiaomo的…

《零基础Go语言算法实战》【题目 2-25】goroutine 的执行权问题

《零基础Go语言算法实战》 【题目 2-25】goroutine 的执行权问题 请说明以下这段代码为什么会卡死。 package main import ( "fmt" "runtime" ) func main() { var i byte go func() { for i 0; i < 255; i { } }() fmt.Println("start&quo…