1、第一章1簡(jiǎn)答題(1)在Web前端開(kāi)發(fā)方面，HTML5與HTML4比較，主要解決哪幾方面的問(wèn)題？HTML5的核心在于解決當(dāng)前Web開(kāi)發(fā)中存在的各種問(wèn)題。一是解決Web瀏覽器之間的兼容性問(wèn)題。在一個(gè)瀏覽器上正常顯示的網(wǎng)頁(yè)(或運(yùn)行的Web應(yīng)用程序)，很可能在另一個(gè)瀏覽器上不能顯示或顯示效果不一致；二是文檔結(jié)構(gòu)描述的問(wèn)題。HTML4之前的各版本中，HTML文檔的結(jié)構(gòu)一般用div元素描述，文檔元素的結(jié)構(gòu)含義不夠清晰；三是使用HTML+CSS+JavaScript開(kāi)發(fā)Web應(yīng)用程序時(shí)，開(kāi)發(fā)功能受到很大的限制，比如本地?cái)?shù)據(jù)存儲(chǔ)功能、多線程訪問(wèn)、獲取地理位置信息等，這些都影響了用戶的體驗(yàn)。(2)HTML5新增

2、的全局屬性有哪幾個(gè)？描述其主要功能。HTML5新增的全局屬性，是指可以對(duì)任何元素都使用的屬性。功能如下所示。屬性描述HTML5新增accesskey規(guī)定訪問(wèn)元素的鍵盤(pán)快捷鍵class規(guī)定元素的類名(用于規(guī)定樣式表中的類)。contenteditable規(guī)定是否允許用戶編輯內(nèi)容。是contextmenu規(guī)定元素的上下文菜單。是dir規(guī)定元素中內(nèi)容的文本方向。draggable規(guī)定是否允許用戶拖動(dòng)元素。是dropzone規(guī)定當(dāng)被拖動(dòng)的項(xiàng)目/數(shù)據(jù)被拖放到元素中時(shí)會(huì)發(fā)生什么。是hidden規(guī)定該元素是無(wú)關(guān)的。被隱藏的元素不會(huì)顯示。是id規(guī)定元素的唯一ID。lang規(guī)定元素中內(nèi)容的語(yǔ)言代碼。spellc

3、heck規(guī)定是否必須對(duì)元素進(jìn)行拼寫(xiě)或語(yǔ)法檢查。是style規(guī)定元素的行內(nèi)樣式。tabindex規(guī)定兀素的tab鍵控制次序。title規(guī)定有關(guān)元素的額外信息。（3）HTML5是下一代Web語(yǔ)言的開(kāi)發(fā)框架，典型特性有哪些？HTML5從標(biāo)記語(yǔ)言的功能提升到下一代Web語(yǔ)言的開(kāi)發(fā)框架，他集成了HTML+CSS3+JavaScript的Web應(yīng)用框架。良好的語(yǔ)義特性。HTML5支持微數(shù)據(jù)與微格式，增加的各種元素賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)，適于構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web應(yīng)用。HTML5增加了section元素、article元素、nav元素以及aside元素等結(jié)構(gòu)元素。強(qiáng)大的繪圖功能。通

4、過(guò)使用CanvasAPI動(dòng)態(tài)地繪制各種效果精美的圖形，也可以通過(guò)SVG繪制可伸縮矢量圖形。增強(qiáng)的音視頻播放和控制功能。新增了audio和video元素，可以不依賴任何插件而播放音頻和視頻。HTML5的數(shù)據(jù)存儲(chǔ)和數(shù)據(jù)處理的功能。包括離線應(yīng)用、Web通信、本地存儲(chǔ)等功能，HTML5還支持WebSQL和IndexedDB等輕量級(jí)數(shù)據(jù)庫(kù)，增強(qiáng)了數(shù)據(jù)存儲(chǔ)和數(shù)據(jù)檢索能力。獲取地理位置信息。HTML5新增了GeolocationAPI規(guī)范，應(yīng)用于移動(dòng)設(shè)備中的地理定位。提高頁(yè)面響應(yīng)的多線程。HTML5新增了WebWorkers來(lái)實(shí)現(xiàn)多線程功能。通過(guò)WebWorkers，將耗時(shí)較長(zhǎng)的處理交給后臺(tái)線程，降低Web

5、服務(wù)的響應(yīng)時(shí)間，有利于增強(qiáng)用戶體驗(yàn)。方便用戶處理文件和訪問(wèn)文件系統(tǒng)的文件文件API°HTML5的文件API包括FileReaderAPI和FileSystemAPI。除了上面介紹的HTML5的特性之外，HTML5還有管理瀏覽器歷史記錄的HistoryAPI。HTML5可以通過(guò)腳本語(yǔ)言在瀏覽器歷史記錄中添加項(xiàng)目，以及在不刷新頁(yè)面的前提下顯示地改變?yōu)g覽器地址欄中的URL地址；而HTML5的拖放功能可以使用mousedown、mousemove、mouseup等方法來(lái)實(shí)現(xiàn)拖放操作。（4）HTML5文檔結(jié)構(gòu)的HTML4之前的文檔結(jié)構(gòu)有哪些變化？?jī)?nèi)容類型（ContentType）。HTML5的

