Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "HTML基本語法及文字 靜宜大學 資管系 楊子青."— Presentation transcript:

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

2 大綱 HTML5宣告與編碼設定 文字段落 列表

3 1. HTML5宣告與編碼設定 文件類型 HTML 的基本架構 <html> <head>
<!DOCTYPE html> HTML 的基本架構 <html> <head> <title>網頁標題</title> </head> <body> 網頁內容 </body> </html> 請用記事本 將左方標籤複製貼上 另存新檔至桌面 存檔類型請選擇*.* 檔名test1.htm 回到桌面double click該檔案 即可用瀏覽器觀看結果

4 <html>…</html>
<html lang="zh-TW">表示文件內容使用台灣的繁體中文 <head>…</head> 文件標籤 <title>網頁標題</title> <meta charset="big5"> 建議使用utf-8多語系編碼(根據使用者作業系統來決定編碼方式,較能避免出現亂碼) <body>…</body> 文件內容

5 head加入語言及編碼 <!DOCTYPE html> <html lang="zh-TW">
<title>網頁標題</title> <meta charset="utf-8"> </head> <body> 網頁內容 </body> </html> 請用記事本 將左方標籤複製貼上 另存新檔至桌面 編碼請選UTF-8 存檔類型請選擇*.* 檔名test2.htm 回到桌面double click該檔案 即可用瀏覽器觀看結果

6 body加入語意結構 請用記事本 將左方標籤複製貼上 另存新檔至桌面 編碼請選UTF-8 存檔類型請選擇*.* 檔名test3.htm
<!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該檔案 即可用瀏覽器觀看結果

7 2. 文字段落 設定段落樣式的標記 設定對齊與縮排的標記 <br> 換行
<p>…</p>文字分段 <p>= <br /><br /> 設定對齊與縮排的標記 <pre>…</pre>依文字原來格式排列 <blockquote>…</ blockquote >

8 文字段落 設定段落標題 加入分隔線 設定上標、下標 <h1>至<h6>
加入分隔線 <hr> 換行 設定上標、下標 <sup>及<sub>

9 文字段落 加入註解 使用特殊符號 <!-- 註解文字 --> 特殊符號 HTML表示法 © © < <
< > " " & & 不換行空白 (Non-Breaking SPace)

10 (1)無序號列表 (符號清單, Unordered List)
3. 列表 (1)無序號列表 (符號清單, Unordered List) <ul> <li> </ul> 改變項目符號的樣式 <ul type>

11 (2)有序號列表 (Ordered List)
<ol> <li> </ol> 改變項目符號的樣式 <ol type> 改變編號的起始值 <ol start>

12 列表 ol標籤 屬性 設定值 說明 type 設定值有五種,請參考下表 設定數目樣式,預設值:type="1" start
1、2、3等整數值 設定編號起始值,預設值:start=1 reversed 反向排序,數字改為由大到小(IE9不支援) type設定值 項目編號樣式 說明 1 1, 2, 3, ... 阿拉伯數字 A A, B, C, ... 大寫英文字母 a a, b, c, ... 小寫英文字母 I I, II, III, ... 大寫羅馬數字 i i, ii, iii, ... 小寫羅馬數字

13 列表 (3)定義用列表 (Definition List)
適用在有主題與內容的兩段式文字,通常第一段是以<dt>標記定義主題,第二段以<dd>標記來定義內容 <dl> <dt> <dd> </dl>

14 參考資料 教科書 網路資源 榮欽科技、陳婉凌,網頁設計必學的程式實作技術:HTML5+CSS3+JavaScript,2012年,博碩。
Chap 04: HTML入門 Chap 05:文字與排版技巧 網路資源


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

Similar presentations


Ads by Google