html初入 | Notion

Untitled

補充1：如何在vscode中開啟全部資料夾？

Untitled

直接將整包資料夾丟入即可

橘色方框代表著html

Untitled

補充：斜體字代表無固定分頁，需要點兩下才能pin上

<aside> 🐙 可安裝的vscode套件擴充：

. Chinese (Traditional) Language Pack for Visual Studio
1. VScode繁體中文安裝包
Bracket Pair Colorization Toggler
1. 通過不同顏色來標示成對的括號，並允許用戶快速開啟或關閉這個功能。
Auto Rename Tag
1. 可以自動同步修改HTML或XML標籤的開始和結束標籤，更改一個標籤的名稱時，另一個標籤會自動更新。
Live server：它會幫使用者自動開啟一個服務器，保存的時候便自動刷新瀏覽器頁面
open in browser
1. 用於在瀏覽器中打開當前編輯器中打開的文件，使你可以立即預覽HTML文件或其他支持的文件類型的內容。 </aside>

<!-- HTML的註解長這樣-->

<HEAD>

<head> 標籤是 HTML 文件中的一個部分，用來包含網頁的元數據和設置。這些內容不會直接顯示在網頁上，但對於瀏覽器和搜尋引擎來說是非常重要的。

`<head>` 標籤的主要用途：

標題（<title>）：設定網頁在瀏覽器標籤上的顯示名稱。
```
<title>我的網站</title>
```
字符編碼（<meta charset="UTF-8">）：指定網頁使用的字符編碼。
```
<meta charset="UTF-8">
```
描述（<meta name="description" content="描述內容">）：提供網頁內容的簡短描述，有助於搜尋引擎的索引。
```
<meta name="description" content="這是一個示例網站。">
```
關鍵字（<meta name="keywords" content="關鍵字1, 關鍵字2">）：指定與網頁內容相關的關鍵字。
```
<meta name="keywords" content="HTML, CSS, JavaScript">
```
樣式表（<link rel="stylesheet" href="styles.css">）：連接外部CSS文件來設置網頁的樣式。
```
<link rel="stylesheet" href="styles.css">
```
腳本（<script src="script.js"></script>）：連接外部JavaScript文件來添加互動功能。
```
<script src="script.js"></script>
```

示例

以下是一個包含各種 <head> 元素的HTML範例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="這是一個示例網站。">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <title>示例網站</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <h1>歡迎來到示例網站</h1>
</body>
</html>

<head> 標籤的主要用途：

示例

`<head>` 標籤的主要用途：