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

## :pushpin:建構內容
### section
頁面上獨立的元件，含意等同於`nav`、`footer`

<section>
    <h2>標題</h2>
    <p>內文</p>
</section>

### article
頁面中文章、雜誌、小工具...

<article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
</article>

### nav
頁面導覽列、功能表、目錄

<nav class="demo">
    <ul>
        <li><a href="#">產品</a></li>
        <li><a href="#">服務</a></li>
        <li><a href="#">聯絡</a></li>
    </ul>
</nav>

### aside
側邊欄或標註框

<aside>
    <ul>
        <li><a href="#">小狗飼料</a></li>
        <li><a href="#">小貓飼料</a></li>
    </ul>
</aside>

### main
頁面中僅能存在一個`main`

<main id="main-content">
    主要內容
</main>

### div
通用容器

<div class="box">
    <p>div是通用容器</p>
</div>

## :pushpin:圖片、檔案路徑
### 圖片連結URL& 本地路徑

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

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

## :pushpin:頁面連結
### id連結到頁面中的某個部分

<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 [e-mail]</p>
    </section>

### mailto 連結到發送mail

<a href="mailto:[e-mail]"subject=Hi>Contact Us</a>