第04章 中

華
民
HTML基本語法 老 國
一
一
師 二
年
： 十
月
潘 四
Web 伺服器架設與網頁設計 東 日
星
期
名 三

Last Update: 112/08/10

 HTML 基本語法
2023/10/4

文字的變化
註解
特殊符號
段落與分行
項目符號
定義清單
超連結

2
HTML基本語法
 編輯語言的設定
2023/10/4

功能表中[檔案]
→[屬性]→[語言]

3
HTML基本語法
 編輯版面的設定
2023/10/4

功能表中[檔案] →[屬
性]→[進階]

4
HTML基本語法
 一般文字格式語法匯整
2023/10/4

5
HTML基本語法
 一般文字格式語法匯整
2023/10/4

6
HTML基本語法
 範例
2023/10/4

7
HTML基本語法
 HTML 的註解語法
2023/10/4

<!-- 註解說明 -->

8
HTML基本語法
 特殊字元表示
2023/10/4

< ➔&lt;
> ➔&gt;
空白➔&nbsp;
& ➔&amp;
© ➔&copy;
其它：在編輯原始碼處打
&，會有選單可選。
HTML基本語法 9
 特殊字元表
2023/10/4

10
HTML基本語法
 注音與拼音表示
2023/10/4

對於東方語系(例：中文與日文)，有其自己的音標，可
用<ruby>、<rt>與<rp>表示。
<ruby>是宣告使用；<rt>是用於包住音標或拼音；<rp>
是若瀏覽器不支援 <ruby> 元素時，就顯示 <rp> 元素裡
面的括號。

11
HTML基本語法
 注音與拼音表示(範例結果)
2023/10/4

12
HTML基本語法
 區域分隔 – 使用水平線
2023/10/4

有時在編寫一個網頁時，會希望在內容與內容之間有所
分隔，通常會用分隔線的方式來完成。在 EW 中有一個
預設語法為水平線 (<hr>)，透過這個水平線的插入可以
完成這個功能。
使用方法：
將游標放到欲插入水平線的位置
選擇[插入]→[水平線]來完成
在水平線上按滑鼠右鍵可以水平線做設定

13
HTML基本語法
 使用水平線範例
2023/10/4

14
HTML基本語法
 block 與 inline
2023/10/4

段落及標題都是屬於整列
整塊的變化
如果只需要某一部份的文
字則屬於 inline 區域變化，
一般可使用 <span> 標籤
完成。

HTML基本語法 15
 2023/10/4

BLOCK 型標籤

HTML基本語法 16
 標題變化
2023/10/4

主要以 <h1>…<h6>六種變化為主。可由工具列的段落
處選取。

17
HTML基本語法
 段落與分行
2023/10/4

HTML 中分段用 <p>，分行用 <br>。

在 EW 中可用跟 word 一樣的方式按下 Enter (p 標籤)或
shift+Enter 鍵(br 標籤)完成。

18
HTML基本語法
 項目編號/符號
2023/10/4

HTML也提供項目編號<ol>，但僅限於 A,a,i,I,1 這幾種

就沒了。
而項目符號<ul>也僅有●、○、■ 三種
項目符號可以使用圖片的圖示來取代使用
不管項目編號或符號都是用<li>表示一個項目

li：list
ol：order list
ul：unorder list

19
HTML基本語法
 項目編號/符號 (Cont.)
2023/10/4

20
HTML基本語法
 縮排
2023/10/4

與 word 同，在使用項目編號/符號時，可以使用工具列
的增加縮排或減少縮排的功能。

21
HTML基本語法
 項目編號/符號範例
2023/10/4

22
HTML基本語法
 項目符號與編號選擇
2023/10/4

23
HTML基本語法
 使用圖片符號
2023/10/4