6、文件擴(kuò)展名與內(nèi)容類型與之前的HTML版本相同。但.DOCTYPE聲明做了簡(jiǎn)化，該聲明適用所有HTML。聲明如下：!DOCTYPEhtml在HTML5中，直接指定meta標(biāo)記的charset屬性可以設(shè)置字符編碼，如下所示。metacharset="utf-8"從HTML5開(kāi)始，對(duì)于HTML文件的字符編碼推薦使用UTF-8。操作題略。第二章1簡(jiǎn)答題（1）簡(jiǎn)述HTML文檔的基本結(jié)構(gòu)元素的功能。HTML文檔的基本結(jié)構(gòu)元素包括htm卜、head、body等。html和/html標(biāo)記表示該文檔是HTML文檔。有時(shí)html標(biāo)記可省略，因?yàn)?html或.htm文件被Web瀏覽器默認(rèn)為是HT

7、ML文檔。head和/head標(biāo)記表示的是文檔頭部信息，一般包括標(biāo)題和主題信息，該部分信息不會(huì)顯示在頁(yè)面正文中。一些CSS樣式定義、JavaScript腳本也可以放到文檔的頭部。body和/body標(biāo)記是網(wǎng)頁(yè)的主體信息，是顯示在頁(yè)面上的內(nèi)容，各種網(wǎng)頁(yè)兀素，包括文字、表格和圖片等信息都將放到這個(gè)標(biāo)記內(nèi)。如果為body元素設(shè)置CSS樣式，還可以實(shí)現(xiàn)背景、邊距、字體等樣式的變化。（2）HTML5增加的article、section、nav、aside等結(jié)構(gòu)元素功能。HTML5增加了article、section、nav、aside、header、footer等布局元素，以實(shí)現(xiàn)更好的語(yǔ)義解釋。但這些結(jié)

8、構(gòu)元素定義的是增強(qiáng)了語(yǔ)義的div塊，是HTML頁(yè)面按邏輯進(jìn)行分割后的單位，并沒(méi)有顯示效果article元素代表文檔、頁(yè)面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。例如，一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶評(píng)論或獨(dú)立的插件等。section元素用于定義文檔中的節(jié)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其它部分。一般用于成節(jié)的內(nèi)容，會(huì)在文檔流中開(kāi)始一個(gè)新的節(jié)。nav元素是一個(gè)可以用作頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分。aside標(biāo)簽用來(lái)承載非正文的內(nèi)容，被視為頁(yè)面里面一個(gè)單獨(dú)的部分。它包含的內(nèi)容與頁(yè)面的主要內(nèi)容是分開(kāi)的，可以被刪除，而不會(huì)影響到網(wǎng)頁(yè)的內(nèi)

9、容、章節(jié)或是頁(yè)面所要傳達(dá)的信息。header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來(lái)放置整個(gè)頁(yè)面或頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)域的標(biāo)題，但也可以包括表格、logo圖片等內(nèi)容。footer元素一般作為其上層容器元素的腳注(3)HTML為什么要使用字符實(shí)體？列舉出5個(gè)常用的字符實(shí)體名稱。一些字符在HTML中擁有特殊的含義，比如小于號(hào)(<)用于定義HTML標(biāo)記的開(kāi)始。如果用戶希望瀏覽器正確地顯示這些字符，需要在HTML源碼中插入字符實(shí)體。常見(jiàn)的字符實(shí)體如下。顯示結(jié)果描述實(shí)體名稱空格&nbsp;<小于號(hào)&lt;>大于號(hào)&gt；&和號(hào)&amp;n引

10、號(hào)&quot;1撇號(hào)&apos;（IE不支持）操作題略。第三章1簡(jiǎn)答題（1）定義列表的標(biāo)記有哪幾種？各種列表標(biāo)記之間都可以嵌套使用嗎？HTML中的列表元素有3種形式有序列表、無(wú)序列表和自定義列表。有序列表由<ol></ol>標(biāo)記對(duì)實(shí)現(xiàn)，在<ol></ol>標(biāo)記之間使用成對(duì)的<li></li>標(biāo)記添加列表項(xiàng)目。無(wú)序列表由成對(duì)的<ul></ul>標(biāo)記對(duì)實(shí)現(xiàn)，<ul></ul>標(biāo)記之間使用成對(duì)的<li></li>標(biāo)記可添加列表項(xiàng)目。自定義列表

11、以<dl>標(biāo)記開(kāi)始，自定義列表項(xiàng)目以<dt>開(kāi)始，自定義列表的解釋以<dd>開(kāi)始。各種列表標(biāo)記之間都可以嵌套使用，例如，自定義列表的一個(gè)嵌套。<!DOCTYPEHTML<html><head><metacharset=utf-8><title>自定義列表示例</title></head><body><dl><dt>用戶名<dd>6T8個(gè)字符，需以字母開(kāi)頭<dl><dt>firstName<dd>fd

12、sdffddsfds<dt>lastName<dd>fdfdfdsdsssdf</dl></dt><dt>密碼<dd>6T6個(gè)字符，區(qū)分大小寫(xiě)</dt></dl></body></html>（2）在HTML文檔中插入圖像使用什么標(biāo)記？該標(biāo)記有哪些常用屬性？分別實(shí)現(xiàn)什么功使用<img>標(biāo)記插入圖像，語(yǔ)法格式如下。<imgsrc="url"title="description"/>該標(biāo)記含有多個(gè)屬性，具體的屬性及功能

