HTML 基本語法及文字
description
Transcript of 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/