---
# System prepended metadata

title: HTML
tags: [HTML]

---

# HTML
參考資料：[HTML入門](https://www.youtube.com/watch?v=CLUPkcLQm64)、[HTML Tutorial](https://www.w3schools.com/html/)

HTML是由很多個 <標籤> 來表示的：
1. 告訴瀏覽器這是一個 html 檔
2. html是整個網頁的最外層
3. head是html的第一層，會包著一些網頁的資訊
4. 例如：告訴我們的網頁，我們要用 utf-8 來做編碼
5. title 就是網頁的標題
6. body 所包含的就是網頁的內容

:bulb: 每個標籤都是成雙成對的，中間要夾著其他東西，html 的架構就是一層一層包起來的

```htmlmixed=
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>小白的網頁</title>
    </head>
    <body>
        hello 我是小白
    </body>
</html>

開始標籤
<>
關閉標籤
</>
註解符號
<!---->
```

* 雖然我們目前已經是以 utf-8 來編寫程式，但是我們還是需要告訴電腦需要用什麼編碼解碼，所以要多加一層 meta 來設定，如果 charset 已經設為 utf-8 還是亂碼的話，請用記事本開啟 html 並且另存新檔，將底下編碼改為 utf-8

<br>

* html 的標籤在網頁上有兩種顯示方式，一種顯示的寬度與文字寬度相符，另一種不管文字寬度為何，都會顯示一整行的寬度


<br>

## 語法列表

| 語法                  | 說明             | 備註                                                                            |
| --------------------- | ---------------- |:------------------------------------------------------------------------------- |
| ```<html> </html>```  | 網頁的最外層     | 網頁的所有程式都要包在裡面                                                      |
| ```<p> </p>```        | 代表段落         | 夾在中間裡的文字都是屬於同一個段落的                                            |
| ```<b> </b>```        | 粗體字           |                                                                                 |
| ```<i> </i>```        | 斜體字           |                                                                                 |
| ```<br/>```           | 換行符號         | ```<br> </br>是換行，但是通常我們不會在中間加入其他東西，所以可以省略為<br/>``` |
| ```<hr/>```           | 水平線           |                                                                                 |
| ```<a> </a>```        | 超連結           | 可以存放路徑或網址                                                              |
| ```<img/>```          | 顯示圖片         | 可以讀取路徑或網址                                                              |
| ```<video><video/>``` | 顯示影片         | 記得加 controls 才能播放                                                        |
| ```<ul></ul>```       | 點狀列表         | 無排序                                                                          |
| ```<ol></ol>```       | 排序列表         | 可切換標籤為字母或羅馬數字                                                      |
| ```<li></li>```       | 列表條目元素     |                                                                                 |
| ```<table></table>``` | 建立表格         | 表格的內容都要放在中間                                                          |
| ```<tr></tr>```       | 代表一列         | 中間會夾著同一列的資料 (不可單獨使用)                    |
| ```<td></td>```       | 夾著每一列的資料 | 可以視為欄位的概念 (不可單獨使用)                       |
| ```<div> </div>```    | 容器             | 不管文字寬度為何，都會顯示一整行的寬度                                          |
| ```<span> </span>```  | 容器             | 顯示的寬度與文字寬度相符                                                        |

<br>

## 超連結
我們可以透過超連結存放網址或是路徑導向網頁或是圖片

* 我們必須告訴瀏覽器超連結的網址或是路徑，就必須用到超連結 a 的屬性 href，所有寫在語法後面的東西就是它的屬性，再把要顯示的名稱 google 網站打在中間
```htmlmixed=
<!-- 網址 -->
<a href="https://google.com">google網站</a>
<!-- 路徑 -->
<a href="page2.html">第二頁</a>

<!-- 圖片 -->
<a href="https://images4.alphacoders.com/284/thumb-1920-284804.jpg">Kobe</a>
<a href="IMG_2417.JPG">孔雀</a>
```
<br>

## 圖片
我們可以透過輸入網址或是路徑來顯示圖片
```htmlmixed=
<!-- 顯示圖片 -->
<img src="https://reurl.cc/xG5v9L" />

<!-- 調整圖片大小 -->
<img src="https://reurl.cc/xG5v9L" width="400" height="400"/>
```
<br>

## 影片
我們可以透過輸入網址或是路徑來顯示影片
```htmlmixed=
<!-- 中間夾著的文字會在影片載入失敗時顯示 -->
<video src="IMG_2374.MOV">瀏覽器無法載入影片</video>

<!-- 一定要加入 controls 屬性影片才有辦法播放，一樣可以針對影片大小作調整 -->
<video src="IMG_2374.MOV" controls height="600">影片載入失敗</video>

<!-- youtube影片-->
<iframe width="560" height="315" src="https://www.youtube.com/embed/pC5mGB5enkw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```

* 如果想加入youtube影片，直接把嵌入內的程式全部複製貼上就可以用了

![](https://i.imgur.com/bG3isfv.jpg)

<br>

## 列表與表格

### 列表

我們可以使用點狀列表或是序列列表

* google
* facebook
* instagram
* ppt

```htmlmixed=
<ul>
    <li>google</li>
    <li>facebook</li>
    <li>instagram</li>
    <li>ppt</li>
<ul/>
```
1. google
2. facebook
3. instagram
4. ppt
```htmlmixed=
<ol type="1">    <!--"1", "a", "A", "i", "I" ...-->
    <li>google</li>
    <li>facebook</li>
    <li>instagram</li>
    <li>ppt</li>
<ol/>
```

<br>

### 表格
使用 table 標籤可以建立一個表格，建立表格時可以在 table 設置表格大小
tr 標籤可以創建自己想要的列數，每一列的資訊就可以放在 td 標籤裡
```htmlmixed=
<table width="400">
        <tr>
            <td>日期</td>
            <td>數學</td>
            <td>英文</td>
        </tr>
        <tr>
            <td>2/8</td>
            <td>80</td>
            <td>60</td>
        </tr>
</table>
```

## 容器 
容器是讓我們做排版和美化的時候非常好用的一個工具，兩者差別在於占用的空間，span 容器只會占用與內容長度相符的空間，而 span 容器則不論內容長度都會占用一整行的空間
* div
當我們今天想要改變文字顏色的時候，我們可以選擇在 table 標籤內一個一個設置 css 樣式
```htmlmixed=
        <ol type="A" style="color:red;">
            <li>google</li>
            <li>facebook</li>
            <li>ig</li>
            <li>ppt</li>
        </ol>
        <table width="400" style="color:red;">
            <tr>
                <td>日期</td>
                <td>數學</td>
                <td>英文</td>
            </tr>
        </table>
```
或者，把它們裝進一個 div 裡，一起設定它們的樣式
```htmlmixed=
        <div style="color:red;">
            <ol type="A">
                <li>google</li>
                <li>facebook</li>
                <li>ig</li>
                <li>ppt</li>
            </ol>
            <table width="400">
                <tr>
                    <td>日期</td>
                    <td>數學</td>
                    <td>英文</td>
                </tr>
            </table>
        </div>
```

## 輸入標籤
```htmlmixed=
<input type="text" placeholder="請輸入帳號" />
<input type="password" placeholder="請輸入密碼" />
<input type="date" />
<input type="range" />
<input type="file" />
<input type="checkbox" />
<textarea>你好</textarea>
```
<br>

## meta
mate 標籤可以為網頁加上更多的解說
```htmlmixed=
<!-- 告訴瀏覽器網頁的編碼-->
<meta  charset=utf-8"/>
<!-- 為網頁加上解說，讓文字顯示在搜尋頁面-->
<meta name="description" content="小白的網站，裡面有很多教學影片" />
<meta name="author" content="小白" />
<meta name="keywords" content="小白, html, 教學" />
<!-- 調整當不同裝置瀏覽網頁時，頁面大小的調整 initialize-scale 可以初始化頁面大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

###### tags: `HTML`
