超文本標記語言和級聯樣式表簡介

在進行 Web 開發時，理解超文本標記語言 (HTML) 和級聯樣式表 (CSS) 之間的連結至關重要。 HTML 構成網站的框架和實質內容，而 CSS 轉變 內容。當您在 Designer 畫布上製作/建置時，Webflow 會建立此程式碼。

在本課程中，您將發現：

1. 程式碼在瀏覽器中渲染的過程
2. 如何檢查網站程式碼
3. HTML 和 CSS
4. 建立設計，同時 Webflow 為您產生整潔的程式碼

瀏覽器中的渲染過程

瀏覽網站時，您的瀏覽器會解釋程式碼以在螢幕上顯示網站的內容和結構。

探索網站程式碼

您可以透過在幕後檢查網站的程式碼來深入研究它。大多數瀏覽器允許您檢查和臨時編輯原始程式碼。

要在 Chrome 上檢查網站的程式碼，您有兩個選項：

• 右鍵單擊並選擇 檢查 從內容選單
• 按 控制 + 轉移 + 我 （在 Windows 上）或 命令 + 選項 + 我 （在蘋果機上）

您可以修改檢查器中的程式碼以暫時變更瀏覽器中顯示的內容。這些變化是局部的（即僅限於 你的 瀏覽器），並且會在刷新頁面時消失，其他網站訪客看不到。

HTML 和 CSS

HTML 定義網站的內容和結構，而 CSS 規定內容的外觀。將網站視覺化為住宅：HTML 代表結構和基礎，CSS 代表配色方案。

超文本標記語言 (HTML)

HTML 管理網站的內容並向瀏覽器通知頁面元素，包括標題、段落、連結和圖像。

在早期，網頁設計人員必須使用內聯樣式逐行設定 HTML 內容的樣式，這給更新網站範圍的樣式（例如字體系列或大小）帶來了挑戰。然而，現在已經使用CSS了。

層疊樣式表 (CSS)

CSS 管理網站內容的外觀（例如，顏色、邊框、大小、定位、排版等）。它將先前內聯應用的樣式資訊合併到單獨的樣式 document 中，從而透過類別啟用群組樣式。對 CSS 檔案中的類別或 HTML 標記所做的變更將反映在任何關聯的元素上。

挑戰：增加程式碼複雜性

在早期的網路時代，設計師專注於基本標籤和屬性。隨著科技的進步，網路的複雜性不斷增加，個人化的線上體驗也隨之而來。

適應這些變化需要繼續教育。隨著網頁設計和開發的可能性不斷擴大，幕後的情況變得更加複雜。

如今，Web 開發人員使用多種語言和工具（例如HTML、CSS、JS、Java、程式碼庫、版本控制（如GitHub 等）），同時解決各種考慮因素，如瀏覽器不一致、裝置變更、效能增強、SEO 等。

設計概念，同時 Webflow 自動化整潔編碼

理解 HTML 和 CSS 原則至關重要，因為它們構成了網頁設計的核心框架。儘管如此，借助 Webflow，手動 HTML 和 CSS 編碼已成為過去。

Webflow 使網頁設計人員和開發人員能夠透過操作 Webflow 畫布上的內容來更有效地建立網站，直接影響網站的生產就緒程式碼 — HTML 和 CSS。了解有關 Webflow Designer 中設計的更多資訊。