网站基础知识介绍
網站基礎知識介紹
瀏覽網站涉及一些非常基本的概念，包括瀏覽器與服務器、WWW與萬維網，還有IP地址與域名等。
【Web中一些術語的含義 參見Web中一些術語的含義_cnds123的專欄-CSDN博客】
瀏覽網站訪問者使用瀏覽網頁的軟件被稱為瀏覽器。
WWW、萬維網和Web是同義詞，是一個大型的相互鏈接的文件所組成的集合體，包括了整個網絡世界。
IP地址和域名
服務器在網絡中的地址，是通過IP地址來實現的。為了實現IP地址的易理解、易識別，又引入了域名的概念。IP地址是識別互聯網上計算機和網絡設備的標識。
域名是IP地址的一種符號化表示，域名通過域名解析系統(Domain Name System，DNS)保證每臺主機的域名與IP地址一一對應。
互聯網的工作機制
（1）瀏覽器中輸入將要訪問頁面的URL地址。由DNS進行域名地址解析，找到服務器IP地址，向該地址所指向的Web服務器發出請求。
（2）Web服務器根據瀏覽器送來的請求，把URL地址轉換成頁面所在服務器上的文件全名，查找相應的文件。
（3）如果URL指向靜態HTML文檔，Web服務器使用HTTP協議把該文檔直接送給瀏覽器。如果HTML文檔中嵌入了ASP、PHP或JSP程序，則由Web服務器運行這些程序，把結果送到瀏覽器。如果Web服務器運行的程序包含對數據庫的訪問，則服務器將查詢指令發送給數據庫服務器，對數據庫執行查詢操作。
（4）查詢結果由數據庫返回Web服務器，再Web服務器將結果數據嵌入頁面，并以HTML格式發送給瀏覽器。
（5）瀏覽器解釋HTML文檔，在客戶端屏幕上展示結果。
WWW上的地址通過URL來指明，HTTP協議是用于瀏覽網站的基本約束或規則。
URL是Uniform Resource Location的縮寫，含義是統一資源定位符（器），用來指明文件在互聯網中的位置。基本格式如下：
schema://host[:port#]/path/.../[;url-params][?query-string][#anchor]
一個完整的URL包括以下幾部分：
協議模式部分(schema)：指定底層使用的協議，在Internet中可使用多種協議，如FTP、HTTP、HTTPS。
域名部分(host)：服務器的域名或者IP地址
端口號(port)：跟在域名后的端口，域名和端口之間使用 冒號 作為分隔符，一般端口號默認是80，使用默認端口號時可以省略不寫。
虛擬目錄部分(path)：從域名第一個"/"開始到最后一個"/"為止，指訪問資源的路徑
文件名部分(url-params)：指具體訪問的是哪個文件資源，如果沒有，則使用默認文件名，如 index.vue、index.html、index.asp。
參數部分(query-string)：發送給http服務器的數據，允許有多個參數，使用&鏈接多個參數。
錨部分(anchor)：錨用來定位頁面展示的開始位置，是非必須的。
HTTP（HyperText Transfer Protocol：超文本傳輸協議）是一種用于分布式、協作式和超媒體信息系統的應用層協議。 簡單來說就是一種發布和接收 HTML 頁面的方法，被用于在 Web 瀏覽器和網站服務器之間傳遞信息。
HTTPS（Hypertext Transfer Protocol Secure：超文本傳輸安全協議）是一種透過計算機網絡進行安全通信的傳輸協議。HTTPS 經由 HTTP 進行通信，但利用 SSL/TLS 來加密數據包。HTTPS 開發的主要目的，是提供對網站服務器的身份認證，保護交換數據的隱私與完整性。
HTTP（HyperText Transfer Protocol：超文本傳輸協議）是一種用于分布式、協作式和超媒體信息系統的應用層協議。 簡單來說就是一種發布和接收 HTML 頁面的方法，被用于在 Web 瀏覽器和網站服務器之間傳遞信息。
HTTPS（Hypertext Transfer Protocol Secure：超文本傳輸安全協議）是一種透過計算機網絡進行安全通信的傳輸協議。HTTPS 經由 HTTP 進行通信，但利用 SSL/TLS 來加密數據包。HTTPS 開發的主要目的，是提供對網站服務器的身份認證，保護交換數據的隱私與完整性。
網站（Web Site或Site）
網站是由多個網頁組成的，但網站不是網頁的簡單羅列組合，而是由超鏈接方式組成的具有統一風格的有機整體。???
網頁是網站中的一個頁面，是由 HTML 命令、CSS 樣式、JavaScript 代碼和字符組合構成的，可以包含文本、圖像、超鏈接、表格、表單、動畫、聲音和視頻等。也叫為Web 頁，是一個 HTML 文件（HTML 文件的擴展名 .htm 或 .html ）。
主頁（Homepage）也稱首頁或開始網頁，是在瀏覽器打開某個網站后用戶首先看到的網頁，它承載著網站中所有指向二級網頁或其他網站的鏈接信息。
網頁（HTML文件）的運行需要瀏覽器的支持，有時還需要 Web服務器環境。
瀏覽器是一種軟件，其主要功能是顯示網頁服務器或者文件系統的 HTML 文件（標準通用標記語言的一個應用）內容，并讓用戶與這些文件交互。目前，主流瀏覽器包括Chrome、Edge、FireFox、Opera、Safari 等。
瀏覽器由 shell 和內核構成
shell 是指瀏覽器的外殼（用戶接口），它為用戶提供了界面操作，如菜單、地址欄、工具欄、選項參數設置等功能
內核（瀏覽器引擎），是基于標記語言顯示內容的程序或模塊，包括：
渲染引擎（Rendering Engine）負責取得網頁的內容、解析處理，以及呈現
JS（JavaScript）引擎 負責解析和執行 JavaScript 代碼
Web（World Wide Web，全球廣域網），也稱為萬維網，它是一種基于超文本和HTTP的、全球性的、動態交互的、跨平臺的分布式圖形信息系統，是建立在Internet上的一種網絡服務，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。
目前的Web標準主要由3大部分組成：結構（Structure）、表現（Presentation）、行為（Behavior）。真正符合Web標準的網頁設計是指能夠靈活使用Web標準對Web內容進行結構、表現與行為的分離。
結構：對網頁信息內容進行整理和分類，用于結構化設計的 Web 標準技術包括：HTML、XML和XHTML。
表現：對被結構化的信息進行顯示控制，用于Web設計的標準技術是CSS (Cascading Style Sheets，層疊樣式表)，CSS是標準的布局語言，用來排版和顯示HTML元素。HTML+CSS的布局，使內容表現與結構相分離，使網頁可維護性更好。目前最新的版本是CSS3。CSS3非常靈活，既可以嵌入在HTML5文檔中，也可以是一個單獨的外部文件，如果是獨立文件，則必須以.css為后綴名。
行為：對文檔內部模型進行定義，用于動態交互式內容的控制。標準技術包括：DOM（文檔對象模型）和腳本程序JavaScript。對于JavaScript為了統一規范，Ecma國際組織創建了ECMA-262標準（ECMAScript）。
【兩點說明：
1、HTML、CSS、JavaScript大小寫的要求：
HTML 大小寫不敏感，不區分大小寫，也就是說大小寫都不影響。但根據W3C的規范寫法，一般使用小寫。
CSS大小寫不敏感，也不區分大小寫。但根據W3C的規范寫法，一般使用小寫。
JavaScript 對大小寫非常敏感，一定要區分大小寫。
2、CSS和JavaScript代碼寫在HTML頁面中的位置：
CSS建議放在head里面，JS代碼最好放在body的最下面。
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>css和js的存放位置</title>
??? <link rel="stylesheet" href="css/my.css"> <!-- 引入外部css文件 -->
??? <style>
?????? /* css代碼直接寫在<style>標簽中 */
??? </style>
</head>
<body>
??? <script src="js/my.js"></script>?? <!-- 引入外部js文件 -->
?? ?<script>
????? //js代碼直接寫在<script>標簽中
??? </script>
</body>
</html>
】
網頁編輯工具
記事本
WINDOWS中的notepad，一款純文本編輯器。
Hbuilder
是國內DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。
Adobe Dreamweaver
Dreamweaver（簡稱DW）是集網頁制作和管理網站于一身的所見即所得網頁代碼編輯器。利用對 HTML、CSS、JavaScript等內容的支持，設計師和程序員可以在幾乎任何地方快速制作和進行網站建設。
HTML(Hypertext Markup Language) 的標記符（tag、標簽）
標記符基礎
標記符不區分大小寫，<html>、<Html>和<HTML>一樣，但建議用小寫。一般成對出現，包括開始標記符和結束標記符，例如<a></a>。結束標記符多一個斜杠“/”（不是反斜杠“\”！）。
某些標記符只要求單一標記符號，例如<br>。
屬性是用來描述對象特征的特性。與標記有關的特性稱為屬性，每個屬性總是對應一個屬性值，將其稱為“屬性/值”對。
HTML屬性放在開始標記符，屬性之間用空格分開，屬性值用引號。
<a href="https://www.taobao.com/">淘寶網</a>
【<a href="url" target=" target屬性值" >鏈接標題</a>
? href屬性：鏈接標題所指向的目標文件的URL地址。
? target屬性：用于打開鏈接的目標窗口，默認方式是原窗口。
| target屬性值 | 說明 |
| parent | 當前窗口的上級窗口，一般在框架中使用 |
| blank | 在新窗口中打開 |
| self | 在同一窗口中打開，和默認值一致 |
| top | 在瀏覽器的整個窗口中打開，忽略任何框架 |
】
】
HTML5文件的基本結構
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>頁面網頁</title>
</head>
<body>
<!-- 網頁顯示內容 -->
</body>
</html>
HTML 的注釋由開始標記符<!-- 和結束標記符 --> 構成。這兩個標記符之間的任何內容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示。
顯示特殊字符
如果用戶需要在網頁中顯示某些特殊字符，例如：<（小于號）、>（大于號）、”（引號）等，則需使用參考字符來表示，而不能直接輸入。
參考字符以“&”號開始，以“;”結束，既可以使用數字代碼，也可以使用代碼名稱。
<：< <
>：> >
&：& &
例如：1<a，在網頁中應寫為1<a
Web應用中常常提及的前端，后端和全棧
Web應用的“前端”其實是指開發的程序能夠在瀏覽器中解析和運行。前端開發的目標之一就是采用相關HTML、CSS，JavaScript等技術讓網頁足夠漂亮，吸引更多人來使用。
Web應用的“后端”是指用運行在后端服務器上的程序，針對前端程序發出的請求，做出回應，如“反饋是否登錄成功”，還可以是管理前端用戶查詢的數據，以及用戶自己產生的數據，比如用戶名，文章，評論等。采用的技術后端包括腳本語言如php、JSP，數據庫，web服務器如Apache、IIS（Internet Information Services， Internet信息服務器），網絡編程等。
全棧單純從程序開發的角度來說，就是開發人員承擔包括前端和后端在內的所有功能的開發任務。
前端指的是用戶可見的界面，網站前端頁面也就是網頁的頁面開發，比如網頁上的特效、布局、圖片、視頻，音頻等內容。前端的工作內容就是將美工設計的效果圖的設計成瀏覽器可以運行的網頁，并配合后端做網頁的數據顯示和交互等可視方面的工作內容。后端是指用戶看不見的東西，通常是與前端工程師進行數據交互及網站數據的保存和讀取，相對來說后端涉及到的邏輯代碼比前端要多的多，后端考慮的是底層業務邏輯的實現，平臺的穩定性與性能等。
前端和后端的工作內容比如做一個登陸頁面，用戶在前端頁面上輸入了賬號密碼，然后用鼠標點擊了登陸按鈕，這時候前端會將賬號密碼通過請求接口發送給后端做處理，后端收到數據會先檢查該賬號是否存在，如果不存在，則返回給前端一條類似于這樣的信息：“你輸入的賬號不存在，請重新輸入”，用戶再次重新輸入賬號，此時后端查詢賬戶存在，密碼也正確，則后端返回登陸成功的信息給前端。現代計算機領域的難題如大規模負載，海量數據處理，實時計算也是后端的，前端集中在表示層。
網頁前后端交互技術
前端通常會通過后端（后臺）提供的接口來獲取數據來完成前端頁面的渲染。若想實現網頁前后端交互，需要學習一些后端技術。
對于一個站點，用戶看得到的只是前端網站的一部分，網站的大多數情況是看不到的，這些看不到的就是后端。后端包括程序設計架構、數據庫管理、處理相關的業務邏輯等。
web前端開發是在構建用戶界面，相比前端開發，后端開發需要花更多的時間來實現算法和解決問題上以及高并發處理，Ddos攻擊的防御。web后端開發跟sql數據庫打交道比較多，也就是web后端開發就是從數據庫或者其他數據源寫入、讀取、處理數據。還需要了解PHP、web框架、ASP.NET、WVC等，還有緩存技術（cookie、session、localstorage、cashe-controller等）。
一個真正的Web應用都需要將代碼部署到服務器上，這樣才能讓更多人訪問。因此，搭建服務器是必不可少的環節。在學習階段，我們可以搭建一個本地服務器就能滿足學習Web全棧開發的需要。下面給出兩個本地服務器示例：
網頁前后端交互示例 網頁前后端交互示例 - nrm1 - 博客園
使用node.js構建一個web服務器 使用node.js構建一個web服務器（適合自學）_cnds123的專欄-CSDN博客
更多情況可參見：
PHP項目的發布（部署）PHP項目的發布（部署）_cnds123的專欄-CSDN博客_php項目部署
網站設計與發布概述 網站設計與發布概述_cnds123的專欄-CSDN博客
總結
- 上一篇： 怎么放大图片不模糊？
- 下一篇： 如果有意义