# 認識HTML

## HTML : 語意的重要性，而非視覺外觀

#### html標籤為HTML的主體，其中包括head和body來做資訊的區分

head: 給其他應用程式看的資訊 (除了title)
(1) title : 網頁的標籤

#### head中的 <meta> tag
(1) charset : 編碼方式
(2) http-equiv : 瀏覽器
(3) name= "viewport" 設置可視畫面

#### body: 給使用者看的資訊
(1) h1~h6 標題
(2) p 內容
(3) ul (unordered list) 無序清單
(4) ol (ordered list) 有序清單
(5) li (list) 清單內容物
(6) img 圖片(jpg,png,gif,svg,webp)
(7) video/audio [mp4,webm(檔案很小)] 影音

:::info
## 如何建立HTML檔案
1. 打開VScode
2. 選取或拖曳目錄資料夾
3. 創立檔案(Ctrl+N)
4. 選擇格式(Ctrl+K M)
:::warning
* 注意：檔案命名時不能加空白
:::

---

## img 'scr'和'alt' 屬性

#### scr
##### 相對路徑
>../ 往上一層資料夾空間
. 找尋同空間的資料夾
例: src="yahoo.png"

##### 絕對路徑(伺服器模式適用)
>從根目錄開始尋找檔案
例: src="/20220303HTML/google.png"

#### alt

> 圖片掛掉的時候顯示的內容

___

#### a (超連結)
> 在其屬性herf中，賦予網址以作為超連結。

:::info

小叮嚀 : 若暫時不想賦予可暫時先輸入#代替

:::

---

## 安裝延伸模組
1.Chinese Lorem 產生中文字
指令: ctlorem120

2.Auto Rename Tag 同時修正同區塊對應的tag

3.Fake Image Snippet Collection 圖片產生器
(picsum 亂數圖片) or (fakeimg 假圖)

4.IntelliSense for CSS class names in HTML
可快速從CSS中取用 class name 到html

5.Live server 存檔後即時更新網頁
:::info
* 執行時若不小心關掉網頁時，網址輸入http://127.0.0.1:5500* 來開啟網站資料夾
:::

6.Path Intellisense 自動填充檔案名稱

7.snippet-creator(作者:nikitakunevich)

---

## 快捷鍵

1. Ctrl+N (開啟新檔)
2. Ctrl+K 單鍵m (選取語言模式)
3. HOME+END 選取整行
4. Shift+ ↓ 或 Ctrl+L 選取整行後依序往下選取
5. Shift+backspace 縮排
6. ctrl + d 關鍵字往下選取
7. alt 用點擊的方式選多個位子

### 快捷鍵包裹內容
#### 包裹內容
>選完要包裹的內容 → ctrl+shift+p → wrap → 選取wrap with Abbreviation → 輸入要包裹的tag
(下圖舉例:ul)
>

#### 包裹內容項目
* 選完要包裹的內容 → ctrl+shift+p → wrap → 選取wrap with Abbreviation → 輸入要包裹的tag並加星號
(下圖舉例:li*)


#### 建構多層tag
* 代表在包裹多包裹一層內容或tag
(下圖舉例:div>p)


#### 一次建構複數的同一種tag
* 透過tag*來一次性的新增複數Tag
(下圖舉例:div*5)

:::success
小叮嚀 : 上述快捷鍵和指令都可以互相配合，請善加利用。
:::

---

## 環境建置:

#### Divvy 分割畫面程式(Ctrl+Enter)
1. 開啟Divvy程式
2. 點選右上方設置(齒輪)

3. 上方點選「Shortcuts」後，點選右下方「New」進入新建快捷鍵畫面

4. 中間方格選取視雙想變成的大小(舉例:中間白色區塊)，左上方設置該快捷鍵名稱(舉例:Center)，右上方點選設置快捷鍵(舉例:ctrl+alt+M)


5. 下方Global shortcut記得勾選
6. 按下「Accept」即可完成視窗快捷鍵設置

#### 設置自動換行:
>管理 - 搜尋wrap - 找到 Editor: Word Wrap - 改﹝ON﹞

#### 設置按下Tab自動展開Emmet縮寫:
>管理 - 搜尋emmet tab - 找到Emmet: Trigger Expansion On Tab - 打勾

#### Wox 強化Window快捷鍵啟動列 (快速開啟Alt+space)
---
## 課程資源

* Amos老師-金魚都懂的網頁學習路徑懶人包
https://ithelp.ithome.com.tw/articles/10228708

* 網頁色彩
https://www.bing.com/search?q=網頁色彩&cvid=d8a6fccb573b44139b53abae08accedd&aqs=edge.0.0l3.2944j0j1&pglt=675&FORM=ANNTA1&PC=ASTS