版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、第一章1簡(jiǎn)答題（1）在 Web前端開發(fā)方面， HTML5 與 HTML4 比較，主要解決哪幾方面的問題？ HTML5 的核心在于解決當(dāng)前 Web 開發(fā)中存在的各種問題。一是解決 Web 瀏覽器之間的兼容性問題。在一個(gè)瀏覽器上正常顯示的網(wǎng)頁(yè)（或運(yùn)行的 Web 應(yīng)用程序），很可能在另一個(gè)瀏覽器上不能顯示或顯示效果不一致；二是文檔結(jié)構(gòu)描述的問題。 HTML4 之前的各版本中， HTML 文檔的結(jié)構(gòu)一般用 div 元素描 述，文檔元素的結(jié)構(gòu)含義不夠清晰；三是使用 HTML+CSS+JavaScript 開發(fā) Web 應(yīng)用程序時(shí)，開發(fā)功能受到很大的限制，比如本 地?cái)?shù)據(jù)存儲(chǔ)功能、多線程訪問、獲取地理位置信
2、息等，這些都影響了用戶的體驗(yàn)。（ 2） HTML5 新增的全局屬性有哪幾個(gè)？描述其主要功能。HTML5 新增的全局屬性，是指可以對(duì)任何元素都使用的屬性。功能如下所示。屬性描述HTML5新增accesskey規(guī)定訪問元素的鍵盤快捷鍵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ī)定該元素是無關(guān)的。被隱藏的元素不會(huì)顯示。是id規(guī)定
3、元素的唯一 ID 。lang規(guī)定元素中內(nèi)容的語(yǔ)言代碼。spellcheck規(guī)定是否必須對(duì)元素進(jìn)行拼寫或語(yǔ)法檢查。是style規(guī)定元素的行內(nèi)樣式。tabindex規(guī)定元素的 tab 鍵控制次序。title規(guī)定有關(guān)元素的額外信息。（3）HTML5 是下一代 Web 語(yǔ)言的開發(fā)框架，典型特性有哪些？HTML5 從 標(biāo) 記 語(yǔ) 言 的 功 能 提 升 到 下 一 代 Web 語(yǔ) 言 的 開 發(fā) 框 架 ， 他 集 成 了 HTML+CSS3+JavaScript 的 Web 應(yīng)用框架。 。良好的語(yǔ)義特性。 HTML5 支持微數(shù)據(jù)與微格式，增加的各種元素賦予網(wǎng)頁(yè)更好的意義和結(jié) 構(gòu)，適于構(gòu)建對(duì)程序、對(duì)用戶
4、都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web 應(yīng)用。 HTML5 增加了 section 元素、article 元素、 nav 元素以及 aside 元素等結(jié)構(gòu)元素。強(qiáng)大的繪圖功能。通過使用 Canvas API 動(dòng)態(tài)地繪制各種效果精美的圖形，也可以通過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
5、新增了 Geolocation API 規(guī)范，應(yīng)用于移動(dòng)設(shè)備中的地理定位。提高頁(yè)面響應(yīng)的多線程。 HTML5 新增了 Web Workers 來實(shí)現(xiàn)多線程功能。 通過 Web Workers ， 將耗時(shí)較長(zhǎng)的處理交給后臺(tái)線程，降低 Web 服務(wù)的響應(yīng)時(shí)間，有利于增強(qiáng)用戶體驗(yàn)。方便用戶處理文件和訪問文件系統(tǒng)的文件文件 API 。HTML5 的文件 API 包括 FileReader API 和 File SystemAPI 。除了上面介紹的 HTML5 的特性之外， HTML5 還有管理瀏覽器歷史記錄的 History API 。 HTML5 可以通過腳本語(yǔ)言在瀏覽器歷史記錄中添加項(xiàng)目，以及在不
6、刷新頁(yè)面的前提下顯示地改 變?yōu)g覽器地址欄中的 URL 地址；而 HTML5 的拖放功能可以使用 mousedown、mousemove、mouseup 等方法來實(shí)現(xiàn)拖放操作。（ 4） HTML5 文檔結(jié)構(gòu)的 HTML4 之前的文檔結(jié)構(gòu)有哪些變化？?jī)?nèi)容類型 （ContentType） 。 HTML5 的文件擴(kuò)展名與內(nèi)容類型與之前的 HTML 版本相同。但 . DOCTYPE 聲明 做了簡(jiǎn)化，該聲明適用所有 HTML 。聲明如下： <!DOCTYPE html>在 HTML5 中，直接指定 meta 標(biāo)記的 charset 屬性可以設(shè)置字符編碼，如下所示。 <meta chars
7、et="utf-8">從 HTML5 開始，對(duì)于 HTML 文件的字符編碼推薦使用 UTF-8 。操作題略。第二章1簡(jiǎn)答題（ 1）簡(jiǎn)述 HTML 文檔的基本結(jié)構(gòu)元素的功能。HTML 文檔的基本結(jié)構(gòu)元素包括 <html> 、 <head> 、 <body> 等。<html> 和</html> 標(biāo)記表示該文檔是 HTML 文檔。有時(shí) <html> 標(biāo)記可省略， 因?yàn)?.html 或.htm 文件被 Web 瀏覽器默認(rèn)為是 HTML 文檔。<head> 和 </head> 標(biāo)記表
8、示的是文檔頭部信息，一般包括標(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)元素功能。HTML 5 增加了 article、 section、 nav、 aside、 header、 foo
9、ter 等布局元素，以實(shí)現(xiàn)更好的語(yǔ)義 解釋。但這些結(jié)構(gòu)元素定義的是增強(qiáng)了語(yǔ)義的 div 塊，是 HTML 頁(yè)面按邏輯進(jìn)行分割后的單位， 并沒有顯示效果article 元素代表文檔、 頁(yè)面或應(yīng)用程序中獨(dú)立的、 完整的、 可以獨(dú)自被外部引用的內(nèi)容。 例 如，一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶評(píng)論或獨(dú)立的插件等。section 元素用于定義文檔中的節(jié)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其它部分。 一般用于成 節(jié)的內(nèi)容，會(huì)在文檔流中開始一個(gè)新的節(jié)。nav 元素是一個(gè)可以用作頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的 其他部分。aside 標(biāo)簽用來承載非正文的內(nèi)容，被視為頁(yè)面里面
10、一個(gè)單獨(dú)的部分。它包含的內(nèi)容與頁(yè)面 的主要內(nèi)容是分開的，可以被刪除，而不會(huì)影響到網(wǎng)頁(yè)的內(nèi)容、章節(jié)或是頁(yè)面所要傳達(dá)的信息。header 元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個(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)記的開始。 如 果用戶希望瀏覽器正確地顯示這些字符，需要在 HTML 源碼中插入字符實(shí)體。 常見的字符實(shí)體 如下。顯示結(jié)果描述
11、實(shí)體名稱空格 <小于號(hào)<>大于號(hào)>&和號(hào)&引號(hào)"撇號(hào)' （IE 不支持 ）§節(jié)§?版權(quán)©?注冊(cè)商標(biāo)®×乘號(hào)×÷除號(hào)÷操作題略。第三章1簡(jiǎn)答題（1）定義列表的標(biāo)記有哪幾種？各種列表標(biāo)記之間都可以嵌套使用嗎？ HTML 中的列表元素有 3 種形式 有序列表、無序列表和自定義列表。 有序列表由 <ol></ol> 標(biāo)記對(duì)實(shí)現(xiàn)，在 <
12、ol></ol> 標(biāo)記之間使用成對(duì)的 <li></li> 標(biāo)記添加列 表項(xiàng)目。無序列表由成對(duì)的 <ul></ul> 標(biāo)記對(duì)實(shí)現(xiàn)， <ul></ul> 標(biāo)記之間使用成對(duì)的 <li></li> 標(biāo)記可 添加列表項(xiàng)目。自定義列表以 <dl> 標(biāo)記開始， 自定義列表項(xiàng)目以 <dt> 開始， 自定義列表的解釋以 <dd> 開始。 各種列表標(biāo)記之間都可以嵌套使用，例如，自定義列表的一個(gè)嵌 套。<!DOCTYPE HTML><html>
13、<head><meta charset=utf-8><title> 自定義列表示例 </title></head><body><dl><dt> 用戶名 <dd>618 個(gè)字符，需以字母開頭<dl><dt>first Name<dd>fdsdffddsfds<dt>last Name<dd>fdfdfdsdsssdf</dl></dt><dt> 密碼 <dd>616 個(gè)字符，區(qū)分大小
14、寫 </dt></dl></body></html>2）在 HTML 文檔中插入圖像使用什么標(biāo)記？該標(biāo)記有哪些常用屬性？分別實(shí)現(xiàn)什么功能？使用 <img> 標(biāo)記插入圖像，語(yǔ)法格式如下。<img src="url" title="description" />該標(biāo)記含有多個(gè)屬性，具體的屬性及功能如表所示。其中， width 屬性、 height 屬性、 border屬性、 align 屬性已經(jīng)不建議使用，而是通過CSS來描述屬性名說明src圖像地址title添加圖像的替代文字width
15、/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è)置以“ / ”開頭，后面緊跟文件路徑，例如： /download/index.html 。根路徑的設(shè) 置也適用于內(nèi)部鏈接的建立， 一般情況下不使用根路徑。 根路徑必須在配置好的服務(wù)器環(huán)境中才 能使用。（4）如何為網(wǎng)頁(yè)添加超鏈接？定義超鏈接時(shí)如何指定打開鏈接文件的
16、目標(biāo)窗口？有幾種目標(biāo) 窗口形式？在 HTML 文件中，使用標(biāo)記 <a> 來定義超鏈接，具體鏈接對(duì)象通過標(biāo)記中的href 屬性來設(shè)置。定義超鏈接的語(yǔ)法格式如下。<a href="url" target="target-windows" > 鏈接標(biāo)題 </a>target屬性指定用于打開鏈接的目標(biāo)窗口，默認(rèn)方式是原窗口，其屬性值如表所示。屬性值說明parent當(dāng)前窗口的上級(jí)窗口，一般在框架中使用blank在新窗口中打開self在同一窗口中打開，和默認(rèn)值一致top在瀏覽器的整個(gè)窗口中打開，忽略任何框架2操作題（ 1）使用無序
17、列表標(biāo)記 <ul> 和有序列表標(biāo)記 <ol> 定義如圖 3-23 所示的嵌套列表，鏈接文件 可自定義或輸入“ # ”。<html><head><title> 嵌套列表示例 </title></head><body> 學(xué)生選課信息 <ol><li> 必修課 </li><ul><li> 公共必修課 </li><ul><li><a href="#"> 計(jì)算機(jī)基礎(chǔ) </a&g
18、t;</li><li><a href="#"> 大學(xué)外語(yǔ) </a></li> </ul><li> 專業(yè)必修課 </li></ul><li> 選修課 </li><ol type="a"><li> 公共選修課 </li><li> 專業(yè)選修課 </li></ol></ol></body> </html>圖 3-23 嵌套列表
19、效果（2）在網(wǎng)頁(yè)中插入圖像，并對(duì)圖像做如下設(shè)置。1/4 ；圖像邊框?qū)?5 像素；替代文字為“圖圖像寬為瀏覽器窗口的一半，高為瀏覽器窗口的 片欣賞”；圖像顯示在文字左側(cè)。（3）使用表格及表格嵌套技術(shù)等，對(duì)網(wǎng)頁(yè)做如圖2-43 所示的布局設(shè)計(jì)。 表格寬度為 600 像素； 可以先后插入 4 個(gè) 2× 2的表格， 將每個(gè)表格第一行第一個(gè)單元格設(shè)置為跨2豎列， 也可以根據(jù)圖示，自定義表格結(jié)構(gòu)； 標(biāo)題單元格的背景顏色可自定義。圖 3-24 表格示例第四章1簡(jiǎn)答題（1）表單中文本框和密碼框在定義方法和實(shí)現(xiàn)效果上有什么區(qū)別？將 <input> 標(biāo)記中的 type 屬性值設(shè)置為 text，
20、就可以在表單中插入文本框。在此文本框中可 以輸入任何類型的數(shù)據(jù)，但輸入的數(shù)據(jù)將以單行顯示，不會(huì)換行。例如，使用 <input> 標(biāo)記輸入 姓名的代碼如下。姓名： <input name="username" type="text" maxlength="12" size="8" value="myname" />其中， name 屬性用于定義文本框的名稱。 maxlength 和 size 屬性用于指定文本框的寬度和允 許用戶輸入最大的字符數(shù)，更多情況下，采用CSS設(shè)置。
21、 value 指定文本框的默認(rèn)值。將 <input> 標(biāo)記中的 type 屬性值設(shè)置為 password，就可以在表單中插入密碼框，涉及到各屬 性的含義與文本框相同。 在此密碼框中可以輸入任何類型的數(shù)據(jù)， 這些數(shù)據(jù)都將以實(shí)心圓點(diǎn)的形 式顯示，以保護(hù)密碼的安全，例如：密碼： <input name="pwd" type="password" maxlength="8" size="8" />（2）在表單中定義一組單選按鈕和一組復(fù)選按鈕在方法上有什么區(qū)別？復(fù)選框允許在一組選項(xiàng)中選擇任意多個(gè)選項(xiàng)。
22、將 <input> 標(biāo)記中的 type 屬性值設(shè)置為 checkbox，就可以在表單中插入復(fù)選框。通過復(fù)選框，用戶可以在網(wǎng)頁(yè)中實(shí)現(xiàn)多項(xiàng)選擇。例如，請(qǐng)選擇： <input name="check1" type="check" value="football" checked />其中， value屬性指定的復(fù)選框被選中是該控件的值，checked 用來設(shè)置復(fù)選框默認(rèn)被選中。單選按鈕表示互相排斥的選項(xiàng)。 在某單選按鈕組 （由兩個(gè)或多個(gè)同名的按鈕組成） 中選擇一 個(gè)按鈕時(shí)， 就會(huì)取消對(duì)該組中其他所有按鈕的選擇。 將
23、<input> 標(biāo)記中的 type 屬性值設(shè)置為 radio， 就可以在表單中插入一個(gè)單選按鈕。在選中狀態(tài)時(shí)，按鈕中心會(huì)有一個(gè)實(shí)心圓點(diǎn)。（ 3 ）簡(jiǎn)述 HTML5 新增加的 form 屬性、 formmethod 屬性、 placeholder 屬性、 autocomplete 屬 性的功能。在 HTML5 中，可以將表單元素寫在頁(yè)面上的任何位置，然后給該元素指定一個(gè) form 屬性， 屬性值為該表單的 id（ id 是表單的惟一屬性標(biāo)識(shí)） ，通過這種方式聲明該元素屬于哪個(gè)具體的表 單。HTML5 中使用 formmethod 屬性對(duì)每個(gè)表單元素分別指定不同的提交方法。placeh
24、older 是指當(dāng)文本框 <input type="text"> 處于未輸入狀態(tài)時(shí)文本框中顯示的輸入提示。 例 如： <input type="text" placeholder "default text" />autocomplete 屬性是輔助輸入的自動(dòng)完成功能，其值為“on”“off ”與“”三類值。不指定時(shí)，使用瀏覽器的默認(rèn)值（取決于各瀏覽器的設(shè)定） 。該屬性設(shè)置為 on 時(shí)，可以顯式指定待輸入 的數(shù)據(jù)列表。如果使用 datalist 元素與 list 屬性提供待輸入的數(shù)據(jù)列表，自動(dòng)完成時(shí)，可以將該
25、datalist 元素中的數(shù)據(jù)作為待輸入的數(shù)據(jù)在文本框中自動(dòng)顯示。（ 4） HTML5 中 input 標(biāo)記的 type 屬性增加的類型包括 number、 range、 date、 time 等，說明 其功能 。將 input 標(biāo)記中的 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 所
26、示的表單。圖 4-11 表單示例<!DOCTYPE html ><html><head> <title>2.操作題（ 4）-表單 </title> <meta http-equiv="Content-Type" content="text/html; charset=gbs2312"/></head><body><h2> 考試報(bào)名表 </h2><form name="form1" method="po
27、st" action=""><p> 用戶名：<input type="text" name="textfield1"></p><p> 文理選擇：<input type="radio" name="rad" value="rad1"> 文科 <input type="radio" name="rad" value="rad2"> 科
28、<input type="radio" name="rad" value="rad3"> 綜合</p><p> 報(bào)考科目：<input name="check1" type="checkbox" value="shu"> 數(shù)學(xué)<input name="check2" type="checkbox" value="yu"> 語(yǔ)文<input name=&q
29、uot;check3" type="checkbox" value="wai"> 外語(yǔ)<input name="check4" type="checkbox" value="wu"> 物理 </p><p><input name="check5" type="checkbox" value="hua"> 化學(xué)<input name="check6"
30、type="checkbox" value="sheng"> 生物<input name="check7" type="checkbox" value="zheng"> 政治<input name="check8" type="checkbox" value="li">歷史<input name="check9" type="checkbox" value=&q
31、uot;di">地理 </p><p> 報(bào)考級(jí)別：<select name="menu2" size="3"><option value="1">A<option value="2">B<option value="3">C</select></p><p><input name="sub" type="submit" value=
32、" 提交 "><input name="reset" type="reset" value=" 重置 "><input name="sub" type="button" value=" 確定 "></p></form></body></html>第五章1簡(jiǎn)答題（ 1） HTML5 中插入視頻使用什么標(biāo)記？描述其語(yǔ)法格式及含義、該標(biāo)記的屬性及功能。HTML5 提供了視頻內(nèi)容的標(biāo)準(zhǔn)接
33、口，規(guī)定使用 <video> 標(biāo)記來描述和播放視頻。 <video> 標(biāo) 記語(yǔ)法格式如下：<video src="url" controls="controls"> 替代文字 </video>如果瀏覽器不支持 url 指定的 video 元素，將顯示替代文字。 <video> 標(biāo)記常用的屬性及說明如表 5-1 所示。表 5-1 <video> 標(biāo)記常用屬性及說明屬性值說明srcurl要播放視頻的 URLautoplayautoplay視頻就緒后立刻播放controlscontrols
34、添加播放、暫停和音量等控件width像素設(shè)置視頻播放器的寬度height像素設(shè)置視頻播放器的高度looploop設(shè)置視頻是否循環(huán)播放preloadauto/none/metadata視頻在頁(yè)面加載時(shí)開始加載，并預(yù)備播放startTime讀取媒體的開始播放時(shí)間，通常為 0currentTime讀取或修改媒體的當(dāng)前播放位置duration讀取媒體總的播放時(shí)間volume01讀取或修改媒體的播放音量mutedtrue/false讀取或修改媒體的靜音狀態(tài)2）簡(jiǎn)述 video 元素常用方法和事件（各列出 3 種即可）。video 元素還有一系列重要的方法和事件。調(diào)用這些方法和事件可以訪問和控制 vide
35、o 對(duì)象。表 5-3 給出了部分 video 元素常用的方法和事件。表 5-3 <video> 標(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ò)誤時(shí)觸發(fā)timeupdate 事件當(dāng)前播放位置發(fā)生改變時(shí)觸發(fā)durationchange 事件播放時(shí)長(zhǎng)被改變3）簡(jiǎn)述 track 元素的功能和常用的屬性。track
36、 元素可以為使用 video 元素播放的視頻或使用 audio 元素播放的音頻添加字幕、標(biāo)題或章節(jié)等文字信息。 track 元素為視頻添加字幕的過程和為音頻添加字幕的過程是相同的。 track 元 素是 video 元素的子元素， <track> 標(biāo)記必須被書寫在 video 元素的開始標(biāo)記與結(jié)束標(biāo)記之間。如 果使用 <source> 標(biāo)記描述媒體文件，則 <track> 標(biāo)記必須被書寫在 <source> 標(biāo)記之后。 track 元素 是一個(gè)空元素， 其開始標(biāo)記與結(jié)束標(biāo)記之間不包含任何內(nèi)容。表 5-6給出了 <track> 標(biāo)記的常
37、用屬性及說明。表 5-6 <track> 標(biāo)記的常用屬性及說明屬性說明src 屬性src 屬性用于指定字幕文件的存放路徑，該屬性是一個(gè)必須使用的屬性。 src 屬性的屬性 值可以是一個(gè)絕對(duì) URL路徑，也可以是一個(gè)相對(duì) URL路徑。srclang 屬性srclang 屬性用于指定字幕文件的語(yǔ)言。 例如， srclang="en" 和 srclang="zh-cn" 分別表 示字幕文件為英語(yǔ)和漢語(yǔ)。default 屬性default 屬性用于通知瀏覽器在用戶沒有選擇使用其他字幕文件的時(shí)候可以使用當(dāng)前 track 文件kind 屬性kind 屬性
38、用于指定字幕文件 （ 即用于存放字幕、章節(jié)標(biāo)題、說明文字或元數(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)選用其他高版本瀏覽器嘗試播放此視頻” 。<!DOCTYPE html><
39、;html><head><meta charset="UTF-8"></head><body><video width="320" height="240" controls="controls" loop ="loop" ><source src="movie.ogg" type="video/ogg" /><source src="movie.mp4"
40、; type="video/mp4" /><source src="movie.webm" type="video/webm" />請(qǐng)選用其他高版本瀏覽器嘗試播放此視頻</video><br></body></html>（ 2）使用 HTML5 視頻字幕制作工具創(chuàng)建 WebVTT 文件，并通過 track 元素為一個(gè)視頻文件 添加字幕。創(chuàng)建的 WebVTT 文件文件如下：WEBVTT00:00.000 -> 00:31.844 茫茫的天涯茫茫的路00:31.844
41、 -> 00:36.047 茫茫的草原碧藍(lán)的天00:36.047 -> 00:39.807 草原上有你我的愛戀00:39.807 -> 00:42.664 愛你的心永在心田00:42.664 -> 00:46.449 草原的姑娘潔白雪蓮00:46.449 -> 00:50.462 奔馳的駿馬越過山澗00:50.462 -> 00:54.019 清澈的河水映著你的臉00:54.019 -> 00:58.152 就像晚霞惹人留戀00:58.152 -> 01:01.700 你帶我飛馳在草原01:01.700 -> 01:05.581 我和你飛翔
42、在藍(lán)天01:05.581 -> 01:09.297 你送我美麗的格桑花01:09.297 -> 01:12.896 我送你幸福和祝愿01:12.896 -> 01:16.797 你帶我飛馳在草原01:16.797 -> 01:20.558 我和你飛翔在藍(lán)天01:20.558 -> 01:24.204 你我的愛情在草原01:24.204 -> 01:27.965草原在你我的心田01:27.965 -> 01:47.375 草原的姑娘潔白雪蓮01:47.375 -> 01:50.627 奔馳的駿馬越過山澗01:50.627 -> 01:54.1
43、09 清澈的河水映著你的臉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.080 -> 02:16.818 你帶我飛馳在草原02:16.818 -> 02:20.440 我和你飛翔在藍(lán)天02:20.440 -> 02:24.364 你我的愛情在草原02:24.364 ->
44、; 02:28.010 草原在你我的心田02:28.010 -> 02:31.793 你帶我飛馳在草原02:31.793 -> 02:37.715 我和你飛翔在藍(lán)天02:37.715 -> 02:41.198 你送我美麗的格桑花02:41.198 -> 02:44.936 我送你幸福和祝愿02:44.936 -> 02:48.791 你帶我飛馳在草原02:48.791 -> 02:52.459 我和你飛翔在藍(lán)天02:52.459 -> 02:56.221 你我的愛情在草原02:56.221 -> 02:59.982草原在你我的心田引用的文件如下：
45、<!DOCTYPE html><html><body ><video controls width="400" height="300"><source src="images/caoyuan.mp4" type="video/mp4"><track src="geci.vtt" srclang="zh" kind="subtitles" label=" 中文 " def
46、ault><track src="geci.vtt" srclang="en" kind="subtitles" label="English"></video></body></html>第六章1簡(jiǎn)答題(1)使用 Canvas API 繪圖時(shí)，直線有幾種線帽形態(tài)？lineCap 屬性有哪些取值？分別表示什么含義？lineCap用于設(shè)置或返回線帽(線條的結(jié)束端點(diǎn))樣式，可以有以下三種取值。 butt：默認(rèn)屬性值，不為直線添加端點(diǎn)round：為直線添加圓形端點(diǎn) s
47、quare：為直線添加正方形端點(diǎn)(2)Canvas使用什么方法在網(wǎng)頁(yè)中繪制圓形？其中需要幾個(gè)參數(shù)？每個(gè)參數(shù)的含義是什么？Canvas API 使用繪制圖形路徑來繪制圓形。繪制圖形路徑時(shí)，需要使用繪圖上下文對(duì)象 ctx 的 arc()方法。該方法的定義如下。ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)其中， x、y 分別為繪制圓形的圓心橫坐標(biāo)和縱坐標(biāo)，radius 為圓形半徑， startAngle 為開始角度， endAngle 為結(jié)束角度， anticlockwise 為是否按逆時(shí)針方向進(jìn)行繪制。arc()方法通過指定開始角度與結(jié)
48、束角度，除了可以用來繪制圓形，還可以繪制圓弧，這兩個(gè) 角度就決定了繪制的弧度。 anticlockwise 為布爾值參數(shù)，參數(shù)值為 true 時(shí)，按逆時(shí)針繪制；參數(shù) 值為 false 時(shí)，則按順時(shí)針繪制。( 3)路徑創(chuàng)建完成后，為什么要使用圖形上下文對(duì)象的closePath()方法關(guān)閉路徑？路徑創(chuàng)建完成后，使用繪圖上下文對(duì)象的closePath()方法關(guān)閉路徑。如果繪制路徑時(shí)未使用closePath()方法，則繪制出的是沒有封閉的路徑，除非使用beginPathj()開始新的路徑繪制。( 4) Canvas 定義顏色值有哪幾種方法？Canvas 繪圖時(shí)，繪圖上下文的 fillStyle 屬性與
49、 strokeStyle 屬性用來指定填充的顏色或邊框的 顏色，顏色定義方法與 CSS 中顏色定義方法基本相同。下面是定義顏色的各種方法。 顏色名：直接使用顏色的英文名稱作為屬性值，例如，blue 表示藍(lán)色。#rrggbb ：用一個(gè) 6 位的十六進(jìn)制數(shù)表示顏色，例如， #0000FF 表示藍(lán)色。#rgb ：是 #rrggbb 的一種簡(jiǎn)寫方式，例如， #0000FF 可以表示為 #00F ， #00FFDD 表示 為 #0FD 。rgb(rrr,ggg,bbb)：使用十進(jìn)制數(shù)表示顏色的紅、綠、藍(lán)分量，其中，rrr 、ggg、 bbb 都是0255 的十進(jìn)制整數(shù)。例如， rgb(0,0,0)代表黑
50、色。rgb(rrr%,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 星空的效果<!DOCTYPE html><html><h
51、ead><title>5star</title><script type="text/javascript">function draw() var canvas=document.getElementById("canvas");var context=canvas.getContext("2d"); context.fillStyle="black"context.fillRect(0,0,canvas.width,canvas.height);for(var i=0;
52、i<200;i+)var r=Math.random()*10+10;var x=Math.random()*canvas.width;var y=Math.random()*canvas.height;var a=Math.random()*360;drawStar(context,x,y,r,r/2.3,a)function drawStar(cxt,x,y,r,R,rot) cxt.beginPath();for(var i=0;i<5;i+) cxt.lineTo(Math.cos(18+i*72-rot)/180*Math.PI)*R+x,-Math.sin(18+i*7
53、2-rot)/180*Math.PI)*R+y); cxt.lineTo(Math.cos(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();cxt.fill();</script></head><body onload="draw()"><canvas id="canvas" width="800" hei
54、ght="400">你的瀏覽器不支持 Canvas</canvas></body></html>2)在頁(yè)面中繪制如圖 6-29 所示的四種不同漸變色的矩形。圖 6-29 不同漸變色的四個(gè)矩形<!DOCTYPE html><html><head><title>Gradient: Linear</title><script type="text/javascript">function draw() var ctx = document.getE
55、lementById('canvas').getContext('2d');/ 創(chuàng)建漸變對(duì)象var lingrad = ctx.createLinearGradient(0,0,150,150); lingrad.addColorStop(0, '#00ABEB');lingrad.addColorStop(0.5, '#f0f');lingrad.addColorStop(1, '#ff0');var lingrad1 = ctx.createLinearGradient(310,0,160,150); ling
56、rad1.addColorStop(0, '#00ABEB'); lingrad1.addColorStop(0.5, '#f0f');lingrad1.addColorStop(1, '#ff0');var lingrad2 = ctx.createLinearGradient(0,310,160,160);lingrad2.addColorStop(0, '#00ABEB'); lingrad2.addColorStop(0.5, '#f0f');lingrad2.addColorStop(1, '#f
57、f0');var lingrad3 = ctx.createLinearGradient(310,310,160,160);lingrad3.addColorStop(0, '#00ABEB'); lingrad3.addColorStop(0.5, '#f0f');lingrad3.addColorStop(1, '#ff0');/ 把漸變對(duì)象賦值給填充和輪廓樣式/ 繪制形狀 ctx.fillStyle = lingrad; ctx.fillRect(0,0,150,150); ctx.fillStyle = lingrad1; ctx
58、.fillRect(160,0,150,150); ctx.fillStyle = lingrad2; ctx.fillRect(0,160,150,150); ctx.fillStyle = lingrad3; ctx.fillRect(160,160,150,150); </script> </head> <body onload="draw();"> <canvas id="canvas" width="320" height="320"> 你的瀏覽器不支持 C
59、anvas</canvas> </body> </html>3)使用 transform 和 arc方法，繪制如圖 6-30 所示的彩虹效果圖 6-30 彩虹效果<!DOCTYPE html><html><head><script type="text/javascript"> function draw(id) var canvas = document.getElementById('canvas');if (canvas = null)return false;var
60、context = canvas.getContext('2d');/* 定義顏色 */var colors = "#FF0000", "YELLOW", "#0D0", "#00F", "#C0C" /* 定義線寬 */context.lineWidth = 10; context.transform(1, 0, 0, 1, 100, 0);/* 循環(huán)繪制橢圓 */for (var i = 0; i < colors.length; i+) /* 定義每次向下移動(dòng) 10
61、個(gè)像素的變換矩陣 */ context.transform(1, 0, 0, 1, 0, 10);/* 設(shè)定顏色 */context.strokeStyle = colorsi;/* 繪制圓弧 */ context.beginPath();context.arc(30, 110, 100, 0, Math.PI, true);context.stroke();</script></head><body onload="draw();"><canvas id="canvas" width=260" hei
62、ght="180"> 你的瀏覽器不支持 Canvas</canvas></body></html>第七章1簡(jiǎn)答題1）在網(wǎng)頁(yè)中使用 SVG 與 Canvas 進(jìn)行繪圖，有哪些不同之處？ 附表列出了 canvas 繪圖與 SVG 繪圖的一些不同之處。canvasSVGcanvas 通過 JavaScript 來繪制 2D 圖形SVG是一種使用 XML描述 2D 圖形的語(yǔ)言canvas 是逐像素進(jìn)行渲染的。在 canvas 中， 一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽 器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng) 景也需要重新繪制，包括已被
63、圖形覆蓋的對(duì)象。在 SVG中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重 現(xiàn)圖形。依賴分辨率不依賴分辨率不支持事件處理支持事件處理弱的文本渲染能力最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地 圖）能夠以 .png 或 .jpg 格式保存結(jié)果圖像復(fù)雜度高會(huì)減慢渲染速度 （任何過度使用 DOM 的應(yīng) 用都不快）最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪不適合游戲應(yīng)用（2）列舉出 3種 path元素用于繪制路徑的命令有哪些？分別是什么功能？具體怎么定義？ path 元素用來定義路徑， 使用這個(gè)元素可以實(shí)現(xiàn)任何其他的圖形， 不僅包括基本形狀， 也可 以實(shí)
64、現(xiàn)像貝塞爾曲線那樣的復(fù)雜形狀。例如：<svg width="200" height="150"><path d="M 10 75 L 190 75" stroke="red" fill="none"/><path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-width="2&quo
65、t; fill="none" /> 具體命令及功能如下。命令含義參數(shù)說明Mmovetox,y將畫筆移動(dòng)到點(diǎn) (x,y)Llinetox,y畫筆從當(dāng)前的點(diǎn)繪制線段到點(diǎn) (x,y)Hhorizontal linetox畫筆從當(dāng)前的點(diǎn)繪制水平線段到點(diǎn) (x,y0)Vvertical linetoy畫筆從當(dāng)前的點(diǎn)繪制豎直線段到點(diǎn) (x0,y)Aelliptical Arcrx, ry x-axis-rotation large-arc-flag sweep-flag x y畫筆從當(dāng)前的點(diǎn)繪制一段圓弧到點(diǎn) (x,y)Ccurvetox1, y1,x2 y2,x y畫筆從當(dāng)前的點(diǎn)
66、繪制一段三次貝塞爾曲線到點(diǎn) (x,y)Ssmooth curvetox2 y2,x y特殊版本的三次貝塞爾曲線 ( 省略第一個(gè) 控制點(diǎn) )Qquadratic Belzier curvex1 y1,x y繪制二次貝塞爾曲線到點(diǎn) (x,y)Tsmooth quadraticBelzierx y特殊版本的二次貝塞爾曲線 ( 省略控制點(diǎn) )Zclosepath無參數(shù)繪制閉合圖形， 如果 d 屬性不指定 Z命令， 則繪制線段，而不是封閉圖形。( 3 ) stroke-dasharray 屬性在繪制虛線時(shí)如何設(shè)置，參數(shù)與虛線效果有什么關(guān)系？ stroke-dasharray 屬性用于繪制虛實(shí)線，其格式如下。stroke-dasharray="value,value, "該屬性由一系列數(shù)字組成， 這些數(shù)字必須用逗號(hào)隔開。 屬性中如果包含空格， 不作為分隔符。 每個(gè)數(shù)字定義了實(shí)線段的長(zhǎng)度，分別是按照繪制、不繪制這個(gè)順序循環(huán)下去。( 4 ) SVG 使用 linearGradient 元素定義漸變色時(shí)， <id>
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 山東中醫(yī)藥大學(xué)《數(shù)字媒體基礎(chǔ)創(chuàng)作》2023-2024學(xué)年第一學(xué)期期末試卷
- 2023年固定照明設(shè)備項(xiàng)目融資計(jì)劃書
- 山東政法學(xué)院《新能源汽車電池與電機(jī)技術(shù)》2023-2024學(xué)年第一學(xué)期期末試卷
- 山東藝術(shù)學(xué)院《輿情監(jiān)控與危機(jī)管理》2023-2024學(xué)年第一學(xué)期期末試卷
- 應(yīng)急知識(shí)技能培訓(xùn)
- 山東藥品食品職業(yè)學(xué)院《液壓傳動(dòng)B》2023-2024學(xué)年第一學(xué)期期末試卷
- 山東信息職業(yè)技術(shù)學(xué)院《外貿(mào)實(shí)務(wù)實(shí)訓(xùn)》2023-2024學(xué)年第一學(xué)期期末試卷
- 家庭教育與孩子的環(huán)境意識(shí)
- 家具合伙經(jīng)營(yíng)合同范例
- 運(yùn)輸包裝租賃合同范例
- 報(bào)關(guān)報(bào)檢論文
- GB/T 37779-2019數(shù)據(jù)中心能源管理體系實(shí)施指南
- GB/T 32960.1-2016電動(dòng)汽車遠(yuǎn)程服務(wù)與管理系統(tǒng)技術(shù)規(guī)范第1部分：總則
- GB/T 28733-2012固體生物質(zhì)燃料全水分測(cè)定方法
- 五年級(jí)上冊(cè)英語(yǔ)試題-綜合閱讀（人教版PEP）含答案
- GB/T 18451.2-2003風(fēng)力發(fā)電機(jī)組功率特性試驗(yàn)
- GB/T 12706.3-2020額定電壓1 kV(Um=1.2 kV)到35 kV(Um=40.5 kV)擠包絕緣電力電纜及附件第3部分：額定電壓35 kV(Um=40.5 kV)電纜
- 工資發(fā)放承諾書3篇(完整版)
- GB 19079.1-2013體育場(chǎng)所開放條件與技術(shù)要求第1部分：游泳場(chǎng)所
- GB 1886.339-2021食品安全國(guó)家標(biāo)準(zhǔn)食品添加劑焦磷酸鈉
- 錨桿（土釘）施工記錄表
評(píng)論
0/150
提交評(píng)論