Microsoft PowerPoint - CH02.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - CH02.pptx"

须琼鱼
5 years ago
Views:

1 第 2 章文件結構本投影片參考陳惠貞投影片製作修改, 僅供教學使用楊偉儒 wzyang0825@gmail.com 2 Part1 HTML 篇 2-1 HTML 文件的 DOCTYPE-<!doctype> 元素 2-1 HTML 文件的 DOCTYPE -<!doctype> 元素 2-2 HTML 文件的根元素 -<html> 元素 2-3 HTML 文件的標頭 -<head> 元素 2-4 HTML 文件的主體 -<body> 元素 2-5 HTML 5 新增的結構元素 2-6 區段結構 2-7 區段的附加資訊

2 2-1 HTML 文件的 DOCTYPE-<!doctype> 元素 HTML5 網頁 - 標籤結構 HTML 5 文件的第一行必須是如下的 DOCTYPE: 至於 HTML 4.01 文件的第一行則通常是一長串的網址和版本 : HTML5 網頁和 HTML 4.x 和 XHTML 網頁的結構都十分相似, 其基本的標籤結構如下所示 : <!DOCTYPE html> <html lang="zh TW"> <head> <meta charset="utf 8"> <title> 網頁標題文字 </title> </head> <body> 網頁內容 </body> </html> P.2-2 HTML5 的基本語法 - 語法 1 HTML5 的基本語法 - 語法 1 HTML5 語法沒有 XHTML 嚴謹但向下相容, 提供靈活的錯誤語法處理標籤 (tag): HTML 控制資料顯現的方式, 是透過兩個兩個一組的 HTML 標籤將欲控制的文字包夾於中間 : < 標籤名稱 > 欲控制顯示的文字 </ 標籤名稱 > Ex: <BODY>.</BODY> HTML 標籤依其用法分成兩類 : 前後包夾型 : <BODY> </BODY> <BODY> 稱為開始標籤 (start tag), </BODY> 稱為結束標籤 (end tag) 單槍匹馬型 : 只出現一次, 像是 <BR>( 換行 ), <HR> ( 水平分隔線 ) <P> ( 分段 ) <html> <head> 和 <body> 標籤都可有可無, 但 XHTML 一定需要這些標籤元素 (Element): 一組 HTML 標籤將一段文字夾在中間時, 這段文字與包夾文字的標籤被稱之為一個元素. 所以嚴格說元素是包含前後標籤和中間夾住的內容 HTML 的階層觀念 : 每個由 HTML 標籤與文字所形成的元素, 還可以包含另一組元素. HTML 文件可視為一個大元素包含許多小元素. 每個標籤內可能定義了多個屬性 (attribute) Ex: <body background= bg.jpg >.</body> background 為 <body> 的屬性之一, 代表的是網頁所使用的背景圖片, 而 bg.jpg 為 background 屬性之屬性值, 是背景圖片之檔案名稱

3 HTML5 的基本語法 - 語法 1 HTML5 的基本語法 - 語法 2 HTML 標籤語法 : 開始標籤 : < 標籤名稱屬性 1=" 值 1" 屬性 2=" 值 2"...> 例如 : <body bgcolor="blue"> 結束標籤 : </ 標籤名稱 > 例如 : </body> 元素和屬性不區分英文大小寫,<html> <Html> <HTML> 都是相同標籤元素不一定需要結尾標籤 (End Tag), 如果是沒有內容的元素, 也不需要使用 /> 符號代替結尾標籤, 例如 : 下列標籤都是合法的 HTML5 標籤, 如下所示 : <p> 這是一個測試 </p> <p> 這是一個測試 <br> <br/> 9 標籤屬性值的引號也是可有可無, 例如 : 下列標籤的屬性都是合法的 HTML5 屬性, 如下所示 : <img src="sample.jpg" width=20 height=30 /> 屬性沒有屬性值, 只需使用屬性名稱即可, 如下所示 : <option selected> <input type="radio" checked> 文字可以單獨存在, 並不用位於 HTML 開始與結束標籤之中一些舊版的 XHTML 的屬性已經不再需要, 例如 :<script> 標籤的 type 屬性和 <html> 標籤的 xmlns 屬性等建立 HTML5 網頁 -<html> 標籤 (tag) <html> 標籤是 HTML 網頁的根元素, 它是一個容器元素, 其內容就是其他 HTML 標籤, 擁有 <head> 和 <body> 兩個子標籤如果需要, 在 <html> 標籤可以使用 lang 屬性指定網頁使用的語言, 如下所示 : <html lang="zh TW"> lang 屬性值常用 2 碼值有 :zh( 中文 ) en( 英文 ) fr( 法文 ) de( 德文 ) it( 義大利文 ) 和 ja( 日文 ) 等在 lang 屬性值也可以加上次 2 碼的國家或地區, 例如 :en US 是美式英文 zh TW 是台灣的正體中文等 HTML 文件的標頭 -<head> 標籤我們可以使用 <head> 標籤標示 HTML 文件的表頭, 如下 : <head> 標籤的內容是標題元素, 包含 <title> <meta> <script> <link> <base> 和 <style> 標籤 <meta> 標籤可以指定網頁的編碼為 utf-8, 如下所示 : <meta charset="utf-8"> P.2-6

