HTML 語法教學

網站製作⼯工作坊
HTML 語法教學
2015/04/18 元智⼤大學資訊傳播學系范聖佑

單元主題
• 學習 HTML 基礎語法，包括：
- ⽂文字與段落
- 清單
- 連結
- 圖⽚片
- 表格
- 排版

準備開發環境
• 在桌⾯面上新開⼀一個資料夾做專案資料夾
• 開啟 SourceTree、設定 conﬁg 指令、新建⼀一
個新的儲存庫並指向專案資料夾
• 開啟 Brackets、設定專案資料夾、新增⼀一個
名為 index.html 的檔案、輸⼊入基本 HTML 語
法
• 測試 Google Chrome Live Preview

將⽂文件結構套上樣式

結構與樣式
• 結構：
- 標題、次標題、
段落、清單
• 樣式：
- 字級⼤大⼩小、字型、
字⾊色

主題思考
• 只有⼈人類才能了解⽂文章裡的語意，電腦是無
法理解的。
• 如何透過⼀一種標記的⽅方式，讓電腦可以理解
⽂文章內的語意，做為交換資料時的格式？
• 如何透過⼀一系列的樣式定義，讓電腦在顯⽰示
⽂文章時，可以顯⽰示對應的格式？

HTML簡介
• HTML = HyperText Markup Language
• 透過標記語法 (tags) 的設計，將⽂文章的內容
結構化 (structure)
• 只標記⽂文件結構和內容，不紀錄樣式
• 現已成為網⾴頁技術的標準格式
• 純⽂文字格式，副檔名為 .html

現代網⾴頁組成
⽂文件內容
語意結構
⾴頁⾯面設計
顯⽰示元素
元件操作
感測互動豐富內容的
現代網⾴頁

HTML語法
• 語法組成
- 標籤 (tags)
- 屬性 (attributes)

標籤 tags
• 標籤把內容包起來並賦予其意義，是 HTML
⽂文件的基礎結構。
• 標籤就像容器⼀一樣，它告訴你在開關標籤範
圍內的⽂文字所代表的資訊。
The basic structure of an HTML document includes tags, which
surround content and apply meaning to it.
Tags act like containers.They tell you something about the information
that lies between their opening and closing tags.

標籤語法
<tag> </tag>content
opening tag closing tag
標籤名稱標籤名稱標記內容
⼤大於符號⼤大於符號⼩小於符號⼩小於符號
斜線

屬性 attributes
• 屬性為⼀一個元素的內容提供更多的資訊
• 它們顯⽰示在開啟標籤內並分為兩個部份：名
稱 (name) 及值 (value)，中間⽤用等於符號隔開
Attributes provide additional information about the contents of an
element.They appear on the opening tag of the element and are made
up of two parts: a name and a value, separated by and equals sign.

屬性語法
<tag attribute="value"> </tag>content
屬性名稱屬性值
attribute name attribute value
等於符號雙引號

⽂文字與段落
標題/段落/語意/換⾏行、⽔水平線

標題 heading
• 功能：
- 採⽤用 Heading 的 H 作為 tag name
- 預設有六階，h1 ~ h6
- 數字愈⼩小、等級愈⾼高、字級愈⼤大
- 區塊型元素 (⾃自⼰己⼀一⾏行)
• 語法：
<h1>標題第⼀一級</h1>

段落 paragraphs
• 功能：
- 採⽤用 paragraph 的 p 作為 tag name
- 就像在 Word 裡打⽂文字⼀一樣，⼀一個段落就⽤用
⼀一個 p
- 區塊型元素
• 語法：
<p>這是由⽂文字組成的段落</p>

語意 Semantic Markup
• HTML 本⾝身即是為了標⽰示⽂文件結構及語意⽽而
存在的。
• 在⽂文字標籤部份，有幾個標籤即是專⾨門⽤用做
表達語⾔言使⽤用的標籤。
• 這些標籤包括：
-‐ <em>

-‐ <strong>

-‐ <abbr>

強調 emphasis
• 功能：
- 強調⽂文章內某些語句
- 現代的瀏覽器預設會將此標籤以斜體表⽰示，
但可透過 CSS 修改
• 語法：
要<em>注意</em>

