學習 Web 開發基礎知識——為初學者解釋 html css javascript

Home >> Blog >> 學習 Web 開發基礎知識——為初學者解釋 html css javascript

學習 Web 開發基礎知識——為初學者解釋 html css javascript

如果您正在學習 Web 開發，您會遇到 HTML、CSS 和 JavaScript 等術語。這些通常被稱為 Web 的構建塊。

這三個工具主導著 Web 開發。每個庫或工具似乎都以 HTML、CSS 和 JS 為中心。所以如果你想成為一名網絡開發者，你需要好好學習它們。

您還會發現網站大多是使用這三種語言構建的。

但是您可能想知道每個是什麼以及它的真正用途。是什麼讓這些語言如此特別和重要？是什麼讓它們如此無處不在，以至於您忍不住在每個基於 Web 開發的教程和主題中看到它們？

好吧，現在你不再需要懷疑了。

在本文中，我將解釋什麼是 HTML、CSS 和 JavaScript 的基礎知識，它們如何使 Web 工作，以及它們各自的作用。

什麼是互聯網？

互聯網只是一個相互通信以發送和接收數據（信息）的計算機網絡。

互聯網上的每台計算機都可以通過稱為IP 地址的唯一編號進行區分和定位。IP 地址如下所示：168.212.226.204

什麼是網絡？

網絡是互聯網的一個子集。

與其他所有計算機網絡一樣，Web 由兩個主要組件組成：Web 瀏覽器客戶端和 Web 服務器。

客戶端請求數據，服務器共享或提供其數據。為此，雙方必須達成協議。該協議稱為應用程序編程接口或簡稱為API。

但是必須將這些數據整理和格式化為具有廣泛技術經驗和能力的最終用戶可以理解的形式。

這就是 HTML、CSS、JavaScript 和 Web 開發的整個概念發揮作用的地方。

什麼是 HTML？

HTML 代表超文本標記語言。

Dictionary.com將標記定義為：

一套詳細的說明，通常寫在要排版的手稿上，涉及字體樣式、頁面構成等。

因此，您可以將 HTML 視為在打印（顯示給您）之前用於創建有關樣式、類型、格式、結構和網頁構成的詳細說明的語言。

但是在 Web 開發的上下文中，我們可以將術語“打印”替換為“渲染”作為更準確的術語。

HTML 可幫助您將頁面結構化為段落、部分、標題、導航欄等元素。

為了說明頁面的外觀，讓我們創建一個基本的 HTML 文檔：

< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< meta http-equiv="X-UA-Compatible" content="ie=edge">
< link rel="stylesheet" href="./styles.css">
< title>Document< /title>
< /head>
< body>
< h1>This is a first level heading in HTML. With CSS, I will turn this into red color< /h1>
< h2>This is a second level heading in HTML. With CSS, I will turn this into blue color< /h2>
< h3>This is a third level heading in HTML. With CSS, I will turn this into green color< /h3>
< p>This is a < em>paragragh< /em> As you can see, I placed an empahisis on the word "paragraph". Now, I will change also
the background color of the word "paragraph" to black, and its text color to green, all with just CSS. /p>
< p>The main essence of this tutorial is to:< /p>
< ul>
< li>Show you how to format a web document with HTML< /li>
< li>Show you how to design a web page with CSS< /li>
< li>Show you how to program a web document with JavaScript< /li>
< /ul>
< p>Next, I am going to add the following two numbers and display the result, all with JavaScript

< p>First number:< span id= "firstNum">2< /span> < br>< /p>
< p>Second number: < span id= "secondNum">7< /span> < /p>
< p>Therefore, the sum of the two of those numbers is: < span id= "answer">(placeholder for the answer)< /span>< /p>
< input type="button" id="sumButton" value="Click to add!">
< /body>

這就是您可以僅使用 HTML 格式化和構造文檔的方式。如您所見，此標記包含一些 Web 元素，例如：

