2021構(gòu)建HTML5網(wǎng)頁文件02HTML5多媒體技術(shù)01HTML5新增元素與屬性目錄CONTENTHTML5新增元素與屬性01在HTML5頁面中的元素都是以結(jié)構(gòu)化形式構(gòu)成的，如header元素、nay元素、article元素等?！救蝿?wù)目標(biāo)】【任務(wù)3.1.1】結(jié)構(gòu)元素【知識解析】【任務(wù)3.1】HTML5新增元素與屬性掌握結(jié)構(gòu)元素的使用方法header元素是引導(dǎo)作用的結(jié)構(gòu)元素,通常運(yùn)用在頁面的頭部。1、header元素通過header元素的用法完成效果的制作，如圖3-1所示。）案例引入3.1.1結(jié)構(gòu)元素2、nav元素nav元素常用于頁面的導(dǎo)航功能，使得頁面導(dǎo)航元素更加明確nav元素目前常用于傳統(tǒng)導(dǎo)航條、側(cè)邊導(dǎo)航、頁內(nèi)導(dǎo)航和翻頁導(dǎo)航等幾種場合。但并不是所有的鏈接組都要被放進(jìn)nav元素，只需要將主要的和基本的鏈接放進(jìn)nav元素即可。3.1.1結(jié)構(gòu)元素3、article元素3.1.1結(jié)構(gòu)元素article元素常常用作頁面中的獨(dú)立文檔，如日記、博客、新聞或評論等內(nèi)容，該元素常常與section元素配合使用，一個(gè)頁面中article元素可以出現(xiàn)多次。案例引入利用article元素完成效果的制作3.1.1結(jié)構(gòu)元素4、aside元素aside元素用來表示頁面文章的附屬信息,它可以是相關(guān)的側(cè)欄信息、引用信息、廣告和導(dǎo)航條信息等部分。aside元素用法常有兩種：一是article元素內(nèi)作為附屬信息；二是在article元素之外作為附屬信息案例引入aside元素的使用制作效果3.1.1結(jié)構(gòu)元素5、section元素section元素對頁面上的內(nèi)容進(jìn)行分塊,一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。但需要注意以下3點(diǎn)：●不要將section元素用作div的特性，section元素并非容器。●如果article元素、aside元素或nav元素三個(gè)元素更符合,那就不使用section元素?！駍ection元素使用時(shí)，塊內(nèi)容要有標(biāo)題。案例引入section元素的使用效果3.1.1結(jié)構(gòu)元素6、footer元素footer元素常用于表示頁面的底部內(nèi)容。與header元素用法相似,一個(gè)頁面中可以包含多個(gè)footer元素。同時(shí),也可以在article元素或者section元素中使用footer元素。為了讓頁面內(nèi)容排列有序、分類清晰，如電商購物網(wǎng)站的分類導(dǎo)航內(nèi)容等，可分別使用ul、ol和dl列表元素定義頁面內(nèi)容【任務(wù)目標(biāo)】【任務(wù)3.1.2】列表元素【知識解析】【任務(wù)3.1】HTML5新增元素與屬性學(xué)會如何使用列表元素創(chuàng)建列表3.1.1列表元素1、ul元素ul元素表示無序列表，將網(wǎng)頁中內(nèi)容無序的呈現(xiàn)出來，沒有級別、先后順序之分，常用于頁面的導(dǎo)航菜單功能案例引入通過ul元素完成無序列表的效果制作3.1.1列表元素2、ol元素ol元素表示有序列表，將網(wǎng)頁的內(nèi)容信息有序的呈現(xiàn)出來，如頁面中的信息排行榜等可以通過有序列表來定義案例引入通過ol元素及屬性設(shè)置制作有序列表的效果3.1.1列表元素3、dl元素dl元素表示定義列表，常用于對關(guān)鍵詞、名詞術(shù)語進(jìn)行描述和解釋,定義列表的列表項(xiàng)是沒有任何項(xiàng)目符號標(biāo)記案例引入利用dl定義列表元素制作效果3.1.1列表元素4、列表的嵌套應(yīng)用在使用列表時(shí),列表項(xiàng)中也有可能包含若干子列表項(xiàng),要想在列表項(xiàng)中定義子列表項(xiàng)就需要將列表進(jìn)行嵌套案例引入通過列表元素完成列表嵌套效果制作分組元素常用于對頁面內(nèi)容進(jìn)行分組，分別為figure元素、figcaption元素和hgroup元素，【任務(wù)目標(biāo)】【任務(wù)3.1.3】分組元素【知識解析】【任務(wù)3.1】HTML5新增元素與屬性掌握分組元素的基本使用方法任務(wù)3.1.3分組元素1、figure和figcaption元素應(yīng)用figure元素常用于定義圖像圖片等流內(nèi)容，一般是一個(gè)獨(dú)立的區(qū)域。其定義的內(nèi)容要與主體內(nèi)容保持一致。而figcaption元素則常用于figure元素內(nèi)的標(biāo)題,該元素常放在figure元素的第一個(gè)或者最后一個(gè)子元素的位置。案例引入figure和figcaption元素應(yīng)用效果任務(wù)3.1.3分組元素2、hgroup元素hgroup元素常用于包含多個(gè)標(biāo)題組，如h1-h6元素組合使用。通常，hgroup元素放在header元素中。案例引入hgroup元素的用法效果HTML5是一些獨(dú)立特性的集合,它不僅增加了許多Web頁面特性,而且本身也是一個(gè)應(yīng)用程序。對于應(yīng)用程序而言,表現(xiàn)最為突出的就是交互操作。HTML5為操作新增加了對應(yīng)的交互體驗(yàn)元素,在本節(jié)將詳細(xì)介紹這些元素【任務(wù)目標(biāo)】【任務(wù)3.1.4】交互元素【知識解析】【任務(wù)3.1】HTML5新增元素與屬性掌握交互元素的基本使用方法任務(wù)3.1.4交互元素1、details和summary元素的應(yīng)用details元素常用于描述某文檔或者領(lǐng)域的細(xì)節(jié)，而summary元素常與details元素配合使用，summary元素常定義為details標(biāo)題，點(diǎn)擊標(biāo)題，會顯示或隱藏details中的內(nèi)容。案例引入details元素和summary元素的制作效果,任務(wù)3.1.4交互元素2、progress元素progress元素常表示頁面完成任務(wù)的進(jìn)度。其常用屬性值有兩個(gè)：value表示完成工作量的值；max:表示任務(wù)的總工作量。注意：value的值要小于或等于max屬性的值，且都大于0。案例引入progress元素的使用效果,任務(wù)3.1.4交互元素3、meter元素案例引入meter元素的應(yīng)用制作效果，,屬性屬性描述high表示被界定為高點(diǎn)的值low表示被界定為低點(diǎn)的值max表示最大值,默認(rèn)值是1min表示最小值,默認(rèn)值是0optimum表示設(shè)置怎樣的度量值為最佳的值。如設(shè)置大的屬性值,則意味越高越好。如果設(shè)置低的屬性值,則意味著值越低越好value表示度量的值為了增強(qiáng)頁面文本顯示效果的生動性，常使用語義元素來進(jìn)行修飾，主要包含time元素,mark元素和cite元素，【任務(wù)目標(biāo)】【任務(wù)3.1.5】語義元素【知識解析】【任務(wù)3.1】HTML5新增元素與屬性掌握文本語義元素的基本使用方法任務(wù)3.1.5語義元素1、time元素的應(yīng)用time元素表示日期和時(shí)間，又能以一種可讀方式顯示給用戶。其常用兩個(gè)屬性為datetime和pubdate。其中datetime屬性用于可以被搜索或者應(yīng)用程序可讀取、可識別的時(shí)間或日期；ubdate屬性常用于最近的父article元素內(nèi)容的發(fā)布日期和時(shí)間，如沒找到article元素，則指向整個(gè)文檔案例引入time元素的用法制作效果,任務(wù)3.1.5語義元素2、mark元素的應(yīng)用mark元素表示在文本中高亮度顯示某些文字,該元素的用法與em和strong功能相似,都是強(qiáng)調(diào)修飾的作用案例引入mark元素的應(yīng)用制作效果,任務(wù)3.1.5語義元素3、cite元素cite元素表示一個(gè)引用標(biāo)記,常用于正文的參考文獻(xiàn)引用說明,被標(biāo)記的內(nèi)容將以傾斜的樣式顯示,區(qū)別于其他文字。案例引入cite元素的應(yīng)用制作效果,,全局屬性表示其屬性能適用于任何元素,在HTML5中常用的全局屬性有draggable、hidden、spellcheck和contenteditable等【任務(wù)目標(biāo)】【任務(wù)3.1.6】全局屬性【知識解析】【任務(wù)3.1】HTML5新增元素與屬性掌握全局屬性的基本用法任務(wù)3.1.6全局屬性1、draggable屬性raggable屬性表示該元素是否可以拖拽,其屬性有true和false兩個(gè)值,當(dāng)值為true時(shí)表示該元素可以進(jìn)行拖拽操作,反之則不能。實(shí)際在應(yīng)用過程中，要想實(shí)現(xiàn)真正意義上的拖拽效果，要結(jié)合JavaScript腳本技術(shù)結(jié)合使用案例引入draggable屬性的用法制作效果,,任務(wù)3.1.6全局屬性2、hidden屬性hidden屬性表示該元素在頁面中是否可以顯示,在HTML5中屬性值為hidden，例：hidden="hidden"，該元素將會被隱藏,反之去掉hidden則會顯示任務(wù)3.1.6全局屬性3、spellcheck屬性spellcheck屬性主要用于表單域中文本輸入控件中內(nèi)容及語言的檢測功能。其有兩個(gè)屬性值，值為true時(shí)檢測輸入框中的語法值,反之不檢測案例引入通過spellcheck屬性用法制作效果,任務(wù)3.1.6全局屬性4、contenteditable屬性contenteditable屬性表示當(dāng)前定義的元素是否可編輯，但并沒有真正意義上的內(nèi)容編輯，當(dāng)頁面刷新時(shí)恢復(fù)原狀，如想直接在頁面上實(shí)現(xiàn)信息編輯效果則需結(jié)合復(fù)雜的JavaScript代碼才能實(shí)現(xiàn),當(dāng)前僅在HTML5中指定該屬性的值即可。屬性值為true表示可編輯,為false表示不可編輯案例引入通過contenteditable屬性制作效果,

