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