HTML 元素

要能夠開發、編寫網頁內容，就一定要熟知 HTML 元素，並瞭解各種 HTML 元素的用法。在開始下面章節前，建議你應該先瀏覽下「HTML 元素」的頁面，以對 HTML 元素有初步的瞭解，同時也注意下哪些元素是只適用在 HTML5，而哪些元素又只適用在 HTML4。還有，因為 HTML 文件開發的前提應該是要適用於各種瀏覽器，所以也應避免使用過時的語法，以維持 HTML 文件的可讀性。

接下來，我們要進入學習撰寫 HTML 文件的內容了，請試著使用以下章節介紹的 HTML 元素自行運用編寫成 HTML 文件。

文字編排

標題

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

範例

段落

<p></p>

範例

粗體

<b></b>

範例

斜體

<i></i>

範例

上標

<sup></sup>

範例

下標

<sub></sub>

範例

斷行

<br /> 或 <br>

範例

水平線

<hr /> 或 <hr>

範例

項目符號

有序列表

有序列表就是指會自動在項目前加上數字編號。

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

<ol> 即 ordered list 的縮寫，可包含 <li> 元素來指定每個項目資料。

範例

無序列表

無序列表就是指會自動在項目前加上圓點（bullet）。

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul> 即 unordered list 的縮寫。

範例

自定義列表

自定義列表適用於專有名詞。

<dl>
  <dt>咖啡</dt>
  <dd>黑色的熱飲</dd>
  <dt>牛奶</dt>
  <dd>白色的冷飲</dd>
</dl>

<dt> 用在要被定義的專有名詞，而 <dd> 則是該專有名詞的解釋說明。

範例

連結

<a href="http://www.google.com" target="_blank">點按後可連到 Google 網站</a>

<a> 元素通常會使用的屬性有：

href：設定 <a> 元素的連結網址，可使用的網址類型有
- 絕對網址：如 http://www.google.com
- 相對網址：如 ./index.html
- 錨點：如 #summary，就會跳到同頁面中 id 為 summary 的元素（例如跳到 <h2 id="summary"></h2>）
- Email：如 mailto:[email protected]，Email 的連結除了可以設定收件者 Email 之外，還可以同時設定 Email 的主旨、本文，甚至也可以同時設定副本、密件副本的收件者 Email，例如 <a href="mailto:[email protected]?subject=感謝您的貢獻&body=謝謝您撰寫這份教材，我看完之後真的有比較理解網頁的運作原理及網頁的開發方式">寄信感謝作者</a>，如果你想進一步瞭解怎麼產生 Email 連結，可使用「Mailto 產生器」
target：設定在哪裡開啟連結，較常見的有 _blank 表示會在新的瀏覽器分頁開啟此連結，或 _self（預設值）表示會在目前的瀏覽器分頁開啟此連結
寄信感謝作者

圖片

<figure>
  <img src="http://akamaicovers.oreilly.com/images/9780596527327/lrg.jpg"
    alt="HTML & XHTML: The Definitive Guide book cover"
    title="HTML & XHTML: The Definitive Guide"
    width="300" />
  <figcaption>Written by Chuck Musciano, Bill Kennedy</figcaption>
</figure>

HTML & XHTML: The Definitive Guide book cover — Written by Chuck Musciano, Bill Kennedy

<img> 元素通常會使用的屬性有：

src：指定圖片來源的網址，同樣可以使用絕對路徑和相對路徑來標示圖片的位置
alt：圖片替代文字，當圖片無法成功顯示時，會在頁面上看到 alt 文字
title：圖片標題文字，當滑鼠移經圖片時會自動顯示的文字
width：圖片寬度，若無設定則會自動設定為圖片原本的寬度
height：圖片高度，若無設定則會自動設定為圖片原本的高度

<figcaption> 則是用來呈現圖說的元素，為 HTML5 新增加的元素。

以下的案例則是用來說明 alt 與 title 的差異，請注意，下面的圖片應已失效無法存取，所以應該會在頁面上看到 alt 文字而無法正確顯示圖檔；而當你將滑鼠移到圖片上停留時，將會看到 title 文字。

<img src="http://artemij.com/images/react_essentials_book_cover.jpg"
    alt="React.js Essentials book cover"
    title="Written by Artemij Fedosejev"
    width="300" />

表格

<table>
  <tr>
    <th>Tens</th>
    <th>Hundreds</th>
    <th>Thousands</th>
  </tr>
  <tr>
    <td>10</td>
    <td>20</td>
    <td>30</td>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
    <td>3000</td>
  </tr>
</table>

Tens	Hundreds	Thousands
10	20	30
100	200	300
1000	2000	3000

其中 <table> 是定義表格的元素，在該元素內再使用 <tr> 來定義表格的「列」（row），以及使用 <td> 來定義表格的「欄」（column）。至於 <th> 則通常只有第一列會使用，是用來定義表格標題列的欄位資料。

一般表格只需要使用到 <table>、<tr>、<td> 就可以了，但為了讓表格更具語義，我們通常還會再使用 <thead> 及 <tbody> 來區分表格標題與表格內文。

