。通過在包含網(wǎng)頁、CSS 文件和 JavaScript 文件的 Visual Studio Code 中創(chuàng)建一個(gè)簡單的 Web 項(xiàng)目，練習(xí) Web 開發(fā)的初始步驟。 了解如何使用瀏覽器中的開發(fā)人員工具來檢查你的工作。

簡介

現(xiàn)今通過網(wǎng)站所能實(shí)現(xiàn)的事情令人印象深刻。 你可以生成可在所有設(shè)備上運(yùn)行的 Web 體驗(yàn)、添加各種媒體內(nèi)容、執(zhí)行復(fù)雜的計(jì)算， 甚至創(chuàng)建類似于原生應(yīng)用程序的應(yīng)用。

如果你有意立即開始 Web 開發(fā)，則可能會(huì)面臨一系列令人眼花繚亂的選項(xiàng)。 本模塊將展示網(wǎng)站的基本組件以及一些可用于開始 Web 開發(fā)的工具。 你將同時(shí)使用 HTML、CSS 和 JavaScript 來構(gòu)建一個(gè)網(wǎng)站，并在瀏覽器中使用開發(fā)人員工具來了解發(fā)生了什么情況。

掌握這一基礎(chǔ)知識(shí)后，你將有一個(gè)更好的背景，可用于將來在生成網(wǎng)站時(shí)做出決策。 例如，是否應(yīng)選擇 JavaScript 框架或通過創(chuàng)建自己的 JavaScript 函數(shù)來生成網(wǎng)站。

首先，讓我們看一下想要達(dá)到哪種效果。

場景

假設(shè)你是一名 Web 開發(fā)人員，你的工作任務(wù)是讓貴公司的網(wǎng)站吸引到范圍更廣泛的客戶。 為了實(shí)現(xiàn)讓客戶自定義網(wǎng)站體驗(yàn)，你決定添加對淺色和深色主題的支持。 你將創(chuàng)建一個(gè)簡單的概念證明網(wǎng)站來演示對使用 CSS 的主題的支持，并編寫 JavaScript 函數(shù)在這些主題之間進(jìn)行切換。

完成后，在選擇深色主題時(shí)，網(wǎng)站就會(huì)如本例所示：

網(wǎng)頁中有哪些內(nèi)容？

內(nèi)容、樣式和交互邏輯分別分為 HTML、CSS 和 JavaScript 文件。 新式編程中的設(shè)計(jì)原則是分離關(guān)注點(diǎn)。 有很多原因會(huì)導(dǎo)致分離關(guān)注點(diǎn)，其中兩種是簡單和重復(fù)使用。 例如，通過使用 CSS 設(shè)置 HTML 元素的樣式，可以簡化 HTML 代碼。 無需對每個(gè)元素的外觀進(jìn)行編碼，而是將 CSS 樣式應(yīng)用于頁面上的所有元素，而不考慮頁面的復(fù)雜性。 此外，還可以將多個(gè) HTML 頁面鏈接到單個(gè) CSS 文件，這有助于簡化整個(gè)網(wǎng)站的一致外觀。

練習(xí) - 設(shè)置 Web 應(yīng)用的結(jié)構(gòu)

創(chuàng)建和管理網(wǎng)站項(xiàng)目有各種方法。 根據(jù)你所擁有的特定工具以及組織偏好，會(huì)有所不同。 創(chuàng)建網(wǎng)站時(shí)，由于項(xiàng)目結(jié)構(gòu)愈發(fā)復(fù)雜，項(xiàng)目結(jié)構(gòu)隨時(shí)間變化是常見現(xiàn)象。 大型項(xiàng)目通常需要更高程度的謹(jǐn)慎和專注，以便許多人能夠理清所有內(nèi)容。 關(guān)鍵在于保持組織的相似性，這里提供了可以幫助你的常見策略。

在本單元中，你將使用 Visual Studio Code 創(chuàng)建一個(gè)小型項(xiàng)目結(jié)構(gòu)。 該項(xiàng)目包含三個(gè)文件：一個(gè) HTML 文件、一個(gè) CSS 文件和一個(gè) JavaScript 文件。 你還將添加一個(gè) Visual Studio Code 擴(kuò)展，以簡化在瀏覽器中運(yùn)行網(wǎng)站的工作。

為網(wǎng)站新建一個(gè)文件夾

1.打開 Visual Studio Code。

打開 Visual Studio Code 時(shí)，會(huì)打開“歡迎”頁。 請注意，可以在“開始”列表中創(chuàng)建新文件或打開文件夾。