特別強調 strong
• 功能：
- 特別強調⽂文章內某些語句
- 現代的瀏覽器預設會將此標籤以粗體表⽰示，
但可透過 CSS 修改
• 語法：
請<strong>特別重視</strong>

頭字語 abbreviation
• 功能：
- 標⽰示⽂文章內裡的某個頭字語的全⽂文，如：
HTML = HyperText Markup Language
• 語法：
<abbr>HTML</abbr>

abbr 的 title 屬性
• 功能：
- 說明某個頭字語的全名
- 現代的瀏覽器會在滑⿏鼠移到該⽂文字時，顯⽰示
全名名稱
• 語法：
<abbr
title="HyperText
Markup
Language">

HTML

</abbr>

換⾏行 line break
• 功能：
- 段落裡的⽂文字是會依照存在空間⾃自⾏行折⾏行的。
若要在段落裡強制換⾏行，則要使⽤用換⾏行標籤
- <br> 就是那種沒有成對的 tag
• 語法：
<p>段落⽂文字<br>折到下⼀一⾏行</p>

⽔水平線 horizontal line
• 功能：
- 在網⾴頁上若要繪製⽔水平線進⾏行區隔，就可使
⽤用⽔水平線標籤。
- <hr> 也是沒有成對的 tag
• 語法：
<hr>

註解 comment
• 功能：
- 在寫 HTML 的時候，有⼀一些筆記想要寫給⾃自
⼰己看⽽而不是秀在網⾴頁上時，可以使⽤用註解
• 語法：
<!-‐-‐
這是註解，在網⾴頁上看不到
-‐-‐>

⼩小結
• HTML標籤是⽤用於描述⼀一個⾴頁⾯面的⽂文件結
構，⽽而這些標籤也同時提供語意資訊

清單
有序、無序、⾃自定清單

清單 lists
• 跟編輯 word ⽂文件時常會寫列表⼀一樣
• 清單有三種類型：
- 有序清單 (ordered list)
- 無序清單 (unordered list)
- ⾃自定清單 (deﬁnition list)

有序清單 ordered list
• 功能：
- 定義⼀一組清單，⽽而清單內容間的順序是有意
義的
• 語法：
<ol>

<li>item</li>

</ol>

無序清單 unordered list
• 功能：
- 定義⼀一組清單，但清單內容間的順序是不重
要的
• 語法：
<ul>

<li>item</li>

</ul>

清單項⺫⽬目 list item
• 功能：
- 定義清單裡的項⺫⽬目，每⼀一個項⺫⽬目要⽤用⼀一組
<li></li> 標記起來
- 使⽤用 <li> 後，清單項⺫⽬目間的順序就是顯⽰示
的順序。若是有序清單的話，就會⾃自動編號
(1. 2. 3.)
• 語法：
<li>項⺫⽬目1</li>

⾃自定清單 definition list
• 功能：
- ⾃自定數組「名稱」和「定義」的清單
• 標籤：
- <dl> (definition list)
- <dt> (definition terms)
- <dd>
(definition descriptions)

巢狀清單 nested list
• 每⼀一個 list item 裡⾯面還可以再增加其他元
素，⽐比⽅方說超鏈結 <a>、圖⽚片 <img>
• 每⼀一個清單裡，也可以再增加下⼀一層的清單，
做成巢狀 (階層) 式的清單結構
• 常⽤用在具有階層關係的導覽列結構、或是影
像列表 (相簿) 裡

⼩小結
• 清單有三種：有序、無序、⾃自定
• 有序清單具備順序的概念，在顯⽰示上採⽤用數
字標記順序
• 無序法單無順序的概念，在顯⽰示上預設採⽤用
圓點表⽰示
• ⾃自定清單可客製化定義的內容
• 清單可以被⽤用於巢狀結構內

連結
⽂文字連結、圖⽚片連結、按鈕

連結 anchor
• 功能：
- 將標籤內的元素變成超連結
- 連結位置要透過屬性設定
- 種類：站外、站內、⾴頁⾯面某處
• 標籤：
-‐ <a>

<a href="url"> </a>link text
Hypertext Reference：連結屬性
URL：可使⽤用相對位置及絕對位置
attribute value
設定⼀一個連結
連結字樣：讓使⽤用者點擊的⽂文字