HTML5多媒體技術(shù)02在HTML5中,audio元素用于嵌入音頻文件，它默認(rèn)支持三種音頻格式，分別為Ogg、MP3和wav,其基本語法格式如下：<audiosrc="音頻文件路徑”controls="controls"></audio>src屬性表示音頻文件的路徑,controls屬性表示音頻播放控件。<audio>和</audio>之間也可以插入文字，當(dāng)瀏覽器不支持audio元素則顯示文字【任務(wù)目標(biāo)】【任務(wù)3.2.1】音頻技術(shù)【知識解析】【任務(wù)3.2】HTML5多媒體技術(shù)掌握HTML5如何插入音頻案例引入通過audio元素嵌入音頻的效果屬性屬性值功能描述autoplayautoplay表示加載頁面時(shí)自動播放音頻looploop表示音頻結(jié)束時(shí)自動循環(huán)播放preloadpreload表示音頻在頁面加載時(shí)進(jìn)行加載,并預(yù)備播放。如果使用"autoplay",則忽略該屬性。在HTML5中,video元素用于嵌入視頻文件,它支持三種視頻格式,分別為Ogg、WebM和MPEG4，其基本語法格式為：<videosrc="視頻文件路徑”controls="controls"/video>src屬性表示視頻文件的路徑,controls屬性表示視頻播放控件。<video>和</video>之間也可以插入文字，當(dāng)瀏覽器不支持video元素則顯示文字。【任務(wù)目標(biāo)】【任務(wù)3.2.2】視頻技術(shù)【知識解析】【任務(wù)3.2】HTML5多媒體技術(shù)掌握HTML5如何插入視頻案例引入通過video元素嵌入視頻的效果,屬性屬性值功能描述autoplayautoplay表示加載頁面時(shí)自動播放視頻looploop表示視頻結(jié)束時(shí)自動循環(huán)播放preloadpreload表示視頻在頁面加載時(shí)進(jìn)行加載,并預(yù)備播放。如果使用"autoplay",則忽略該屬性。post