除了使用項目編號與符號之外，在 EW 中我們也可以使
用圖片作為項目符號。
使用方法：
先選擇我們要使用的區域
由[格式]→[項目符號及編號]中選取[圖片項目符號]的功能
選擇圖片來源即可
圖片項目符號圖片的大小要自行先設定好，他是不會隨
著文字大小變化的。一個是圖，一個是文字，而這圖還
不能改變大小。
24
HTML基本語法
 使用圖片符號 (Cont.)
2023/10/4

25
HTML基本語法
 使用圖片符號 (Cont.)
2023/10/4

26
HTML基本語法
 定義清單
2023/10/4

在編寫文章內容時會想做一個不使用項目符號確又要有
其樣式的文章排列方式，此時可以使用<dl>、<dt>與
<dd> 。
<dl> 元素用來標示定義清單
<dt> 元素用來標示定義清單中的名詞
<dd> 元素用來標示定義清單中的定義

dl：description list
dt：description terms
dd：description descriptions
27
HTML基本語法
 範例結果
2023/10/4

28
HTML基本語法
 <pre> 預先格式化區塊
2023/10/4

使用 <pre> 標籤可以使用自己預設的文件格式，也就是
說空白不會被刪除。
一般原始碼內的空白會被刪除合併掉

29
HTML基本語法
 指定引言來源
2023/10/4

<blockquote> 主要目的是用於顯示你的文獻來源，因此
都會有縮排。

30
HTML基本語法
 2023/10/4

INLINE 型標籤

HTML基本語法 31
 插入超連結
2023/10/4

<a> 為超連結標籤
在 EW 中插入超連結是很簡單的，我們可以由[插
入]→[超連結]或由工具列上的 來設定。
而被設定的類別必須是一個文字、一段文字、圖形、影
片或按鈕。
而超連結的型態可為一個網址、網頁(站內連結或站外
連結皆可)、email 位址或其它可用的 URL。

32
HTML基本語法
 插入超連結 (Cont.)
2023/10/4

選擇一個範圍

33
HTML基本語法
 插入超連結 (Cont.)
2023/10/4

HTML基本語法
將要連結的 URL 填此 34
 插入郵件超連結
2023/10/4

選擇電子郵件的話會看到這種畫面
35
HTML基本語法
 工具提示
2023/10/4

選擇[工具提示]，寫上資訊後，未來在滑鼠指向該連結
時會出現提示的文字。

36
HTML基本語法
 另種超連結 – 書籤
2023/10/4

一般我們的超連結都是連結其它的網站或特定網頁，但
我們也可以連結同一個檔案中的某個部份哦，這個功能
在 EW 中稱為書籤。

37
HTML基本語法
 書籤
2023/10/4

要使用內部超連結這功能時必須先設定到底在這網頁中
的那些位置是你的超連結要指向的，這個動作在 EW 中
如下操作：
先將游標移到要設定書籤的位置
選擇[插入]→[書籤]的功能替這位置命一個名字(可以用中文)
未來要使用時，只需選擇超連結插入，選擇書籤即可

38
HTML基本語法
 書籤 (Cont.)
2023/10/4

39
HTML基本語法
 書籤 (Cont.)
2023/10/4

40
HTML基本語法
 書籤 (Cont.)
2023/10/4

41
HTML基本語法
 連接站外書籤網頁
2023/10/4

42
HTML基本語法
 <span>
2023/10/4

<span> 元素標籤有幾種不同的用法
是對inline型標籤元素進行群組成一行
對本文或文件的部份區域增加額外的變化(較常用)

43
HTML基本語法
 HTML5新增元素
2023/10/4

<time> ：標示時間
<mark> ：目的就是一般我們說的標註(像畫螢光筆的特
效)。

44
HTML基本語法
 其它元素
2023/10/4

其它有關編輯或一般格式排版的標籤元素，請各位自行
查閱教科書第3章，裏面有詳細的說明。
W3 HTML standard
Grouping content
Text-level semantics
Links
W3Shools

45
HTML基本語法