ASTRO Camp Day2 - HTML(01) | Your awesome title

1、HTML教學大綱

1-1、HTML - 1.5 天

標籤
語法
語意

1-2、CSS - 6.5 天

語法
選取器
優先權
基礎屬性
屬性分類
寫法
flex
grid

1-3、RWD - 2 天

手刻
格線系統(自己刻出來)
bootstrap

2、VS code設定

2-1、HTML在VS code會用到的外掛

(1) Auto Rename Tag
(2) Chinese lorem -> 開啟 ctlorem功能，可以產生隨機假文
(3) CSS Variable Autocomplete
(4) IntelliSense for CSS class names in HTML
(5) Live Preview
(6) Live Server
(7) Path Intellisense

2-2、VS code 設定

(1) Editor: Word Wrap - 設定換行
(2) Emmet: Trigger Expansion On Tab - 提示

3、HTML介紹

3-1、HTML是什麼

HTML是一個超文本標記語言，標記語言不等於程式語言。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁

3-2、老師提醒事項

(1) 寫履歷的時候，HTML or JavaScript 大小寫要注意，有些面試官很在意
(2) 可以在caniuse網站，看HTML語法在各個瀏覽器的相容性
(3) 只要處理視覺外觀，就是用CSS，而不關HTML的事

–
H1,H2,H3,H4標籤注意 在做網站架構的時候，盡量不要造成這個狀況
H1 -> H2 -> H4
盡量不要直接跳過H3，直接到H4
–

3-3、寫程式會用到的四種括號

> {} - 大括號  
> [] - 中括號  
> () - 小括號  
> <> - 尖括號 - HTML主要用到這個括號  

4、SEO介紹

4-1、SEO是什麼

SEO中文全名為搜尋引擎最佳化，如果今天作網站，要注意以下兩件事情 (1) google在意的是語意，也就是HTML標籤
(2) google會先在查看google語意，再去分析網站數據

5、SRC 路徑設定

5-1、相對路徑

如果今天是在同個資料夾
SRC 後面加的路徑，只要打上名稱就好
Ex. 123.jpg

假設今天在另外一個資料夾
SRC 後面給的路徑就要給更完整的路徑
Ex. “pic/234.jpg”

假設今天在上層的資料夾
SRC 使用 ../ ，一個../代表上移一層
Ex. “../234.jpg”
Ex. “../../123.jpg” (往上跳兩層)

–
../
用此寫法不能上移到根目錄以外的地方
–

5-2、絕對路徑

src:”https://images.imyfone.com/tw/assets/guide/dback-pc/scan-location.webp”
src 後面直接接整段完整的網址就是絕對路徑

5-3、server 路徑

> src : "/123.jpg" => 最前面加上 **/** ，就代表從根目錄開始  
> Ps. 根目錄從 VS code 側邊欄看最準

6、寫HTML會用到的快捷鍵

6-1、開檔案快捷鍵

> command + N

6-2、更換程式語言快捷鍵

> command + K  再按 m

6-3、產出隨機文字、數字

> ctlorem   => 產出一串隨機的中文字
> ctlorem10 => 產出10個隨機的中文字

6-4、快速插入指令

對四筆字串快速生成表格，照下面指令打，可以把四個文字用ul、li包起來

> 釣竿
> 釣魚
> 支援
> 不見
> 
> 全選這四筆資料，然後呼叫命令行(command + shift + P)，並選取“使用縮寫換行“，並在上面打上ul>li*  
> 就可以把上面四筆資料用ul包起來

7、img src的語法規則

> <img src="來源路徑跟黨名" alt="">   
> <標籤 屬性="值" 屬性="值" 屬性="值">
> 儲存庫(本地)  
>
> #alt = alternate = 替代文字 = 圖片顯示不出來的時候，就顯示這行字

8、查詢資料網站

(1) mdn -> 最建議這個
(2) w3c -> 最標準文件，一定都可以查到資料，但是他格式比較像論文，不易讀 (3) w3school

9、picture 標籤使用

> <picture>
>     <source srcset="ai.webp" media="(min-width: 1200px)" >   #1 瀏覽器最小寬度是1200
>     <source srcset="ai.webp" media="(min-width: 800px)" >    #2 瀏覽器最小寬度是800
>     <img src="" alt="">                                      #3
> </picture>
> 
> 上面語法翻譯，假如螢幕大於1200，觸發#1圖片
>             假如螢幕介於1200~800之間，觸發#2圖片
>             假如螢幕小於800，觸發#3圖片
>

10、video 標籤使用

> <video width="320" height="240" controls>
>     <source src="movie.mp4" type="video/mp4">
>     <source src="movie.ogg" type="video/ogg">
> </video>
> 
> 上面語法翻譯，看使用者的瀏覽器有支援哪一個格式，就下載該檔案
> 