第 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):

▸ 客戶端(Client):使用者利用瀏覽器存取網路資源,並將相關資訊傳送給伺服器
✶ 客戶端相關技術:瀏覽器, HTML, CSS, JavaScript, ...
▸ 伺服器端(Server):提供網路資源服務,接收使用者資訊並負責大多數的運算
✶ 伺服器端相關技術:伺服器軟體 (Apache, Nginx, MS IIS, ...)、伺服器端程式語言 (PHP, ASP.NET, JSP, Java, Python,
Ruby, Perl, ...)、資料庫管理系統(MySQL, Postgres, Oracle, MS SQL, ...)
(3) 前端主要工作與技術

▸ 前端設計師:頁面樣式設計
✶ 視覺效果, 網頁佈局, UI/UX, 影像處理, 繪圖, 藝術, 風格, ...
▸ 前端工程師:實作頁面樣式設計
✶ HTML, CSS, JavaScript, CSS 預處理器, CSS 框架, API, AJAX, JSON, JavaScript 框架,...
✶ 也可能包括網站架設與內容管理系統的導入 (Content management system, CMS)
▸ 交集:HTML, CSS, JavaScript
✶ 前端設計師可以不具備,但前端工程師則必備
(4) 網頁基礎及結構
∗ 基本 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 文件
▸ 安裝 Brackets 網頁編輯器:至 Brackets 官網 http://brackets.io/
下載以下安裝檔並安裝
✶ Ubuntu:Brackets.Release.x.x.64-bit.deb
✶ Windows:Brackets.Release.x.x.msi
✶ Mac:Brackets.Release.x.x.dmg
→ 以上 x 為版本數字
▸ 註:Ubuntu 亦可利用 PPA 安裝 (此方式較好,版本會自動更新)
$ sudo add-apt-repository ppa:webupd8team/brackets
$ sudo apt update
$ sudo apt install brackets
▸ 設定 Brackets
✶ 設定中文繁體介面:Debug → Switch Language → 繁體中文 → Reload Brackets
✶ 選擇字型:檢視 → 佈景主題 →
可設定目前的佈景主題與字體大小:14px,字體 (選等寬字體):
# Ubuntu:DejaVu Sans Mono
# MS Windows:Consolas
✶ 設定縮排 (spaceUnits) 為 2 個空格,停用智慧縮排 (SmartIndent) 與 JavaScrit 語法錯誤偵測 (lintint.enabled)
# 在 Brackets 裡,點選 「除錯」 → 「開啟喜好設定檔」 (或:Debug → Open Preferences File) 即可編輯
brackets.json 設定檔,在最後加入
{
...,
"spaceUnits": 2,
"smartIndent": false,
"linting.enabled": false
}
# 註:原先最後一行後面要加逗點,加入後的最後一行沒有逗點
▸ 亦有「所見即所得」(What you see is what you get, WYSIWYG) 編輯器
✶ 例如:MS Word (另存 HTML 新檔)、Dreamweaver、KompoZer 等,此類編輯器操作方便但所產生的樣式格式不當,
所儲存的檔案也很大,不利於網路傳輸,因此不建議使用
∗ 規劃目錄架構
▸ 首先在使用者家目錄下建立名為 webdesign 的工作區目錄,以便儲存所有練習程式檔案:
✶ Ubuntu:/home/<username>/webdesign
✶ Windows:C:\Users\<username>\webdesign
✶ Mac:/Users/<username>/webdesign
→ 以上 <username>
指的是登入作業平台的使用者名稱
▸ 目錄架構:在 webdesign 目錄下再建立其他子目錄
webdesign/
css/
img/
✶ 最上層目錄為 webdesign,用來置放 HTML 檔案
✶ 子目錄可有多個:例如 css/ 與
img/ 等,前者置放 CSS 檔案,後者置放影像檔案
▸ 接下來啟動 Brackets 並移到目的資料夾
檔案 → 開啟資料夾 → 選擇 <...>/webdesign/ 目錄 → 開啟

∗ HTML5 文件基本架構
▸ 建立新檔案:
檔案 → 新增 → ctrl-s → 選擇 <...>/webdesign/
目錄,檔名:simplest.html → 儲存,輸入以下內容:
<!doctype html>
<html>
<head>
<title>Simplest page</title>
<meta charset="utf-8">
</head>
<body>
<p>最簡單的網頁</p>
</body>
</html>
✶ 啟動 Brackets 的網站伺服器 (右上角閃電符號),即可觀察網頁呈現結果:網址為
127.0.0.1:xxxxxx/simplest.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> |
主要 <main> |
總結 <summary> |
章節 <section> |
頁尾 <footer> |
文章 <article> |
地址 <address> |
重要 <strong> |
縮寫 <abbr> |
刪除字 <del> |
強調 <em> |
引文來源 <cite> |
插入字 <ins> |
引用文字 <blockquote> |
文字定義 <dfn> |
不正確字 <s> |
引用短文 <q> |
|
|
▸ 例如利用語意標籤進行網頁佈局
<header> |
<nav> |
<aside> |
<section> |
<article> |
<footer> |
▸ 練習:將 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>
</body>
</html>

(8) 影像
∗ 影像 (Image)
<img src=... alt=... >
▸ src:來源 (Source),影像檔來源
▸ alt:替代 (Alternative) 文字,影像如果無法顯示,就以替代文字呈現
▸ 使用網頁影像注意事項:
✶ 使用正確的影像尺寸:過大則影響傳輸效率,過小則畫質不佳
✶ 應在伺服器端就做好影像尺寸調整,不要在客戶端做
✶ 常用影像格式:jpg, png, gif
# 拍攝之影像:使用 jpg
# 以電腦軟體產生之影像或影像有透明部份:使用 png
# 有動畫功能之影像:使用 gif
✶ 通常在 HTML 檔案所在目錄中,建立子目錄 img/ 來存放影像,亦可直接連結其他網站的影像,例如:
<img src="https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">
▸ 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><br>
</body>
</html>
▸ 作業 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>
▸ 有了 <label> 標籤,使用者可以點擊控制項,也可點擊文字,增加許多便利性
∗ 群組表單元素
▸ 可以將相關的表單元素包含在欄位集 <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> 標籤之前,加入以下表單:
...
</table>
<br><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="favorite">
<option value="vanilla">香草</option>
<option value="peach">蜜桃</option>
<option value="apple">蘋果</option>
<option value="chocolate">巧克力</option>
<option value="butter">鮮奶油</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>, <ol>, <li>, <div>,
<header>, <nav>, <aside> <blockquote>, <section>, <article>, ...
▸ 範例 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>
▸ 區塊元素可包含區塊元素或行內元素,行內元素可包含行內元素,但行內元素不可包含區塊元素。
有些區塊元素不可包含區塊元素 (例如 <p>)
(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 能夠針對一群元素進行樣式設定或增加其他功能
∗ Meta 元素
▸ <meta> 元素存在 <head> 元素之中,說明該網頁的相關資訊
✶ 網頁作者,網頁內容有效期限 ...
✶ 最常用來說明網頁檔案的編碼方式: <meta charset="utf-8">
∗ 逸出字元 (Escape character)
¢ ¢ £ £ ¥ ¥ € € © ©
® ® ™ ™ × × ÷ ÷
(13) 視訊與音訊
<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>
|