此份速學筆記是二哥上大學前暑期先修課程網頁設計的第一部份 : HTML 基礎. HTML 網頁可以放在本機電腦用瀏覽器載入檢視效果, 但最好能上傳到雲端伺服器中, 這樣在全世界任何有 Internet 的地方都能瀏覽.
架設網站伺服器非常簡單, 不須申請線路與頻寬, 也不用安裝伺服器軟體, 網路上有許多提供免費網站 (含網址) 的虛擬主機業者, 只要透過網頁就可以線上架設與管理網站, 參考 :
#
申請免費 PHP 虛擬主機 000a.biz 與 000webhost.com
為何要學 HTML? 因為瀏覽器是最方便好用的 GUI 人機介面, 不論手機或電腦都已內建, 不須安裝馬上可用, 是呈現專案成果的最佳介面, 而 HTML 就是瀏覽器背後最主要的技術.
網頁技術分為前端與後端, 前端即控制瀏覽器呈現內容的技術, 後端則是處理前端請求與資料庫存取, 最後目的是輸出結果給前端網頁瀏覽器來呈現. 網頁前端技術建立在三個基礎上 :
| 網頁技術 | 用途 | 說明 |
| HTML | 定義網頁內容 | 呈現文字, 圖片, 影音內容 |
| CSS | 定義網頁外觀 | 網頁版面佈置與排版, 網頁元素外觀設定 |
| Javascript | 定義網頁行為 | 動態控制網頁元素行為 |
使用原始的 CSS 來排版與撰寫原始的 Javascript 來設計動態網頁比較低階與瑣碎, 快速建置專案雛形大都使用較高階之 Javascript 框架 (framework, 即架構完整之函式庫), 例如 jQuery, jQuery Mobile 與 Bootstrap :
| Javascript 框架 | 說明 |
| jQuery | 可方便操控網頁中的元素 |
| jQuery Mobile | 用於行動裝置的 jQuery |
| Bootstrap | 可快速排版與設計響應式網頁 (responsive web page) |
後端技術即運作於伺服器上的網頁應用程式, 主要有 PHP, JSP, Ruby, Python 等等. 由於 Python 應用範圍為全方位, 可用來設計桌面應用程式, 嵌入式控制, 以及網頁應用程式, 因此學習 Python 的投資報酬率較高, 不必再學習其他程式語言. 但目前許多免費或便宜的後端虛擬主機大都是跑 PHP, 其語法與 Javascript 類似
Python 後端網頁技術有發展極為成熟之框架可套用, 使用框架可加速開發速度, 目前最受歡迎的有兩個, 建議先學習 Flask, 行有餘力再學 Django :
| Python 網頁框架 | 說明 |
| Flask | 易學之輕量級框架, 可搭配技術之選擇性與彈性高 |
| Django | 一站解決之全功能框架, 可快速佈署中大型專案 |
網頁技術學習地圖建議如下 :
基本上只要學過基本的 HTML + Bootstrap 就可以架設靜態網站, 學過基本的 PHP 或 Python + Flask 就可以架設動態網站.
一. HTML 結構 :
HTML 最新的標準為 HTML5, 其結構由文件類型, 網頁標頭, 以及網頁本體構成 :
只要將下列 HTML5 範本複製貼到記事本或 Notepad+ 等文字編輯器即可進行 HTML5 網頁設計, 將編輯好的檔案以 utf-8 編碼存成 .htm 或 .html 檔後用瀏覽器開啟即可看到網頁內容 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style></style>
<script></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
考量要在 PC 與行動裝置上都能適切地顯示網頁內容, 必須在標頭中添加一個名稱為 viewport 的 meta 標籤 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style></style>
<script></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
如果要模仿 App 那樣不能縮放視窗, 只能上下滑動的效果, 可在 viewport 的 content 中添加
user-scalable=no (預設為 yes).
HTML 語法說明如下 :
- 網頁檔案的副檔名是 .htm 或 .html 兩種.
- 網頁結構可分成文件類型 (DOCTYPE), 網頁標頭 (head), 以及網頁本體 (body) 三大部分, 均由可巢狀嵌套的網頁元素組成. 標頭用來描述整份網頁相關的資訊, 例如標題 (title), 以及中介資料 (meta) 內的關鍵字 (keywords) 與編碼 (charset) 等, 這些資訊除標題外都不會顯示於網頁中, 而本體 (body) 內的元素都會顯示在瀏覽器上. 本體中不想顯示的內容可用下列語法註解掉 :
<!-- 這是註解 -->
瀏覽器遇到註解內容會跳過, 不會呈現在網頁中.
- 網頁元素 (element) 是由標籤 (tag) 與其屬性 (attributes) 構成 :
角括號 < 與 > 包圍起來的稱為標籤, 標籤中有屬性 (attributes) 可設定內容的呈現方式, 例如 <h1 color='red'>Hello World</h1> 會以紅色的一號標題顯示 Hello World. 其中前者 <h1> 為起始標籤, 後者有斜線的 </h1> 為結束標籤, 而整個 <h1>Hello World</h1> 稱為一個網頁元素.
大部分元素都有起始與結束標籤 (稱為容器標籤 container tag), 但有些元素沒有結束標籤 (稱為單一標籤 single tag), 稱為空元素, 例如 :
<meta> <hr> <br> <img> <input> <area> <link> <col>
- 網頁標籤不分大小寫, <br> 與 <BR> 是一樣的.
- 標籤通常有一個以上屬性, 各屬性都放在起始標籤內以空格隔開 :
<起始標籤 屬性1="值1" 屬性2="值2">
- <script></script> 元素用來嵌入控制網頁元素互動的 Javascript 程式碼, script 可放在 head 內, 也可以放在 body 內, 其差別是在網頁被完全載入之前 (放在 head 內) 或之後 (放在 body 內) 作用. Javascript 程式也可以放在外部 .js 檔中, 用 src 屬性指定檔案位置 :
<script src="js/abc.js"></script>
- <style></style> 元素用來嵌入樣式定義, 連結外部 .css 樣式檔要用 link 標籤並以 href 屬性指定檔案位置 :
<link href="css/style.css">
關於 HTML 元素可參考 :
#
https://www.htmlquick.com/reference/tags.html
HTML 元素的排版效果有兩種層級 :
- 行內 (inline level) 層級 : 結束後不會換行
- 段落 (paragraph level) 層級 : 結束後會換行加一個空行
行內層級的元素在結束時須要借助 <br> 元素來換行, 否則會與下一個元素連在一起; 而段落層級的元素則本身就有換行效果, 而且換行後與下一個元素之間有一個空行.
每一個標籤都有其特定可用之屬性, 但全域屬性 (global attributes) 則是每一個標籤都可以用的屬性, 常用的全域屬性如下 :
| 全域屬性 | 說明 |
| id | 元素在網頁中的唯一識別名稱 |
| class | 套用的樣式類別名稱 |
| style | 只套用於此元素的樣式內容 |
| title | 元素的提示資訊 (滑鼠滑過時顯示) |
| dir | 容器元素中的文字走向 (預設左至右 ltr, 可設 rtl/auto) |
| lang | 元素優先套用之語系 (繁體中文為 zh-tw) |
| accesskey | 設定元素之鍵盤快速鍵 (ALT 組合鍵) |
| tabindex | 駐點索引 |
另外, 有些稱為 Boolean 屬性者用來啟用或關閉特定功能, 常用如下表 :
| 常用 Boolean 屬性 | 說明 |
| disabled | 元素被禁止 (有顯示但灰色無功能) |
| hidden | 元素被隱藏 (無顯示無功能) |
| checked | 已被核取 (input-checkbox) |
| selected | 已被選取 (option/input-radio) |
| multiple | 允許多選 (select) |
| readonly | 唯讀, 無法輸入資料 (input-text/textarea) |
| autocomplete | 自動完成 (input-text) |
| scrolling | 啟用卷軸 (textarea) |
| nowrap | 禁止換行 |
| noresize | 禁止縮放 |
| border | 有邊框 |
| autofocus | 自動取得頁面焦點 |
| autoplay | 自動播放 |
| sortable | 可排序 |
| reversed | 反序排列 |
| required | 必填欄位 |
但 HTML5 揚棄了 "true" 或 "false" 的設定方式, 而是使用如下三種方式 :
1. disabled (建議)
2 disabled=""
3. disabled="disabled"
例如要讓一個按鈕無法使用, 最簡單的用法是 :
<button disabled>OK</button>
二. 網頁中的特殊符號 :
在網頁中顯示下列特殊字元不能直接由鍵盤輸入, 須用如下稱為 HTML Character Entities 的特定字串取代 (不分大小寫, 但通常用小寫) :
| 特殊符號 | 說明 | HTML 代號 |
| < | 小於 | < |
| > | 大於 | > |
| & | 且 | & |
| " | 雙引號 | " |
| ' | 單引號 | ' |
| 半形空白 | |
| ¢ | 美元一分 | ¢ |
| £ | 英鎊符號 | £ |
| ¥ | 日元符號 | ¥ |
| € | 歐元符號 | € |
| © | 版權符號 | © |
| ® | 註冊商標 | ® |
瀏覽器會忽略網頁內容中多於一個的空白, 如果要顯示多個空白必須使用多個連續串接的 " ".
範例 1 : 特殊符號測試
<!DOCTYPE html>
<html>
<head>
<title>特殊符號</title>
<meta charset="utf-8">
</head>
<body>
<小於<br>
>大於<br>
&且<br>
"雙引號<br>
'單引號<br>
半形空白<br>
¢美元一分<br>
£英鎊符號<br>
€歐元符號<br>
©版權符號<br>
®註冊商標<br>
</body>
</html>
三. 文字效果 :
HTML5 廢棄了部分 HTML4 時代的文字效果標籤 (例如 font, center, strike, big, basefont 等), 全面改用 CSS 來設定網頁樣式, 但還是保留了部分好用的文字效果標籤, 同時也新增了一些新的標籤, 以下是較常用者 :
| 文字效果標籤 | 說明 |
| <b></b> | 粗體字, 同 HTML5 的 <strong></strong> |
| <i></i> | 斜體字, 同 HTML5 的 <em></em> |
| <small></small> | 較小字, 用於註解 |
| <strong></strong> | 以粗體強調 |
| <u></u> | 為文字加上底線 |
| <s></s> | 刪除字 |
| <q></q> | 引用語 (會自動加引號) |
| <sup></sup> | 上標字 |
| <sub></sub> | 下標字 |
| <mark></mark> | 螢光筆 |
| <kbd></kbd> | 標示鍵盤按鍵如 Ctrl+D |
| <ruby>字<rt>注音</rt></ruby> | 在字的上方添加注音 |
注意, 這些文字效果元素都是 inline 層級的元素, 亦即套用這些效果後不會換行.
範例 2 : 文字效果測試
<!DOCTYPE html>
<html>
<head>
<title>文字效果</title>
<meta charset="utf-8">
</head>
<body>
<b>Hello World</b> (b)<br>
<i>Hello World</i> (i)<br>
<u>Hello World</u> (u)<br>
Hello World (無)<br>
<small>Hello World</small> (small)<br>
<strong>Hello World</strong> (strong)<br>
<s>Hello World</s> (s)<br>
<q>Hello World</q> (q)<br>
x<sub>1</sub><sup>2</sup>+x<sub>2</sub><sup>4</sup> (sub, sup)<br>
<mark>Hello World</mark> (mark)<br>
<kbd>Ctrl+D</kbd> (kbd)<br>
<ruby>哈<rt>ㄏㄚ</rt>囉<rt>ㄌㄨㄛ</rt></ruby> (ruby, rt)<br>
</body>
</html>
四. 段落效果 :
具有段落排版效果的 HTML 元素如下表, 它們都是段落層級 (paragraph level) 元素, 呈現完會換行 :
| 段落標籤 | 說明 |
| <h1></h1> | 1 號 (最大) 段落標題 |
| <h2></h2> | 2 號 (次大) 段落標題 |
| <h3></h3> | 3 號段落標題 |
| <h4></h4> | 4 號段落標題 |
| <h5></h5> | 5 號段落標題 |
| <h6></h6> | 6 號 (最小) 段落標題 |
| <p></p> | 顯示一個段落, 顯示完跳下行 |
| <br> | 強制跳行 |
| <hr> | 水平線 |
| <pre></pre> | 預先格式化資料 (保留空白, 但 HTML 碼仍會繪製) |
| <blockquote></blockquote> | 引用文字段落 (此段落會左右皆縮排) |
hr 標籤除了以水平線分隔效果外, 在 HTML5 還表示一個語意上的斷點. pre 標籤用來顯示內容之原始格式, 所以其中的空格都會如實呈現, 不像其他標籤內容只保留一個空格, 但裡面的 HTML 碼還是照常繪製, 而非呈現 HTML 碼. br 標籤通常用來為行內層級標籤 (不會自動換行者, 例如上面的文字效果標籤) 強制換行以利排版.
範例 3 : 段落效果測試
<!DOCTYPE html>
<html>
<head>
<title>段落效果</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World <h1></h1>
<h2>Hello World <h2></h2>
<h3>Hello World <h3></h3>
<h4>Hello World <h4></h4>
<h5>Hello World <h5></h5>
<h6>Hello World <h6></h6>
<hr>
Hello World<br>
<div>Hello World</div>
<blockquote>
人生得意須盡歡，莫使金樽空對月。<br>
天生我材必有用，千金散盡還復來。
</blockquote>
<pre>
if (scorea >= 60) {
alert("pass");
}
</pre>
</body>
</html>
注意, pre 保存格式的範圍是從 <pre> 結束起算直到 </pre> 開頭之間的內容.
五. 群組元素 span 與 div :
群組標籤 span 與 div 本身並沒有意義, 在網頁外觀上也不會有任何改變, 僅用來將一群元素嵌套在裡面形成一個群組, 以便利用 id 或 class 屬性來套用特定樣式或用程式進行互動操作, 或者用 lang 屬性來指定此範圍內內容之語系. 很多框架例如 Bootstrap 就大量使用 div 來套用網頁樣式.
| 群組範圍元素 | 說明 |
| <span></span> | 將嵌套在內的元素組成一個 inline 範圍 |
| <div></div> | 將嵌套在內的元素組成一個 paragraph 範圍 |
這兩個元素的差別是 span 為 inline 元素不會換行, 而 div 是 paragraph 層級元素會換行, 且與下一個元素間有一空行.
範例 4 : 群組元素 span 與 div 測試
<!DOCTYPE html>
<html>
<head>
<title>段落效果</title>
<meta charset="utf-8">
</head>
<body>
Hello World
<span>Hello (span) </span>
<span>World (span) </span>
<div>Hello World (div) </div>
<div
style="color:blue">Hello World (div)</div>
</body>
</html>
可見除非用 style 屬性套上樣式, 否則 span 與 div 對網頁外觀無影響.
六. 內嵌頁框 iframe :
內嵌頁框 iframe 用來在瀏覽器視窗中的建立一個可以嵌入其他網頁的特定區域, 其屬性如下表 :
| iframe 元素 | 說明 |
| src | 指定要內嵌至頁框中的網頁 URL |
| name | 頁框名稱, 用來給超連結 a 標籤的 target 屬性參照 |
| width | 頁框寬度 (px) |
| height | 頁框高度 (px) |
| frameborder | 頁框框線寬度 (px) |
注意, 屬性 src 嵌入網站本身的網頁並無問題, 但若是網路上其他網站的頁面則不一定能載入, 例如將 src 設為 Google 或 Yahoo 等網站首頁都會被拒絕.
範例 5 : 內嵌網頁測試
<!DOCTYPE html>
<html>
<head>
<title>內嵌頁框測試</title>
<meta charset="utf-8">
</head>
<body>
<iframe src="html_test_hello_world.htm" width=300 height=150 frameborder=1>不支援 iframe</iframe>
</figure>
</body>
</html>
iframe 可以用來在網頁中嵌入 Youtube 影片, 先將網址 watch?v= 後面的影片 id 記下來, 例如下面這個 id=
lM108D-og5o 的影片 :
然後將影片 id 放到 iframe 的 src 屬性中, 網址格式如下 :
https://www.youtube.com/
embed/
lM108D-og5o
注意, 不可以直接將影片網址 https://www.youtube.com/watch?v=lM108D-og5o 設為 src, 那樣會被 Youtube 拒絕顯示.
範例 6 : 內嵌 Youtube 影片測試
<!DOCTYPE html>
<html>
<head>
<title>內嵌頁框測試</title>
<meta charset="utf-8">
</head>
<body>
<figure>
<iframe src="
https://www.youtube.com/embed/lM108D-og5o" width=400 height=300 frameborder="0" allowfullscreen>不支援 iframe</iframe>
<figcaption>nRF24L01 無線模組測試</figcaption>
</figure>
</body>
</html>
七. 超連結 :
超連結 (Hyperlink) 是 HTML 之所以被稱為超文件 (Hypertext) 的最關鍵特性, 亦即在文件之間建立互聯關係. 不論是文字, 圖片, 或影像, 任何網頁元素都可以在外面嵌套一個 a 元素而建立與其他文件之超連結.
標籤 a 具有兩個最重要屬性 href 與 target, 其中 href 用來指向另一個文件的 URL 位置, 而 target 則用來指定新文件的開啟方式, 有下列四種方式 :
| target 屬性 | 說明 |
| _self | 在目前的頁籤中開啟, 即取代目前網頁內容 (預設) |
| _parent | 在父視窗 (上一層視窗) 中開啟文件 |
| _top | 在瀏覽器最上層視窗中開啟文件, 該視窗若有 iframe 會被移除 |
| _blank | 在新頁籤中開啟文件 |
範例 7 : 文字超連結測試
<!-- html_test_hyperlink_1.htm -->
<!DOCTYPE html>
<html>
<head>
<title>超連結</title>
<meta charset="utf-8">
</head>
<body>
<a href="html_test_hello_world.htm" target="_self">在目前視窗中開啟</a> _self<br>
<a href="html_test_hello_world.htm" target="_parentf">在父視窗中開啟</a> _parent<br>
<a href="html_test_hello_world.htm" target="_top">在最上層視窗中開啟</a> _top<br>
<a href="html_test_hello_world.htm" target="_blank">在新視窗中開啟</a> _blank<br>
</body>
</html>
可見在瀏覽器的頁籤中, _self 與 _top 事實上都會在目前的頁籤中開啟文件, 取代原先的網頁; 而 _parent 與 _blank 則會在新開啟的頁籤中顯示文件.
若將上面的網頁 html_test_hyperlink_1.htm 放在 iframe 中更能了解 _top 父視窗的意思 :
範例 8 : 內嵌頁框超連結測試
<!DOCTYPE html>
<html>
<head>
<title>超連結</title>
<meta charset="utf-8">
</head>
<body>
<p><a href="
html_test_hello_world.htm" target="
iframe1">在內嵌頁框中開啟</a><p>
<iframe name="
iframe1" src="
html_test_hyperlink_1.htm" width=300 height=150></iframe>
</body>
</html>
可見在內嵌頁框中的 html_test_hyperlink_1.htm 網頁, 其 _self, _parent, 與 _blank 效果與不在內嵌頁框中一樣; 不同的是 _top, 它會在目前的頁籤中開啟文件而取代掉整個網頁.
除了文字超連結外, a 元素內可籤套其他多媒體元素形成多媒體超連結, 例如下面範例中的圖片超連結 :
範例 9 : 圖片超連結測試
<!DOCTYPE html>
<html>
<head>
<title>超連結</title>
<meta charset="utf-8">
</head>
<body>
<a href="index.htm">
<img src="img/html_test_hyperlink_home.jpg">
</a>
</body>
</html>
a 元素還可用來製作頁內超連結 (又稱錨點 anchor), 亦即連結目標為目前網頁內之錨點, 這對於來回閱讀很長的網頁非常好用. 每一個錨點元素必須有一個 id 屬性, 而超連結的 href 屬性只要指定為 "#anchorID" 即可連接到 id 屬性為 "anchorID" 之元素, 例如 :
範例 10 : 頁內超連結 (錨點) 測試
<!DOCTYPE html>
<html>
<head>
<title>超連結</title>
<meta charset="utf-8">
</head>
<body>
<p id="
#top">TOP</p>
<p><a href="
#theme1">主題1</a></p>
<p><a href="
#theme2">主題2</a></p>
<p><a href="
#theme3">主題3</a></p>
<div id="
theme1" style="height:300px;">
主題1:<a href="
#top">TOP</a>
</div>
<div id="
theme2" style="height:300px;">
主題2:<a href="
#top">TOP</a>
</div>
<div id="
theme3" style="height:300px;">
主題3:<a href="
#top">TOP</a>
</div>
</body>
</html>
此例使用 height 樣式來模擬超長網頁情況, 此處三個主題開頭被指定了 id 屬性 theme1, theme2, theme3 作為錨點, 並在網頁上方放置一個 id="top" 頂部錨點供返回網頁最上面.
八. 清單 :
HTML 的清單有三種, 相關標籤如下表 :
| 清單 (List) | 元素結構 |
| 符號清單 (unordered list) | <ul><li></li></ul> |
| 編號清單 (Ordered list) | <ol><li></li></ol> |
| 定義清單 (Definition list) | <dl><dt><dd></dd></dt></dl> |
符號清單與編號清單可以多層巢狀嵌套, 但
定義清單通常只有兩層結構, dt 是標題, 而 dd 則是定義.
ul 與 dl 元素沒有自己特定屬性, 僅有全域屬性. 在 HTML5 中 ul 不再使用 type 屬性, 改用 list-style-type 樣式來設定, 有下列四種樣式 :
| ul 符號樣式 (list-style-type) | 說明 |
| disc | 黑圓點 |
| circle | 圓圈 |
| square | 黑方點 |
| none | 無符號 |
ol 則有下列三個屬性 :
| ol 屬性 | 說明 |
| type | 編號類型 : 1=數字, A=大寫英文, a=小寫英文, I=大寫羅馬數字, i=小寫羅馬數字 |
| start | 設定起始值 (預設從 1,A,a,I,i 開始) |
| reversed | 反向排序 (boolean) |
範例 11 : 符號清單測試
<!DOCTYPE html>
<html>
<head>
<title>符號清單</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>德魯納酒店</li>
<li>Voice 3</li>
<li>七日的王妃</li>
</ul>
<ul style="list-style-type:circle">
<li>IU</li>
<li>呂珍九</li>
<li>朴敏英</li>
</ul>
<ul style="list-style-type:square">
<li>李荷娜</li>
<li>李東健</li>
<li>李陣郁</li>
</ul>
</body>
</html>
範例 12 : 編號清單測試
<!DOCTYPE html>
<html>
<head>
<title>編號清單</title>
<meta charset="utf-8">
</head>
<body>
<ol type="1"
start="2">
<li>德魯納酒店</li>
<li>Voice 3</li>
<li>七日的王妃</li>
</ol>
<ol type="A">
<li>IU</li>
<li>呂珍九</li>
<li>朴敏英</li>
</ol>
<ol type="i"
reversed>
<li>李荷娜</li>
<li>李東健</li>
<li>李陣郁</li>
</ol>
</body>
</html>
範例 13 : 定義清單測試
<!DOCTYPE html>
<html>
<head>
<title>定義清單</title>
<meta charset="utf-8">
</head>
<body>
<dl>
<dt>德魯納酒店</li>
<dd>IU</dd>
<dd>呂珍九</dd>
</dt>
</dl>
<dl>
<dt>Voice3</li>
<dd>李荷娜</dd>
<dd>李陣郁</dd>
</dt>
</dl>
<dl>
<dt>七日的王妃</li>
<dd>朴敏英</dd>
<dd>李東健</dd>
</dt>
</dl>
</body>
</html>
九. 表格 :
HTML 的表格主要由 table (表格本身), tr (列), th (標題欄), td (內容欄), caption (表格標題) 等元素組成, 結構如下 :
<table>
<caption>表格標題</caption>
<tr>
<th>標頭欄</th>
<th>標頭欄</th>
</tr>
<tr>
<td>內容欄</td>
<td>內容欄</td>
</tr>
<tr>
<td colspan="2">表格尾</td>
</tr>
</table>
另外也可以加上三個結構元素 thead (表格標頭), tbody (表格主體), 以及 tfoot (表格結尾), 但不是必要 :
<table>
<caption>表格標題</caption>
<thead>
<tr>
<th>標頭欄</th>
<th>標頭欄</th>
</tr>
</thead>
<tbody>
<tr>
<td>內容欄</td>
<td>內容欄</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">表格尾</td>
</tr>
</tfoot>
</table>
table 元素的屬性 :
| table 屬性 | 說明 |
| border | 表格外框寬度 (px) |
| width | 表格寬度 (px 或 %) |
| cellpadding | 儲存格上下左右留白 (px) |
| cellspacing | 相鄰儲存格之間距 (px) |
| frame | 表格外框的顯示模式 |
| rules | 表格內框的顯示模式 |
| table 的 frame 屬性 | 說明 |
| void | 不顯示外框 |
| box | 只顯示四邊框線 |
| above | 只顯示上框線 |
| below | 只顯示下框線 |
| hsides | 只顯示上下框線 |
| lhs | 只顯示左框線 |
| rhs | 只顯示右框線 |
| vsides | 只顯示左右框線 |
| table 的 rules 屬性 | 說明 |
| none | 不顯示內框線 |
| all | 顯示全部內框線 |
| rows | 只顯示各列之間的內框線 |
| cols | 只顯示各欄之間的內框線 |
| groups | 顯示 thead, tbody, tfoot 之間的內框線 |
tr 元素的屬性 :
| tr 屬性 | 說明 |
| align | 設定整列之水平對齊 (left/center/right/justify/char) |
| valign | 設定整列之垂直對齊 (top/middle/bottom/baseline) |
td 與 th 的屬性 :
| td/th 屬性 | 說明 |
| colspan | 合併儲存格的欄數 |
| rowspan | 合併儲存格的列數 |
| align | 設定儲存格之水平對齊 (left/center/right/justify/char) |
| valign | 設定儲存格之垂直對齊 (top/middle/bottom/baseline) |
| width | 儲存格寬度 (px 或佔表格寬度 %) |
| height | 儲存格高度 (px 或佔表格高度 %) |
範例 14 : 原始表格測試
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<caption>表格標題</caption>
<tr>
<th>第1欄</th>
<th>第2欄</th>
<th>第3欄</th>
</tr>
<tr>
<td>第1列第1欄</td>
<td>第1列第2欄</td>
<td>第1列第3欄</td>
</tr>
<tr>
<td>第2列第1欄</td>
<td>第2列第2欄</td>
<td>第2列第3欄</td>
</tr>
<tr>
<td
colspan="3">合併儲存格</td>
</tr>
</table>
</body>
</html>
可見原始的表格外觀不是很好看, 可以將 border 設為 0, cellspacing 設為 1, 並將 table 與 th/td 的背景利用樣式表設為不同色套疊得到細邊框的表格, 例如 :
範例 15 : 細邊框表格測試
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
<style>
table {background-color:blue;}
td, th {background-color:white;}
</style>
</head>
<body>
<table
border="0" cellspacing="1" cellpadding="5">
<caption>表格標題</caption>
<tr>
<th>第1欄</th>
<th>第2欄</th>
<th>第3欄</th>
</tr>
<tr>
<td>第1列第1欄</td>
<td>第1列第2欄</td>
<td>第1列第3欄</td>
</tr>
<tr>
<td>第2列第1欄</td>
<td>第2列第2欄</td>
<td>第2列第3欄</td>
</tr>
<tr>
<td colspan="3">合併儲存格</td>
</tr>
</table>
</body>
</html>
此例使用 style 樣式表元素將 table 元素之底色設為藍色, td 與 th 底色設為白色, 而 cellspacing 設為 1 (表示相鄰儲存格間隙寬度為 1px), 套疊結果就顯示邊框為 1px 的藍色細邊框.
十. 多媒體 :
多媒體包括圖片 (img), 音訊 (audio), 以及視訊 (video).
1. 圖片 :
HTML 支援 jpg, gif, 以及 png 等圖檔格式, 其中 jpg 與 png 為全彩, gif 則僅 256 色, 但只有 gif 具有動畫功能, 在透明色方面, jpg 不支援透明度.
HTML5 中呈現圖片的標籤為 img, 其屬性如下表 :
| img 屬性 | 說明 |
| src | 圖片來源, 可為檔案路徑或 URL |
| width | 圖框寬度, 單位為 px (例如 400) 或 % (例如 30%) |
| height | 圖框高度度, 單位為 px (例如 400) 或 % (例如 30%) |
| alt | 圖片無法顯示時的替代文字 (滑鼠滑過也會顯示) |
img 是單一標籤 (沒有結束標籤), 語法如下 :
<img src="img/cat.jpg" width="200" height="100" alt="missing">
如果沒有用 width 與 height 屬性設定圖框大小, 則以圖片尺寸為圖框大小.
另外還可以用 figcaption 標籤來標註圖片資訊 (圖片), 這會在圖片左上角或左下角加上標註文字, 視 figcaption 是放在 img 之前 (左上角) 還是之後 (左下角) 而定, 但應將 img 與 figcaption 嵌套在 figure 元素裡面, 語法如下 :
<!-- 圖片註解在左上角 -->
<figure>
<figcaption>abc</figcaption>
<img src="img/cat.jpg" width="200" height="100" alt="missing">
</figure>
<!-- 圖片註解在左下角 -->
<figure>
<img src="img/cat.jpg" width="200" height="100" alt="missing">
<figcaption>abc</figcaption>
</figure>
範例 16 : 圖片測試-貓
<!DOCTYPE html>
<html>
<head>
<title>圖片測試</title>
<meta charset="utf-8">
</head>
<body>
<figure>
<img src="img/20190510-cat.jpg" width="400" height="225" alt="Missing">
<figcaption>可愛的小咪</figcaption>
</figure>
</body>
</html>
圖片來源可以是網路來源 (但要注意不可侵權), 只要將圖片網址放在 src 屬性裡即可. 在
Pixabay 等網站上上可找到許多免費授權的圖片, 例如 :
範例 17 : 圖片測試-變色龍
<!DOCTYPE html>
<html>
<head>
<title>圖片測試</title>
<meta charset="utf-8">
</head>
<body>
<figure>
<figcaption>變色龍</figcaption>
<img src="https://cdn.pixabay.com/photo/2016/12/01/05/57/chameleon-1874514_1280.jpg" width="300" height="427">
</figure>
</body>
</html>
參考 :
#
免費下載高解析度圖片的 15 個最佳圖庫網站
2. 視訊與音訊 :
HTML 的音訊與視訊標籤分別為 audio 與 video, 其可用屬性相同如下表 :
| audio/video 屬性 | 說明 |
| src | 音訊/視訊來源, 可為檔案路徑或 URL |
| width | 訊框寬度, 單位為 px (例如 400) |
| height | 訊框高度, 單位為 px (例如 300) |
| poster | 影片下載完畢前或播放前所顯示畫格之 URL |
| preload | 設定是否要在網頁載入同時將影片下載至緩衝區 : none/auto/metadata |
| autoplay | 是否要在網頁載入後自動播放影片 (boolean) |
| controls | 是否要顯示瀏覽器內建之控制面板 (boolean) |
| muted | 是否要預設為靜音 (boolean) |
| loop | 是否要重複播放 (boolean) |
其中 autoplay, controls, muted, 與 loop 四個為布林屬性.
audio/video 元素語法如下 :
<audio src="a.mp3" controls autoplay>不支援 audio</audio>
<video src="a.mp4" controls autoplay>不支援 video</video>
HTML5 支援的視訊格式有 mp4, webm, 以及 ogg 三種; 音訊則有 mp3, wav, 與 ogg 三種.
範例 18 : 影片測試-mp4
<!DOCTYPE html>
<html>
<head>
<title>視訊測試</title>
<meta charset="utf-8">
</head>
<body>
<figure>
<video src="video/jinjin-2007-xmas.mp4" poster="img/video_poster.jpg" controls autoplay>不支援 video</video>
<figcaption>菁菁 2007 聖誕晚會</figcaption>
</figure>
</body>
</html>
