html5與css3.pptVIP

第2章 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤 2-4 HTML5的表格和容器標籤 2-5 HTML5的標籤與屬性 2-6 CSS3層級式樣式表 2-1 HTML5的頁面結構 2-1-1 第一份HTML5網頁 2-1-2 HTML5的基本語法與共同屬性 2-1-3 head標籤 2-1-1 第一份HTML5網頁-標籤結構 HTML5網頁和HTML 4.x和XHTML網頁的結構都十分相似，其基本的標籤結構如下所示： !DOCTYPE html html lang=zh head meta charset=utf-8 title網頁標題文字/title /head body 網頁內容 /body /html 2-1-1 第一份HTML5網頁-!DOCTYPE !DOCTYPE !DOCTYPE不是HTML標籤，其位置是在html標籤之前，可以告訴瀏覽器使用的HTML版本，以便瀏覽器使用正確的引擎來產生HTML網頁內容。 2-1-1 第一份HTML5網頁-html標籤 html標籤 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是台灣的正體中文等。 2-1-1 第一份HTML5網頁-head標籤 head標籤的內容是標題元素，包含title、meta、script和style標籤。meta標籤可以指定網頁的編碼為utf-8，如下所示： meta charset=utf-8 2-1-1 第一份HTML5網頁-body標籤 body標籤 body標籤是網頁文件的內容，包含文字、超連結、圖片、表格、清單和表單等網頁內容，詳見第2-2~2-4節的說明。 2-1-1 第一份HTML5網頁-Ch2_1_1.htm 01: !DOCTYPE html 02: html lang=zh-TW 03: head 04: meta charset=utf-8/ 05: titleHTML5網頁/title 06: /head 07: body 08: h3HTML5網頁/h3 09: hr/ 10: p第一份HTML5網頁/p 11: /body 12: /html 2-1-2 HTML5的基本語法與共同屬性-語法1 html、head和body標籤都可有可無，XHTML一定需要這些標籤。 元素和屬性不區分英文大小寫，html、Html、HTML都是相同標籤。 元素不一定需要「結尾標籤」（End-Tag），如果是沒有內容的元素，也不需要使用「/」符號代替結尾標籤，例如：下列標籤都是合法的HTML5標籤，如下所示： p這是一個測試/p p這是一個測試 br br/ 2-1-2 HTML5的基本語法與共同屬性-語法2 標籤屬性值的引號也是可有可無，例如：下列標籤的屬性都是合法的HTML5屬性，如下所示： img src=sample.jpg width=20 height=30 / 屬性沒有屬性值，只需使用屬性名稱即可，如下所示： option selected input type=radio checked 文字可以單獨存在，並不用位於HTML開始與結束標籤之中。 一些XHTML的屬性已經不再需要，例如：script標籤的type屬性和html標籤的xmlns屬性等。 2-1-2 HTML5的基本語法與共同屬性-共同屬性 HTML標籤擁有很多共同屬性，即每一個標籤都支援的屬性，常用共同屬性的說明，如下表所示： 2-1-3 head標籤 head標籤是html標籤的子標籤，它是一個容器元素，可以包含標題元素：title、meta、script和style等標籤，如下表所示： 2-2 HTML5的文字編排標籤 2-2-1 標題文字 2-2-2 段落、換行與水平線 2-2-3 標示文字內容 2-2-4 HTML清單 2-2-1 標題文字 在HTML網頁的標題文字可以提綱挈領來說明文件內容，hn標籤可以定義標題文字，h1最重要，依序遞減至h6，提供6種不同尺寸變化的標題文字，其基本語法如下所示： hn..../hn ,n=1 ~~ 6 2-2-2 段落、換行與水平線-段落與換行 一般來說，HTML網頁的文字內容是使用段落來編排，使用的是p標籤，p標籤可以定義段落，瀏覽器預設在之前和之