如果看不到“歡迎”頁，可以通過在菜單上選擇“幫助”>“歡迎”來顯示它。 （或者，可以通過使用鍵盤快捷方式?Shift+Ctrl+P（在 Windows 計(jì)算機(jī)上）或?Shift+Cmd+P（在 macOS 上）打開“命令面板”或者通過從 Visual Studio Code 菜單中選擇“查看”>“命令面板”來顯示“歡迎”頁面。當(dāng)顯示“命令面板”時(shí)，在搜索字段中輸入“>幫助: 歡迎”打開“歡迎”頁面。）

2.在“歡迎”頁的“開始”列表中選擇“打開文件夾”，或者從 Visual Studio Code 菜單中選擇“文件”>“打開文件夾”。

打開文件夾時(shí)，操作系統(tǒng)會(huì)提供用于創(chuàng)建新文件夾的菜單選項(xiàng)。

3.導(dǎo)航到要在其中為網(wǎng)站創(chuàng)建新文件夾的位置，然后選擇“新建文件夾”。

4.將文件夾命名為 simple-website，然后選擇“選擇文件夾”。

重要！

如果出現(xiàn)“Visual Studio Code”對話框，請選擇“信任父文件夾中所有文件的作者”；這是工作區(qū)信任功能，可讓你決定項(xiàng)目文件夾是應(yīng)允許還是限制自動(dòng)執(zhí)行代碼。 你剛剛創(chuàng)建了文件夾，因此它是安全的。

創(chuàng)建一些文件

1.創(chuàng)建新文件時(shí)，從菜單中選擇“文件”>“新建文件”，或在 Windows 上使用?Control+N，或在 macOS 上使用?Command+N。

2.在 Windows 上選擇?Control+S，或在 macOS 上選擇?Command+S?來保存文件。

3.輸入?index.html?作為文件名，然后選擇“保存”。

4.重復(fù)上述步驟，再創(chuàng)建兩個(gè)文件，main.css?和?app.js。 完成后，Visual Studio Code 資源管理器中的?simple-website?項(xiàng)目文件夾應(yīng)包含以下文件：

index.html

main.css

app.js

生成網(wǎng)站時(shí)，可以在單個(gè)文件中包括所有 HTML、CSS 樣式和 JavaScript 代碼。 但是，在本練習(xí)中，你將使用 HTML 文件作為內(nèi)容結(jié)構(gòu)，使用 CSS 文件進(jìn)行樣式設(shè)置，并使用 JavaScript 文件實(shí)現(xiàn)交互性。

設(shè)置三個(gè)文件有助于組織網(wǎng)站項(xiàng)目。 將內(nèi)容、樣式和邏輯分開可以體現(xiàn)漸進(jìn)式增強(qiáng)。 即使 JavaScript 未啟用或不受客戶支持，CSS 和 HTML 將仍舊有效。 但是，如果客戶不支持 CSS，則至少會(huì)顯示 HTML 內(nèi)容。

安裝擴(kuò)展或包

可以使用擴(kuò)展市場擴(kuò)展 Visual Studio Code 的功能。 請注意，這些擴(kuò)展是社區(qū)開發(fā)的資源，對于同一類型的功能，通常存在若干解決方案。 可以在編輯器中逐個(gè)安裝擴(kuò)展，也可以使用命令行同時(shí)安裝多個(gè)擴(kuò)展。

對于 Web 開發(fā)，你現(xiàn)在只需在瀏覽器打開。 此擴(kuò)展可幫助你在默認(rèn)瀏覽器中快速打開網(wǎng)站，而不是將文件 URL 復(fù)制并粘貼到瀏覽器中。

若要安裝此擴(kuò)展，請使用以下步驟：

1.選擇垂直“活動(dòng)欄”（左窗格）上的“擴(kuò)展”圖標(biāo)。

2.在搜索框中輸入“打開方式”，然后選擇 TechER 發(fā)布的“在瀏覽器中打開”擴(kuò)展。

3.選擇“安裝”后，Visual Studio Code 將安裝擴(kuò)展。

4.單擊“活動(dòng)欄”中的頂部圖標(biāo)，或在 Windows 上使用?Control+Shift-E，或在 macOS 上使用?Command+Shift-E?切換回“資源管理器”。

練習(xí) - 將基本 HTML 添加到 Web 應(yīng)用

目前，你的網(wǎng)站中有一個(gè)空的 HTML 文件。 接下來添加一些代碼！ 目標(biāo)是使用超文本標(biāo)記語言 (HTML) 來描述客戶的瀏覽器應(yīng)顯示的 Web 頁面。 擁有一個(gè)初始模板不是很好嗎？ 使用編輯器方便填寫一些典型樣板文件或 HTML 結(jié)構(gòu)。

