HTML基本语法及文字-静宜大学.ppt

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