目錄

• 前言
• 一、Web系統
• • （一）Web系統的定義
  • （二）前端和后端
• 二、網站和網頁
• • （一）網站的開發歷程
  • （二）網頁的組成元素
• 三、瀏覽器
• 四、前端技術
• • （一）超文本標記語言（HTML）
  • （二）層疊樣式表（CSS）
  • （三）JavaScript（JS）
• 結語

---

前言

為了更系統全面、明白的掌握WEB前端開發這一方面的知識，所以開了這個新的專欄筆記，來主要介紹的是WEB前端的相關概論、HTML5、CSS、JavaScript的語言環境以及相關的綜合應用。

一、Web系統

（一）Web系統的定義

Web前段開發中，前端開發指開發者編寫代碼讓網頁上為用戶呈現的頁面；而Web指Web系統，即以網站形式呈現，通過瀏覽器進行訪問，從而完成一定的功能的系統。
比如淘寶、京東、拼多多等等這些電商網站，新浪微博等等這些綜合門戶網站或者還有自己學校的教務管理系統等等，這些都是Web系統。

（二）前端和后端

后端是與數據庫進行交互，完成數據存取，即數據都被存放在數據庫中，然而有很多數據庫，目前最流行的數據庫有MySQL、Oracle、Microsoft SQL Server等等。根據前端和后端，我們可以這樣解釋，比如在淘寶上：

用戶在搜索中搜索手機，挑選好我們想要的產品后，其后端與數據庫交互，在數據庫中查找該特定產品的信息，找到該產品后由前端呈現給用戶該手機的信息，如價格、配置、評價等等，它可以以很多樣式來呈現，比如有的是視頻、圖片、音頻等等方便客戶挑選。

二、網站和網頁

從開發者的角度來說，其實網站就是文件夾，而網頁就是文件，也就是由 HTML 構成的文件。
網站是一個樹狀結構，多個網頁放在一個文件夾中，同時這個文件夾還可以嵌套很多子文件夾，如下圖：

（一）網站的開發歷程

我們把網站比作一本書，網頁就是這本書的其中一頁，它是通過超鏈接的方式組成一頁頁，超鏈接其實就是超級鏈接。

各個網頁鏈接在一起后，才能真正構成一個網站。 所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。 而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。

以學校教務系統為例，一個網站的開發首先是網站架構師進行網站的總體設計首頁以及各個版塊的子網頁部分，比如在教務系統中分為很多版塊，有選課、學生課表查詢、學生成績查詢等等；在有了整體構架后由網頁美工人員進行各個頁面的效果展示，即出該網頁的效果圖；之后由前端開發人員將美工效果即網頁的需求轉換成代碼，設計靜態頁面進行編寫代碼實現各種功能；然后是由數據架構師來進行數據庫的規劃；由后端開發人員對數據庫、應用端等等來進行開發。最后會將其形成一個網頁文件，然后被瀏覽器解析和識別展現給瀏覽的用戶，當然這里還少不了對網站的測試以及平時的維護。

（二）網頁的組成元素

這里簡單介紹幾個網頁的組成元素。
1、站標
站標即為logo，有的是文字或者圖片等等，代表該網站的名稱，一般放在網站的左上角。
2、導航欄
導航欄是必不可少的欄目，可以讓用戶快速地選擇自己的所需要的進入的頁面，同時也讓網站更加直白，當然導航欄上通過超鏈接設置文字或者圖片來進行跳轉至各個子網頁頁面。

3、表單
表單即用于采集用戶的信息，比如用戶登陸頁面。

三、瀏覽器

瀏覽器的作用就是解析網頁源代碼，渲染網頁。

四、前端技術

前端技術由三種語言組成，從三種方面結構、樣式、行為來說，分別是HTML、CSS、JavaScript。

（一）超文本標記語言（HTML）

HTML語言，也叫HTML5，HTML5是在之前HTML4.01的基礎上進行了一定的改進而來且它是互聯網的下一代標準，是來搭建網頁頁面的語言，對網頁的內容進行編寫，可以通過編寫HTML并打開瀏覽器進行解析。

（二）層疊樣式表（CSS）

CSS語言，，是用來表現HTML文件樣式、規劃網頁布局的語言，也就是來美化頁面，比如對于網頁上字體、字號、元素布局等等。

（三）JavaScript（JS）

JavaScript語言是在用戶和網頁之間進行交互，從而提升用戶體驗，要注意JavaScript 和 Java 是不同的語言。

---

結語

以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！

總結

以上是生活随笔為你收集整理的Web前端开发笔记——第一章 Web前端概论的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。