HTML 與 CSS 基礎知識

HTML 和 CSS 是網頁最基本的構建塊，也是您成為 Web 開發人員的第一步。 HTML 提供網頁的佈局和內容，CSS 定義其樣式和外觀。在本教程中，我們將介紹 HTML 和 CSS 的基礎知識，最後，您將能夠設計在各種尺寸的裝置上無縫運行的響應式網頁。

什麼是 HTML？

HTML 是用來建立網頁的標準標記語言。它使用標題、段落、圖像、連結、表單等 HTML 元素定義網頁的結構和內容。

要開始編寫 HTML 程式碼，您可以使用下面的 CodePen 示範：

程式碼示範？

在左側，您將找到 HTML 原始碼，它本質上是顯示內容的藍圖。然後瀏覽器會將這個藍圖轉換成您在右側看到的網頁。

您可以直接修改原始程式碼，看看對顯示的網頁有何影響。

為 Web 開發準備您的計算機

當然，在實踐中，您不能依賴 CodePen 等工具來創建可用且功能齊全的 Web 應用程式。您需要更強大的東西，所以，讓我們設定您的電腦進行 Web 開發。

首先，請確保您已安裝瀏覽器。任何流行的網頁瀏覽器（例如​​ Google Chrome、Microsoft Edge、Safari 或 Firefox）都足以完成本課程。您可以從連結的網站下載並安裝瀏覽器。

此外，您還需要一個程式碼編輯器來編寫和編輯程式碼。 Visual Studio Code 對於初學者（以及專業人士）來說是一個不錯的選擇。它是世界上最常用的程式碼編輯器。只需從其官方網站下載適合您作業系統的安裝程式即可。

安裝 VSCode 後，請確保也安裝 Live Server 擴充功能。導覽至左側邊欄上的擴充選項卡，然後在搜尋框中輸入Live Server。從那裡，您將能夠下載並安裝擴充功能。

Live Server 將建立一個具有自動重新載入功能的本機開發伺服器。例如，建立一個新的工作目錄並使用 VSCode 開啟它。

在此目錄下建立一個名為index.html的新檔案。 .html 副檔名表示這是一個 HTML 文件。輸入！在 VSCode 中，你會看到這樣的建議：

這是快速建立 HTML 文件的捷徑。您可以使用 ↑ 或 ↓ 鍵進行導航。選擇第一個選項，應該會產生以下程式碼。

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  

請注意，VSCode 視窗的右下角有一個 Go Live 按鈕。

點選此按鈕將啟動Live Server擴充。將啟動本機開發伺服器，託管您剛剛建立的 index.html 檔案。

當然，文件現在還是空的，所以你看不到任何東西。在

之間加入一些內容和標籤。

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  
    Hello, world!
  

儲存更改，網頁將自動重新整理為新內容。

HTML 文件的結構

典型的 HTML 文件總是具有以下結構：

  
    . . .
  
  
    . . .
  

;標籤定義文件類型。當網頁瀏覽器遇到時，它就會明白該頁面應該根據最新版本的HTML標準HTML5的規格來解析和顯示。這可以確保現代瀏覽器正確解釋網頁的內容和佈局。

檔案中的所有其他內容都應包含在 內元素，由開始標記 () 和結束標記 () 定義。

lang 稱為屬性，其值為「en」。這告訴瀏覽器和搜尋引擎英語是該網頁使用的主要語言。

在 內元素，有兩個子元素，

和和。 包含有關 HTML 文件的元資料和其他資訊。此資訊不會顯示在瀏覽器中，但通常被搜尋引擎用於 SEO（搜尋引擎優化）目的。 另一方面，

包含用戶可見的網頁的主要內容，因此，它也是我們在本課程中要重點關注的 HTML 文件的部分.

元素和屬性

讓我們仔細看看前面的範例，並注意到 HTML 文件包含嵌套結構中的不同元素。在 HTML 中，大多數元素都有開始標籤和結束標籤：

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  

在這種情況下，是開始標籤，是結束標籤，它們一起形成一個 HTML 元素。元素可以在開始標籤和結束標籤之間保存文字內容。

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  
    Hello, world!
  

元素也可以包裹其他元素，形成嵌套結構。

  
    . . .
  
  
    . . .
  

在開始標籤內，您可以定義屬性，這些屬性用於指定元素的附加信息，例如其類別、id 等。

<tag>. . .</tag>

屬性通常位於鍵/值對中，且值必須始終括在符合的引號（雙引號或單引號）內。

這些一般格式有一些例外。例如，
建立換行符的元素不需要結束標籤。某些屬性（例如 multiple）不需要值。我們將在本課程稍後遇到這些異常時討論它們。

但是，您應該記住，如果某個元素確實需要結束標記，那麼永遠不應該將其遺漏。在大多數情況下，網頁仍然可以正確呈現，但隨著 HTML 文件的結構變得更加複雜，可能會出現意外錯誤。如果您有興趣，請查看我們編寫 HTML 和 CSS 的最佳實踐指南。

進一步閱讀

• 介紹級聯樣式表 (CSS)
• JavaScript 簡介
• 什麼是響應式設計
• 如何使用 HTML 和 CSS 建立互動式表單

以上是HTML 與 CSS 基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！