<4D F736F F D D4C3520BDD2B57BACE3B2DFC1BFB871A1C4B9C5B871A46ABEC7B8EABADEA8745F F312E646F6378>

Size: px

Start display at page:

Download "<4D F736F F D D4C3520BDD2B57BACE3B2DFC1BFB871A1C4B9C5B871A46ABEC7B8EABADEA8745F F312E646F6378>"

巅蔺
6 years ago
Views:

1 HTML5 課程研習

2 什麼是 HTML5 自從全球資訊網 ( 也就是 WWW 或 Web) 在一九九年代興起以來, 人們得以透過網頁獲得豐富資訊隨著網頁技術的發展, 這些頁面不只是毫無組織的文字, 它還可以具有多樣化的結構, 例如標題段落表格圖片文字變化等在背後定義這些結構的語言, 就是 HTML 在瀏覽器解析 HTML 之後, 我們就能使用網頁的操作介面和內容 HTML5 是 Hyper Text Markup Language 的新版本, 而 HTML5 是包含了 HTML CSS 和 JavaScript 等三個部分, 目標是減少瀏覽器對外掛程式的需求目前的 HTML 標準是 HTML 4.01 和 XHTML 1.1, 此外還有專門用來表示網頁外觀與樣式的 CSS2 以目前來說 HTML4 單純只是標籤語言, 全部的功能就只有在網頁上顯示圖片或文字但如果想要讓網頁變得更好看的話, 就只能使用 CSS 了 ; 但還是沒辦法將音樂或是影片等素材放到網頁上, 所以需要另外安裝可以將影音呈現在網頁的外掛程式, 如 Flash Player 而若沒安裝外掛程式在系統裡的話, 就會出現網頁無法正確顯示的問題而 HTML5 的起源就是要解決這種網頁瀏覽器需再安裝外掛程式的問題, 可以達到就算沒有外掛程式也可在網頁上呈現出影音內容目前世界最大的影片網站 Youtube 也使用了 HTML5, 因為就算是沒有安裝外掛程式也可以將影音內容直接呈現在網頁上因為 HTML5 是還沒有正式的標準, 所以目前沒有瀏覽器完全支持 HTML5 但所有的主流瀏覽器目前有支援 HTML5 的有 Internet Explorer 9 Firefox Opera Chrome 等, 而也會繼續增加新的 HTML5 特性 1

3 HTML 語法的撰寫方法以下為欲使用 HTML 文法撰寫標記時必須注意的事項 HTML5 的文件類型 HTML5 存成文件檔案時的附檔名與相同存成.htm 或是.html 即可 HTML5 文件的 DOCTYPE 宣告簡單易用的 DOCTYPE 宣告, 這個宣告一定要有, 如果省略了, 會使得瀏覽器沒有最新的演算繪製模式, 有可能會造成一部分的 HTML5 功能無法動作另外, 有些工具無法輸出如上這麼簡單的 DOCTYPE 宣告, 所如下的 DOCTYPE 宣告也是有效的其中的引號也可以使用單引號, 引號內的文字可不分大小寫 <!DOCTYPE html SYSTEM about:legacy compat > <html> <head> <meta charset="utf 8"> <title> 網頁標題文字 </title> </head> <body> 網頁內容 </body> </html> HTML5 文字編碼的指定方式 HTML5 的文字編碼指定方式, 已經可以使用 meta 元素的 charset 屬性如 :<meta charset="utf 8"> 或是 :<meta http equiv="content Type" content="text/html; charset=utf 8"> 以上兩種方法不可同時使用, 一個 HTML 檔案中只能使用其中一種宣告 2

4 HTML5 的語法細節以下為說明 HTML5 規格中有關文法的規定, 前提是讓先了解基本的 HTML5 的語法知識, 以方便撰寫不可使用結束標籤的元素以下元素不可加上結束標籤 area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param,,source 如下即是錯誤語法 <meta charset="utf 8"></meta> 但可寫成如下語法 <meta charset="utf 8"/> 視狀況可省略標籤的元素元素名稱開始標籤結束標籤 html head body li dt dd p rt rp optgroup option colgroup thead tbody tfoot tr td th 可以省略結束標籤是依元素不同而有所不同的情況, 但結束標籤可以省略大多是因為後面續接著同種類的元素或是父元素的內容結束了這類的情況 3

5 屬性屬性質為空白或是不含 < > = 這些字元的情況下可以省略引號另外, 具 true / false 值 ( 也就是 Boolean) 的屬性, 若是省略了其指定值的話, 則表示是為 true, 也就是表示要執行其所指定的屬性 ; 或是將屬性值指定為空白字串以及屬性本身名稱, 都是代表值為 true 如下例 : <input id=age type=number disabled> <input id=age type=number disabled= > <input id=age type=number disabled= disabled > HTML5 的新標籤 HTML5 所使用的是在標籤上賦予意義的語意標籤 Semantic Markup, 而 HTML5 的新標籤, 提供了更好的結構, 只要看標籤名稱就可以推測出其用途, 方便撰寫時的使用與文件結構相關的新元素標籤名稱 <section> <article> <aside> <nav> <footer> <header> <hgroup> 說明構成文件的結構定義文檔中的一節, 表示專題性內容, 可以和 h1~h6 標題樣式一起使用 Section 的一種, 定義獨立完整的文章區塊 Section 的一種, 定義 article 以外的內容, 主要是用於頁面內容相關的邊攔 Section 的一種, 定義網站內的導覽目錄定義頁面底部元素, 只要用在呈現網站製作者或著作權資訊等頁面訊息定義頁面底部的區塊元素, 顯示該網頁文件的標題把文字段落標題的 <H1>~<H6> 極其有關的副標題進行組合元素時, 使標題具有多層次新的 <canvas> 元素標籤 <canvas> 描述定義點陣圖畫布, 用於繪製圖形 4