<table>
  <thead>
    <tr>
      <th>Tens</th>
      <th>Hundreds</th>
      <th>Thousands</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10</td>
      <td>20</td>
      <td>30</td>
    </tr>
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
    </tr>
    <tr>
      <td>1000</td>
      <td>2000</td>
      <td>3000</td>
    </tr>
  </tbody>
</table>

如果我們想製作出跨欄或跨列的表格，就可以在 <td> 元素加上 rowspan 或 colspan 屬性來設定跨列或跨欄。

牛刀小試

試試看使用文字編輯器把下面的表格編寫出來。

名稱	品種	數量	小計
A	x	1,500	4,000
	y	1,300
	z	1,200
B	o	3,000	5,000
B	p	2,000	5,000
合計		9,000

排版

在網頁開發實例中，我們會經常看到 <div> 與 <span> 元素的運用，這兩個元素不像前面介紹的元素有特定的功能和適用場合，純粹是為了便於排版（layout）所用。例如，我們想設計一個頁面有「頁首」、「左側欄」、「主要內容」和「頁尾」的排版樣式，我們就會利用 <div> 元素來設計出 HTML 文件，再透過 CSS 樣式表的套用，排出我們想要的樣式。

<body>
  <div style="border: 1px solid #ccc; background: pink;">
    <h1>這裡是網頁標題</h1>
    <p>歡迎來到我的網站</p>
  </div>
  <div style="border: 1px solid #ccc; background: blue; min-height: 200px;">
    <div class="left-sidebar" style="border: 1px solid #ccc; background: green; float: left; min-height: 200px; width: 20%;">
      <p>這裡是側邊欄</p>
    </div>
    <div class="main-content" style="border: 1px solid #ccc; background: yellow; float: left; min-height: 200px; width: 60%;">
      <p>這裡是主要內容段落</p>
      <p>這裡是主要內容段落</p>
      <p>這裡是主要內容段落</p>
      <p>這裡是主要內容段落</p>
      <p>這裡是主要內容段落</p>
    </div>
    <div class ="right-sidebar" style="border: 1px solid #ccc; background: green; min-height: 200px;">
      <p>這裡是右側欄</p>
    </div>
  </div>
  <div style="border: 1px solid #ccc; background: pink;">
    <p>這裡是頁尾資訊</p>
  </div>
</body>

由於 HTML4 大量使用 <div> 來進行網頁排版的設計，造成 HTML 文件失去該有的語義，所以 HTML5 加入許多新的元素，就是為了便於排版所設計的。

<header>：定義文章的頁首資訊。請注意，與 <head> 不同，<header> 元素是放在 <body> 元素內
<nav>：用來存放導覽列的內容
<section>：可以定義文章的章節，用以區分不同章節的內容，例如第一章內可以有 <h1> 元素、第二章內也可以有 <h1> 元素，而這兩個 <h1> 元素都可以在其脈絡下提供適當的語義（早期沒有 <section> 元素，若文件內同時有兩個 <h1> 元素較無法從網頁原始碼看出個別元素代表的標題意義為何）
<article>：存放文章的主要內容
<aside>：提供內容相關的輔助內容，類似「側邊欄」的效果
<footer>：定義文章的頁尾資訊

牛刀小試

試試看，將上述範例的網頁內容順序調整如下，然後透過修改 style 屬性來排出如下圖的效果。

<body>
  <div style="border: 1px solid #ccc; background: pink;">
    <h1>這裡是網頁標題</h1>
    <p>歡迎來到我的網站</p>
  </div>
  <div style="border: 1px solid #ccc; background: blue; min-height: 200px;">
    <div class="main-content" style="">
      <p>這裡是主要內容段落</p>
      <p>這裡是主要內容段落</p>
      <p>這裡是主要內容段落</p>
      <p>這裡是主要內容段落</p>
      <p>這裡是主要內容段落</p>
    </div>
    <div class="left-sidebar" style="">
      <p>這裡是側邊欄</p>
    </div>
    <div class ="right-sidebar" style="">
      <p>這裡是右側欄</p>
    </div>
  </div>
  <div style="border: 1px solid #ccc; background: pink;">
    <p>這裡是頁尾資訊</p>
  </div>
</body>
</html>

嵌入其他網頁

<iframe width="640" height="360"
  src="https://www.youtube.com/embed/vCKESBmlP9o"
  frameborder="0" allowfullscreen></iframe>

<iframe> 元素可用來將其他網頁內容的資訊嵌入到 HTML 文件，例如我們可以將 YouTube 影片或 Google 地圖嵌入到我們的網頁中。

課後練習

請運用今天課程學到的知識，試著編寫出類似下圖排版樣式的 HTML 文件。

解答

HTML 元素

HTML 元素

文字編排

標題

段落

粗體

斜體

上標

下標

斷行

水平線

項目符號

有序列表

無序列表

自定義列表

連結

圖片

表格

牛刀小試

排版

牛刀小試

嵌入其他網頁

課後練習

results matching ""

No results matching ""