13、如表所示。其中，width屬性、height屬性、border屬性、align屬性已經(jīng)不建議使用，而是通過(guò)CSS來(lái)描述。屬性名說(shuō)明src圖像地址title添加圖像的替代文字width/height設(shè)置圖像寬度/高度border設(shè)置圖像邊框align設(shè)置圖像對(duì)齊方式（3）絕對(duì)路徑、相對(duì)路徑和根路徑的區(qū)別是什么？絕對(duì)路徑指文件的完整路徑，包括文件傳輸?shù)膮f(xié)議HTTP、FTP等，一般用于網(wǎng)站的外部鏈接，相對(duì)路徑是指相對(duì)于當(dāng)前文件的路徑，它包含了從當(dāng)前文件指向目的文件的路徑，適用于網(wǎng)站的內(nèi)部鏈接。根路徑的設(shè)置以“/”開(kāi)頭，后面緊跟文件路徑，例如：/download/index.html。根路徑的設(shè)置也適

14、用于內(nèi)部鏈接的建立，一般情況下不使用根路徑。根路徑必須在配置好的服務(wù)器環(huán)境中才能使用。（4）如何為網(wǎng)頁(yè)添加超鏈接？定義超鏈接時(shí)如何指定打開(kāi)鏈接文件的目標(biāo)窗口？有幾種目標(biāo)窗口形式？在HTML文件中，使用標(biāo)記a來(lái)定義超鏈接，具體鏈接對(duì)象通過(guò)標(biāo)記中的href屬性來(lái)設(shè)置。定義超鏈接的語(yǔ)法格式如下。ahref="url"target="target-windows"鏈接標(biāo)題/atarget屬性指定用于打開(kāi)鏈接的目標(biāo)窗口，默認(rèn)方式是原窗口，其屬性值如表所示。屬性值parentblankselftop說(shuō)明當(dāng)前窗口的上級(jí)窗口，一般在框架中使用在新窗口中打開(kāi)在同一窗口中打

15、開(kāi)，和默認(rèn)值一致在瀏覽器的整個(gè)窗口中打開(kāi)，忽略任何框架2操作題（1）使用無(wú)序列表標(biāo)記ul和有序列表標(biāo)記o卜定義如圖3-23所示的嵌套列表，鏈接文件可自定義或輸入“#”。<html><head><title>嵌套列表示例</title</head><body>學(xué)生選課信息<ol><li>必修課</li><ul><li>公共必修課</li><ul><li><ahref="#">計(jì)算機(jī)基礎(chǔ)</a>

16、</li><li><ahref="#">大學(xué)外語(yǔ)</a></li></ul><li>專業(yè)必修課</li></ul><li>選修課</li><oltype="a"><li>公共選修課</li><li>專業(yè)選修課</li></ol></ol></body></html>1.叢俊杲，克云直僅訣-計(jì)戦冋巒卜語(yǔ)c冇力療畀2.選修

17、課b.歹土戈隱理圖3-23嵌套列表效果（2）在網(wǎng)頁(yè)中插入圖像，并對(duì)圖像做如下設(shè)置。圖像寬為瀏覽器窗口的一半，高為瀏覽器窗口的1/4；圖像邊框?qū)?像素；替代文字為“圖片欣賞”；圖像顯示在文字左側(cè)。（3）使用表格及表格嵌套技術(shù)等，對(duì)網(wǎng)頁(yè)做如圖2-43所示的布局設(shè)計(jì)。 表格寬度為600像素； 可以先后插入4個(gè)2x2的表格，將每個(gè)表格第一行第一個(gè)單元格設(shè)置為跨2豎列，也可以根據(jù)圖示，自定義表格結(jié)構(gòu)；宅性山丿背般疔艮I白玉山埼位于日玉山龍Uh東日之事目主遼；TO龍?jiān)衣毲赖腂TgRlEiS的一一SH?5B*.«mriH證三干*中陰工間宵牟郵気ifi的幵目t:C0-3T:Ld帀：逅（白玉山JSU

18、ff.WHW）,注型Til；匹市.于生SE半濟(jì)丿旳春4上老A-fl.KT.|.ffi£t4-S!W,甲戰(zhàn)孝中冏訶11月EI日.日畫(huà)E盅醫(yī)AJSJ0口j當(dāng)肓即幣工壬寸H：的畤百堆慮盯血*:rWffl««ESi.KrmMAFttFtlb.血迂舷河.萬(wàn)乂X*RWA*犀殺吐乍耳目-梢故宇圧3E妙曲民Pl期戰(zhàn)扛邛"缶死難老口母兀卬女化丈玄幄了屮實(shí)丟.咼臥1£燃至日五山五慮三座立51-ffflwjfl:：co-ir曲£ff#uacn«Hn鼎二tflic取巧中卜任東半M山不半硼海相里-環(huán)1®怖：冉區(qū)一厝I覽.曲二衍3!甘弄腳E丁

19、戰(zhàn)科書(shū)上=訴苗是X遷壽詩(shī)山和山味進(jìn)換卅貴之閃Ifi理應(yīng)于a.uvgjT-ats的爵罔鵬門(mén)黑:勺元LTfeM駄下兒丄M宸證總勞.老犀I壓豐協(xié)亠和國(guó)問(wèn)a:0017!gI_累一區(qū)帀齊I去？RZ士的H舷干他丁平申目霍日喊3冏姐幾易亙I占LWBBKfiIC呂由？I店若XH.ited5rt2.5萬(wàn)平方申主骨3S£M,導(dǎo)悻丸H鋰*氏嗣1闕）E式閩鯊誕空*"tf«WitiuTitt甘苗亍降切主話：一二歷史丈物甘劌r軸：.rJsa刑5時(shí)問(wèn):Sn:»-n=唄赤恥葉鬥二曲14純！Wt譏3：元王由氓知腕亦電百：卩山知陽(yáng)3M 標(biāo)題單元格的背景顏色可自定義。圖3-24表格示例第四章

