---
# System prepended metadata

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

---

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

## :pushpin:建構內容
### section
頁面上獨立的元件，含意等同於`nav`、`footer`
```html=
<section>
    <h2>標題</h2>
    <p>內文</p>
</section>
```
### article
頁面中文章、雜誌、小工具...
```html=
<article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
</article>
```
### nav
頁面導覽列、功能表、目錄
```html=
<nav class="demo">
    <ul>
        <li><a href="#">產品</a></li>
        <li><a href="#">服務</a></li>
        <li><a href="#">聯絡</a></li>
    </ul>
</nav>
```
### aside
側邊欄或標註框
```html=
<aside>
    <ul>
        <li><a href="#">小狗飼料</a></li>
        <li><a href="#">小貓飼料</a></li>
    </ul>
</aside>
```
### main
頁面中僅能存在一個`main`
```html=
<main id="main-content">
    主要內容
</main>
```
### div
通用容器
```html=
<div class="box">
    <p>div是通用容器</p>
</div>
```

## :pushpin:圖片、檔案路徑
### 圖片連結URL& 本地路徑
```html=
<img src="http://123.com" alt="圖片失效就顯示這段文字" title="圖片的名稱，滑鼠移上來就看得到文字"

<img src="img/123.jpg" alt="圖片失效就顯示這段文字" title="圖片的名稱，滑鼠移上來就看得到文字"

```
## :pushpin:頁面連結
### id連結到頁面中的某個部分
```html=
<nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/#About">About</a></li>
      <li><a href="/#Articles">Articles</a></li>
      <li><a href="/#Contact">Contact</a></li>
    </ul>
</nav>

<section  id="Contact">
      <h2>Contact</h2>
      <p>Email us at aaa@gmail.com</p>
    </section>

```
### mailto 連結到發送mail
```html=
<a href="mailto:someone@gmail.com"subject=Hi>Contact Us</a>  
```