---
# System prepended metadata

title: HTML 基礎(上)
tags: [HTML]

---

# HTML 基礎(上) 
###### tags: `HTML`

教學資源：
[MDN HTML](https://developer.mozilla.org/zh-TW/docs/Web/HTML)
[Treehouse HTML Basic](https://teamtreehouse.com/library/html-basics-2)

>HTML（HyperText Markup Language，超文本標記語言）是打造網頁的基石。
## :pushpin:HTML元素組成
```html=
<!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>
    <p class="dog">這裡有一隻可愛的小狗</p>
</body>
</html>
```
* Document Type文件類型：`<!DOCTYPE html>`
* `<head></head>`文檔的資訊不會顯示於網頁上 ex:title、scripts、style sheets.
* `<body></body>`HTML的文件內容，文件中只能有一個
* `<p>`起始標籤opening tag
* `</p>`結束標籤closing tag
* `這裡有一隻可愛的小狗`內容content
* `class="dog"`屬性attribute：提供更多的資訊：色彩、對齊方式、圖表的格線等等

## :pushpin:常用區塊元素
|元素|說明|
|-|:-|
|div|html中最常用到的塊級標籤元素|
|h1~h6|標題元素標籤|
|form|表單元素標籤|
|hr|水平分隔線標籤|
|p|段落標籤|
|pre|格式化標籤|
|table|表格標籤|
|ul|無序列表|
|ol|有序列表|
|li|列表裡的項目|
## :pushpin:常用行內標籤
|標籤|說明|
|-|:-|
|a|文字轉連結|
|strong|粗體強調|
|br|換行|
|em|強調|

## :pushpin:範例
### 標題與段落
```html=
<h1>h1標題</h1>
<h2>h2標題</h2>
<h3>h3標題</h3>
<h4>h4標題</h4>
<h5>h5標題</h5>
<h6>h6標題</h6>
<p>內文</p>
```
### 清單
無序清單
```html=
<ul>
    <li>Milk</li>
    <li>Cheese</li>
</ul>

```
有序清單
```html=
<ol>
    <li>Milk</li>
    <li>Cheese</li>
</ol>

```
說明清單：自動縮排的內容
```html=
<dl>
    <dt>標題一</dt>
    <dd>說明一</dd>

    <dt>標題二</dt>
    <dd>說明二</dd>

    <dt>標題三</dt>
    <dd>說明三</dd>
</dl>
```
![](https://i.imgur.com/nDZjv4p.png)
### 連結
```html=
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Articles</a></li>
  <li><a href="#">Contact</a></li>
</ul>
```
* 超連結指向的 URL 或本地資料夾位置