HTML 的基礎
在本文中，我們解釋了 HTML 的基礎知識。
這解釋了主要的標籤，例如 DOCTYPE 聲明，<html>，<head> 和 <body> 標籤。它還描述了標籤、屬性和特殊字符。
YouTube Video
HTML 的基礎
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>在文件的開頭，我們聲明這是一個 HTML5 文檔，表示它遵循 HTML5 的規則。
-
<html><html>標籤是 HTML 文檔中包裹所有內容的最外層元素。每個 HTML 文件僅包含一個<html>標籤，所有其他標籤都嵌套在這個標籤內。在開頭的<html>標籤裡面的lang="en"被稱為屬性，告知瀏覽器該文檔是用英語編寫的。這有助於通知螢幕閱讀器和搜索引擎文檔的語言。 -
<head><head>標籤定義頁面的元數據（信息）。這包括頁面標題、字符編碼和響應式設計設置。響應式設計是指一種使網站或應用程序能夠在各種設備和屏幕尺寸上自適應並良好顯示的方法。這允許用戶在不同設備如智能手機、平板電腦和桌面計算機上舒適地查看內容。<meta charset="UTF-8">將文檔的字符編碼設置為 UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">是一種優化為移動設備顯示的設置。 頁面適應設備屏幕的寬度。<title>代表在浏览器标签中显示的页面标题。在此示例中，设定了标题 'Basics of HTML'。 -
<body><body>标签包含向用户显示内容的部分。在此标签中书写文本、图片、链接等。 -
<main><main>标签表示页面的主要内容。这包括标题和段落。 -
<h1><h1>标签表示页面中最重要的标题。通常<main>标签和<h1>标签在一个文档中只使用一次。 -
<p><p>标签表示一个段落。 -
<!-- Comment -->你可以用这种格式在 HTML 中写注释。 由於客戶端 HTML 可以被任何人查看，請勿在註釋中包括密碼或 API 金鑰等敏感信息。
HTML 有許多標籤，但在此重點注意以下幾點。一个 HTML 文件由一个 DOCTYPE 声明和一个 <html> 标签组成。<html> 标签包含一个 <head> 标签和一个 <body> 标签。在 HTML 中，所有标签都包含在 <html> 标签内，通过父子和兄弟关系表达文本结构，类似于树状结构。在編寫 HTML 時，也要關注文檔結構。
標籤和屬性
接下來，我們來看看 HTML 的標籤和屬性。
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->標籤用角括號（<、>）包圍，通常由一對開放標籤和閉合標籤組成。然而，也有一些單個標籤，如<meta>標籤和<img>標籤，不包含內容。單個標籤不需要閉合標籤。
標籤可以擁有屬性，這些屬性為標籤提供附加資訊。屬性寫在開放標籤內，格式為 attributeName="value"。
在這裡，<div> 被稱為標籤，而 <div>內容</div> 被稱為元素。
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>HTML中的常見屬性包括id、class和style。id屬性用於賦予元素一個唯一的標識符，且在一個頁面中只能有一個元素擁有相同的id。這在使用JavaScript或CSS操縱特定元素時很有用。class屬性允許您通過分配類名來使用CSS或JavaScript對多個元素進行分組。您可以將相同的類分配給多個元素，允許樣式共享。style屬性指定了元素的內聯CSS樣式。通常，樣式是在外部樣式表或<style>標籤內定義的，但當您想直接為個別元素指定樣式時會使用此屬性。
HTML 中的特殊字符
接下來，我們來探討 HTML 中的特殊字符。
在 HTML 中，有一些特殊字符用於顯示特定符號和字符。這些特殊字符稱為實體。特殊字符以&（和號）開頭，後跟名稱或數字，以;（分號）結尾。
HTML 代表性的特殊字符
以下是一些常見的特殊字符。
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
使用 HTML 特殊字符的示例
特別是，角括號（<、>）和雙引號需要在HTML中正確使用。
在 HTML 中，像尖括號 (<, >) 和雙引號應該表示為特殊字符，如下所示。
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML 版本
讓我們在這裡看看HTML的版本。
HTML的版本已經演變為定義網頁的結構和功能。以下是主要版本：。
-
HTML 1.0 (1993)
第一個HTML版本只有非常基本的標記功能。它定義了鏈接、標題、段落和列表等元素。
-
HTML 2.0 (1995)
第一個標準化版本，增加了更多元素，包括對表單和表格的支持。
-
HTML 3.2 (1997)
增加了更多佈局功能，允許嵌入樣式元素和腳本。此外，使用
<table>元素的佈局變得很常見。 -
HTML 4.01 (1999)
結構與表現的分離有所進展，并引入了CSS。開始建議創建符合標準的網站。此外，文檔的國際化和可訪問性得到了改善。
-
HTML5 (2014)
最新的主要版本，引入了視頻和音頻、畫布、本地存儲、地理定位和其他新API的支持。它對移動設備友好，使得可以開發更多交互式的網絡應用程式。
HTML5.2 是 2017 年推薦的 HTML 版本，是 HTML5 的改進版本。自從 HTML5.2 起，它已作為 HTML Living Standard 持續更新，而不是使用靜態版本號。
HTML 通過這些版本演變，發展成為更靈活和強大的網頁技術。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。