20、1簡(jiǎn)答題（1）表單中文本框和密碼框在定義方法和實(shí)現(xiàn)效果上有什么區(qū)別？將input標(biāo)記中的type屬性值設(shè)置為text，就可以在表單中插入文本框。在此文本框中可以輸入任何類型的數(shù)據(jù)，但輸入的數(shù)據(jù)將以單行顯示，不會(huì)換行。例如，使用input標(biāo)記輸入姓名的代碼如下。姓名：inputname="username"type="text"maxlength="12"size="8"value="myname"/其中，name屬性用于定義文本框的名稱。maxlength和size屬性用于指定文本框的寬度和允許

21、用戶輸入最大的字符數(shù)，更多情況下，采用CSS設(shè)置。value指定文本框的默認(rèn)值。將vinput標(biāo)記中的type屬性值設(shè)置為password，就可以在表單中插入密碼框，涉及到各屬性的含義與文本框相同。在此密碼框中可以輸入任何類型的數(shù)據(jù)，這些數(shù)據(jù)都將以實(shí)心圓點(diǎn)的形式顯示，以保護(hù)密碼的安全，例如：密碼：vinputname="pwd"type="password"maxlength="8"size="8"/（2）在表單中定義一組單選按鈕和一組復(fù)選按鈕在方法上有什么區(qū)別？復(fù)選框允許在一組選項(xiàng)中選擇任意多個(gè)選項(xiàng)。將input

22、標(biāo)記中的type屬性值設(shè)置為checkbox，就可以在表單中插入復(fù)選框。通過(guò)復(fù)選框，用戶可以在網(wǎng)頁(yè)中實(shí)現(xiàn)多項(xiàng)選擇。例如，請(qǐng)選擇：vinputname="check1"type="check"value="football"checked/其中，value屬性指定的復(fù)選框被選中是該控件的值，checked用來(lái)設(shè)置復(fù)選框默認(rèn)被選中。單選按鈕表示互相排斥的選項(xiàng)。在某單選按鈕組（由兩個(gè)或多個(gè)同名的按鈕組成）中選擇一個(gè)按鈕時(shí)，就會(huì)取消對(duì)該組中其他所有按鈕的選擇。將vinput標(biāo)記中的type屬性值設(shè)置為radio，就可以在表單中插入一個(gè)單選按鈕

