HTML5精华笔记

1、HTML5巨匠電腦 永和分校 馬世驊老師HyperText Markup LanguageHTML1993HTML 2.01995HTML 3.021997HTML 41997HTML 4.011999XHTML 1.02000XHTML 2.02003(X)HTML 520052TimeLine3eXtensible HyperText Markup Language基於XML的標準，所制訂出來的HTML用法，簡言之就是在語法規範上更加嚴格。例如在網頁中入一張圖片的語法中：HTML 4.01：XHTML 1.0：而XHTML 2.0是基於XML的標準，來制訂HTML語法，因為改變太大，導致最

2、後失敗。4XML說明文章XHTML說明文章HTML 5中將會缺席的標籤5basefont、big、center、font、strike、tt以CSS取代。frame、frameset、noframes以iframe取代。acronym用abbr取代、applet以object取代、isindex以表單取代、dir以ul取代。HTML 5中將會缺席的屬性6HTML 5 網頁檢驗W3CHTML 5新的標籤7HTML 5新的屬性8About Browser9各瀏覽器對於HTML 5所支援的分數列表。（越高越好）瀏覽器測試網頁瀏覽器市佔率詳細測試結果Internet Explorer 9Interne

3、t Explorer 10Firefox 16Chrome 23體驗新標籤結構和語意篇結構標籤：網頁頁面的頂部，通常都是放置網站的標題、LOGO等主要的資訊：通常為網站的選單連結。：主要內容之外的其他內容，可以為網站的側邊欄。：為頁面中的一個區塊，是獨立的內容，在一個文件中可以有很多個。：用於章節等段落的區分，在一個文件中可以有很多個。：HTML5頁面的下方，用以顯示相關資訊、著作權等等。11figure、figcaption12馬老師於101年3月23日4月12日協助唐潮文創設計事業有限公司在國家圖書館1樓展覽室（臺北市中正區中山南路20號）舉辦行政院組織改造檔案展，其中有三個製作物，分別是

4、圖一的靠近看組改、圖二的轉動組改以及圖三的組改時光廊。範例頁面ruby、rt、rp馬世驊HTML5(Web Standard)13支援的瀏覽器顯示畫面不支援的瀏覽器顯示畫面範例頁面語意文字標籤 1/2元素目的範例a超連結馬老師部落格em重點強調熱誠是學習成功的重點strong重要HTML5是未來設計趨勢samll警語古巴的雪茄是極品吸菸過量有礙健康s不正確的文字價格：300250！cite參考文獻steve jobsstay hungry stay foolishq引用dfn術語有機食物一詞是指未使用合成化學生產的食物abbr縮寫今天的課程是HTML5time日期、時間發行日：2012-03-

5、21code程式碼echo “Test“var變數如果n=1，則n+=214語意文字標籤 2/2元素目的範例samp電腦輸出電腦顯示：未知的錯誤kbd使用者輸入請按F1顯示說明sub下標字水是H2Osup上標字42=16i斜體巨匠電腦教育中心b粗體巨匠電腦馬世驊老師mark強調用量為1比10調配ruby,rt,rp註釋NBA KDKevin Durantbdo文字方向巨匠電腦永和分校span無意義（方便CSS套用）特效文字br跳行巨匠電腦永和分校15語意篇 後記上述的語意標籤，部分在HTML 5之前的版本就有，但在HTML 5裡面也增加些許的語意標籤，其目的是讓瀏覽器知道設計者在網頁上排版的目

6、的，以方便不同的裝置可以有不同的反應或效果。16體驗新標籤智慧型表單篇新的表單輸入項目型別說明tel電話號碼型態欄位search搜尋文字url網址email電子郵件datetimeUTC時區的日期與時間datetime-local無時區的日期與時間date無時區的日期month無時區的月份week無時區的週數time無時區的時間number純數值range範圍內數值color16進位制顏色18範例頁面新的表單輸入項目 in iOS 1/319表單外觀電話欄位搜尋欄位新的表單輸入項目 in iOS 2/320日期時間欄位網址欄位郵件欄位新的表單輸入項目 in iOS 3/321時間欄位日期欄位月

7、份欄位新的表單屬性22屬性說明autofocus自動取得焦點placeholder欄位提示文字required強制輸入min最小值max最大值step間隔值autocomplete自動完成的開關pattern利用正規表示式驗證欄位內容（正規表示式、線上即時驗證）範例頁面新的表單標籤23屬性說明meter量測標籤progress進度標籤datalist資料清單標籤keygen金鑰標籤output輸出結果標籤範例頁面1範例頁面2表單篇 後記在HTML 5新增了許多與表單相關的標籤、屬性、項目，其目的是希望大多原本需要用Javascript來做的項目，可以簡單的由HTML處理掉，節省網頁設計者的開發

8、時間，但終究還是要考量到瀏覽器的支援度。24體驗新標籤視訊與聲音篇視訊概述目前大多網頁視訊格式為flv格式，利用Flash Player播放，也因絕大多數的電腦中均安裝有Flash Player，所以能確保所有網友都看的到本視訊。26+視訊格式Ogg、MPEG-4、WebM27專利問題轉檔軟體視訊標籤抱歉，您的瀏覽器不支援本格式的影片。28範例網頁video標籤屬性29屬性值說明src位置播放視訊檔的位置poster位置瀏覽器載入該視訊時所顯示的圖片位置preloadautometadatanoneauto：網頁載入時自動載入該視訊metadata：網頁載入時只載入描述資料（例如：長度、作者）

9、none：使用者按下播放鈕前不載入視訊autoplay自動播放該視訊controls顯示控制器外觀（外觀由瀏覽器開發商決定）loop重複播放width值視訊寬度height值視訊高度source標籤屬性30屬性值說明src位置播放視訊檔的位置type值視訊類型mediacss輸出媒體類型範例網頁audio標籤屬性31屬性值說明src位置播放視訊檔的位置preloadautometadatanoneauto：網頁載入時自動載入該視訊metadata：網頁載入時只載入描述資料（例如：長度、作者）none：使用者按下播放鈕前不載入視訊autoplay自動播放該視訊controls顯示控制器外觀（外觀

10、由瀏覽器開發商決定）loop重複播放範例網頁國外案例視訊篇 後記要利用HTML 5來取代Flash Player播放視訊和聲音的關鍵在於瀏覽器的支援程度。若上述條件成立，則Javascript的熟悉程度又會成為網頁設計師的另一個關鍵。32體驗新標籤畫布篇畫布概述畫布這個標籤在HTML 5中是很特別的，可以把它想像成WORD中的文字方塊，只是畫布中不僅可以出現文字。但畫布本身只是一個標籤（或說容器），要能善加運用Javascript是不可或缺的語法。34canvas標籤var canvas = document.querySelector(canvas); var context = canva

11、s.getContext(2d); context.fillStyle = red; context.fillRect(0,0,400,300); context.fillStyle = rgba(255,255,0,0.5); context.fillRect(400,300,400,300);35範例網頁實際應用國外教學案例canva範例網站大陸教學網站canvas實例應用https:/ 後記從上述的範例不能看出來如果要能夠充分掌握canvas，就必須結合HTML、CSS、Javascript，三種語法，才能完成一個又漂亮又炫的網頁。37體驗新標籤SVG與MathML篇標籤說明SVG是一種向量標準，HTML 5允許使用這種標準來顯示元素。標準說明MathML是數學標記語言，HTML 5允許在網頁上使用數學標記語言來呈現數學式。標準說明39svg範例頁面math範例頁面結語網際網路