6 文字或其他的新元素標籤名稱 <details> <summary> <mark> <ruby> <rt> <rp> <command> <details> <datalist> 說明定義對象的細部資訊定義一個可見項為 <details> 元素定義文本標記 / 高亮定義 <ruby> 的註解表現 <ruby> 的內容表現 <ruby> 的內容定義功能中可執行的指令定義使用者可以任意展開或關閉的詳細資訊定義用來保存自動帶入候選值等用途的資料清單新媒體元素及內嵌外部的內容標籤 <figure> <audio> <video> <source> 描述將包含說明的內容放入文件中時可用, 用於組合元素, 如插圖, 圖表, 照片, 代碼清單等定義聲音檔定義視訊檔定義多種媒體資源 <video> 和 <audio> <embed> 定義一個外部應用程序或交互式內容的容器 ( 插件 ) 新的表單元素標籤 <keygen> <progress> <meter> <output> 描述產生公開金鑰對表示進度的進度條計量輸出用的表單元素 5

7 HTML5 廢除的元素 HTML5 新增了許多的屬性與元素, 但也廢除了一些元素編輯時若用了這些廢除的元素, 網頁瀏覽器會自動跳過錯誤而繼續處裡 ( 向下相容性 ) 下面為在 HTML5 中所廢除的 HTML 4.01 元素標籤描述替代方案 <applet> 內嵌 Java Applet 請改使用 embed 或 object 元素 <acronym> 表示首字母縮寫請改使用 abbr 元素 <dir> 目錄一覽請改使用邀 ul 元素 <frame> 窗格請改使用 iframe 與 CSS 結合伺服器內容 <frameset> <noframes> 窗格集合傳送給不支援窗格的瀏覽器內容 <isindex> 傳送到伺服端的 text 輸入欄位請使用 form 與文字欄位的結合 <listing> 直接輸入內容請改使用 pre 元素與 code 元素 <xmp> 直接輸入內容 <noembed> Embed 不能使用時的代替元素必須處裡補救時, 可以使用 object 元素 <plaintext> 直接輸出內容請使用 text/plain 的 MIME 類型 <rb> 指定 ruby 元素目標的文字文字請直接寫入 ruby 元素內 <basefont> <big> <blink> <center> <font> <marquee> <s> <spacer> <strike> <tt> <u> 指定基準字體放大字體使字體閃爍內容置中對齊指定字型文字捲動刪除線插入空白刪除線以等寬字體顯示字體加下底線請改用 CSS <bgsound> 音效請改用 audio 元素 6

8 ~ HTML5 網頁文文件結構使用語意標標籤的 HTML5 文件所謂謂的語意標標籤, 意思就就是具有有意義的意意思也就是是說每個標籤籤具有其所代表的意義語意意標籤會依依照其意義進進行配置, 也可過各種種方法進行行配置 <header> <section> <section> <footer> 7

9 ~ 可以自由的的配置語意意標籤 <header> <nav> <article> <section> <aside> <section> <footer> <header> <nav> <article> < <section> < <section> <aside> <footer> 8

10 ~ HTML5 的文文件類型指指定方式 DOCTYPE DOCTYPE 是在在判斷目前這這個網頁是是以何種類型型做成, 也就是定義目前文件類類型的標籤因每個瀏瀏覽器多多多少少都都會有不同程程度的相容容性, 所以就算做出完美美的網頁文文件, 但如果果不置入 DOCTYPE 宣告, 就有有可能在不不同瀏覽器瀏瀏覽網頁時時會顯示不同同的結果頁頁面下面面為 DOCTYPE 範例 <!DOCTYPE html PUBLIC " //W3C//DTD XHTML L 1.0 Transitional//EN" " transitional.dtd"> 因 DOCTYPE 不是 HTML 標籤, 所以以須放置在在開始網頁文文件的 <html> 標籤的的上方, 也就是要比開開始網頁頁文件的 <html> 更早出出現三種 DOCTYPE 的宣告標籤 <strict> 描述文法及結構構必須相互配合 <transitional> 可以套用到到某個程度之舊舊版本的屬性和和標籤 <output> 使用於以框框架製作的網頁頁文件 <hgroup> 標題和副標標題的群組組標籤 <hgroup> 是將將標題和其相相關的副標標題進行組合合的群組功功能, 使用 <hgroup> < 可可以將標題和和副標題置置入其中中 9

11 ~ <nav> 導航航連結標籤導航航連結標籤籤是表現文件件裡和其他他文件進行連連結時的導導航連結以以往當使用用 HTML 或 XHTML 製作作網頁文文件時, 會另外使用 <div> 標籤, 且必須指指定 nav 或 menu 等特別 ID, 但是在 HTML5 裡有 <nav> 標籤, 應用這個標標籤就可以快快速知道網網頁哪個部分分是導航連連結 10

互動網頁技術系列課程 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),