從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.pswp.cn/web/65988.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/65988.shtml
英文地址,請注明出處:http://en.pswp.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…