在本單元中，你將添加基本的 HTML 內(nèi)容，在瀏覽器中打開 HTML 頁面，并第一次看到開發(fā)人員工具。

添加一些 HTML 代碼

Visual Studio Code 為即學(xué)即會(huì)的 HTML 編程提供基本支持。 其中包括語法突出顯示、IntelliSense 的智能完成功能以及可自定義的格式設(shè)置。

1.在 Visual Studio Code 中打開你的網(wǎng)站，然后在“資源管理器”中選擇?index.html?文件來打開?index.html?文件。

2.在?index.html?頁中鍵入?html:5，然后選擇?Enter。 HTML5 模板代碼將添加到文件中。

備注！

如果未將 HTML5 模板代碼添加到?index.html?文件中，請嘗試關(guān)閉并重新打開該文件。

3.按如下所示修改模板代碼。 在 Windows 上選擇?Control+S，或在 macOS 上選擇?Command+S?來保存文件。

HTML 有各種版本。 doctype<!DOCTYPE html>?指示此 HTML 文檔包含 HTML5 代碼。

雖然我們不打算深入探討所有 HTML 元素的含義，但我們想要指出一些重要的事項(xiàng)。?meta?標(biāo)記指示通常不會(huì)對查看者顯示的元數(shù)據(jù)信息，除非他們在其瀏覽器中查看源代碼。 元元素或標(biāo)記提供關(guān)于網(wǎng)頁的描述性信息。 例如，它們可幫助搜索引擎處理網(wǎng)頁中要在搜索結(jié)果中返回的信息。

UTF-8 字符集 (charset) 可能看似無關(guān)緊要，但對于確定計(jì)算機(jī)如何解釋字符至關(guān)重要。 如果缺少字符集的元數(shù)據(jù)，可能會(huì)導(dǎo)致安全受到影響。 字符集屬性背后存在很多歷史記錄和技術(shù)信息，但本練習(xí)重要的一點(diǎn)是，Visual Studio Code?樣板提供一些合理的默認(rèn)值。

編輯標(biāo)頭

HTML 代碼中的?<head>?元素包含瀏覽器標(biāo)簽頁中不可見的網(wǎng)站相關(guān)信息。

元數(shù)據(jù)定義有關(guān) HTML 文檔的數(shù)據(jù)，例如字符集、腳本以及在其中打開網(wǎng)頁的瀏覽器。

網(wǎng)頁的標(biāo)題顯示在瀏覽器窗口的頂部，在某些方面具有重要意義。 例如，標(biāo)題用于搜索引擎并在其中顯示。 我們來添加標(biāo)題。

?重要！

從現(xiàn)在開始，省略號(hào) (…) 表示之前聲明的代碼居前或居后。 應(yīng)該提供足夠的代碼作為上下文，以便對工作進(jìn)行必要的更改或更新，但不應(yīng)將省略號(hào)復(fù)制并粘貼到代碼中。

1.在編輯器中，修改?<title>?元素，使其類似于以下示例。

若要向網(wǎng)頁上的 HTML 元素應(yīng)用樣式，可以直接在網(wǎng)頁的標(biāo)頭中編寫 CSS 代碼。 在 HTML 頁面中編寫 CSS 稱為“內(nèi)部 CSS”。 但是，最好將 HTML 結(jié)構(gòu)與 CSS 樣式分離。 獲得一個(gè)稱為“外部 CSS”的單獨(dú) CSS 頁面。 代碼簡潔且已劃分時(shí)，往往更易于閱讀。 可以使用一個(gè)或多個(gè)外部樣式表為多個(gè) Web 頁面提供服務(wù)。 無需使用重復(fù)的 CSS 代碼更新每個(gè) HTML 頁面，可以對單個(gè) CSS 文件進(jìn)行更改，并將這些更新應(yīng)用到所有相關(guān)網(wǎng)頁。 我們來鏈接到外部樣式表。

1.在?Visual Studio Code?編輯器中，在?<title>?元素后面添加一個(gè)空白行，鍵入?link，然后選擇?Enter。?Visual Studio Code?應(yīng)將以下行添加到?index.html?文件中。

2.將?href=?更新為?href="main.css"，并選擇?Control+S?(Windows) 或?Command+S?(macOS) 保存文件。

編輯正文

接下來立即開始填寫?<body>?元素。

<body>?元素包含你的客戶在其瀏覽器中可見的網(wǎng)站內(nèi)容。