23、。在選中狀態(tài)時(shí)，按鈕中心會(huì)有一個(gè)實(shí)心圓點(diǎn)。(3簡(jiǎn)述HTML5新增加的form屬性、formmethod屬性、placeholder屬性、autocomplete屬性的功能。在HTML5中，可以將表單元素寫(xiě)在頁(yè)面上的任何位置，然后給該元素指定一個(gè)form屬性，屬性值為該表單的id（id是表單的惟一屬性標(biāo)識(shí)），通過(guò)這種方式聲明該元素屬于哪個(gè)具體的表單。HTML5中使用formmethod屬性對(duì)每個(gè)表單元素分別指定不同的提交方法。placeholder是指當(dāng)文本框<inputtype="text">處于未輸入狀態(tài)時(shí)文本框中顯示的輸入提示。例女口：<inputty

24、pe="text"placeholder="defaulttext"/>autocomplete屬性是輔助輸入的自動(dòng)完成功能，其值為“on”“off”與“”三類值。不指定時(shí)，使用瀏覽器的默認(rèn)值（取決于各瀏覽器的設(shè)定）。該屬性設(shè)置為on時(shí)，可以顯式指定待輸入的數(shù)據(jù)列表。如果使用datalist元素與list屬性提供待輸入的數(shù)據(jù)列表，自動(dòng)完成時(shí)，可以將該datalist元素中的數(shù)據(jù)作為待輸入的數(shù)據(jù)在文本框中自動(dòng)顯示。（4）HTML5中input標(biāo)記的type屬性增加的類型包括number、range、date、time等，說(shuō)明其功能。將input標(biāo)記中

25、的type屬性設(shè)置為number，可以在表單中插入數(shù)值輸入域，還可以限定輸入數(shù)字的范圍。將input標(biāo)記中的type屬性設(shè)置為range，可以在表單中插入表示數(shù)值范圍的滑動(dòng)條，還可以限定可接受數(shù)值的范圍。只要將input標(biāo)記中的type屬性設(shè)置為date、time,可以完成網(wǎng)頁(yè)中日期選擇器的定義。2操作題制作如圖4-11所示的表單。-2.採(cǎi)作題(J)-丟單Ciifile/D-/ToiirKm/eKannp三考試報(bào)名表用戶名m：.文科理科亍.t-：-.：.r-：?-.r-：i;-.-丄二:二可：匕匡圖4-11表單示例<!DOCTYPEhtml><html><head

26、><title>2.操作題（4）-表單</title><metahttp-equiv="Content-Type"content="text/html;charset=gbs2312"/></head><body><h2>考試報(bào)名表</h2><formname="form1"method="post"action=""><p>用戶名：<inputtype="text&

27、quot;name="textfield1"></p><p>文理選擇：<inputtype="radio"name="rad"value="rad1">文科<inputtype="radio"name="rad"value="rad2">理科<inputtype="radio"name="rad"value="rad3">綜合<

28、;/p><p>報(bào)考科目：<inputname="check1"type="checkbox"value="shu">數(shù)學(xué)<inputname="check2"type="checkbox"value="yu">語(yǔ)文<inputname="check3"type="checkbox"value="wai">外語(yǔ)<inputname="check4&q

29、uot;type="checkbox"value="wu">物理</p><p><inputname="check5"type="checkbox"value="hua">化學(xué)<inputname="check6"type="checkbox"value="sheng">生物<inputname="check7"type="checkbox"

30、;value="zheng">政治<inputname="check8"type="checkbox"value="li">歷史<inputname="check9"type="checkbox"value="di">地理</p><p>報(bào)考級(jí)別：<selectname="menu2"size="3"><optionvalue="1&qu

31、ot;>A<optionvalue="2">B<optionvalue="3">C</select></p><p><inputname="sub"type="submit"value="提交"<inputname="reset"type="reset"value="重置"><inputname="sub"type="b

32、utton"value="確定"</p></form></body></html>第五章1簡(jiǎn)答題（1）HTML5中插入視頻使用什么標(biāo)記？描述其語(yǔ)法格式及含義、該標(biāo)記的屬性及功能。HTML5提供了視頻內(nèi)容的標(biāo)準(zhǔn)接口，規(guī)定使用<video>標(biāo)記來(lái)描述和播放視頻。<video>標(biāo)記語(yǔ)法格式如下：<videosrc="url"controls="controls">替代文字</video如果瀏覽器不支持url指定的video元素，將顯示替代文字

33、。<video>標(biāo)記常用的屬性及說(shuō)明如表5-1所示。表5-1<video>標(biāo)記常用屬性及說(shuō)明屬性值說(shuō)明srcurl要播放視頻的URLautoplayautoplay視頻就緒后立刻播放controlscontrols添加播放、暫停和音量等控件width像素設(shè)置視頻播放器的寬度height像素設(shè)置視頻播放器的高度looploop設(shè)置視頻是否循環(huán)播放preloadauto/none/metadata視頻在頁(yè)面加載時(shí)開(kāi)始加載，并預(yù)備播放startTime讀取媒體的開(kāi)始播放時(shí)間，通常為0currentTime讀取或修改媒體的當(dāng)前播放位置duration讀取媒體總的播放時(shí)間volu

34、me01讀取或修改媒體的播放音量mutedtrue/false讀取或修改媒體的靜音狀態(tài)（2）簡(jiǎn)述video元素常用方法和事件（各列出3種即可）。video元素還有一系列重要的方法和事件。調(diào)用這些方法和事件可以訪問(wèn)和控制video對(duì)象。表5-3給出了部分video元素常用的方法和事件。表5-3video標(biāo)記常用方法和事件方法/事件功能Play()播放媒體，paused屬性的值自動(dòng)修改為falsepause()暫停播放，paused屬性的值自動(dòng)修改為trueload()重新載入媒體進(jìn)行播放play事件執(zhí)行play()方法時(shí)觸發(fā)pause事件執(zhí)行pause()方法時(shí)觸發(fā)error事件獲取媒體數(shù)據(jù)錯(cuò)誤

35、時(shí)觸發(fā)timeupdate事件當(dāng)前播放位置發(fā)生改變時(shí)觸發(fā)durationchange事件播放時(shí)長(zhǎng)被改變(3) 簡(jiǎn)述track元素的功能和常用的屬性。track元素可以為使用video元素播放的視頻或使用audio元素播放的音頻添加字幕、標(biāo)題或章節(jié)等文字信息。track元素為視頻添加字幕的過(guò)程和為音頻添加字幕的過(guò)程是相同的。track元素是video元素的子元素，track標(biāo)記必須被書(shū)寫(xiě)在video元素的開(kāi)始標(biāo)記與結(jié)束標(biāo)記之間。如果使用source標(biāo)記描述媒體文件，則track標(biāo)記必須被書(shū)寫(xiě)在source標(biāo)記之后。track元素是一個(gè)空元素，其開(kāi)始標(biāo)記與結(jié)束標(biāo)記之間不包含任何內(nèi)容。表5-6給出了

36、track標(biāo)記的常用屬性及說(shuō)明。表5-6track標(biāo)記的常用屬性及說(shuō)明屬性說(shuō)明src屬性src屬性用于指定字幕文件的存放路徑，該屬性是一個(gè)必須使用的屬性。src屬性的屬性值可以是一個(gè)絕對(duì)URL路徑，也可以是一個(gè)相對(duì)URL路徑。srclang屬性srclang屬性用于指定字幕文件的語(yǔ)言。例如，srclang="en"和srclang="zh-cn"分別表示字幕文件為英語(yǔ)和漢語(yǔ)。default屬性default屬性用于通知瀏覽器在用戶沒(méi)有選擇使用其他字幕文件的時(shí)候可以使用當(dāng)前track文件kind屬性kind屬性用于指定字幕文件(即用于存放字幕、章節(jié)標(biāo)題、說(shuō)

37、明文字或元數(shù)據(jù)的文件)的種類。可以對(duì)kind屬性指定的屬性值為subtitles、captions、descriptions、chapters與metadata2操作題在網(wǎng)頁(yè)中插入視頻，并對(duì)視頻做如下設(shè)置。 320像素寬，240像素高； 顯示視頻播放器控件； 循環(huán)播放； 首選播放OGG格式文件，其次分別為MP4格式和WEBM格式(此處需準(zhǔn)備3種不同格式的文件)； 若不支持video元素，則顯示提示文字“請(qǐng)選用其他高版本瀏覽器嘗試播放此視頻”。<!DOCTYPEhtml><html><head><metacharset="UTF-8"

38、></head><body><videowidth="320"height=H240Hcontrols=HcontrolsHloop="loop"><sourcesrc=Hmovie.oggHtype=Hvideo/oggH/><sourcesrc="movie.mp4"type="video/mp4"/><sourcesrc="movie.webm"type="video/webm"/>請(qǐng)選用其他

39、高版本瀏覽器嘗試播放此視頻</video><br></body></html>(2)使用HTML5視頻字幕制作工具創(chuàng)建WebVTT文件，并通過(guò)track元素為一個(gè)視頻文件添加字幕。創(chuàng)建的WebVTT文件文件如下：WEBVTT00:00.000->00:31.844茫茫的天涯茫茫的路00:31.844->00:36.047茫茫的草原碧藍(lán)的天00:36.047->00:39.807草原上有你我的愛(ài)戀00:39.807->00:42.664愛(ài)你的心永在心田00:42.664->00:46.449草原的姑娘潔白雪蓮00:46

40、.449->00:50.462奔馳的駿馬越過(guò)山澗00:50.462->00:54.019清澈的河水映著你的臉00:54.019->00:58.152就像晚霞惹人留戀00:58.152->01:01.700你帶我飛馳在草原01:01.700->01:05.581我和你飛翔在藍(lán)天01:05.581->01:09.297你送我美麗的格?；?1:09.297->01:12.896我送你幸福和祝愿01:12.896->01:16.797你帶我飛馳在草原01:16.797->01:20.558我和你飛翔在藍(lán)天01:20.558->01:24.20

41、4你我的愛(ài)情在草原01:24.204->01:27.965草原在你我的心田01:27.965->01:47.375草原的姑娘潔白雪蓮01:47.375->01:50.627奔馳的駿馬越過(guò)山澗01:50.627->01:54.109清澈的河水映著你的臉01:54.109->01:58.011就像晚霞惹人留戀01:58.011->02:01.818你帶我飛馳在草原02:01.818->02:05.580我和你飛翔在藍(lán)天02:05.580->02:09.340你送我美麗的格?；?2:09.340->02:13.080我送你幸福和祝愿02:13.0

42、80->02:16.818你帶我飛馳在草原02:16.818-02:20.440我和你飛翔在藍(lán)天02:20.440->02:24.364你我的愛(ài)情在草原02:24.364->02:28.010草原在你我的心田02:28.010->02:31.793你帶我飛馳在草原02:31.793->02:37.715我和你飛翔在藍(lán)天02:37.715->02:41.198你送我美麗的格?；?2:41.198->02:44.936我送你幸福和祝愿02:44.936->02:48.791你帶我飛馳在草原02:48.791->02:52.459我和你飛翔在藍(lán)天

43、02:52.459->02:56.221你我的愛(ài)情在草原02:56.221->02:59.982草原在你我的心田引用的文件如下：<!DOCTYPEhtml><html><body><videocontrolswidth="400"height="300"><sourcesrc="images/caoyuan.mp4"type="video/mp4"><tracksrc="geci.vtt"srclang="z

44、h"kind="subtitles"label="中文"default><tracksrc="geci.vtt"srclang="en"kind="subtitles"label="English"></video></body></html>第六章1簡(jiǎn)答題(1) 使用CanvasAPI繪圖時(shí)，直線有幾種線帽形態(tài)？lineCap屬性有哪些取值？分別表示什么含義？lineCap用于設(shè)置或返回線帽(線條的結(jié)束端點(diǎn))樣

45、式，可以有以下三種取值。butt:默認(rèn)屬性值，不為直線添加端點(diǎn)round:為直線添加圓形端點(diǎn)square:為直線添加正方形端點(diǎn)(2) Canvas使用什么方法在網(wǎng)頁(yè)中繪制圓形？其中需要幾個(gè)參數(shù)？每個(gè)參數(shù)的含義是什么？CanvasAPI使用繪制圖形路徑來(lái)繪制圓形。繪制圖形路徑時(shí)，需要使用繪圖上下文對(duì)象ctx的arc()方法。該方法的定義如下。ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)其中，x、y分別為繪制圓形的圓心橫坐標(biāo)和縱坐標(biāo)，radius為圓形半徑，startAngle為開(kāi)始角度，endAngle為結(jié)束角度，anticlockw

