HTML5精華筆記

1、HTML5巨匠電腦 永和分校 馬世驊老師HyperText Markup LanguageHTML1993HTML 2.01995HTML 3.021997HTML 41997HTML 4.011999XHTML 1.02000XHTML 2.02003(X)HTML 520052TimeLine3eXtensible HyperText Markup Language基於XML的標(biāo)準(zhǔn)，所制訂出來(lái)的HTML用法，簡(jiǎn)言之就是在語(yǔ)法規(guī)範(fàn)上更加嚴(yán)格。例如在網(wǎng)頁(yè)中入一張圖片的語(yǔ)法中：HTML 4.01：XHTML 1.0：而XHTML 2.0是基於XML的標(biāo)準(zhǔn)，來(lái)制訂HTML語(yǔ)法，因?yàn)楦淖兲螅瑢?dǎo)致最

2、後失敗。4XML說(shuō)明文章XHTML說(shuō)明文章HTML 5中將會(huì)缺席的標(biāo)籤5basefont、big、center、font、strike、tt以CSS取代。frame、frameset、noframes以iframe取代。acronym用abbr取代、applet以object取代、isindex以表單取代、dir以u(píng)l取代。HTML 5中將會(huì)缺席的屬性6HTML 5 網(wǎng)頁(yè)檢驗(yàn)W3CHTML 5新的標(biāo)籤7HTML 5新的屬性8About Browser9各瀏覽器對(duì)於HTML 5所支援的分?jǐn)?shù)列表。（越高越好）瀏覽器測(cè)試網(wǎng)頁(yè)瀏覽器市佔(zhàn)率詳細(xì)測(cè)試結(jié)果Internet Explorer 9Interne

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

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

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

6、的，以方便不同的裝置可以有不同的反應(yīng)或效果。16體驗(yàn)新標(biāo)籤智慧型表單篇新的表單輸入項(xiàng)目型別說(shuō)明tel電話號(hào)碼型態(tài)欄位search搜尋文字url網(wǎng)址email電子郵件datetimeUTC時(shí)區(qū)的日期與時(shí)間datetime-local無(wú)時(shí)區(qū)的日期與時(shí)間date無(wú)時(shí)區(qū)的日期month無(wú)時(shí)區(qū)的月份week無(wú)時(shí)區(qū)的週數(shù)time無(wú)時(shí)區(qū)的時(shí)間number純數(shù)值range範(fàn)圍內(nèi)數(shù)值color16進(jìn)位制顏色18範(fàn)例頁(yè)面新的表單輸入項(xiàng)目 in iOS 1/319表單外觀電話欄位搜尋欄位新的表單輸入項(xiàng)目 in iOS 2/320日期時(shí)間欄位網(wǎng)址欄位郵件欄位新的表單輸入項(xiàng)目 in iOS 3/321時(shí)間欄位日期欄位月

7、份欄位新的表單屬性22屬性說(shuō)明autofocus自動(dòng)取得焦點(diǎn)placeholder欄位提示文字required強(qiáng)制輸入min最小值max最大值step間隔值autocomplete自動(dòng)完成的開關(guān)pattern利用正規(guī)表示式驗(yàn)證欄位內(nèi)容（正規(guī)表示式、線上即時(shí)驗(yàn)證）範(fàn)例頁(yè)面新的表單標(biāo)籤23屬性說(shuō)明meter量測(cè)標(biāo)籤progress進(jìn)度標(biāo)籤datalist資料清單標(biāo)籤keygen金鑰標(biāo)籤output輸出結(jié)果標(biāo)籤範(fàn)例頁(yè)面1範(fàn)例頁(yè)面2表單篇 後記在HTML 5新增了許多與表單相關(guān)的標(biāo)籤、屬性、項(xiàng)目，其目的是希望大多原本需要用Javascript來(lái)做的項(xiàng)目，可以簡(jiǎn)單的由HTML處理掉，節(jié)省網(wǎng)頁(yè)設(shè)計(jì)者的開發(fā)

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

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

10、由瀏覽器開發(fā)商決定）loop重複播放範(fàn)例網(wǎng)頁(yè)國(guó)外案例視訊篇 後記要利用HTML 5來(lái)取代Flash Player播放視訊和聲音的關(guān)鍵在於瀏覽器的支援程度。若上述條件成立，則Javascript的熟悉程度又會(huì)成為網(wǎng)頁(yè)設(shè)計(jì)師的另一個(gè)關(guān)鍵。32體驗(yàn)新標(biāo)籤畫布篇畫布概述畫布這個(gè)標(biāo)籤在HTML 5中是很特別的，可以把它想像成WORD中的文字方塊，只是畫布中不僅可以出現(xiàn)文字。但畫布本身只是一個(gè)標(biāo)籤（或說(shuō)容器），要能善加運(yùn)用Javascript是不可或缺的語(yǔ)法。34canvas標(biāo)籤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範(fàn)例網(wǎng)頁(yè)實(shí)際應(yīng)用國(guó)外教學(xué)案例canva範(fàn)例網(wǎng)站大陸教學(xué)網(wǎng)站canvas實(shí)例應(yīng)用https:/ 後記從上述的範(fàn)例不能看出來(lái)如果要能夠充分掌握canvas，就必須結(jié)合HTML、CSS、Javascript，三種語(yǔ)法，才能完成一個(gè)又漂亮又炫的網(wǎng)頁(yè)。37體驗(yàn)新標(biāo)籤SVG與MathML篇標(biāo)籤說(shuō)明SVG是一種向量標(biāo)準(zhǔn)，HTML 5允許使用這種標(biāo)準(zhǔn)來(lái)顯示元素。標(biāo)準(zhǔn)說(shuō)明MathML是數(shù)學(xué)標(biāo)記語(yǔ)言，HTML 5允許在網(wǎng)頁(yè)上使用數(shù)學(xué)標(biāo)記語(yǔ)言來(lái)呈現(xiàn)數(shù)學(xué)式。標(biāo)準(zhǔn)說(shuō)明39svg範(fàn)例頁(yè)面math範(fàn)例頁(yè)面結(jié)語(yǔ)網(wǎng)際網(wǎng)路