href 屬性
• 功能：
- href = Hypertext Reference
- 設定連結要連到的網路位置(URL)
- URL 可以是相對路徑、或是絕對路徑
• 語法：
<a
href="http://www.yzu.edu.tw/">

Link
Text

</a>

連結種類
• 站外連結 (絕對路徑)
- 跟⺫⽬目前在瀏覽的⾴頁⾯面不同網域的位置
• 站內連結 (相對路徑)
- 跟⺫⽬目前在瀏覽的⾴頁⾯面相同網域的位置
• ⾴頁⾯面連結
- 相同網域的某個⾴頁⾯面上的某個位置

絕對路徑
• 網路上的任何⼀一個網⾴頁都可以對應到⼀一個路
徑/網址
• 若是從通訊協定及主機網址開始指定，即是
⼀一個絕對路徑
• 通常⽤用在站外連結
通訊協定主機路徑
URL
<a
href="http://www.yzu.edu.tw/index.php">

元智⼤大學

</a>

相對路徑
• 通常⽤用在站內連結
• 以正在瀏覽/編輯的檔案做為路徑的啟始點
• 若是往下⼀一層⺫⽬目錄/檔案的話，則直接接路徑
• 若是往上⼀一層⺫⽬目錄/檔案的話，則需先⽤用
「../」讓路徑回到上⼀一層後再繼續接路徑

相對路徑階層圖解
根⺫⽬目錄
⽗父⺫⽬目錄
⼦子⺫⽬目錄
編輯中的檔案(以此為準)
⽗父⺫⽬目錄檔案
../index.html
../folder3/
images/
上層⺫⽬目錄底下的檔案
../folder3/index.html
線上版本

相對路徑表⽰示法
• 相對路徑種類：
‣ 相同⺫⽬目錄
-‐ <a
href="target.html">link</a>

‣ ⼦子⺫⽬目錄
-‐ <a
href="folder/target.html">link</a>

‣ ⽗父⺫⽬目錄
-‐ <a
href="../target.html">link</a>

- <a
href="../folder/target.html">link</a>

- <a
href="../folder/folder/target.html">link</a>

⾴頁⾯面連結
• HTML的超連結，除了可以指定連結到某個
⾴頁⾯面外，更可以指定連結到某個⾴頁⾯面上的某
⼀一個區塊
• 需先在⾴頁⾯面的區塊上命名，再透過超連結指
定連結到該區塊
-‐ <a
href="#bottom">link</a>

-‐ <a
href="text.html#bottom">link</a>

id 屬性
• 功能：
- 為⾴頁⾯面上的任⼀一 HTML 元素取⼀一個名稱來識
別⾴頁⾯面上不同的 HTML 元素
• 語法：
<h1
id="heading">標題</h1>

target 屬性
• 功能：
- 設定瀏覽器要如何處理當點下連結時的動作
• 動作：
- _blank：另開新視窗/分⾴頁
- 其餘的動作在現今新規格中鮮少使⽤用

title 屬性
• 功能：
- 設定當滑⿏鼠移到連結上時，瀏覽器要顯⽰示的
提⽰示⽂文字為何？

連結狀態 (預設)
• 連結 (尚未碰觸)
- 藍⾊色、有底線
• 連結 (碰觸中)
- 藍⾊色、有底線、滑⿏鼠指標成⼿手型
• 連結 (點擊中)
- 紅⾊色、有底線、滑⿏鼠指標成⼿手型
• 連結 (已瀏覽過)
- 藍紫⾊色、有底線

錯誤的連結位置
若輸⼊入的檔名、位置並不存在的
話，點擊連結時就會出錯！

⼩小結
• 使⽤用 <a> 標籤來定義⼀一個連結
• 使⽤用 href 屬性來定義你要連結的位置
• 使⽤用 id 屬性來定義⾴頁⾯面的錨點
• URL 可以是相對位置；也可以是絕對位置，
在設定連結的 href 屬性時，請務必確認路
徑是否正確？

圖⽚片
圖⽚片標籤、影像格式

影像 images
• 功能：
- 在網⾴頁內置放影像
- 由於網⾴頁檔案是純⽂文字檔案。因此影像標籤
必需要設定影像的來源在哪？如此瀏覽器才
能依此顯⽰示圖⽚片內容。
• 標籤：
-‐ <img>

