html 基本語法及文字

網頁設計實務

HTML基本語法及文字靜宜大學資管系楊子青

網頁設計實務

22

大綱

HTML5 宣告與編碼設定

文字段落

列表

網頁設計實務

33

1. HTML5 宣告與編碼設定

文件類型– <!DOCTYPE html>

HTML 的基本架構<!DOCTYPE html><html>

<head> <title> 網頁標題 </title> </head>

<body> 網頁內容 </body>

</html>

請用記事本將左方標籤複製貼上另存新檔至桌面存檔類型請選擇 *.*檔名 test1.htm回到桌面 double click 該檔案即可用瀏覽器觀看結果

網頁設計實務

44

HTML基本結構

<html>…</html>– <html lang="zh-TW"> 表示文件內容使用台灣的繁體中文

<head>…</head> 文件標籤– <title> 網頁標題 </title>– <meta charset="big5">

建議使用 utf-8 多語系編碼 ( 根據使用者作業系統來決定編碼方式，較能避免出現亂碼 )

<body>…</body> 文件內容

網頁設計實務

55

head加入語言及編碼

<!DOCTYPE html><html lang="zh-TW">

<head> <title> 網頁標題 </title> <meta charset="utf-8"></head>

<body> 網頁內容</body>

</html>

請用記事本將左方標籤複製貼上另存新檔至桌面編碼請選 UTF-8存檔類型請選擇 *.*檔名 test2.htm回到桌面 double click 該檔案即可用瀏覽器觀看結果

網頁設計實務

66

body加入語意結構

<!DOCTYPE html><html lang="zh-TW">

<head> <title> 網頁標題 </title> <meta charset="utf-8"></head>

<body> <header> 網頁內容 </header> <nav> 連結選單 </nav> <article> 主要內容 <section> 章節段落 </section> </article> <aside> 側邊欄 </aside> <footer> 頁尾 </footer> </body>

</html>

請用記事本將左方標籤複製貼上另存新檔至桌面編碼請選 UTF-8存檔類型請選擇 *.*檔名 test3.htm回到桌面 double click 該檔案即可用瀏覽器觀看結果

網頁設計實務

77

2. 文字段落

設定段落樣式的標記– <br> 換行

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_br– <p>…</p> 文字分段

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_paragraphs1

<p>= <br /><br />

設定對齊與縮排的標記– <pre>…</pre> 依文字原來格式排列

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_pre

– <blockquote>…</ blockquote > http://www.w3schools.com/tags/tryit.asp?

filename=tryhtml_blockquote_test

網頁設計實務

88

文字段落

設定段落標題– <h1> 至 <h6>

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers

加入分隔線– <hr> 換行

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test

設定上標、下標– <sup> 及 <sub>

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_sup

網頁設計實務

99

文字段落

加入註解– 

使用特殊符號特殊符號 HTML表示法

© ©

< <

> >

" "

& &

不換行空白

(Non-Breaking SPace)

網頁設計實務

1010

3. 列表

(1) 無序號列表 ( 符號清單 , Unordered List)<ul>

<li>

<li>

…

</ul>– http://www.w3schools.com/tags/tryit.asp?

filename=tryhtml_lists4– 改變項目符號的樣式 <ul type>

網頁設計實務

1111

列表

(2) 有序號列表 (Ordered List)<ol>

<li>

<li>

…

</ol>– http://www.w3schools.com/tags/tryit.asp?

filename=tryhtml_lists– 改變項目符號的樣式 <ol type>– 改變編號的起始值 <ol start>

網頁設計實務

1212

列表

ol 標籤屬性設定值說明type 設定值有五種，

請參考下表設定數目樣式，預設值：type="1"

start 1 、 2 、 3 等整數值

設定編號起始值，預設值：start=1

reversed reversed 反向排序，數字改為由大到小 (IE9 不支援 )

type設定值項目編號樣式說明

1 1, 2, 3, ... 阿拉伯數字

A A, B, C, ... 大寫英文字母

a a, b, c, ... 小寫英文字母

I I, II, III, ... 大寫羅馬數字

i i, ii, iii, ... 小寫羅馬數字

網頁設計實務

1313

列表

(3) 定義用列表 (Definition List)– 適用在有主題與內容的兩段式文字，通常第一段是以 <dt> 標記

定義主題，第二段以 <dd> 標記來定義內容<dl>

<dt>

<dd>

<dt>

<dd>

…

</dl>– http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test

網頁設計實務

1414

參考資料

教科書– 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：

HTML5+CSS3+JavaScript ， 2012 年，博碩。 Chap 04: HTML 入門 Chap 05: 文字與排版技巧

網路資源– http://www.w3schools.com/tags/

html 基本語法及文字

Documents