46、ise為是否按逆時(shí)針?lè)较蜻M(jìn)行繪制。arc()方法通過(guò)指定開(kāi)始角度與結(jié)束角度，除了可以用來(lái)繪制圓形，還可以繪制圓弧，這兩個(gè)角度就決定了繪制的弧度。anticlockwise為布爾值參數(shù)，參數(shù)值為true時(shí)，按逆時(shí)針繪制；參數(shù)值為false時(shí)，則按順時(shí)針繪制。(3)路徑創(chuàng)建完成后，為什么要使用圖形上下文對(duì)象的closePathO方法關(guān)閉路徑？路徑創(chuàng)建完成后，使用繪圖上下文對(duì)象的closePath()方法關(guān)閉路徑。如果繪制路徑時(shí)未使用closePath()方法，則繪制出的是沒(méi)有封閉的路徑，除非使用beginPathj()開(kāi)始新的路徑繪制。(4) Canvas定義顏色值有哪幾種方法？Canvas繪圖時(shí)

47、，繪圖上下文的fillStyle屬性與strokeStyle屬性用來(lái)指定填充的顏色或邊框的顏色，顏色定義方法與CSS中顏色定義方法基本相同。下面是定義顏色的各種方法。顏色名：直接使用顏色的英文名稱作為屬性值，例如，blue表示藍(lán)色。 #rrggbb:用一個(gè)6位的十六進(jìn)制數(shù)表示顏色，例如，#0000FF表示藍(lán)色。 #rgb是#rrggbb的一種簡(jiǎn)寫(xiě)方式例如，#0000FF可以表示為#00F，00FFDD表示為#0FD。 rgb(rrr,ggg,bbb):使用十進(jìn)制數(shù)表示顏色的紅、綠、藍(lán)分量，其中，rrr、ggg、bbb都是0255的十進(jìn)制整數(shù)。例如，rgb(0,0,0)代表黑色。 rgb(rrr

