HTML、CSS3教學 === [TOC] ## 事前準備 1. 下載 vs code https://code.visualstudio.com/Download 2. 好用的 vs code 套件 1. Live Server 2. Prettier - Code formatter 3. ## 開始 1. 新增一個 index.html 檔案，即為網站的首頁 ![image](https://hackmd.io/_uploads/r1hiSOlST.png) 2. 快速生成模板 輸入 ! 再按tab 鍵 ![image](https://hackmd.io/_uploads/Bk-ZU_xSa.png) 3. 結構介紹 ![image](https://hackmd.io/_uploads/BJ2zPOxra.png) ```htmlembedded= <!DOCTYPE html> // 宣告此文件是html <html lang="en"> // lang 是此官網的語系 <head> // 網頁在讀取完畢之後，不會顯示在瀏覽器上的部分 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 網頁可視範圍，因為手機的解析度跟電腦的不同，所以需要添加此行 <title>Document</title> // 網站標題 </head> <body> // 顯示在網頁上的主要內容，都在body標籤裡面 </body> </html> ``` 4. 新增一個 style.css 檔案，替網站美化，在 <head></head> 插入 <link rel="stylesheet" href="./style.css"> ```htmlembedded= <!DOCTYPE html> // 宣告此文件是html <html lang="en"> // lang 是此官網的語系 <head> // 網頁在讀取完畢之後，不會顯示在瀏覽器上的部分 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 網頁可視範圍，因為手機的解析度跟電腦的不同，所以需要添加此行 <title>Document</title> // 網站標題 <link rel="stylesheet" href="./style.css"> // style檔案 </head> <body> // 顯示在網頁上的主要內容，都在body標籤裡面 </body> </html> ``` ## 標籤介紹 標籤有分行內元素跟區塊元素 ![image](https://hackmd.io/_uploads/SJ3m8teHa.png) 1. 區塊元素佔整行，當下一個標籤，會自動換到下一行 2. 行內元素的下一個標籤則不會換行 :::success 區塊元素跟行內元素都可以透過 css 改變其規則 ::: ### 常用的標籤屬性 #### 區塊元素 1. div 排版用，無意義標籤 2. h1~h6 此為網站的標題 1. 一個頁面只會出現一個 h1 標籤，ex:產品名稱 2. h2-h6則不限制，數字越小，權重越低 3. 大部分 h2 為副標題 3. p 文章段落 4. ul li 無序號的清單 5. ol li 有序號的清單 6. br 強制換行 #### 行內元素 1. a 超連結設定 2. span 排版用，無意義標籤 3. img 圖片 ![image](https://hackmd.io/_uploads/B1dLqKeSp.png) ### 排版專用的標籤 1. nav 目錄導航專用 ![image](https://hackmd.io/_uploads/Sks1iKlH6.png) ```htmlembedded= <nav> <ul> <li>關於台鹽</li> <li>最新消息</li> <li>商品專區</li> <li>投資人專區</li> </ul> </nav> ``` 2. article，雜誌、部落格的文章、報紙文章等 3. section，有意義（主題內容）的區塊 ## CSS3 介紹 1. 讓文字變色吧 ```css= h1 { color: red; } ``` ![image](https://hackmd.io/_uploads/HkXeJ9eHT.png) ![image](https://hackmd.io/_uploads/B1Sr1ceHT.png) :::success 標籤選擇器 :::