第 1 章 HTML
(1) HTML 簡介
∗ HTML
▸ 超文件標示語言 (Hypertext markup language， HTML)
✶ 說明網頁意義的語言
▸ HTML 的歷史
✶ 1991：HTML 出現
✶ 1995：HTML2，簡單(醜陋)的網頁格式顯示
✶ 1997：HTML3.2， HTML4.0
✶ 1999：HTML4.01
# HTML3 與 HTML4 期間，人們及企業開始嚴肅看待網際網路，希望網頁看來美觀，各家瀏覽器激烈競爭，各自發展獨家且不相容的 HTML，
跨平台 HTML 之撰寫非常困難
✶ 2000：XHTML1.0
# 2000 – 2005：CSS 已明確定義，但各家瀏覽器對於 CSS 之支援各自不同，同一瀏覽器的前後版本也可能不相容，
跨平台 HTML 及 CSS 之撰寫還是有大問題
# 2005 – 2008：所有瀏覽器對於 CSS 都可支援，唯獨 IE 5 是當時普遍使用但對 CSS 支援很差的瀏覽器
✶ 2011：HTML5
# W3C 停止發展 XHTML，HTML5 成為未來主流
# 2009 以後：可以放心假設所有瀏覽器對於 CSS 都有很好的支援(IE 6、IE 7 例外)，HTML 與 CSS 熬了 18 年終於步上正軌
∗ HTML5 的由來
▸ 2004 年，W3C 決定放棄 HTML，改而支持以 XML 為基礎的 XHTML 技術
▸ 來自 Apple、Mozilla、與 Opera 等之社群人士則成立 Web Hypertext ApplicationTechnology Working Group (WHATWG)
工作小組，分庭抗禮繼續發展 HTML
▸ 2007 年 4 月，Apple、Mozilla、與 Opera 提議 W3C 之下的新的 HTML 工作小組應採用 WHATWG 所提出的 HTML5
▸ 2007 年 5 月，W3C 的 HTML 工作小組同意，於是 HTML5 成為發展主流，XHTML 將走入歷史
▸ 2014 年 10 月，W3C 正式推出 HTML5 標準
(2) Web 系統
∗ Web 系統 (Web system, Web-based system) 包含兩部份：
▸ 網頁設計 (Web design)：網頁頁面之製作，又稱為客戶端設計 (Client-side design)、瀏覽器端設計 (Browser-side design)、
或前端設計 (Front-end design)
▸ Web 程式設計 (Web programming)：網站之應用程式設計，又稱為伺服器端程式設計 (Server-side programming)
或後端程式設計 (Back-end programming)
∗ Web 系統使用主從式架構 (Client/server architecture)：2 層式 (Two-tier)
▸ 客戶端(Client)：存取網路資源，利用使用者介面收集使用者資訊並傳送給伺服器
✶ 客戶端相關技術：HTML, CSS, JavaScript, ...
▸ 伺服器端(Server)：提供網路資源服務，接收使用者資訊、將送給使用者的文件格式化、並負責大多數的運算
✶ 伺服器端相關技術：伺服器軟體 (Apache, Nginx, MS IIS, ...)、伺服器端程式語言 (PHP, ASP.NET, JSP, Java, Python,
Ruby, Perl, ...)、資料庫管理系統(MySQL, Postgres, Oracle, MS SQL, ...)
(4) 前端主要工作與技術
▸ 前端工作
✶ 前端設計師：頁面樣式設計
# 佈局, UI/UX, 影像處理, 繪圖, 風格制定, ...
✶ 前端工程師：實作頁面設計
# 前端框架, CSS 預處理器, AJAX, JSON, API, ...
# 也可能包括網站架設與內容管理系統的導入 (Content management system, CMS)
✶ 前端設計與工程的交集：HTML, CSS, RWD, JavaScript, jQuery
(4) 網頁基礎及結構
∗ 電子文件
▸ 辦公室文件 (.doc, .xls, .ppt, .odt, .ods, .odp, ...)：格式與內容均可編輯
▸ PDF 文件：格式與內容不可編輯
▸ HTML 文件：格式與內容均可編輯，有格式顯示標準及傳輸協定
∗ HTML 文件
▸ 超文件標示語言 (Hypertext markup language， HTML)：用來產生網頁的標示語言
▸ 網頁也稱為 HTML 頁 (HTML page) 或 HTML 文件 (HTML document)
▸ 標示語言 (Markup language)：利用一群符號來標示一份文件應如何顯示
▸ 超文件標示語言是根據標準一般標示語言 (Standard generalized markup language，SGML) 所衍生而來
▸ HTML 檔案的副檔名應為 .html
∗ 基本 HTML 語法
▸ HTML 文件為文字檔，內含格式化指令稱為標籤 (Tag)，用來決定資料該如何顯示
▸ 標籤功能：顯示文字特殊效果 (例如粗體、斜體)、使用者可點選的控制元件 (例如點選框)、
顯示多媒體資料 (例如影像、音訊、視訊)
✶ 開始標籤由小於符號 (<)、標籤、及大於符號 (>) 組成，
例如 <p> 為段落 (Paragraph) 開始標籤
✶ 結束標籤由小於符號 (<)、斜線 (/)、
標籤、及大於符號 (>)組成，例如 </p> 為段落結束標籤
✶ 要顯示 < 及 > 字元需使用
< (less than) 與 > (greater than)
▸ 開始標籤、結束標籤、及其所包含的文字整體稱為元素 (Element)，所包含文字稱為內容 (Content)，例如：
<p>這是一個段落</p> 是一個段落元素，其內容為
這是一個段落
▸ 標籤屬性 (Tag attribute)
✶ 在標籤中加上屬性，可進一步設定標籤特性，例如：<meta
charset="utf-8"> (字元編碼為 UTF-8)
▸ 有些元素不需要結束標籤，稱為空元素 (Empty element)，例如橫線 <hr> (Horizontal rule)，斷行
<br> (Break)，影像 <img src=...> 等
∗ 以文字編輯器來產生 HTML 文件
▸ 在 Ubuntu 安裝 Brackets：兩種方式
1. 利用 Ubuntu PPA (此方式較好，版本會自動更新)
$ sudo add-apt-repository ppa:webupd8team/brackets
$ sudo apt update
$ sudo apt install brackets
▸ 在 Windows 或 Mac 安裝 Brackets：
▸ 設定 Brackets
✶ 設定中文繁體介面：Debug → Switch Language → 繁體中文 → Reload Brackets
✶ 選擇字型：檢視 → 佈景主題 → 字體大小：14px，字體 (選等寬字體)：
# Ubuntu：DejaVu Sans Mono
# MS Windows：Consolas
✶ 設定按下 Tab 鍵的結果是輸入 2 個空白，而不是定位鍵
# 點選右下方設定：最後呈現「空白字元：2」
# 註：在空白處移動游標時，看起來還是一次移動 2 格 (感覺上還是輸入了定位鍵)，
這是 Brackets 的智慧功能，一次跳至所設定空白字元的數量
✶ 因為 Brackets 的智慧縮排一點也不智慧，且 JavaScrit 語法錯誤偵測 (JsLint) 也不好用，因此將兩個都停用
# 在 Brackets 裡，點選 「除錯」 --> 「開啟喜好設定檔」 (或：Debug --> Open Preferences File) 即可編輯
brackets.json 設定檔，在最後加入 2 行
{
"brackets-eslint.gutterMarks": true,
.
.
...,
"smartIndent": false,
"linting.enabled": false
}
# 註：原先最後一行後面要加逗點，加入後的最後一行沒有逗點
▸ 亦有「所見即所得」(What you see is what you get, WYSIWYG) 編輯器
✶ 例如：MS Word (另存 HTML 新檔)、Dreamweaver、KompoZer 等，此類編輯器操作方便但所產生的樣式格式不當，
所儲存的檔案也很大，不利於網路傳輸，因此不建議使用
∗ 規劃專案目錄架構
webDesign/
css/
img/
example1.html
example2.html
▸ 最上層目錄為 webDesign (以 Ubuntu 作業系統為例，
可以設在 /home/<username>/目錄之下，其中
<username> 是登入的使用者名稱)
✶ 可包含多個子目錄：例如 css/ 與
img/ 等，前者置放 CSS 檔案，後者置放影像檔案
▸ 註：本教材的目錄架構主要以 Ubuntu 作業系統的表示法為主，在 Windows 系統中的目錄則以反斜線 (\) 表示
▸ 建立專案目錄架構，啟動 Brackets 並移到目的資料夾
檔案 → 開啟資料夾 → 選擇 <...>/webDesign/ 目錄 → 開啟
∗ HTML5 文件基本架構
▸ 建立新檔案：
檔案 → 新增 → ctrl-s → 選擇 <...>/webDesign/
目錄，檔名：simplest.html → 儲存，輸入以下內容：
<!doctype html>
<html>
<head>
<title>最簡單的網頁</title>
<meta charset="utf-8">
</head>
<body>
<p>最簡單的網頁</p>
</body>
</html>
▸ HTML 基本架構包含 <!doctype html> ， <html>，
<head> ，及 <body>
✶ <!doctype html> 宣告本文件為 HTML 文件型態，提供瀏覽器辨識
✶ <html> 為根元素 (Root element)，根元素包含所有其他元素
✶ <head> 元素緊跟在 <html> 標籤之後，稱為文件標頭
(Document head)，包含：
# <title> 元素在視窗標題區呈現標題
# <meta charset="utf-8"> 元素說明檔案的編碼方式
(utf-8 為主流)
✶ <body> 元素緊跟在 <head> 元素之後，
稱為文件本體 (Document body)
▸ 瀏覽器忽略 HTML 文件中的空行，亦忽略多於一個的連續空白
▸ HTML 的標籤不分大小寫，因此 <br> 亦可用
<BR> 代替，但習慣上均以小寫為主
▸ 可利用各種屬性 (Attribute) 來設定 HTML 元素的特性，屬性放在標籤之後，
其語法為：attribute="value"
✶ 例如利用 src (Source) 屬性在 HTML 文件中插入一影像：
<img src="myPicture.jpg" alt="My picture">
✶ 屬性值的雙引號可以省略 (但並非主流)，但如果屬性有許多值 (亦即內含空白)，就必須要有雙引號，例如：
<div style="width:200px; margin:0 auto;">
▸ 當瀏覽器開啟一份 HTML 文件時，瀏覽器依據標籤指示來組合及格式化文件內容，此程序稱為解析 (Parsing) 或呈現 (Rendering)，
例如將文字以粗體呈現：
<p>本段落裡的<strong>重點</strong>在瀏覽器中以粗體字呈現。</p>
(5) 文字呈現
∗ 文字標籤 (Text markup)
| 標題 (Header)：<h1>, <h2>, ...,
<h6> |
段落 (Paragraph)：<p> |
粗體 (Boldface)：<b> |
| 斜體 (Italic)：<i> |
底線 (Underline)：<u> |
上標 (Superscript)：<sup> |
| 下標 (Subscript)：<sub> |
斷行 (Break)：<br> |
橫線 (Horizontal rule)：<hr> |
| 空白 (Non-breakable space)： |
▸ 練習：建立 dessert1-1.html 檔案，輸入下列資料並以瀏覽器觀看
<!doctype html>
<html>
<head>
<title>甜點商店</title>
<meta charset="utf-8">
</head>
<body>
<h1>甜點商店</h1>
<p>我們製作最精美、最有創意、最健康的各式甜點</p>
<hr>
<h2>您要什麼甜點?</h2>
<p>餅乾和糕點：每份 50 元</p>
<p>蛋糕和派：每份 75 元</p>
<p>美食巧克力：每份 100 元</p>
<br>
<h2>開店時間</h2>
<p>
星期一到星期四，7:45 a.m. -- 9:45 p.m.<br> 星期五，7:45 a.m. -- 4:30 p.m.<br>
星期六，9:00 a.m. -- 4:00 p.m.<br> 星期日，中午 -- 9:00 p.m.
</p>
<br>
<h2>付款方式</h2>
<p>現金，自動櫃員機，信用卡，美國運通，發現卡，大來卡</p>
<br>
</body>
</html>
∗ 語意標籤 (Semantic markup)
▸ HTML5 使用語意標籤來描述文件的意義，有利於文件分析以及無障礙網頁
| 頁首 <header> |
導航 <nav> |
側欄 <aside> |
| 頁尾 <footer> |
文章 <article> |
地址 <address> |
| 重要 <strong> |
縮寫 <abbr> |
刪除字 <del> |
| 強調 <em> |
引文來源 <cite> |
插入字 <ins> |
| 引用文字 <blockquote> |
文字定義 <dfn> |
不正確字 <s> |
| 引用短文 <q> |
|
|
▸ 練習：將 dessert1-1.html 另存為 dessert1-2.html 並如下修改：
...
<header>
<h1>甜點商店</h1>
<p>我們製作最精美、最有創意、最健康的各式甜點</p>
</header>
...
<p>餅乾和糕點：<s>每份 50 元</s> <ins>每份 45 元</ins></p>
<p>蛋糕和派：每份 75 元</p>
...
<p>美食巧克力：每份 100 元</p>
<p>什麼叫<dfn>蛋糕</dfn>? --> 雞蛋+麵粉+功夫+愛心</p>
<br>
<h2>顧客的陳述：</h2>
<blockquote>
這家店甜點的口味實在太棒了，每當我從辛苦的工作崗位下來，我一定來嚐嚐各種口味，
享受獨特的餐廳氣氛，讓我一天的辛勞都拋到九霄雲外。
</blockquote>
<br>
<h2>開店時間</h2>
...<br><strong>星期日，中午 -- 9:00 p.m.</strong>
</p>
...
<br>
<address>地址：台中市中區台灣大道 1 號</address>
<br>
</body>
</html>
(6) 清單
∗ 清單 (List)
▸ 有序清單 (Ordered list)
<ol>
<li> ... </li>
<li> ... </li>
...
</ol>
✶ 編號：<ol type="1 | a | A | i | I"> (註：建議不使用此屬性，改為使用 CSS 設定)
▸ 無序清單(Unordered list)
<ul>
<li> ... </li>
<li> ... </li>
...
</ul>
✶ 項目符號：<ul type="disc | circle | square"> (註：建議不使用此屬性，改為使用 CSS 設定)
▸ 定義清單 (dl: definition list, dt: definition term 項目,
dd: definition description 描述)
<dl>
<dt> ... </dt>
<dd> ... </dd>
<dt> ... </dt>
<dd> ... </dd>
...
</dl>
▸ 練習：將 dessert1-2.html 另存為 dessert1-3.html 並如下修改：
...
<h2>您要什麼甜點?</h2>
<ol>
<li>餅乾和糕點：<s>每份 50 元</s> <ins>每份 60 元</ins></li>
<li>蛋糕和派：每份 75 元</li>
<li>美食巧克力：每份 100 元</li>
</ol>
<dl>
<dt>什麼叫蛋糕?</dt>
<dd>雞蛋+麵粉+功夫+愛心</dd>
</dl>
...
<h2>開店時間</h2>
<ul>
<li>星期一到星期四，7:45 a.m. -- 9:45 p.m.</li>
<li>星期五，7:45 a.m. -- 4:30 p.m.</li>
<li>星期六，9:00 a.m. -- 4:00 p.m.</li>
<li><strong>星期日，中午 -- 9:00 p.m.</strong></li>
</ul>
<br>
(7) 連結
∗ 連結 (Link)
<a href=...> ... </a>
▸ <a> ：anchor (定錨)
▸ href ：Hypertext reference (超文件參考)
▸ 練習：將 dessert1-3.html 另存為 dessert1-4.html 並如下修改：
...
<address>總店地址：台中市中區台灣大道 1 號</address>
<p>分店：</p>
<ul>
<li><a href="http://taipeishop.com">台北店</a></li>
<li><a href="http://hsinchushop.com">新竹店</a></li>
<li><a href="http://tainanshop.com">台南店</a></li>
<li><a href="http://kaohsungshop.com">高雄店</a></li>
</ul>
(8) 影像
∗ 影像 (Image)
<img src=... alt=... title=...>
▸ src：來源 (Source)，影像檔來源
▸ alt：替代 (Alternative) 文字，影像如果無法顯示，就以替代文字呈現
▸ title：標題，影像內容說明
▸ 使用網頁影像注意事項：
✶ 使用正確的影像尺寸：過大則影響傳輸效率，過小則畫質不佳
✶ 應在伺服器端就做好影像尺寸調整，不要在客戶端做
✶ 常用影像格式：jpg, png, gif
# 拍攝之影像：使用 jpg
# 以電腦軟體產生之影像或影像有透明部份：使用 png
# 有動畫功能之影像：使用 gif
✶ 通常在 HTML 檔案所在目錄中，建立子目錄 img/ 來存放影像
▸ HTML5 標籤：
✶ <figure> (圖片)：包含 <img> 與
<figcaption>，讓圖片與標題組合起來
✶ <figcaption>：圖片標題 (Figure caption)
▸ 練習：
✶ 在 webDesign 目錄中，建立子目錄 img/
✶ 下載 dessert.jpg 影像檔案並置於 img/ 目錄中
✶ 將 dessert1-4.html 另存為 dessert1-5.html 並如下修改：
...
<body>
<header>
...
</header>
<hr>
<h2>甜點樣式</h2>
<figure>
<img src="img/dessert.jpg" alt="甜點影像"><br>
<figcaption>本店使用高級材料來製作甜點，保證吃得安全、吃得營養、吃得開心。</figcaption>
</figure>
<br>
<h2>您要什麼甜點?</h2>
▸ 以上指定路徑的方式 (img/dessert.jpg) 均使用「相對路徑」(Relative path)，
不要使用「絕對路徑」(Absolute path)，例如：/home/m514/桌面/img/dessert.jpg，
否則換了環境頁面就無法正常呈現
(9) 表格
∗ 表格 (Table)
▸ 以儲存格的方式顯示資料
▸ 基本結構： <table>, <tr>, <th>, <td>
<table border="1">
<tr>
<th></th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td>售出票卷</td>
<td>120</td>
<td>135</td>
</tr>
<tr>
<td>總收入</td>
<td>NT$60,000</td>
<td>NT$67,500</td>
</tr>
</table>
註：不建議使用 border="1" 之屬性，應使用 CSS 樣式設定
▸ 儲存格縱向合併：<td rowspan="<合併的格數>">
<table border="1">
<tr>
<td>左上</td>
<td rowspan="2">右</td>
</tr>
<tr>
<td>左下</td>
</tr>
</table>
▸ 儲存格橫向合併：<td colspan="<合併的格數>">
<table border="1">
<tr>
<td>左上</td>
<td>右上</td>
</tr>
<tr>
<td colspan="2">下</td>
</tr>
</table>
▸ HTML5 建議表格格線、格線寬度及顏色、儲存格背景顏色、儲存格寬度等均在 CSS 中設定
▸ 練習：將 dessert1-5.html 另存為 dessert1-6.html 並如下修改：
<address>總店地址：台中市中區台灣大道 1 號</address>
<p>分店：</p>
<table border="1">
<tr>
<th>分店</th>
<th>地址</th>
<th>電話</th>
</tr>
<tr>
<td><a href="http://taipeishop.com">台北店</a></td>
<td>台北市士林區台北路 1 號</td>
<td>(02) 1234-5678</td>
</tr>
<tr>
<td><a href="http://hsinchushop.com">新竹店</a></td>
<td>新竹縣新竹市新竹路 1 號</td>
<td>(03) 1234-5678</td>
</tr>
<tr>
<td><a href="http://tainanshop.com">台南店</a></td>
<td>台南市台南路 1 號</td>
<td>(06) 1234-5678</td>
</tr>
<tr>
<td><a href="http://kaohsungshop.com">高雄店</a></td>
<td>高雄市高雄路 1 號</td>
<td>(07) 1234-5678</td>
</tr>
</table>
<br>
</body>
* 作業 1
(10) 表單
∗ 表單 (Form)：用於收集使用者的輸入資訊
▸ 表單結構
<form method=... action=... >
...
</form>
▸ method：GET 或 POST
▸ action：伺服器端網址
▸ 例如：
<p>註冊會員</p>
<form method="post" action="#">
帳號：<input type="text" name="account"><br>
密碼：<input type="password" name="password"><br>
<input type="submit" value="送出">
</form>
∗ 何時使用 GET 或 POST?
▸ GET：可直接在瀏覽器的 URL 欄位中輸入指令而執行
✶ 傳送的資料沒有安全疑慮 (資料會顯示在 URL 中)
✶ 傳送的資料不會改變伺服器資料的狀態 (不寫入資料)
▸ POST：無法直接在瀏覽器的 URL 欄位中輸入指令而執行
✶ 傳送的資料有安全考慮 (資料不會顯示在 URL 中，但資料攔截者還是可以取出)
✶ 傳送的資料會改變伺服器資料的狀態 (會寫入資料)
▸ 最安全的傳輸方式：https:// (所有資料均加密)
∗ 表單欄位 (Field)
▸ 文字輸入 (Text input)：<input type="text" name=...>
▸ 密碼輸入 (Password input)：<input type="password" name=...>
▸ 文字區塊 (Text area)：<textarea rows=... cols=...> ... </textarea>
▸ 單選項 (Radio choice)：
<input type="radio" name=... value=... checked> ...
<input type="radio" name=... value=...> ...
<input type="radio" name=... value=...> ...
✶ 以上各項 name 的值必須相同，checked 是預設選項
▸ 選擇框 (Check box)：
<input type="checkbox" name=... value=...> ...
<input type="checkbox" name=... value=... checked> ...
<input type="checkbox" name=... value=...> ...
✶ 以上各項 name 的值必須相同，checked 是預設選項
▸ 下拉式選擇框 (Drop-down select box)
<select name=...>
<option value=...> ... </option>
<option value=...> ... </option>
<option value=... selected> ... </option>
<option value=...> ... </option>
</select>
✶ selected 是預設選項
▸ 上載檔案 (Upload)
<form ... enctype="multipart/form-data">
<input type="file" value=...>
▸ 按鈕 (Button)
<button> ... </button>
▸ 電子信箱 (Email)
<input type="email" name=...>
▸ 數字 (Number)
<input type="number" name=...>
▸ 必填 (Required)
<input type=... name=..." required>
▸ 日期輸入選擇器 (Date picker)
<input type="date" name=...>
▸ 送出表單 (Submit)
<input type="submit" value=...>
∗ 單選或複選框加上標籤 (Label)
▸ 將單選或複選框輸入控制項以 <label> 標籤包住，例如：
<label><input type="radio" name="sex" value="F"> 女性</label>
<label><input type="radio" name="sex" value="M"> 男性</label>
▸ 有了 <lable> 標籤，使用者可以點擊控制項，也可點擊文字，增加許多便利性
∗ 群組表單元素
▸ 可以將相關的表單元素包含在欄位集 <fieldset> 中，冗長繁複的表單看起來較為簡潔
▸ 大部分的瀏覽器會在欄位集元素外圍加上方框，以表示這些欄位同屬一個群組
▸ 通常在 <fieldset> 標籤之下加上 <legend>，
亦即欄位集說明
▸ 例如：
<fieldset>
<legend>聯絡細節</legend>
<p>電子信箱：<input type="email" name="email"></p>
<p>手機：<input type="text" name="mobile"></p>
<p>電話：<input type="text" name="telephone"></p>
</fieldset>
∗ 練習
▸ 將 dessert1-6.html 另存為 dessert1-7.html 並如下修改：
▸ 在 </body> 標籤之前，加入以下表單：
...
<br>
<form method="post" action="#"> <!-- 目前尚無後端程式 -->
<fieldset>
<legend>註冊會員</legend>
<p>帳號：<input type="text" name="account" required></p>
<p>密碼：<input type="password" name="password" required></p>
<p><label><input type="checkbox" name="rememberme" value="True" checked>記住我的密碼</label></p>
<p>性別：
<label><input type="radio" name="sex" value="female" checked>女</label>
<label><input type="radio" name="sex" value="male">男</label></p>
<p>程式語言偏好：
<select name="progLanguage">
<option value="python">Python</option>
<option value="java">Java</option>
<option value="cpp">C++</option>
<option value="ruby">Ruby</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</select></p>
<p>備註：<br>
<textarea name="memo" cols="50" rows="5"></textarea></p>
<p><input type="submit" value="送出"></p>
</fieldset>
</form>
<br><br>
</body>
</html>
* 作業 2
(11) HTML 元素分類
∗ HTML元素可分為行內元素 (Inline element) 與區塊元素 (Block element) 兩類
∗ 行內元素
▸ 行內元素的特性就像文字 (無法設定寬度及高度)，可左右接續排列，例如：<a>, <img>, ...
▸ 有些行內元素的目的在於標示文字，以便進行樣式或功能設定，例如：<b>, <em>,
<span>, <i>, ...
▸ 範例 1：
<p>
<b>Cake (蛋糕)</b>這個字眼的由來有很長的歷史，最早來自於<a
href="http://en.wikipedia.org/wiki/Vikings">維京人</a>，<a
href="http://en.wikipedia.org/wiki/Norse">古斯堪的納維亞語
(Old Norse)</a>的單字"<strong>kaka</strong>"。
</p>
▸ 範例 2：利用 <span> 標示文字，之後即可透過 CSS 設定樣式
<p>這就是本店蛋糕<span id="charming">如此迷人</span>的解答！</p>
∗ 區塊元素
▸ 區塊元素的特性就像方框，其目的在於建立網頁的「結構」，將網頁內容分割為許多區塊
▸ 預設一定會從新行開始，相鄰區塊由上往下排列
▸ 預設寬度等於其環境的寬度，高度則為其內容所產生的高度
▸ 例如：<hn>, <p>, <ul>, <li>, <div>, ...
▸ 區塊元素可包含其他區塊元素或行內元素，行內元素可包含其他行內元素，但行內元素不可包含區塊元素
▸ 範例 1：
<h1> 蛋糕<img src="img/cake.jpg"> </h1>
<p>蛋糕是一種麵包或類麵包形式的食物，典型的現代蛋糕就是烘烤的甜點，但
早期的蛋糕其實是油炸的麵包或者是起士蛋糕，大多是圓形。要分清楚哪些是麵
包 (Bread)、蛋糕 (Cake)、或者是糕點 (Pastry)，可不是件容易的事。</p>
<ol>
<li>特殊目的的蛋糕</li>
<li>蛋糕的形狀</li>
<li>蛋糕的裝飾</li>
</ol>
▸ 範例 2：利用 <div> 將多個區塊及行內元素組成一個區塊
<div id="cake">
<h1>蛋糕製作秘方大公開</h1>
<ul>
<li><a href="ingredient.html">材料</a></li>
<li><a href="prepare.html">準備過程</a></li>
<li><a href="bake.html">烘烤</a></li>
<li><a href="taste.html">品嚐</a></li>
</ul>
</div>
(12) 其他標籤
∗ 註解：
<!-- ... -->
▸ 在生產環境 (Production environment) 中，通常將註解全部刪除，以提昇傳輸效率
∗ ID 屬性
▸ 每一個 HTML 元素都可以設定一個 id 屬性，標示其獨一性，例如：
<p id="firstParagraph"> ... </p>
▸ 在同一個 HTML 頁面中， id 不得重複
▸ id 值需以英文字母或底線開頭 (建議都是英文字母)
▸ id 屬性讓 CSS 及 JavaScript 能夠針對單一元素進行樣式設定或增加其他功能
∗ Class (類別) 屬性
▸ 每一個 HTML 元素都可以設定一個 class 屬性，標示其屬於某個類別，
例如：<p class="paragraph"> ... </p>
▸ 在同一個 HTML 頁面中，可以設定許多元素屬於相同的 class
▸ class 值需以英文字母或底線開頭 (建議都是英文字母)
▸ class 屬性讓 CSS 及 JavaScript 能夠針對一群元素進行樣式設定或增加其他功能
∗ 行內框架 (Inline frame, iframe)
▸ 嵌入在頁面裡的一個框架，在其中可以看到其他頁面資訊，例如：
<iframe width="800" height="400" src="http://www.charmcitycakes.com/"></iframe>
∗ Meta 元素
▸ <meta> 元素存在 <head> 元素之中，說明該網頁的相關資訊
✶ 網頁作者，網頁內容有效期限 ...
✶ 最常用來說明網頁檔案的編碼方式： <meta charset="utf-8">
∗ 逸出字元 (Escape character)
¢ ¢ £ £ ¥ ¥ € € © ©
® ® ä ™ × × ÷ ÷
(13) 視訊與音訊
∗ HTML5 多媒體 (視訊、音訊) 的演進
▸ 在 HTML5 之前，網頁的影音功能主要依賴 Flash (使用率統計)
▸ 此狀況因為 iOS 拒絕支援 Flash 並改採用 HTML5 而大幅改變
∗ 在 HTML5 頁面加入音訊或視訊
▸ 簡單語法：
<audio src=...></audio>
<video src=...></video>
▸ 加入各類屬性，例如：
<video src=... width=... height=... controls autoplay preload="auto" loop poster=...></video>
✶ controls：瀏覽器應提供影音播放控制
✶ autoplay：自動播放
✶ preload：網頁頁面載入時，該做何事?
# none：瀏覽器不要載入影音，由使用者來啟動
# auto：瀏覽器自動載入影音
# metadata：瀏覽器僅需載入所需資訊，例如：檔案大小、第一幀影像、追蹤清單、時間長度等
✶ loop：重複播放
✶ poster：當影音正在下載時或使用者啟動播放之前所需要顯示的影像
▸ 範例：
<video src="demo.mp4" controls autoplay loop preload="auto" poster="demo.jpg">
<audio src="demo.mp3" controls preload="auto">
▸ 目前各瀏覽器支援不同的影音格式，解決之道為提供多種格式選擇
✶ 如果瀏覽器支援某種格式就播放，否則就選擇下一個
✶ 註：早期 .ogg 適用於音訊及視訊檔，但現在改為 .ogv
為視訊檔， .ogg 或 .oga 為音訊檔
▸ 除了 width 、 height 、 poster 屬性之外， <audio> 標籤和 <video> 標籤的使用方式一樣
▸ 練習：
✶ 將 dessert1-7.html 另存為 dessert1-8.html
並如下修改：
...
<video width="640" height="480" controls preload="auto"
poster="img/avatar.jpg">
<source src="film/avatar.ogv" type="video/ogg">
<source src="film/avatar.mp4" type="video/mp4">
您的瀏覽器不支援視訊播放
</video>
<br><br>
<audio controls preload="auto">
<source src="music/18_and_life.ogg" type="audio/ogg">
<source src="music/18_and_life.mp3" type="audio/mpeg">
您的瀏覽器不支援音訊播放
</audio>
</body>
</html>
(14) 瀏覽器對 HTML5 的支援與網頁驗證
∗ HTML5 標籤查閱
▸ 過時的標籤或功能：請看這裡
∗ 網頁驗證 (Validating web pages)
▸ 當瀏覽器開啟一份格式不良的網頁時，會忽略錯誤格式並盡可能呈現網頁
▸ 可利用驗證分析器 (Validating parser) 來分析網頁的格式，線上驗證：
(15) HTML 語法樣式建議
▸ 所有標籤或屬性均使用小寫
| 不好 | 好 |
|---|
<SECTION>
<p>這是段落。</p>
</SECTION>
|
<section>
<p>這是段落。</p>
</section>
|
✶ <!DOCTYPE html> 或 <!doctype html> 均可
▸ 縮排：2 個空格
▸ 允許不使用結束標籤 (但目前仍建議使用)
| 不好 | 好 |
|---|
<SECTION>
<p>這是第一段
<p>這是第二段
</SECTION>
|
<section>
<p>這是第一段</p>
<p>這是第二段</p>
</section>
|
▸ 空元素之結束標籤格式
| 不好 | 好 |
|---|
<meta charset="utf-8"/>
|
<meta charset="utf-8">
|
▸ 允許不使用雙引號(但有空格時必須使用)
| 允許 | 允許 | 錯誤 |
|---|
<p class="important">
|
<p class=important>
|
<p class=important center>
|
▸ 影像應使用 alt 屬性 (以備影像無法顯示)，且應定義影像尺寸(使瀏覽器預留空間，避免閃爍)
| 允許 |
|---|
<img class="html5Size" src="html5.png" alt="這是 HTML5 影像">
CSS:
img.html5Size {
width: 200px;
height: 200px;
}
|
▸ 屬性等號左右不要有空格
| 不好 | 好 |
|---|
<meta charset = "utf-8">
|
<meta charset="utf-8">
|
▸ 每個元素從新行開始
| 不好 | 好 |
|---|
<table>
<tr><th>標籤名稱</th><th>說明</th></tr>
<tr><td>table</td><td>表格</td></tr>
</table> |
<table>
<tr>
<th>標籤名稱</th>
<th>說明</th>
</tr>
<tr>
<td>table</td>
<td>表格</td>
</tr>
</table>
|
上一章
下一章