48、%,ggg%,bbb%):使用百分比表示顏色的紅、綠、藍(lán)分量，例如，rgb(50%,50%,50%)表示rgb(128,128,128)。 rgba(rrr,ggg,bbb,alpha):使用十進(jìn)制數(shù)表示顏色的紅、綠、藍(lán)分量，alpha表示顏色的透明度，例如rgba(0,128,0,0.5)表示半透明的綠色。2操作題(1) 繪制如圖6-28所示星空的效果，其中黑色矩形寬800像素、高400像素，在矩形范圍內(nèi)繪制200顆大小、位置、角度隨機(jī)的黃色五角星。圖6-28星空的效果<!DOCTYPEhtml><html><head><title>5star

49、</title><scripttype="text/javascript">functiondraw()varcanvas=document.getElementById("canvas");varcontext=canvas.getContext("2d");context.fillStyle="black"context.fillRect(0,0,canvas.width,canvas.height);for(vari=0;i<200;i+)varr=Math.random()*1

50、0+10;varx=Math.random()*canvas.width;vary=Math.random()*canvas.height;vara=Math.random()*360;drawStar(context,x,y,r,r/23,a)functiondrawStar(cxt,x,y,r,R,rot)cxtbeginPath();for(vari=0;i<5;i+)cxt.lineTo(Math.cos(18+i*72-rot)/180*Math.PI)*R+x,-Math.sin(18+i*72-rot)/180*Math.PI)*R+y);cxt.lineTo(Math.c

51、os(54+i*72-rot)/180*Math.PI)*r+x,-Math.sin(54+i*72-rot)/180*Math.PI)*r+y);cxt.fillStyle="yellow"cxt.closePath();cxtfill();</script></head><bodyonload="draw()"><canvasid="canvas"width="800"height="400">你的瀏覽器不支持Canvas</canvas

52、></body></html>（2）在頁(yè)面中繪制如圖6-29所示的四種不同漸變色的矩形。圖6-29不同漸變色的四個(gè)矩形<!DOCTYPEhtml><html><head><title>Gradient:Linear</title><scripttype="text/javascript">functiondraw()varctx=document.getElementById('canvas').getContext('2d');創(chuàng)建漸變對(duì)象

53、varlingrad=ctx.createLinearGradient(0,0,150,150);lingrad.addColorStop(O,'#00ABEB');lingrad.addColorStop(0.5,'#f0f');lingrad.addColorStop(1,'#ff0');varlingrad1=ctx.createLinearGradient(310,0,160,150);lingrad1.addColorStop(0,'#00ABEB');lingrad1.addColorStop(0.5,'#f0

54、f');lingrad1.addColorStop(1,'#ff0');varlingrad2=ctx.createLinearGradient(0,310,160,160);lingrad2.addColorStop(0,'#00ABEB');lingrad2.addColorStop(0.5,'#f0f');lingrad2.addColorStop(1,'#ff0');varlingrad3=ctx.createLinearGradient(310,310,160,160);lingrad3addColorStop(

55、0,'#00ABEB');lingrad3.addColorStop(0.5,'#f0f');lingrad3.addColorStop(1,'#ff0');把/漸變對(duì)象賦值給填充和輪廓樣式繪制形狀ctx.fillStyle=lingrad;ctxfillRect(0,0,150,150);ctx.fillStyle=lingradl;ctxfillRect(160,0,150,150);ctx.fillStyle=lingrad2;ctxfillRect(0,160,150,150);ctx.fillStyle=lingrad3;ctxfill

56、Rect(160,160,150,150);</script></head><bodyonload="draw();"><canvasid="canvas"width="320"height="320">你的瀏覽器不支持Canvas</canvas></body></html>（3）使用transform和arc方法，繪制如圖6-30所示的彩虹效果。<!DOCTYPEhtml><html><head&g

57、t;<scripttype="text/javascript">functiondraw(id)varcanvas=document.getElementByld('canvas');if(canvas=null)returnfalse;varcontext=canvas.getContext('2d');定義顏色*/varcolors=”#FF0000","YELLOW","#0D0","#00F","#C0C"定義線寬*/context.

58、lineWidth=10;contexttransform(1,0,0,1,100,0);循環(huán)繪制橢圓*/for(vari=0;i<colors.length;i+)定義每次向下移動(dòng)10個(gè)像素的變換矩陣/contexttransform(1,0,0,1,0,10);設(shè)定顏色*/context.strokeStyle=colorsi;繪制圓弧*/contextbeginPath();context.arc(30,110,100,0,MathPI,true);context.stroke();</script></head><bodyonload="d

