enjoylyingflat的部落格

今天起床我就知道完蛋惹，沒睡飽夢做到正精彩，就被鬧鐘叫醒了，可惜又忘記紀錄有趣的夢境。

起床又昏又沉，我發現有個大問題，就是時間。因為與職訓地點太遠，交通時間太長，導致一天在課堂相關的時間竟到了13小時以上，更何況回家還要練習?(不可能的)，簡單記錄一下今天發生的事，要學新東西，又要看書，還要運動，當我時間管理大師膩!

我很懷念躺平的時光，每件事都有餘裕(但沒目標又啥都不想做)，現在則感覺有點太充實，感到有壓力，有壓力就容易睡不好，雖然我已經早睡早起惹，但至少要9小時才能感覺好(現在普遍睡不到7小時)。

今天上什麼，我完全沒看，糟糕中的糟糕，躺~。每次聽到一半回神都感覺 :

因為在教基礎，但卡住了，所以我開始清雲端硬碟為了後續可以放程式碼、圖片、所以把帳號的雜物都清一清(其實是腦袋已經放空了)。

事先聲明 : 時間有限，東西亂七八糟，想到什麼就寫什麼，隨便寫，會用ai幫忙，只是紀錄並非教學。

參考網址

HTML Tutorial

問題整理

• HTML 的基本概念和用途。
• 為什麼是超文本標記語言？
• HTML 文件的結構（html、head、body）。
• 基本標籤及其功能（如 p、h1-h6、ul、li、a、img）。
• 常用的屬性（id、class、href、src）。
• 標籤能有多少種？哪些是必需的？
• 屬性能有幾個？哪些是常見的？
• 標籤與屬性的關係。
• meta 的定義和作用。
• 為什麼 meta 沒有結束標籤？
• 搜尋引擎看哪些 meta 標籤？（如 description、viewport）。
• 有 meta 和沒有 meta 的差別。
• 絕對路徑和相對路徑的差異。
• 如何用圖表表示檔案之間的關係。
• 引入 CSS 時的注意事項（檔案格式、位置）。

實做練習題

• 將一串文字改成對應的顏色，「enjoylyingflat is cute」，enjoy → 紅色，lying → 綠色 ，flat → 黃色，is → 藍色，cute → 黑色，文字維持在同一行且字體樣式維持一樣。
• 你是一個初學者設計師，請設計一個「極簡的部落格模板」，包含：主標題與副標題、一篇文章的樣板：文章標題、圖片、兩段文字內容、一個導覽列（至少有三個導覽項目，例如：首頁、關於、聯絡）、要求：所有標籤要有意義（避免使用過多的 <div>），考慮不同標籤之間的用途與結構。

HTML + CSS + JavaScript 是什麼？

!https://i.imgur.com/xsXVIVA.jpeg

HTML（HyperText Markup Language）—— 結構

• 負責什麼： 定義網頁的結構和內容。
• 比喻： 是房子的骨架，提供框架。
• 用途：用標籤來描述內容（標題、段落、圖片、表單等）

CSS（Cascading Style Sheets）—— 樣式

• 負責什麼： 美化網頁的外觀和佈局。
• 比喻： 是房子的裝飾，負責塗上顏色、安排佈局。
• 用途：控制文字顏色、背景、字體大小、間距等、實現網頁的響應式設計（適配不同設備）。

JavaScript（JS）—— 行為

• 負責什麼： 增加互動功能和動態行為。
• 比喻： 是房子的電路，讓按鈕、燈光等可以運作。
• 用途：處理按鈕點擊、滑鼠移動、表單提交等交互行為、改變 HTML 或 CSS 的內容和樣式、通過 API 與伺服器溝通，實現數據的動態更新。

如何建立一個 HTML 檔案

• 使用任何文字編輯器 : 我們使用VSCODE
• 檔案名稱自由命名（如 index.html 也可以 enjoylyingflat.html）。
• 副檔名必須是 .html，這樣系統和瀏覽器才能識別為 HTML 文件。
• 按下! 和 Tab鍵，或是 ! 和 空白鍵，儲存
• 在使用VSCODE找到剛剛建立的 HTML 檔案（例如 index.html）雙擊檔案，系統會自動用預設瀏覽器打開該檔案，或在檔案上 右鍵，選擇「打開方式」，選擇你想用的瀏覽器（例如 Chrome、Firefox、Edge 等）。
• 也可以使用 拖放 方法，將 HTML 檔案直接拖到瀏覽器窗口。

VSCODE快捷鍵

