IT課程 HTML基礎 009_Hello HTML
什麼是 HTML ？
網絡，或更具體的說，萬維網（World Wide Web）是由很多鏈接在一起的文檔和資源構成的。這些文檔和資源是用HTML編寫的，它們被稱為網頁。HTML是網頁的基礎，定義了網頁的結構和內容。
當你在瀏覽器中輸入一個網址（例如，www.zhaojian.net）時，瀏覽器會發送一個請求到提供該網頁的服務器。服務器會響應這個請求，並將請求的網頁（也就是一些HTML）發送回瀏覽器。然後，瀏覽器會解析這些HTML，並將它們顯示為你通常看到的網頁。
HTML（HyperText Markup Language，超文本標記語言）是一種用於創建和設計網頁結構的標記語言。HTML 由一系列的元素（element）組成，這些元素可以用來包圍不同部分的內容，使其以某種方式呈現或者工作。一對標籤（tag）可以為一段文字或者一張圖片添加超鏈接，將文字設置為斜體、粗體、段落、列表等。
[!小結]
- HTML 不是一種編程語言，而是一種標記語言
- HTML 文檔包含了HTML 標籤及文本（為什麼沒有圖片）內容
- HTML文檔也叫做 web 頁面、網頁
一個完整的HTML元素（element）
示例：
<p>hello HTML!</p>效果：
結構解析：
[!小結]
- 一個完整的HTML元素，由開始標籤、內容、結束標籤三部分組成；
- 開始標籤（Opening tag）：包含元素的名稱（本例為 p），被左、右角括號所包圍。開頭標籤標誌著元素開始或開始生效的地方；
- 內容（Content）：元素的內容；
- 結束標籤（Closing tag）：與開始標籤相似，只是其在元素名之前包含了一個斜杠。這標誌著該元素的結束。沒有包含關閉標籤是一個常見的初學者錯誤，它可能會產生奇特的結果。
一個完整的HTML頁面
示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello HTML</title></head><body> <p>hello HTML!</p></body></html>效果：
結構解析：
[!小結]
<!DOCTYPE html>— 聲明HTML文檔類型，文檔類型是一個歷史遺留問題，用於告訴瀏覽器該文檔的版本和類型。 HTML4 嚴格模式 DOCTYPE 聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html></html>—html元素，HTML頁面中的所有內容，有時被稱為根元素。<head></head>—head元素，它的內容對用戶不可見，其中包含例如面向搜索引擎的搜索關鍵字（keyword）、頁面描述、CSS 樣式、JavaScript文件和字符編碼聲明等。<meta charset="utf-8">—meta元素，用於提供有關 HTML 文檔的元數據。charset 屬性將你的文檔的字符集設置為 UTF-8。<title></title>—title元素。該元素設置頁面的標題，顯示在瀏覽器標籤頁上，也作為收藏網頁的描述文字。<body></body>—body元素。該元素包含期望讓用戶在訪問頁面時看到的內容，包括文本、圖像、視頻、遊戲、可播放的音軌或其他內容。<p></p>— 段落元素，表示文本的一個段落。
元素名稱 | 作用 | 示例 |
|---|---|---|
<!DOCTYPE html> | 定義 HTML 文檔的類型和版本 | <!DOCTYPE html> |
<html> | 定義 HTML 文檔的根元素 | <html lang="en"> |
<head> | 包含文檔的元信息，如標題、字符集聲明、樣式和腳本鏈接等 | <head>...</head> |
<title> | 定義文檔的標題，顯示在瀏覽器的標題欄或頁籤上 | <title>My Web Page</title> |
<meta> | 提供有關文檔的元信息，如字符集、視口設置、關鍵詞等 | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | 引用外部資源，如樣式表和圖標 | <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
<style> | 內部定義文檔的樣式 | <style>body { font-family: Arial, sans-serif; }</style> |
<script> | 定義或引用腳本，可以包含在文檔中或引用外部腳本 | <script src="script.js"></script> |
<noscript> | 定義在瀏覽器不支持腳本時顯示的內容 | <noscript>Sorry, your browser does not support JavaScript.</noscript> |
<base> | 指定頁面中所有相對鏈接的基本 URL | <base href="https://www.zhaojian.net/"> |
鏈接：
VS Code插件： Remote - SSH Remote Development