---
# System prepended metadata

title: HTML

---

# HTML

- [Vscode下載參考影片](https://youtu.be/YtBYP7Nry1A)
- [展示html和css目標]
- [html基本觀念]

## 開發環境Visual Studio Code
- 簡稱Vscode，是一個由微軟開發，能夠**支援多平台**的開放原始碼免費程式碼編輯器，能夠裝上對應語言的Extensions支持開發環境。
- 內建許多人性化的功能，小至顏色選擇器，大至泛用的Extensions，甚至也能將開發環境轉換成繁體版。
- 一般開發都是以**資料夾**視為一個專案的管理，所以再coding之前，it's necessary to open the folder，在此，建議先在桌面(或其他位置)新增一個資料夾
- 打開Vscode之後，就到【File】選單下選擇「Open Folder…」來開啟之前建立的資料夾。 

![](https://i.imgur.com/AjOoe7F.png)

- 點選資料夾，並建立一個檔案，檔名為**.html**
![](https://i.imgur.com/0pMScBU.png)

### Extensions
- Live Server
- Go live
    - 即時更新的本機伺服器，不需存檔後重整頁面

![](https://i.imgur.com/vTz949a.png)


## W3shool 的樣品

(https://www.w3schools.com/w3css/w3css_templates.asp)

- 目標:擁有理解並製作模板的能力

## What is HTML
![](https://i.imgur.com/okCWDBm.png)
- HTML全名: Hypertext Markup Language
  - 超文字標字語言，用以顯示在電腦或是電子裝置上的文字
- 核心: 一層包一層
- 用途: 製作網頁，包含內容與外觀
- 在Web browser(瀏覽器)上顯示內容
- 最底層的IT語言，像是蓋房子的地基、鋼筋水泥支撐著網頁。
![](https://i.imgur.com/ZOu67mx.jpg =300x)



#### Then, what is web?
- 網頁是符合HTML標準的純文字檔案。所謂遨遊網際網路，便是利用瀏覽器載入網頁，並依照HTML的標準對他們解譯。
![](https://i.imgur.com/fCD9OYs.jpg)


#### How to create a HTML file?
- html:5

```htmlmixed=
<!-- HTML5 standard language -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
```

### What is element(元素)? 
- 每個元素包含開始標籤、元素內容和結束標籤，格式上大致為:
`<元素名稱>元素內容</元素名稱>`
- 標籤不等於元素，從HTML規格書來看，即便省略head的開始標籤及結束標籤，head元素依舊存在
- 有些元素沒有內容(像是`<br>`)，它們的結束標籤是禁止使用的
- 組成文件的標籤(tag)和屬性(attribute)，皆能統稱為element
- **注意tag和element的差異**

## html架構
#### 基本元素解釋(參考DOM Tree)
`<!doctype html>`:文件第一行的Docucment Type Definition，不能忽略不寫
`<html>` :根元素，是樹狀DOM結構的根源
`<head>` :放入文件相關的說明與資料，瀏覽器不會將head元素內容顯示在視窗上
`<body` :文件內容
`<title>` :元素用於顯示在索引標上的名稱，在此的名稱為Document
![](https://i.imgur.com/fJBGKJW.jpg)

#### 簡單解釋`<head>`內部的元素
- 提供html檔的原數據，會被瀏覽器讀取，但不會顯示在使用者端
- `<meta>` 指定HTML文件的相關資訊，需放入`<head>`裡面、`<title>`後面
- `<html lang=”en”>` 在英文語系搜尋相關，可以省略
- `<meta charset=”UTF-8”>`  用於顯示中文
- http-equiv 、 name
    - 指定文件兼容性模式，像是在網頁中使用meta元素放入X-UA-Compatible。簡單來說，就是將content屬性關連到http的頭部或特定的名稱
- title元素用於顯示在索引標上的名稱，在此的名稱為Document

#### heading & paragraph
- `<h1>`~`<h6>`有六個層次的標題文字大小，以`<h1>`最大，以`<h6>`最小
- `<p>`為段落元素，會自行換行。此外，瀏覽器會忽略HTML中多餘的空白字元或enter鍵

### HTML Strucrure
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page title</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>
```
    
<br>
    
![](https://i.imgur.com/QItstXe.png)
- 樹狀元素的階層結構—父子關係
- 一個箱子包住其他箱子的結構
    
### 群組元素
- 目的:為HTML文件增加結構，做為一個容器，將其他元素包裝在之中
- 用途:能在一群包在其中的元素，以某種**共同的風貌**出現
- 區塊的概念，任何元素都有這種特徵

| 元素 | 顯示模式 | 內容 |
|------|-|-------|
| `<div>` |block-level|可以包含block-level和Inline元素|
| `<span>` | inline|僅包含Inline元素|
    
>block-level特徵:Begin on new lines && 占滿整個parents元素
  
>inline特徵:Start anywhere in a line
 
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  <style>
    .highlight_span{
      background-color: bisque;
    }

    .highlight_division{
      background-color:greenyellow;
    }
  </style>


<body>
  <p>The following span is an <span class="highlight_span">inline element</span>;
    its background has been colored to display both the beginning and end of
    the inline element's influence.</p>
  <br>
  <p>The following paragraph is a <div class="highlight_division">block-level element;</div>
    its background has been colored to display both the beginning and end of
    the block-level element's influence.</p> 

</body>
</html>
```
#### Compare them
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>優木雪菜</div>
  <div>上原步夢</div>
  <div>中須霞</div>
  <br>
  <span>優木雪菜</span>
  <span>上原步夢</span>
  <span>中須霞</span>
</body>
</html>
```
<hr>

- Let's add some stuff
    - difference between `<p>` and `<pre>`
    - `<b>` `<u>` `<s>` `<i>` `br`
- `<pre>`能預先將程式格式化(preformat)，因此，空白或Enter便有意義

```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <p>
        <b>bold</b>
        <br>
        <u>underline</u>
        <i>italic</i>
        <s>strike</s>
        <hr>
    </p>
    <!-- What's the difference -->
    <pre>
        <b>bold</b>
        <u>underline</u>
        <i>italic</i>
        <s>strike</s>
        <p>
          文章
          preformat的特徵
        </p>
    </pre>
</body>
</html>
```

- Let's make it a bit more colorful
- Priority
```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
</head>
<body>
    <h1 style="color: red;">h1</h1>
    <h2>h2</h2>
    <p style="color: brown; background-color: yellow;">
        <b>bold</b>
        <u>underline</u>
        <i>italic</i>
        <s>strike</s>
    </p>
</body>
</html>
```
### href
- 全名為Hypertext Reference，指定超連結目標的URL，算是連結路徑
```htmlembedded=
<body>
  <img src="謝謝.jpg" alt="謝謝大家!!" width="200px"  height="200px">
  <br>
  <a href="https://www.youtube.com">你的水管連結</a>
  <br>
  <a href="list.html">連結到之前的html</a>
  <br>
  <a href="refer/toggle.html">其他資料夾的檔案</a>
  <br>
  <video src="療癒短片.mp4" controls width="600px">無法顯示</video>
</body>
```



### 項目符號與編號(條列式)
`<ul>` 為資料加上項目符號
`<ol>` 為資料加上編號
`<li>` 指定個別的項目

```htmlembedded=
<ol>
    <li>type1</li>
    <li>type2</li>
    <li>type3</li>
</ol>
<ul>
    <li>type1</li>
    <li>type2</li>
    <li>type3</li>
</ul>
```


#### 其他常見的設計(`<div>`變種--為了某種功能性)
`<header>` `<nav>` `<nav>` `<footer>`

```htmlembedded=
<body>
  <header> 這是header  </header>
  <nav>
    <ul>
      <li> list_1</li>
      <li> list_2</li>
      <li> list_3</li>
    </ul>
  </nav>
  <article>
    <p> 文字 </p>
  </article>
  <footer> 這是footer </footer>
</body>
```

### 建立表格
- 利用table元素建立表格
- `<tr>`表示表格中的一列(row)
- `<td>`表示表格中一列的儲存格
- `<th>`表示一列中，標示標題的儲存格
```htmlembedded=
<body>
  <table>
    <tr>
        <th>Title1</th>
        <th>Title2</th>
        <th>Title3</th>
    </tr>
    <tr>
        <td>1-1</td>
        <td>2-1</td>
    </tr>
    <tr>
        <td>1-2</td>
        <td>2-2</td>
    </tr>
  </table>
</body>
```

#### How about column?
- `<colgroup>`針對表格的直欄做分組，並指定各組的形式
- 以`<col>`指定一整欄的形式，沒有結束標籤，且必須和`<colgroup>`並用
- span屬性:`span="n"`，將連續n個欄視為一組
```htmlembedded=
<body>
  <table>
    <colgroup>
      <col span="2" style="background-color: red;">
      <col span="2" style="background-color: blue;">
  </colgroup>
    <tr>
        <th>Title1</th>
        <th>Title2</th>
        <th>Title3</th>
    </tr>
    <tr>
        <td>1-1</td>
        <td>2-1</td>
    </tr>
    <tr>
        <td>1-2</td>
        <td>2-2</td>
    </tr>
  </table>
</body>
```

### Form & Input
- `<form>`用於在HTML內插入表單
- `<input>`用來定義控制元件。元素內，重要的屬性是type和name(也可以用id)，前者決定出輸入類型，後者則為元素命名。
- `<select>`和`<option>`做搭配，呈現下拉式表單中的選擇項目
- `<label>`指定某input的標籤元素，常搭配for屬性，用以指定標籤文字和表單欄位發生的關聯
<hr>

```htmlembedded=
<body>
  <form>
    <input type="radio">
    <label for="types">type1</label><br>
    <input type="radio">
    <label for="types">type2</label><br>
    <input type="radio">
    <label for="types">type3</label><br>
    <input type="text" placeholder="輸入名字">

  </form>

<form>
    <select name="type" id="type">
        <option value="type1">type1</option>
        <option value="type2">type2</option>
        <option value="type3">type3</option>
    </select>
    <input type="button" value="按鈕">
</form>
</body>
```