1.在?<body>?元素內(nèi)部添加一個(gè)標(biāo)題<h1>?元素，后跟一個(gè)段落<p>?元素，然后創(chuàng)建包含多個(gè)列表項(xiàng)<li>?元素的無序列表<ul>。

2.編輯代碼或復(fù)制并粘貼，以便其外觀類似于以下示例。

ID 屬性（在?<p>?元素中使用）可用于樣式化單個(gè)元素，而類屬性（在?<li>?元素中使用）用于樣式化同一類的所有元素。

在繼續(xù)下一步之前，請確保選擇?Control+S?或?Command+S?保存文件。

用瀏覽器打開

可以通過在瀏覽器中打開 HTML 文件在本地預(yù)覽網(wǎng)頁。 你的瀏覽器指向的不是以?https://?開頭的網(wǎng)站地址，而是指向與?C:/dev/simple-website/index.html?類似的本地文件路徑。

1.若要使用 Visual Studio Code 進(jìn)行預(yù)覽，請右鍵單擊?index.html?并選擇“使用默認(rèn)瀏覽器打開”，或選擇?index.html?文件并使用鍵盤快捷方式?Alt+B。

重要！

如果遇到問題，請確保直接右鍵單擊文件名圖標(biāo)或文本。 如果出現(xiàn)“Visual Studio Code”對話框，請選擇“是，我信任作者”；這是工作區(qū)信任功能，可讓你決定項(xiàng)目文件夾是否應(yīng)允許或限制自動(dòng)執(zhí)行代碼。 你剛剛創(chuàng)建了文件，因此它是安全的。

使用默認(rèn)瀏覽器打開網(wǎng)頁。

使用開發(fā)人員工具查看頁面

可以通過使用瀏覽器中的開發(fā)人員工具檢查網(wǎng)頁。 一起來試一試。

1.右鍵單擊網(wǎng)頁并選擇“檢查”以打開開發(fā)人員工具，或嘗試以下快捷方式：

??按“開發(fā)人員工具”的鍵盤快捷方式?F12。

? 在 Windows 和 Linux 上按?Ctrl+Shift+I，在 Mac 上按?Option+Command+I。

這些鍵盤快捷方式適用于 Microsoft Edge、Chrome 和 Firefox。 如果你使用的是 Safari，請參閱?Web 開發(fā)工具。 安裝后，選擇“Safari”>“偏好設(shè)置”，然后選擇“高級(jí)”。 在窗格底部，選擇“在菜單欄中顯示開發(fā)菜單”復(fù)選框。 選擇“開發(fā)”>“顯示 Web 檢查器”。 有關(guān)詳細(xì)信息，請查看 Safari Web 檢查器文檔。

要了解有關(guān)打開開發(fā)人員工具和主要可用功能的更多信息，請查看?DevTools 工具概述一文。

2.選擇“元素”選項(xiàng)卡。

3.將鼠標(biāo)移到“元素”選項(xiàng)卡中顯示的 HTML 元素上，然后展開各種元素的內(nèi)容。

開發(fā)人員工具中的“元素”選項(xiàng)卡將顯示在瀏覽器中呈現(xiàn)的文檔對象模型 (DOM)。 調(diào)試時(shí)，查看瀏覽器如何解釋你的源代碼通常十分重要。

檢查瀏覽器中的頁面可提供各種有用信息，有助于排查問題。 還可以使用檢查器查看 CSS 的詳細(xì)信息，如下一節(jié)所示。

練習(xí) - 使用 CSS 設(shè)置 HTML 樣式

使用級(jí)聯(lián)樣式表 (CSS) 可以指定頁面外觀。 基本思想就是定義在 HTML 頁面中使用的元素的樣式。 HTML 元素定義內(nèi)容，而 CSS 樣式定義此內(nèi)容的樣式。

例如，你可以應(yīng)用圓角或?yàn)樵靥峁u變背景。 或者，你可以使用 CSS 來指定超鏈接在你與它們交互時(shí)的樣式和響應(yīng)方式。 你還可以執(zhí)行復(fù)雜的頁面布局和動(dòng)畫效果。

你可以將樣式應(yīng)用于特定元素、特定類型的所有元素，或使用類來設(shè)置許多不同元素的樣式。

在本練習(xí)中，你將對 HTML 頁面元素應(yīng)用 CSS 樣式并添加一些 CSS 代碼來定義你的淺色和深色主題。 然后，將在瀏覽器的開發(fā)人員工具中檢查結(jié)果。

外部 CSS

在關(guān)于 HTML 的上一個(gè)單元中，你已從 HTML 鏈接到外部 CSS 文件。