• 1 級標題h1
• 2 級標題h2
• 3 級標題h3
• 一個段落 p
• 帶有項目符號的無序列表 ul li
• 一鍵輸入input
• 以及整個頁面body

這就是上面的標記在 Web 瀏覽器上呈現的內容：

您還可以為這些元素添加屬性，您可以使用這些屬性來識別元素並從站點的其他位置訪問它們。

在我們的示例中，我們將id屬性設置為所有三個span元素。這將幫助我們從我們的 JavaScript 訪問它們，您將在後面看到。

將此屬性與您的社交媒體用戶名相同。使用此名稱，其他人可以在社交媒體上找到您。並且某人也可以用這個名字提及您或提及您（您可以在帖子中被標記，等等）。

但是，此頁面非常基本且沒有吸引力。如果您構建的不是演示，則需要添加一些基本樣式以使其更美觀。我們可以用 CSS 做到這一點。

想了解更多關於 HTML 的信息嗎？您可以從 freeCodeCamp 的響應式網頁設計認證和Beau Carnes 全新的完整 HTML 課程開始。

什麼是 CSS？

HTML 是一種用於格式化/構造網頁的標記語言，而 CSS 是一種設計語言，用於使您的網頁看起來漂亮和美觀。

CSS 代表Cascading Style Sheets，您可以使用它來改善網頁的外觀。通過添加周到的 CSS 樣式，您可以讓最終用戶查看和使用您的頁面更具吸引力和愉悅感。

想像一下，如果人類只是被製造成有骨骼和裸露的骨頭——那會是什麼樣子？如果你問我不好。所以 CSS 就像我們的皮膚、頭髮和一般的物理外觀。

您還可以使用 CSS 通過將元素放置在頁面的指定區域來佈局元素。

要訪問這些元素，您必須“選擇”它們。您可以選擇單個或多個 Web 元素並指定您希望它們的外觀或位置。

管理此過程的規則稱為CSS選擇器。

使用 CSS，您可以設置元素的顏色和背景，以及字體、邊距、間距、填充等等。

如果您還記得我們的示例 HTML 頁面，我們的元素非常不言自明。例如，我說過我會將一級標題的顏色更改h1為紅色。

為了說明 CSS 是如何工作的，我將分享將三級標題的背景顏色分別設置為紅色、藍色和綠色的代碼：

h1 {
background-color: #ff0000;
}

h2 {
background-color: #0000FF;
}

h3 {
background-color: #00FF00;
}

em {
background-color: #000000;
color: #ffffff;
}

應用上述樣式後，我們網頁的外觀將變為：

很酷，對吧？

我們通過“選擇”它們來訪問我們想要處理的每個元素。選擇頁面中的h1所有級別 1 標題，h2選擇級別 2 元素，依此類推。您可以選擇所需的任何單個 HTML 元素，並指定您希望它的外觀或定位方式。

想了解更多關於 CSS 的信息嗎？您可以查看freeCodeCamp 的響應式網頁設計認證的第二部分以開始使用。

什麼是 JavaScript？

現在，如果 HTML 是標記語言，CSS 是設計語言，那麼 JavaScript 就是編程語言。

如果你不知道什麼是編程，想想你在日常生活中採取的某些行動：

當你感覺到危險時，你會逃跑。當你餓了，你就吃。累了就睡覺。當你冷的時候，你會尋找溫暖。穿過繁忙的道路時，您會計算車輛與您之間的距離。

您的大腦已被編程為在發生某些事情時以某種方式做出反應或做某些事情。以同樣的方式，您可以對網頁或單個元素進行編程，使其以某種方式做出反應，並在發生其他事情（事件）時執行某些操作。

您可以對動作、條件、計算、網絡請求、並發任務和許多其他類型的指令進行編程。

您可以通過文檔對像模型 API (DOM) 訪問任何元素，並根據需要進行更改。

