網站元素概觀 從把妹角度理解前後端如何和平相處

網站由網頁組成，網頁是構成網站的基本元素，網頁會是以檔案形式存放在伺服器。

網頁構成

1. HTML：透過標籤描述網頁架構與組成
2. CSS：視覺呈現，像是設定設置版面編排、文字背景顏色等
3. JavaScript：呈現網頁動態效果動作與各種互動功能

用比較生活化的例子來譬喻，身為一個男孩子要怎麼讓女孩子能夠認識你呢?

HTML 是什麼?

HTML 在網頁中是透過標籤來描述架構與組成。

舉例來說 #兒子 #哥哥 #舅舅 #工程師 #公民 都可以用來描述一個人的組成。

像我朋友在某個狗狗交友軟體上的 Tag 就會是

#學習建立持續不斷的踏實 #學著有原則的生活
#喜歡吃火鍋 #喜歡吃漢堡 #喜歡吃焗烤
#喜劇片 #韓劇 #慢跑 #山林踏青
#棉花糖 #吳汶芳 #白安 #五月天 #八三夭
#喜歡讀非專業和文學以外的書

CSS 是什麼?

在網頁中用來描述可以變換的外顯特質，來控制網頁當下呈現的樣貌。

舉例來說短頭髮、灰色衣服、半框眼鏡、網路產業的工程師，這些特質能描繪出來這個人目前的外貌。

JavaScript 是什麼?

JavaScript 在網頁中的腳色是著重在賦予網頁動態效果與互動功能。

以我朋友的例子來說，像是可以指定時間接送可愛女生上下班、可以天天陪喜歡的女朋友吃晚餐等等。

網頁分類

網頁依照實際應用型態來分會分成靜態網頁和動態網頁兩種，以男女之間相處的例子來譬喻

• 靜態網頁: 給相親照或是交友軟體上所看到預先編輯好的呈現樣貌
• 動態網頁: 實體約了見面，會在不同的場地、時間、氣氛做出不同的表現

靜態網頁

沒有套用任何程式單純顯示內容，適合用在簡單比較不常改變的頁面，通常也不會有網站的後端。

優點: 撰寫容易、通常效能較佳
缺點: 若長期會有穩定增加需求則較難維護

以部落格來說，一般是透過像是 hugo 或是 hexo 這類靜態網頁產生工具將文檔產生成靜態網頁構成的網站，以追女生來說，用一個公版介紹灑網捕魚也許就不是一個好方式。

動態網頁

動態網站適用資料內容多元，更新快速的網頁，透過程式方便管理網站也大幅降低維護成本。

一般會和後端進行互動，以實際應用也會區分成伺服器渲染 (Server Render) 和單頁應用 (Single Page Application) 兩種形式

• 伺服器渲染 (Server Render): 網頁在伺服器端進行相關運算及資料整理後才將生成的靜態網頁送回使用者專
• 單頁應用 (Single Page Application): 網頁只先載入必要的框架，等到使用者真的索取資料時，才將資料套用在前端的網頁介面中

動態，大概就屬於能快速認識女孩子並且交到女朋友的方式。動態的每天更換自我狀態或介紹 (也許參考時事也許星座運勢)，並且每天都透過各種通路去找女孩子聊天，去嘗試獲得不同的回應。

網站架設

• 靜態網站: 只需要將檔案放置在伺服器上，並透過 DNS 設定公開在網路上提供使用即可
• 動態網站: 通常會搭配後端使用，所以需要額外架設後端程式以及資料庫的運行環境，以 WordPress 來說就是 PHP 跟 MySQL，架設完成後才能進行 DNS 的設定

• ← 上一篇
• 下一篇 →