<img src="url">
Source：來源屬性
圖⽚片位置：可使⽤用相對位置及絕對位置
attribute value
置⼊入⼀一張影像
注意！沒有closing tag只有opening tag

src 屬性
• 功能：
- src = Source
- 設定圖⽚片的來源位置(URL)
- URL 可以是相對路徑、或是絕對路徑
• 語法：
<img
src="myimages.jpg">

width 屬性
• 功能：
- 強制設定圖⽚片顯⽰示的寬度
• 語法：
<img
src="myimages.jpg"

width="500"

height="500">

height 屬性
• 功能：
- 強制設定圖⽚片顯⽰示的⾼高度
• 語法：
<img
src="myimages.jpg"

width="500"

height="500">

title 屬性
• 功能：
- 設定當滑⿏鼠移到圖⽚片上時，瀏覽器要顯⽰示的
提⽰示⽂文字為何？
• 語法：
<img
src="myimages.jpg"

title="我的圖⽚片">

alt 屬性
• 功能：
- 當圖⽚片無法顯⽰示時，要出現的替代
(alternative)⽂文字是什麼？
- 提供給⾮非視覺閱讀器額外的資訊 Ex. 給盲⼈人
的瀏覽器會將alt內的⽂文字直接讀出來
• 語法：
<img
src="my_photo.jpg"

alt="替代⽂文字">

整理影像檔案
• 隨著網站內容愈來愈豐富，使⽤用到的圖⽚片檔
案愈來愈多，檔案管理變成很重要的事情。
• 在網站根⺫⽬目錄底下開⼀一個新的影像資料夾
(images)，把所有的圖⽚片都放在這個資料夾底
下，⽅方便管理。
• 記得所有的 img 標籤內的 src 位置也有跟著
加 images/，才能正確顯⽰示圖⽚片！

錯誤的圖⽚片路徑
若我們的圖⽚片路徑有誤，瀏覽器無法顯⽰示時。瀏覽器會把
圖⽚片所佔空間畫出來，並顯⽰示影像錯誤的圖⽰示。同時也會
把alt屬性裡的⽂文字顯⽰示在圖⽚片空間內，提⽰示使⽤用者該圖⽚片
的內容為何？

影像格式類型 - 點陣
• 透過紀錄影像尺⼨寸內各像素 (pixel) 的顏⾊色資
訊組成的影像紀錄格式
• 由於影像尺⼨寸愈⼤大，要紀錄的影像資訊就愈
多。因此通常影像尺⼨寸愈⼤大，檔案⼤大⼩小也就
愈⼤大。
• ⼤大多數的數位相⽚片都是採⽤用此種⽅方式紀錄及
儲存。

影像格式類型 - 向量
• 由點、線、⾯面等路徑資訊建構影像的內容，電腦
是透過這些資訊動態繪製影像後，顯⽰示在螢幕上
• 由於紀錄的內容⼤大多是單純的數據資料，因此在
⼤大多數的情況下，檔案⼤大⼩小較⼩小。
• ⼀一般常⾒見的編輯軟體如 Adobe Illustrator
• 若要在網⾴頁上顯⽰示向量影像，可使⽤用 .svg 這種向
量圖檔格式。但⺫⽬目前因瀏覽器⽀支援度有限，因此
尚未廣泛的採⽤用。

影像格式 - jpg/jpeg
• 特別適合⽤用在影像顏⾊色、階調豐富的照⽚片檔
案。因此，⼤大多數的數位照⽚片放到網站上時，
都會選擇使⽤用 .jpg 格式。
• 由於 .jpg 格式是點陣格式紀錄影像內容，因
此通常影像⼤大⼩小會較⼤大。但 .jpg 有專屬的壓
縮技術，透過壓縮⽐比例的設定，可以有效降
低檔案的⼤大⼩小、減少在網路上的下載時間。

影像格式 - png
• 若不特別要求影像的顏⾊色階調、或該影像的
顏⾊色⼤大多為單⼀一顏⾊色 (純⾊色)，則可考慮使
⽤用 .png 格式，可有效降低檔案⼤大⼩小。
• .png 格式⽀支援透明⾊色的設定。因此若影像內
有需要使⽤用到 drop-shadow、或是需要背景
透明的話，則使⽤用 .png 格式是最好的選擇。