• 複製程式碼行：Shift + Alt + 向上/向下鍵
• 移動程式碼行：Alt + 向上/向下鍵
• 設定文字大小：直接調整 font size 設定
• 縮排：Tab
• 格式化文件(自動排版)：Shift + Alt + F
• 分割編輯器視窗：Ctrl + \\
• 搜尋：Ctrl + F
• 啟動偵錯：F5
• 同時編輯多個相同的變數(單個) : Ctrl + D
• 同時編輯多個相同的變數(全選) : Ctrl + Shift + L

參考網址 :

Visual Studio Code 鍵綁定

keyboard-shortcuts-windows.pdf

VSCODE套件(Extentions)

• Chinese (Traditional) - 切換成繁體中文
• Bracket Pair Colorization Toggler - 顯示成對的括號
• Auto Rename Tag - 自動同步修改 HTML 標籤的開頭和結尾
• Live Server - 本地快速啟動開發伺服器，即時預覽靜態網頁，查看修改效果

參考網址 :

Extensions for Visual Studio family of products | Visual Studio Marketplace

什麼是HTML

參考網址 :

Introduction to HTML

HTML 基礎 - 學習該如何開發 Web | MDN

HTML（HyperText Markup Language），中文「超文本標記語言」，是網頁的基礎語言，用來定義網頁的結構和內容。例如文字、圖片、清單、表格...等。

特點 :

• 標籤式語法（例如 <h1>、<p>、<img> 等）。

來看看範例

<p>enjoylyingflat is cute</p>(左邊程式碼) vs enjoylyingflat is cute(右邊輸出)

標籤（Tag）

• 定義：標籤是 HTML 的基礎語法，用於告訴瀏覽器該內容的結構和用途，標籤用 尖括號(<>) 包裹，分為「開始標籤」(Opening tag)和「結束標籤」(Closing tag)。
• 開頭標籤：<標籤名>（如<p>）。
• 結尾標籤：</標籤名>（如</p>）。
• P.S 有些標籤沒有結尾部分（如 <img> 和 <br>）。

內容（Content）

• 定義：內容是標籤包裹住的文字、圖片或其他資料，展示在網頁上給用戶看的部分。
• enjoylyingflat is cute 是用戶可以直接看到的文字，屬於內容。

元素（Element）

• 定義：

  元素是由「開始標籤 + 內容 + 結束標籤」組成的完整結構，或僅由單個標籤組成的自閉合標籤。

• 完整元素： <p> enjoylyingflat is cute </p>

• 標籤：<p> 和 </p>

• 內容：enjoylyingflat is cute

• **特殊情況：自閉合元素(**有些元素沒有內容，也不需要結束標籤，稱為自閉合元素)

三者的關係

• 標籤 : 元素的外框，用來包內容。
• 內容 : 是元素內部的資料。
• 元素 : 標籤+內容 的組合。

簡單對比表格

屬性

• 屬性是在標籤上的細節描述，描述標籤的特性或行為。
• 格式：屬性通常以 屬性名="屬性值" 的形式出現在 HTML 標籤中。屬性名是描述功能的名稱，屬性值則是對應的設定值。
• 位置：屬性通常出現在開始標籤 <tag> 中，緊跟標籤名稱之後。
• 可以同時包含多個屬性：元素可以有多個屬性，彼此之間用空格分隔。

如 : <a href="<https://enjoylyingflat.com/>" target="_blank">範例連結</a>

皮卡丘的屬性XD。

id

• 獨一無二(唯一)的身分證，是 HTML 元素的一個屬性
• 有區分大小寫、至少包含一個字元、不能以數字開頭、不能包含空格
• **可識別性：**當你要對這個標籤做事情（例如改變它的樣式、內容），就可以根據 id 來定位。這就像看到身分證號碼，就知道是誰。

參考網址 :

HTML Elements

meta的作用

<meta> 是一個 HTML 元素，用於向瀏覽器傳遞有關網頁的元信息（metadata）。這些信息通常不直接顯示在網頁上，但對於 SEO（搜索引擎優化）、響應式設計、編碼設置、網頁行為控制 等有重要作用。

<meta> 的常見用途

1. 設定字符編碼 : 確保網頁正確顯示文字（特別是多語言網站）。

   <meta charset="UTF-8">

2. 設置響應式設計 : 控制網頁在不同設備上的顯示比例。

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

3. SEO（搜索引擎優化）相關信息 : 幫助搜索引擎理解網頁內容或用途。

   <meta name="description" content="這是一個介紹前端技術的網站"> <meta name="keywords" content="HTML, CSS, JavaScript, 前端開發">

4. 網頁作者或版權信息

   <meta name="author" content="你的名字">

HTML 常見架構與標籤

參考網址 :

HTML Tags

常見的 HTML Entities

應用與重要性

• 顯示 HTML 標籤文字
• 插入空格
• 輸入不可見字符
• 避免語法衝突
• 提高語意清晰度
• 支持多語言與特殊字符

參考網址 :

HTML Character Entities

<a> 元素整理