:::::::: 圖文元素架構 ::::::::

一、主要圖文元素標籤

Tag Description
<article> 定義文章
<aside> 定義保留補強說明的文字敘述
<figure> 定義圖形影像的區塊
<figcaption> 定義 figure 的標題
<img> 定義一個影像顯示
<h1> to <h6> 定義標題1~標題6
<p> 定義一個段落文章
<br> 定義文章中分行不分段的位置
<ul> 定義一組無順序編號意義的清單
<ol> 定義一組有順序編號意義的清單
<li> 定義清單中的一個項目

二、網頁主要圖文元素標籤的練習

參考如下介紹,輸入<body>區內的HTML原始碼。

<body>
    <header>頁首區</header>
    <nav>導覽列區</nav>
    <main>
        <h1>主要內容區</h1>
        <section id="part1">
              <ul>
                  <li>section-part1-list1</li>
                  <li>section-part1-list2</li>
                  <li>section-part1-list2</li>
              </ul>
        </section>
        <section id="part2">section-part2</section>
        <section id="part3">section-part3</section>
        <section id="part4">section-part4</section>
        <article>
              <h2>這裡是標題2</h2>
              <p>這裡是段落文章文字</p>
        </article>
        <figure>
              <img src="../images/car800/car7.jpg">
              <figcaption>這是影像說明標籤</figcaption>
        </figure>
    </main>
    <footer>頁尾區</footer>
</body>

《範例參考結果》

◎其他的相關框架標籤請參考:http://www.w3schools.com/tags/default.asp
            或:http://www.w3school.com.cn/tags/index.asp