影像格式 - gif
• .gif 圖檔跟 .png 格式類似，是較為⽼老舊的檔
案格式。若是顯⽰示的圖⽚片多為純⾊色，則可使
⽤用 .gif 格式。
• .gif 格式⽀支援透明⾊色及動畫影格，因此若在網
⾴頁上有需要放置⼩小動畫，則可使⽤用 .gif 格式
製作。
• 要注意的是，動畫影格就像是把多張圖⽚片合
併儲存成⼀一個檔案，因此動畫時間愈⻑⾧長，則
檔案⼤大⼩小會愈⼤大。

影像編輯技巧提⽰示
• 了解影像資訊、解析度
• 如何調整影像⼤大⼩小？
• 如何裁切影像？
祕訣：針對網站需求輸出對應的影像檔案

⼩小結
• 使⽤用 <img> 標籤為網⾴頁置⼊入圖⽚片
• 網⾴頁是純⽂文字檔案，無法嵌⼊入圖⽚片，因此要
⽤用 src 屬性來設定圖⽚片的來源位置
• 在準備影像給網⾴頁使⽤用時，要先評估預定的
檔案格式、解析度及影像⼤大⼩小，再⽤用影像處
理軟體製作
• 速記：照⽚片⽤用 .jpg；透明⽤用 .png；動畫⽤用 .gif

表格 table
• 功能：
- 在網⾴頁上呈現表格型式的資料內容
• 標籤：
-‐ <table>

- <thead>、<tbody>、<tfoot>
- <th>、<tr>、<td>

置⼊入⼀一個表格
<table border="1">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
<tr>
<td>Item3</td>
<td>Item4</td>
</tr>
</table>
定義⼀一個表格 (table)
定義⼀一個列 (table row)
定義⼀一個儲存格 (table data)
儲存格內容
列
列
表格
Item1 Item2
Item3 Item4
列 (row)
欄 (column) 欄 (column)
列 (row)

th 標題儲存格
• 功能：
- 標⽰示這個儲存格是⽤用來呈現標題的
- 瀏覽器預設會把這個儲存格內的⽂文字置中排
列、並且顯⽰示為粗體
• 語法：
<tr>

<th>Header1</th>

<th>Header2</th>

</tr>

thead 表格標頭
• 功能：
- 明確標⽰示表格的標題是從這個區段開始，若
表格很⻑⾧長的話，瀏覽器可以在顯⽰示上輔助使
⽤用者識別。
• 語法： <thead>

<tr>

<td>Content</td>

</tr>

</thead>

tbody 表格內容
• 功能：
- 明確標⽰示表格的內容是從這個區段開始
• 語法：
<tbody>

<tr>

<td>Content</td>

</tr>

</tbody>

tfoot 表格註腳
• 功能：
- 明確標⽰示表格的註腳是從這個區段開始，若
表格很⻑⾧長的話，瀏覽器可以在顯⽰示上輔助使
⽤用者識別。
• 語法： <tfoot>

<tr>

<td>Content</td>

</tr>

</tfoot>

rowspan 屬性
• 功能：
- 合併表格列
• 語法：
<td
rowspan="2">

colspan 屬性
• 功能：
- 合併表格欄
• 語法：
<td
colspan="2">

不夠視覺化？
• 靠線上⼯工具來幫我們產⽣生表格語法
- Google Search：html table online generator
- http://www.tablesgenerator.com/html_tables
- http://www.quackit.com/html/
html_table_generator.cfm
- http://html-tables.com/

⼩小結
• 只要是報表型的資料，即可以使⽤用 <table>
標籤為網⾴頁置⼊入表格
• ⼀一個表格包含兩個維度：列 <tr>、欄，每⼀一
格我們稱為儲存格 <td>
• 若該儲存格是標題的話，我們可以把 <td> 換
成 <th>
• 若表格很⻑⾧長時，我們可以透過設定 <thead>、
<tbody>、<tfoot>
輔助使⽤用者觀看表格

排版
區塊、⾏行內標籤及其他

