HTML 和 CSS 是網(wǎng)頁最基本的構(gòu)建塊，也是您成為 Web 開發(fā)人員的第一步。 HTML 提供網(wǎng)頁的布局和內(nèi)容，CSS 定義其樣式和外觀。在本教程中，我們將介紹 HTML 和 CSS 的基礎(chǔ)知識，最后，您將能夠設(shè)計(jì)在各種尺寸的設(shè)備上無縫運(yùn)行的響應(yīng)式網(wǎng)頁。
什么是 HTML？
HTML 是用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。它使用標(biāo)題、段落、圖像、鏈接、表單等 HTML 元素定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。
要開始編寫 HTML 代碼，您可以使用下面的 CodePen 演示：
代碼演示？
在左側(cè)，您將找到 HTML 源代碼，它本質(zhì)上是顯示內(nèi)容的藍(lán)圖。然后瀏覽器會(huì)將這個(gè)藍(lán)圖轉(zhuǎn)換成您在右側(cè)看到的網(wǎng)頁。
您可以直接修改源代碼，看看對顯示的網(wǎng)頁有何影響。
為 Web 開發(fā)準(zhǔn)備您的計(jì)算機(jī)
當(dāng)然，在實(shí)踐中，您不能依賴 CodePen 等工具來創(chuàng)建可用且功能齊全的 Web 應(yīng)用程序。您需要更強(qiáng)大的東西，所以，讓我們設(shè)置您的計(jì)算機(jī)進(jìn)行 Web 開發(fā)。
首先，請確保您已安裝瀏覽器。任何流行的網(wǎng)絡(luò)瀏覽器（例如 Google Chrome、Microsoft Edge、Safari 或 Firefox）都足以完成本課程。您可以從鏈接的網(wǎng)站下載并安裝瀏覽器。
此外，您還需要一個(gè)代碼編輯器來編寫和編輯代碼。 Visual Studio Code 對于初學(xué)者（以及專業(yè)人士）來說是一個(gè)不錯(cuò)的選擇。它是世界上最常用的代碼編輯器。只需從其官方網(wǎng)站下載適合您操作系統(tǒng)的安裝程序即可。
安裝 VSCode 后，請確保還安裝 Live Server 擴(kuò)展。導(dǎo)航到左側(cè)邊欄上的擴(kuò)展選項(xiàng)卡，然后在搜索框中輸入Live Server。從那里，您將能夠下載并安裝擴(kuò)展程序。
Live Server 將創(chuàng)建一個(gè)具有自動(dòng)重新加載功能的本地開發(fā)服務(wù)器。例如，創(chuàng)建一個(gè)新的工作目錄并使用 VSCode 打開它。
在此目錄下創(chuàng)建一個(gè)名為index.html的新文件。 .html 擴(kuò)展名表明這是一個(gè) HTML 文檔。輸入！在 VSCode 中，你會(huì)看到這樣的建議：
這是快速創(chuàng)建 HTML 文檔的快捷方式。您可以使用 ↑ 或 ↓ 鍵進(jìn)行導(dǎo)航。選擇第一個(gè)選項(xiàng)，應(yīng)該會(huì)生成以下代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
請注意，VSCode 窗口的右下角有一個(gè) Go Live 按鈕。
單擊此按鈕將激活Live Server擴(kuò)展。將啟動(dòng)本地開發(fā)服務(wù)器，托管您剛剛創(chuàng)建的 index.html 文件。
當(dāng)然，文件現(xiàn)在還是空的，所以你看不到任何東西。在
之間添加一些內(nèi)容和