59、raw();"><canvasid="canvas"width=260"height="180">你的瀏覽器不支持Canvas</canvas></body></html>第七章1簡(jiǎn)答題(1) 在網(wǎng)頁(yè)中使用SVG與Canvas進(jìn)行繪圖，有哪些不同之處？附表列出了canvas繪圖與SVG繪圖的一些不同之處。canvasSVGcanvas通過(guò)JavaScript來(lái)繪制2D圖形SVG是一種使用XML描述2D圖形的語(yǔ)言canvas是逐像素進(jìn)行渲染的。在canvas中，一旦圖形被繪制完成，它

60、就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括已被圖形覆蓋的對(duì)象。在SVG中，每個(gè)被繪制的圖形均被視為對(duì)象。如果SVG對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。依賴分辨率不依賴分辨率不支持事件處理支持事件處理弱的文本渲染能力最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）能夠以.png或.jpg格式保存結(jié)果圖像復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用DOM的應(yīng)用都不快）最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪不適合游戲應(yīng)用（2）列舉出3種path元素用于繪制路徑的命令有哪些？分別是什么功能？具體怎么定義？path元素用來(lái)定義路徑，使用這個(gè)元素可以實(shí)

61、現(xiàn)任何其他的圖形，不僅包括基本形狀，也可以實(shí)現(xiàn)像貝塞爾曲線那樣的復(fù)雜形狀。例如：<svgwidth="200"height="150"><pathd="M1075L19075"stroke="red"fill="none"/><pathd="M1075Q501010075T19075"stroke="black"stroke-linecap二"round"stroke-width二"2"

62、fill二"none"/>具體命令及功能如下。命令含義參數(shù)說(shuō)明Mmovetox,y將畫(huà)筆移動(dòng)到點(diǎn)(x,y)Llinetox，y畫(huà)筆從當(dāng)前的點(diǎn)繪制線段到點(diǎn)(x,y)Hhorizontallinetox畫(huà)筆從當(dāng)前的點(diǎn)繪制水平線段到點(diǎn)(x,yO)Vverticallinetoy畫(huà)筆從當(dāng)前的點(diǎn)繪制豎直線段到點(diǎn)(x0,y)AellipticalArcrx,ryx-axis-rotationlarge-arc-flagsweep-flagxy畫(huà)筆從當(dāng)前的點(diǎn)繪制一段圓弧到點(diǎn)(x,y)Ccurvetoxl,yl,x2y2,xy畫(huà)筆從當(dāng)前的點(diǎn)繪制一段三次貝塞爾曲線到點(diǎn)(x,y)Ssmo

63、othcurvetox2y2,xy特殊版本的三次貝塞爾曲線(省略第一"個(gè)控制點(diǎn))QquadraticBelziercurvexly1,xy繪制二次貝塞爾曲線到點(diǎn)(x,y)TsmoothquadraticBelzierxy特殊版本的二次貝塞爾曲線(省略控制點(diǎn))Zclosepath無(wú)參數(shù)繪制閉合圖形如果d屬性不指定Z命令，則繪制線段，而不是封閉圖形。(3) stroke-dasharray屬性在繪制虛線時(shí)如何設(shè)置，參數(shù)與虛線效果有什么關(guān)系？stroke-dasharray屬性用于繪制虛實(shí)線，其格式如下。stroke-dasharray="value,value,"該屬

64、性由一系列數(shù)字組成，這些數(shù)字必須用逗號(hào)隔開(kāi)。屬性中如果包含空格，不作為分隔符。每個(gè)數(shù)字定義了實(shí)線段的長(zhǎng)度，分別是按照繪制、不繪制這個(gè)順序循環(huán)下去。(4)SVG使用linearGradient元素定義漸變色時(shí)，vid和vstop元素的功能分別是什么？其中的offset屬性和stop-color屬性用于實(shí)現(xiàn)什么功能？線性漸變就是一系列顏色沿著一條直線過(guò)渡，SVG也使用linearGradient元素定義線性漸變，并可以定義水平、垂直或角形的漸變。漸變的顏色可以由兩種或多種顏色組成，每種顏色通過(guò)<stop>標(biāo)記來(lái)定義。使用linearGradient元素定義漸變的語(yǔ)法格式如下。linea

65、rGradient元素的屬性中，id屬性為漸變色指定唯的名稱，以便引用該漸變色。<linearGradientid="id1"x1=""y1=""x2=""y2=""><!-用stop元素添加顏色信息-></linearGradient>漸變色的成員色使用stop元素定義，語(yǔ)法格式如下。<stopoffset="offsetValue"stop-color=""stop-opacity=""/&

66、gt;stop元素的offset屬性用于定義該成員色的作用范圍，該屬性取值從0%到100%（或者是0到1）；通常第種顏色設(shè)置成0%，最后種設(shè)置成100%。stop-color屬性：定義該成員色的顏色。stop-opacity屬性：定義成員色的透明度，取值范圍在0到1之間。stop元素的屬性也可以使用CSS定義，它支持class、id等標(biāo)準(zhǔn)HTML的屬性。2操作題（1）使用g、use、defs等元素，以及translate、scale等方法完成如圖7-15所示效果，其中三個(gè)房子圖案分別填充不同的顏色，每種形狀后兩個(gè)圖案的縮放比例分別為0.8和0.6?；豱CLJfile:/DyHTML5/new962iti=Psi