4 <title> 元素 ( 文件標題 ) <title> 元素用來指定 HTML 文件的標題, 如下 : 建立 HTML5 網頁 -<body> 標籤 <body> 標籤是網頁文件的內容, 包含文字超連結圖片表格清單和表單等網頁內容 P.2-6 建立 HTML5 網頁 2-2 HTML 文件的根元素 -<html> 標籤 01: <!DOCTYPE html> 02: <html lang="zh TW "> 03: <head> 04: <meta charset="utf 8"/> 05: <title>ch3_1_1.html</title> 06: </head> 07: <body> 08: <h3>html5 網頁 </h3> 09: <hr/> 10: <p> 第一份 HTML5 網頁 </p> 11: </body> 12: </html> <html> 元素的屬性如下, 標示星號 ( ) 者為 HTML 5 新增的屬性 : manifest="..." ( ) title id class style dir lang accesskey tabindex translate contenteditable ( ) contextmenu ( ) draggable ( ) hidden ( ) spellcheck ( ) role ( ) aria-* ( ) data-* ( ) 等全域屬性 P.2-3

5 2-3-1 全域屬性全域屬性事件屬性事件屬性 (event handler content attributes) 也是屬於全域屬性, 可以套用到多數的 HTML 屬性, 用來針對 HTML 元素的某個事件指定處理程式例如 :

2-3 HTML 文件的表頭 - <head> 標籤 2-3-1 <title> 元素 ( 文件標題 ) <head> 標籤有結束標籤 </head> 2-3-2 <meta> 元素 ( 文件相關資訊 ) <meta> 元素用來指定 HTML 文件的相關資訊, 稱為 metadata 例如 : 字元集 ( 編碼方式 ) 內容類型作者搜尋引擎關鍵字版權宣告等 <meta> 元素要放在

.. 等, 都可以透過 HTML meta http-equiv 屬性來設定 2-3-2 <meta> 元素 ( 文件相關資訊 ) 屬性值常見有三種, 分別為 content-type default-style refresh, 其中 content-type 用來設定網頁編碼 default-style 用來設定預設樣式 refresh 則用來設定自動更新時間, 無論是使用哪一種屬性值,

6 2-3 HTML 文件的表頭 - <head> 標籤 <title> 元素 ( 文件標題 ) <head> 標籤有結束標籤 </head> <meta> 元素 ( 文件相關資訊 ) <meta> 元素用來指定 HTML 文件的相關資訊, 稱為 metadata 例如 : 字元集 ( 編碼方式 ) 內容類型作者搜尋引擎關鍵字版權宣告等 <meta> 元素要放在 <head> 裡面,<title> 元素的前面, 而且沒有結束標籤 <meta> 屬性如下, 標示星號 ( ) 者為 HTML 5 新增的屬性 : P <meta> 元素 ( 文件相關資訊 ) http-equiv= : HTML meta http-equiv 屬性提供網頁標頭 (HTML head) 關於網頁的內容屬性資訊, 例如網頁自動更新網頁內容編碼優先樣式... 等, 都可以透過 HTML meta http-equiv 屬性來設定 <meta> 元素 ( 文件相關資訊 ) 屬性值常見有三種, 分別為 content-type default-style refresh, 其中 content-type 用來設定網頁編碼 default-style 用來設定預設樣式 refresh 則用來設定自動更新時間, 無論是使用哪一種屬性值, 都必須搭配一個 content, 來告訴瀏覽器內容是什麼整個 HTML meta http-equiv 必須寫在 HTML head 的區域內, 三種屬性可以寫在同一個網頁內 Ex: <head> <title> 這是測試網頁 </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="refresh" content="10"> //refresh document every 10 secs <meta http-equiv="default-style" content="the document's preferred stylesheet"> </head> P.2-7