HTML 網⾴頁排版
• 在 HTML 的標籤可以簡單分為兩種，區塊及
⾏行內
• 透過將網⾴頁上的 HTML 標籤群組成不同的區
塊，即可讓我們針對網⾴頁內容進⾏行排版設計
• 注意！HTML 只調整排版的結構，⾄至於排版
的位置、顏⾊色等跟顯⽰示有關的設定，⼀一樣是
透過 CSS 來處理
• 更多排版概念會在 CSS 章節討論

區塊元素 (block)
• 每⼀一個標籤會⾃自動佔滿⼀一個區塊空間，下⼀一
個元素會⾃自動被擠到下⼀一⾏行去
• 標籤：
- <h1>、<p>、<ul>、<li>

⾏行內元素 (inline)
• 每⼀一個標籤都只佔跟⾃自⼰己⼤大⼩小相符的空間，
接在後⾯面的標籤會緊臨著前⼀一個標籤排列，
直到⾴頁⾯面的邊緣才會換下⼀一⾏行
• 標籤：
- <b>、<img>、<em>、<strong>

區塊群組 division
• 功能：
- 將⼀一群 HTML 標籤群組成⼀一個區塊
- 常⽤用於網⾴頁排版分區時使⽤用
- 本⾝身沒有任何作⽤用
• 語法：
<div>

<!-‐-‐
html
tags
-‐-‐>

</div>

⾏行內群組 span
• 功能：
- 將其他 HTML 標籤群組成⾏行內群組
- 本⾝身沒有任何作⽤用
• 語法：
<h1>標題<span>
-‐
附標</span></h1>

id 屬性
• 功能：
- 將某⼀一個 HTML 元素取⼀一個獨⽴立的名字
- 在整份 HTML ⽂文件內，id是唯⼀一值不可以重
複的
• 語法：
<h1
id="title1">標題</h1>

class 屬性
• 功能：
- 將某⼀一個 HTML 元素賦予 CSS 的類別，⽅方
便套⽤用樣於於多個 HTML 元素上
- ⼀一個 HTML 元素上可以套⽤用多個 class屬性
• 語法：
<p
class="class1
class2">段落⽂文字</p>

網⾴頁框 iframe
• 功能：
- ⽤用 iframe 可以把別⼈人的網⾴頁放到⾃自⼰己的網⾴頁
裡 Ex.Youtube 就是⽤用這種⽅方式讓我們可以把
影⽚片播放器放到我們的網⾴頁上；Google Map
⽤用這種⽅方式把地圖放到我們的網⾴頁上
• 語法：
<iframe
src="URL">

特殊字元
• 特殊字元的⽤用途？
- 許多特殊字元不能直接輸⼊入在 HTML 原始檔
內，如 HTML 的 < 和 > 本⾝身就會和 HTML
顯⽰示衝突
- 請使⽤用特殊字元對照表來輸⼊入這些字

常⽤用特殊字元
★ 對照表：http://www.w3schools.com/tags/ref_entities.asp

⼩小結
• 使⽤用 <div> 標籤將⼀一部份的 HTML 標籤群組為
⼀一個區塊元素
• 使⽤用 <span> 標籤將⼀一部份的 HTML 標籤群組為
⼀一個⾏行內元素
• <div>、<span>本⾝身都不會顯⽰示/影響網⾴頁的畫
⾯面
• 透過 <iframe> 可以把別的網⾴頁放到⾃自⼰己的網⾴頁
裡
• 特殊字元要依對照表在 HTML 裡寫代碼

Cheat Sheet
• 把所有常⽤用的語法整理成⼀一張表格，可在你
撰寫語法的同時，隨時查找！
• 可參考：
- http://www.cheatography.com/
- http://www.addedbytes.com/cheat-sheets/
- Google Search：html cheat sheet

單元⼩小結
• 在這個單元裡，我們討論了：
- ⽂文件結構與網⾴頁語法組成
- HTML 的語法
- 眾多 HTML 標籤，包括⽂文字與段落、清
單、連結、圖⽚片、表格、排版

問與答
學員可開始練習、實作

HTML 語法教學

More Related Content

What's hot

Viewers also liked

Similar to HTML 語法教學

More from Shengyou Fan

HTML 語法教學