DOM 是加載到瀏覽器中的網頁的樹狀表示。

多虧了 DOM，我們可以使用諸如getElementById()從網頁訪問元素之類的方法。

JavaScript 允許你讓你的網頁“思考和行動”，這就是編程的全部內容。

如果您還記得我們的示例 HTML 頁面，我提到過我將把頁面上顯示的兩個數字相加，然後在佔位符文本的位置顯示結果。一旦單擊按鈕，計算就會運行。

此代碼說明瞭如何使用 JavaScript 進行計算：

function displaySum() {
let firstNum = Number(document.getElementById('firstNum').innerHTML)
let secondNum = Number(document.getElementById('secondNum').innerHTML)

let total = firstNum + secondNum;
document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;
}

document.getElementById('sumButton').addEventListener("click", displaySum);

還記得我告訴過您的有關 HTML 屬性及其用途的內容嗎？這段代碼就是這樣顯示的。

該displaySum函數從網頁中獲取這兩個項目，將它們轉換為數字（使用 Number 方法），將它們相加，並將它們作為內部值傳遞給另一個元素。

我們能夠在 JavaScript 中訪問這些元素的原因是我們在它們上設置了獨特的屬性，以幫助我們識別它們。

所以多虧了這個：

// id attribute has been set in all three

< span id= "firstNum">2 < br>
...< span id= "secondNum">7 < br> ...... < span id= "answer">(placeholder for the answer)< /span>

我們能夠做到這一點：

//getElementById will get all HTML elements by a specific "id" attribute
...
let firstNum = Number(document.getElementById('firstNum').innerHTML)
let secondNum = Number(document.getElementById('secondNum').innerHTML)

let total = firstNum + secondNum;
document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;

最後，單擊按鈕後，您將在新更新的頁面上看到兩個數字的總和：

如果您想開始使用 JavaScript，可以查看 freeCodeCamp 的JavaScript 算法和數據結構認證。你可以使用這個很棒的 JS 入門課程來補充你的學習。

如何將 HTML、CSS 和 JavaScript 放在一起

我們一起使用這三種語言來格式化、設計和編程網頁。

當您將一些帶有超鏈接的網頁鏈接在一起時，以及它們在服務器計算機上的所有資產（如圖像、視頻等），它就會被渲染成一個網站。

這種渲染通常發生在前端，用戶可以看到正在顯示的內容並與之交互。

另一方面，數據，尤其是密碼等敏感信息，是從網站的後端存儲和提供的。這是網站的一部分，僅存在於服務器計算機上，不顯示在前端瀏覽器上。在那裡，用戶無法看到或輕鬆訪問該信息。

包起來

作為 Web 開發人員，我們用於構建網站的三種主要語言是 HTML、CSS 和 JavaScript。

JavaScript 是編程語言，我們使用 HTML 來構建網站，我們使用 CSS 來設計和佈局網頁。

然而，如今，CSS 已不僅僅是一種設計語言。您實際上可以僅使用 CSS 實現動畫和平滑過渡。

事實上，你也可以用 CSS 做一些基本的編程。例如，當您使用媒體查詢時，您可以為不同類型的屏幕（分辨率）定義不同的樣式規則。

JavaScript 也已經超越了僅在瀏覽器中使用的範圍。多虧了Node.js ，我們現在在服務器上使用它。

但基本事實仍然存在：HTML、CSS 和 JavaScript 是 Web 的主要語言。

就是這樣了。用基本術語解釋了 Web 的語言。我真的希望你能從這篇文章中得到一些有用的東西。

為了結束這篇文章，我有一些東西要分享。我最近開始了每週一次的編碼挑戰系列，旨在教初學者如何使用 JavaScript 編程。在我的博客上查看。

感謝您閱讀並很快見到您。

P/S：如果您正在學習 JavaScript，我創建了一本電子書，其中包含 50 個 JavaScript 主題和手繪數字筆記。在這裡查看。