HTML基本語法及文字 靜宜大學 資管系 楊子青
大綱 HTML5宣告與編碼設定 文字段落 列表
1. HTML5宣告與編碼設定 文件類型 HTML 的基本架構 <html> <head> <!DOCTYPE html> HTML 的基本架構 <html> <head> <title>網頁標題</title> </head> <body> 網頁內容 </body> </html> 請用記事本 將左方標籤複製貼上 另存新檔至桌面 存檔類型請選擇*.* 檔名test1.htm 回到桌面double click該檔案 即可用瀏覽器觀看結果
<html>…</html> <html lang="zh-TW">表示文件內容使用台灣的繁體中文 <head>…</head> 文件標籤 <title>網頁標題</title> <meta charset="big5"> 建議使用utf-8多語系編碼(根據使用者作業系統來決定編碼方式，較能避免出現亂碼) <body>…</body> 文件內容
head加入語言及編碼 <!DOCTYPE html> <html lang="zh-TW"> <title>網頁標題</title> <meta charset="utf-8"> </head> <body> 網頁內容 </body> </html> 請用記事本 將左方標籤複製貼上 另存新檔至桌面 編碼請選UTF-8 存檔類型請選擇*.* 檔名test2.htm 回到桌面double click該檔案 即可用瀏覽器觀看結果
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該檔案 即可用瀏覽器觀看結果
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 /> 設定段落標題 <h1>至<h6> http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers 加入分隔線 <hr> 換行 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test
(1)無序號列表 (符號清單, Unordered List) 3. 列表 (1)無序號列表 (符號清單, Unordered List) <ul> <li> … </ul> http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists4 改變項目符號的樣式 <ul type>
(2)有序號列表 (Ordered List) <ol> <li> … </ol> http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists 改變項目符號的樣式 <ol type> 改變編號的起始值 <ol start>
列表 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, ... 小寫羅馬數字
列表 (3)定義用列表 (Definition List) 適用在有主題與內容的兩段式文字，通常第一段是以<dt>標記定義主題，第二段以<dd>標記來定義內容 <dl> <dt> <dd> … </dl> http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 04: HTML入門 Chap 05:文字與排版技巧 網路資源 http://www.w3schools.com/tags/