第2 章HTML5 基礎· 現代網頁設計工作坊 - peterju

HTML5 是HTML 最新的修訂版本，2014 年10 月由全球資訊網協會（W3C）完成標準制定。

... DOCTYPE html>

 ... 現代網頁設計工作坊 前言課程簡介 第1章識別現代網頁 第2章HTML5基礎 第3章CSS3基礎 第4章CSS框架 第5章Javascript5基礎 第6章Javascript函式庫 PoweredbyGitBook 第2章HTML5基礎 第2章HTML5基礎 HTML5是HTML最新的修訂版本，2014年10月由全球資訊網協會（W3C）完成標準制定。

目標是取代1999年所制定的HTML4.01和XHTML1.0標準，以期能在網際網路應用迅速發展的時候，使網路標準達到符合當代的網路需求。

HTML語言的發展大致如下圖，最新的版本是5.0 HTML5擺脫了SGML與XML的束縛，將標籤簡化了，例如：單一元素(element)不需要結束標籤(tag)：/>，並移除以下的元素：applet,center,fontframeset,frame,noframe,strike...。

整個HTML5內容相當的多，要避免錯誤的用法1，完整的說明可參考w3schools的HTML5，總之HTML5用語意標籤(Semantics)來取代傳統標籤，網頁內容改以大綱(Outline)配置...，本課程以開發Web網頁應用的面向，讓諸位了解其精要，首先讓我們利用Noepad++或code來編輯一個基本的HTML5網頁，內容參考如下，存檔並命名為index.html。

HelloWorld!

元素(Element)與標籤(Tag)的關係 巢狀內元素應縮排4個空格。

屬性使用雙引號。

單一元素結尾不需要使用斜線。

不要省略關閉標籤（比如或）。

註解開始使用。

2.1文件模式(DocumentType) 瀏覽器在解析HTML文件時，若DocumentType有正確宣告，則會依照W3C的網頁標準來進行對應的解析，這時稱為StandardsMode，若設定或語法錯誤甚至於不指定DocumentType則會進入QuirkMode，而IE瀏覽器因為每個版本針對標準的解析規則都不同，因此有時必須使用相容性檢視，設定網頁使用對應的IE版本來進行解析。

透過IE瀏覽器的F12開發人員工具模擬頁籤，可得知目前作用的文件模式。

過去的寫法： -//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 現在的寫法： 2.2html元素 html是網頁的根元素，lang屬性(attribute)宣告了網頁內容的語言(語言-字體-地區)： zh-Hant：繁體中文 zh-Hant-TW：台灣地區使用的繁體中文 zh-Hans：簡體中文 但現在的網頁大都以utf-8編碼，網頁可能同時會有不同語言出現，此時就不需要lang屬性了。

過去的寫法： 現在的寫法： 2.3meta元素 meta元素位於head標籤之間，是MetaData的縮寫，一般用來放置給搜尋引擎與瀏覽器相關的資訊，例如： 指定IE瀏覽器模擬版本IE7： 指定瀏覽器提供裝置畫面大小，並動態調整網頁寬度適應之 viewport指的是瀏覽器視窗中可呈現內容的部分，不含選單、捲軸與訊息列，此屬性是適應化網頁的基石，瀏覽器就是因為這個meta指示敘述，才知道必須配合裝置畫面解析度顯示，後續更可配媒體查詢(Mediaquery)動態調整網頁寬度。

指定網頁每隔30秒自動Refresh一次 meta元素過去的寫法： meta元素現在的寫法： 2.4script與style元素 script是用來撰寫javascript程式碼或載入外部javascript檔案的元素，style是用來撰寫css表現語法的元素，通常置於...內。

過去的寫法： ... ... 現在的寫法： 2.5link元素 link是用來呼叫外部的樣式表檔案，置於...內。

過去的寫法： 現在的寫法： 2.6元素介紹 根據HTMLelementreference的元素分類如下： 根元素(Basicelements)：指的是html。

文件超資料(Documentmetadata)：如head,title,meta,style,link...等。

章節(Contentsectioning)：如body,header,footer,hgrouph1~h6,nav,article,section2,aside...等。

文字內容(Textcontent)：如div,ol,ul,li,dl,dt,dd,hr,p,pre,blockquote,figure...等。

行內文字語意(Inline3textsemantics)：如span,a,br,code,dfn,em,strong,sub,sup,u,mark...等。

表格(Tablecontent)：如table,caption,thead,tbody,tfoot,tr,th,td...等。

表單(Forms)：如formfieldset,legend,label,input,select,datalist,option,textarea,button...等。

嵌入内容(Embeddedcontent)：如img,iframe,embed,object,svg,math,audio,video,map,area...等。

腳本(Scripting)：如script,canvas...等。

劃定編輯(Demarcatingedits)：如del,ins等。

互動元素(Interactiveelements)：如dialog,menu...等。

以上還只是最常用的部分，若全部講完大家應該就昏倒了，HTML5元素以圖示的分類呈現，給大家15分鐘的時間在不同瀏覽器上把玩了解一下： form表單相關元素請格外用心學習 這部分的學習不需要死背，只要有概念，隨時回來串習即可。

2.7TakeHome練習 對於開發Web應用程式最應該透徹了解的就是表單元素了，請在閱讀W3SchoolsHTMLForms相關章節之後，利用HTML5test觀察不同瀏覽器對於表單的支援度，再以jsbin練習表單的用法：請參考範例，但不要修改它喔。

請根據福智全球資訊網的網站資料，簡化後參考第1章介紹的樣板網頁，另行製作一個全新的首頁。

1避免常見的六種HTML5錯誤用法。

2section是章節與段落的意思與article一樣都是HTML5的語意新元素，被section包覆的段落，通常都會帶有headling標籤，進一步的說明請參考：淺談section運用以及與outline間的關聯。

3網頁元素依照輸出後有無換行可分為區塊(block)元素與行內(inline)二大類元素，在接下來的CSS課程中會進行深入了解。

resultsmatching"" Noresultsmatching""