---
# System prepended metadata

title: HTML教學

---

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
標籤選擇器

:::




