从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,一经查实,立即删除!

相关文章

黑马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…

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

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

sosadmin相关命令

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

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

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

Kafka 分区管理

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

【论文阅读+复现】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…

IntelliJ IDEA中Maven项目的配置、创建与导入全攻略

大家好&#xff0c;我是袁庭新。 IntelliJ IDEA是当前最流行的Java IDE&#xff08;集成开发环境&#xff09;之一&#xff0c;也是业界公认最好用的Java开发工具之一。IntelliJ IDEA支持Maven的全部功能&#xff0c;通过它我们可以很轻松地实现创建Maven项目、导入Maven项目、…

【Rust】函数

目录 思维导图 1. 函数的基本概念 1.1 函数的定义 2. 参数的使用 2.1 单个参数的示例 2.2 多个参数的示例 3. 语句与表达式 3.1 语句与表达式的区别 3.2 示例 4. 带返回值的函数 4.1 返回值的示例 4.2 返回值与表达式 5. 错误处理 5.1 错误示例 思维导图 1. 函数…

Cython全教程2 多种定义方式

—— 本篇文章&#xff0c;主要讲述Cython中的四种定义关键字 全教程2 多种定义方式&#xff1a; 在Cython中&#xff0c;关于定义的关键字有四个&#xff0c;分别是&#xff1a; cdef、def、cpdef、DEF 一、cdef定义关键字 顾名思义&#xff0c;cdef关键字定义的是一个C函数…

Web开发(一)HTML5

Web开发&#xff08;一&#xff09;HTML5 写在前面 参考黑马程序员前端Web教程做的笔记&#xff0c;主要是想后面自己搭建网页玩。 这部分是前端HTML5CSS3移动web视频教程的HTML5部分。主要涉及到HTML的基础语法。 HTML基础 标签定义 HTML定义 HTML(HyperText Markup Lan…

Java-数据结构-栈与队列(常考面试题与单调栈)

在上一篇的学习中&#xff0c;我们学习了栈和队列的基本知识&#xff0c;以及它们对应都有哪些方法&#xff0c;在什么应用场景下如何使用&#xff0c;并且还对它们进行了模拟实现&#xff0c;而其实对于栈和队列的相关知识还远不止于此&#xff0c;而今天我们就对栈与队列进行…

Spring 项目 基于 Tomcat容器进行部署

文章目录 一、前置知识二、本地Idea运行Spring项目1. 将写好的 Spring 项目先打包成 war 包2. 查看项目工件&#xff08;Artifact&#xff09;是否存在3. 配置 Tomcat3.1 添加一个本地 Tomcat 容器3.2 将项目部署到 Tomcat 4. 运行项目 三、基于 Tomcat 部署及多实例部署1. Spr…

usbredir学习

文章目录 背景典型场景编译usbredirparserusbredirfilterusbredirparser/usbredirproto usbredirhostusbredirect/usbredirtestclient参考 背景 usbredir 是一种用于通过网络转发 USB 设备流量的网络协议。它也是一个软件包的名称&#xff0c;该软件包提供了一个解析库、一个 …

ESXI 安装教程(3) ---​vCenter Server 安装

不涉及复杂的操作此项可不安装 1.镜像加载到虚拟光盘 对应的网盘文件 2.打开文件路径 双击运行文件installer.exe 3.调整安装语言 4.点击安装 5. 6. 证书,有效问题导致此提示,非专业网络管理人员,不知道如何处理,此处点是即可 证书有效开始时间是安装时间8小时 证书有效结束…

极客说|Azure AI Agent Service 结合 AutoGen/Semantic Kernel 构建多智能体解决⽅案

作者&#xff1a;卢建晖 - 微软高级云技术布道师 「极客说」 是一档专注 AI 时代开发者分享的专栏&#xff0c;我们邀请来自微软以及技术社区专家&#xff0c;带来最前沿的技术干货与实践经验。在这里&#xff0c;您将看到深度教程、最佳实践和创新解决方案。关注「极客说」&am…