---
# System prepended metadata

title: HTML
tags: [docs]

---

# HTML
## 基本架構
```html=
<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8"/> 
        <title>你網頁的名稱</title>
    </head> 
    <body>
        <!--主要放程式碼的地方 -->
    </body>
</html>
```
## 常見標籤
### 標題
```html=
<h1>文字</h1>
<h2>文字</h2>
    .
    .
    .
<h6>文字</h6>
```
### 段落
```html=
<p>
    文字
</p>
```
### 粗體
```html=
<b>文字</b>
```
### 斜體
```html=
<i>文字</i>
```
### 換行
```html=
<br/>
```
### 水平線
```html=
<hr/>
```
### 註解
```html=
<!--註解-->
```
### 嵌入其他種程式語言
如果想加入Js，可以用 script
```html=
<script>
    程式碼
</script>
```

## 連結、圖片、影片
### 連結
```html=
<a href="網址">網頁上所顯示的樣子</a>
```
如果要去同資料夾的HTML，只要把網址改成檔名就行。
如果要去資料夾內的資料夾，像下面的圖示，連結通向別的頁面裡的HTML
```html=
<!-- 進去 -->
<a href="別的頁面/檔名">前往別的頁面</a>
<!--出來 -->
<a href="../index.html">回主頁</a>
```
![image](https://hackmd.io/_uploads/HJ0VQKCIC.png)

### 圖片
可以在後面加上 height="數字"或width="數字" 設定其大小，
則一就行他會等比例縮放。
```html=
<img src="圖片所在的地方"/>
<img src="圖片所在的地方" width="數字"/>
```
### 影片
和圖片一樣可以用height、width控制大小。
如果要插入YT影片，找到影片的分享->嵌入->複製後直接用就行
```html=
<video src="影片所在的地方" controls/>
```
## 列表、表格
以下皆具有支援屬性，支援「全域屬性」以及「可見元素的事件屬性」
可以加入 style 屬性，改變顏色之類的東西。
### 無序清單
```html=
<ul>
  <li>項目一</li>
  <li>項目二</li>
</ul>
```
可以在清單中再包一個清單
```html=
<ul>
    <li>項目一
      <ul>
          <li>項目狀態</li>
          <ul>
            <li>已完成</li>
            <li>未完成</li>
          </ul>
      </ul>
    </li>
    <li>項目二</li>
</ul>
```
呈現效果:
![image](https://hackmd.io/_uploads/BJH50AnwC.png)


### 有序列表
```html=
<ol>
    <li>項目一</li>
    <li>項目二</li>
</ol>
```
在ol後面可以加type=""，可以設定項目的編號樣式，像把123改成abc之類的。
<table>
    <tr>
        <td style="background:rgb(195, 195, 195);">type 屬性</td>
        <td style="background:rgb(195, 195, 195);">說明</td>
    </tr>
    <tr>
        <td>1</td>
        <td>十進位數字</td>
    </tr>
    <tr>
        <td>i</td>
        <td>小寫羅馬數字</td>
    </tr>
    <tr>
        <td>I</td>
        <td>大寫羅馬數字</td>
    </tr>
    <tr>
        <td>a</td>
        <td>小寫字母</td>
    </tr>
    <tr>
        <td>A</td>
        <td>大寫字母</td>
    </tr>
</table>

```html=
<ol type="I">
    <li>項目一</li>
    <li>項目二</li>
</ol>
```
start 屬性可以設定項目的起始編號，加入 reversed 屬性可以反轉清單編號。
### 表格
table後可以加height、width控制大小。
```html=
<table>
    <tr>
        <td>項目</td>
        <td>期限</td>
    </tr>
    <tr>
        <td>project1</td>
        <td>下禮拜一</td>
    </tr>
</table>
```

## 區塊
### 文字區塊 article(有支援屬性)
是 HTML 裡作為定義文章的元素，文章區塊裡面可以放入標題、文字、圖片...等內容，顯示類型為「block 塊級元素」，預設會強制換行。
```html=
<article>
    <h1>標題</h1>
    <p>文章內容</p>
</article>
```
支援「全域屬性」以及「可見元素的事件屬性」
```html=
<article style="background:#ddf;">
    <h1>標題</h1>
    <p>文章內容</p>
</article>
```
呈現效果:
![image](https://hackmd.io/_uploads/BkvJcA2wA.png)

### 章節區塊 section(有支援屬性)
是 HTML 裡作為定義章節的元素，文章區塊裡面可以放入標題、文字、圖片...等內容，如果網頁屬於文字型網頁，當中包含多個「段落」或「章節」
```html=
<section>
    <h1>標題</h1>
    <p>文章內容</p>
</section>
```
支援「全域屬性」以及「可見元素的事件屬性」
```html=
<section style="background:#ddf;">
    <h1>標題</h1>
    <p>文章內容</p>
</section>
```
呈現效果:
![image](https://hackmd.io/_uploads/BkvJcA2wA.png)

## 容器div&span
容器是銜接css的重要東西，可以把一整塊程式碼包起來
### div
不管長度，佔一整行
```html=
<div>
    程式碼1
</div>
<div>
    程式碼2
</div>
```
呈現效果:
程式碼1
程式碼2
### span
長度多少，寬度多少
```html=
<span>
    程式碼1
</span>
<span>
    程式碼2
</span>
```
呈現效果:
程式碼1 程式碼2

## input&textarea
會產生一個文字框供使用者輸入
### input
type可以放很多種東西，一般就text，還有像data、range、file、checkbox、password等，其樣式也會改變。
placeholder為可以在待輸入的文字框內顯示文字，告訴使用者該輸入什麼樣的資料。
```html=
<input type="text" placeholder="請輸入帳號"/>
```
呈現效果:
![image](https://hackmd.io/_uploads/HkDyzoALC.png)

### textarea
一個可縮放的文字框，拉右下角控制。
```html=
<textarea>輸入你的答案:</textarea>
```
呈現效果:
![image](https://hackmd.io/_uploads/HJK9zjRL0.png)

## 按鈕
### button
按鈕的屬性可以從預設的submit，改成reset
```html=
<button>按鈕</button>
```
也可以用js做一些別的操作，此時按下按鈕則會執行函式的結果
```html=
<button onclick=test()>按鈕</button>

<script>
function test() {
    console.log("hello world")
}
</script>
```


## Meta
可以告訴瀏覽器，你的網頁有甚麼樣的屬性
像description:描述、author:作者、keyword:搜尋關鍵字、viewport:讓在不同裝置下看的比例不會跑掉
```html=
<meta charset="UTF-8"/> 
<meta name="description" content = ""/>
<meta name="author" content=""/>
<meta name="viewport" content="width = device-width,initial-scale=1.0"/>
```

## 更多資源
w3c html: https://www.w3schools.com/html/

---

- Contributor: 王鈞宇