7 2-4 HTML 文件的主體 -<body> 元素 2-4 HTML 文件的主體 -<body> 元素我們可以使用 <body> 元素標示 HTML 文件的主體, 如下 : <body> 元素的屬性如下 : P.2-8 P HTML 文件的主體 -<body> 元素 2-4 HTML 文件的主體 -<body> 元素 <body> 元素的事件屬性如下 : P.2-8 P.2-8

8 2-4 HTML 文件的主體 -<body> 元素 <h1>~<h6> 元素 ( 標題 1~6) HTML 提供了 <h1>( 最大 ) <h2> <h3> <h4> <h5> <h6>( 最小 ) 等六種層次的標題格式, 屬性如下 : align="{left,center,right}" (Deprecated) 第節所介紹的全域屬性和事件屬性 P.2-8 P <p> 元素 ( 段落 ) P.2-16~17

9 2-4-2 <p> 元素 ( 段落 ) <p> 元素用來標示段落, 屬性如下 : align="{left,center,right}" (Deprecated) 第節所介紹的全域屬性和事件屬性 2-5 HTML 5 新增的結構元素 P.2-16~17 P HTML 5 新增的結構元素 2-5 HTML 5 新增的結構元素 HTML 5 新增了數個具有語意的結構元素, 例如 :<article> <section> <hgroup> <nav> <header> <footer> <aside> P.2-18 P.2-18

10 2-5 HTML 5 新增的結構元素除了結構元素, 我們還可以利用下列兩個元素提供區段的附加資訊 : <address> <time> 2-6 區段結構 <article> 與 <section> 元素 ( 文章 / 通用的區段 ) P.2-18 P.2-19~ <nav> 元素 ( 導覽列 ) <nav> 元素 ( 導覽列 ) HTML 5 新增了 <nav> 元素, 用來標示導覽列, 下面是一個例子 P.2-21~22 P.2-21~22

11 2-6-2 <nav> 元素 ( 導覽列 ) HTML 5 新增了 <nav> 元素, 用來標示導覽列, 下面是一個例子 <header> 與 <footer> 元素 ( 頁首 / 頁尾 ) 為了標示頁首和頁尾,HTML 5 新增了下列兩個元素 :<header> <footer> P.2-21~22 P <header> 與 <footer> 元素 ( 頁首 / 頁尾 ) 下面是一個例子 P.2-23 P.2-24~25

12 2-6-4 <aside> 元素 ( 側邊欄 ) <aside> 元素 ( 側邊欄 ) 下面是一個例子 P.2-26 P 區段的附加資訊 <address> 元素 ( 聯絡資訊 ) <time> 元素 ( 日期時間 ) P.2-27 P.2-28

<h1>1-1 HTML 的演進 </h1> <section id="1-1-1"> <h1>1-1-1 W3C HTML 與 WHATWG HTML<h1> <section id="chapter2"> <h1> 第 2 章結構元素與大綱 </h1> <section id="2-1"> <h1>2-1 HTML 5 新增的結構元素 </h1>

13 2-7-2 <time> 元素 ( 日期時間 ) P.2-28 Example <!doctype html> <html> <head> <meta charset="utf-8"> <title> 大綱結構 </title> </head> <body> <article id="mybook"> <section id="chapter1"> <h1> 第 1 章 HTML 5 簡介 </h1> <section id="1-1"> <h1>1-1 HTML 的演進 </h1> <section id="1-1-1"> <h1>1-1-1 W3C HTML 與 WHATWG HTML<h1> <section id="chapter2"> <h1> 第 2 章結構元素與大綱 </h1> <section id="2-1"> <h1>2-1 HTML 5 新增的結構元素 </h1> <section id="2-1-1"> <h1>2-1-1 區段元素 <h1> </article> </body> </html> Example <!doctype html> <html> <head> <meta charset="utf-8"> <title> 大綱結構 </title> </head> <body> <h1>aaa</h1> <h2>bbb</h2> <blockquote> <h3>ccc</h3> </blockquote> <p>ddd</p> <h2>eee</h2> <section> <h1>fff</h1> <p>ggg</p> </body> </html> 流覽器在 blockquote 元素前後添加了換行, 並增加了外邊距

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt]

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt] HTML CSS / 2011 HTML CSS 1/ 47 1 2 HTML 3 4 HTML 5 5 : CSS 6 CSS 7 HTML CSS 2/ 47 HTML CSS 3/ 47 ( BOM) UTF-8 Notepad++ (Winodws), Fraise/Smultron (Mac), VIM ( ) HTML CSS 4/ 47 UTF-8? UTF-8 (unicode),