html5網(wǎng)前端設計課后習題答案

1、第一章習題答案1,什么是Internet和萬維網(wǎng),它們的區(qū)別在哪里？答：Internet是由成千上萬臺計算機設備互相連接,基于 TCP/IP協(xié)議進行通信從 而形成的全球網(wǎng)絡.萬維網(wǎng)是Internet上最重要的效勞之一,也常被簡稱為“W3 或“Web.萬維網(wǎng)主要使用HTTP協(xié)議將互聯(lián)網(wǎng)上的資源結(jié)合在了一起, 并在瀏 覽器中以Web頁面的方式呈現(xiàn)給用戶.2,請簡單描述用戶上網(wǎng)瀏覽網(wǎng)頁的原理.答：用戶翻開 Web瀏覽器并輸入需要訪問的 URL地址,該地址將發(fā)送給對應的 Web效勞器.Web效勞器然后將該地址對應的文本、圖片等內(nèi)容發(fā)送給用戶并 顯示在用戶使用的 Web瀏覽器中.3. Web前端技術的三

2、大核心根底是哪些內(nèi)容？答：HTML、CSS?口 JavaScript4. Web前端新技術HTML5與HTML有什么關系？答：HTML來源于Hypertext Markup Language超文本標記語言的首字母縮寫, 是用于架構(gòu)和呈現(xiàn)網(wǎng)頁的一種標記語言,也是萬維網(wǎng)上應用最廣泛的核心語言.HTML5是HTML的第五次修改版,也是目前 HTML語言的最新版.第二章習題答案1. HTML5的文檔注釋是怎樣的？答：HTML5使用!-.-市簽為文檔進行注釋,注釋標簽以“!-"開頭,以“- 結(jié)束,中間的.替換為注釋文字內(nèi)容即可.!-.-標簽支持單行和多行注釋.2. HTML5中列表標簽有哪些,

3、它們之間有什么區(qū)別？答：包括有序列表標簽、無序列表標簽和定義列表標簽三種.有序列表標簽.1和/.1用于定義帶有編號的有序列表；無序列表標簽 3和 /ul用于定義不帶編號的無序列表；定義列表標簽dl#k/dl是用于進行詞條定 義的特殊列表,每條表項需要結(jié)合詞條標簽 dt和定義標簽dd一起使用.3. HTML5中塊級元素與內(nèi)聯(lián)元素的區(qū)別是什么？分別列舉有哪些標簽屬于塊 級元素或內(nèi)聯(lián)元素.答：塊級元素會默認在前后自動放置一個換行符；內(nèi)聯(lián)元素不會自動在前后自動放置換行符,默認在同一行顯示.屬于塊級元素的有區(qū)域元素 div、段落標簽p、表格標簽table、標題標簽 h1-h6冷；屬于內(nèi)聯(lián)元素的有容器標簽

4、span,超鏈接標簽a4.4. HTML5新增的文檔結(jié)構(gòu)標簽有哪些？答： header、nav、section、article、aside footer.5. HTML5新增的格式標簽有哪些？答：記號標簽 mark、進度標簽progress 度量標簽meter等.6. HTML5有哪些新增的功能API,分別起什么作用？7. 常用的HTML5功能性API列舉如下：拖放：實現(xiàn)元素的拖放；畫布：實現(xiàn)2D和3D繪圖效果；音頻和視頻：實現(xiàn)自帶控件播放音頻和視頻；表單：新增一系列輸入類型,例如 號、數(shù)字范圍、email地址等;地理定位：使用瀏覽器進行地理位置經(jīng)緯度的定位；Web存儲：實現(xiàn)本地持久化存儲大量

5、數(shù)據(jù)；Web Worker：實現(xiàn)線程效果第三章習題答案1. css羊式表有哪幾種類型？它們的層疊優(yōu)先級關系是？答：外部樣式表、內(nèi)部樣式表和內(nèi)聯(lián)樣式表.優(yōu)先級由低到高分別為：外部樣式表-內(nèi)部樣式表-內(nèi)聯(lián)樣式表.2. 常用的CSS4擇器有哪些？答：元素選擇器、id選擇器、類選擇器、屬性選擇器.3. CSS勺注釋語句寫法是？答：CSS勺注釋以“/*開頭,以“ 7結(jié)尾,支持單行和多行注釋.4. CSSB色值有哪幾種表達方式？答：常見有如下幾種表達方式：使用RGB顏色的方式：例如 rgb0,0,0表示黑色、rgb255,255,255俄示白色 等；RGB的十六進制表示法：例如#000000表示黑色、#F

6、FFFF版示白色等； 直接使用英文單詞名稱：例如red表示紅色、blue表示藍色等.5. CSST景圖像的平鋪方式有哪幾種？答：repeat-x 水平方向平鋪,repeat-y 垂直方向平鋪,repeat 水平和垂直 方向都平鋪以及no-repeat 不平鋪,只顯示原圖.6. 如何使用CS效文本添加下劃線？答：text-decoration: underline 07. 如何使用CS勸列表選項設置自定義標志圖標？1.答：list-style-image: url圖標文件的 URL8 .如何使用CSSJ現(xiàn)表格為單線條框樣式？答：border-collapse: collapse9 .如何使用CS

7、SS置元素的層疊效果？答：使用屬性z-index可以為元素規(guī)定層次順序,其屬性值為整數(shù),并且該數(shù)值 越大將疊放在越靠上的位置.10 .元素可以向哪些方向進行浮動？如何去除浮動效果？答：在CSS float屬性可以用于令元素向左或向右浮動.常用clear:both來去除之前元素的浮動效果.第四章習題答案1 .引用JavaScript外部腳本的正確寫法是？在 HTML頁面中直接插入JavaScript 代碼的正確做法是何種標簽？答：外部腳本引用方法為：<script src="JavaScrip儀件 URL"></scriptx在HTML頁面中直接插入Java

8、Script代碼的正確做法是<script也簽.2 .以下哪個屬于JavaScript釋的正確寫法？<!被注釋掉的內(nèi)容->(2) 被注釋掉的內(nèi)容(3) “被注釋掉的內(nèi)容答：(2)為正確內(nèi)容.3 .請分別說出以下內(nèi)容中變量x運算結(jié)果.(1) var x = 9+9;(2) var x = 9+"9"(3) var x = "9"+"9"答：(1) 18, (2) 99, (3) 99.4 .在JavaScript中有哪些常用的循環(huán)語句？答:for循環(huán)和for-in循環(huán)、while循環(huán)和do-while循環(huán).5 .如何使

9、用警告對話框顯示“ Hello JavaScript ?答：alert("Hello JavaScript");6 .如何創(chuàng)立與調(diào)用自定義名稱的 JavaScript®數(shù)? 答：使用關鍵詞function來創(chuàng)立自定義函數(shù),例如:function welcome()alert("Welcome to JavaScript World");)函數(shù)可以通過使用函數(shù)名稱的方法進行調(diào)用,例如welcome.7 .如何使用JavaScript寸浮點數(shù)進行四舍五入獲取最接近的整數(shù)值?答：使用Math.round()方法.8 .如何獲取用戶當前瀏覽器的名稱和版

10、本？答：navigator.appName以及 navigator.appVersion第五章習題答案1 .如何將元素設置為允許拖放的狀態(tài)？答：設置元素的draggable屬性值為true.2 .元素被拖拽直到放置在指定區(qū)域的完整過程中依次觸發(fā)了哪些拖放事件?答：dragstart->drag->dragenter->dragover->dragleave->drop->dragend3 .可在拖放過程中被傳遞的常見數(shù)據(jù)類型有哪些？答：可用于傳遞的常用數(shù)據(jù)類型如下：純文本類型：text/plain超鏈接類型：text/uri-listHTML 代碼類型：te

11、xt/html4 .使用DataTransfer對象中的何種方法可以自定義拖放圖標？答：setDragImage(方法.5 .如何將指定元素設置為允許放置元素的目標區(qū)域？答：作為可放置區(qū)域的元素必須帶有ondragover事件.6 .在進行本地文件的拖放時,DataTransfer對象中的哪個屬性可以用于獲取文件列表？答：直接在放置文件時使用 DataTransfer對象的巾les屬性即可獲取文件列表,里 面包含了所有文件.第六章習題答案1. form標簽的method屬性可以取哪些屬性值？分別表示什么含義？答：表單的method屬性用于規(guī)定了發(fā)送表單數(shù)據(jù)的兩種 HTTP方法：GETffi P

12、OST 方法.其中表單標簽默認的提交方式為 GET方法.GET方法：提交表單數(shù)據(jù)時,GET方法會將表單組件的數(shù)據(jù)名稱和值轉(zhuǎn)換為 文本形式的參數(shù)并直接加原URL地址后面,點擊提交按鈕后可以直接從瀏覽 器地址欄看到全部內(nèi)容.這種方式適用于傳遞一些平安級別要求不高的數(shù) 據(jù),并且有傳輸大小限制,每次不能超過 2KRPOSTJ法：這種方法傳遞的表單數(shù)據(jù)會放在 HTML的表頭中,不會出現(xiàn)在瀏 覽器地址欄里,用戶無法直接看到參數(shù)內(nèi)容,適用于平安級別相對較高的數(shù) 據(jù).并且對于客戶端而言沒有傳遞數(shù)據(jù)的容量限制,完全取決于效勞器的限 制要求,總體來說傳輸?shù)臄?shù)據(jù)量比 GE叫法大.2. HTML5中新增了哪些inpu

13、t標簽的常用類型？分別表示什么含義？答：HTML5中新增的常用類型如下表所示類型名稱解釋tel 號email電子郵箱地址urlURL網(wǎng)址number數(shù)值range包含數(shù)值范圍的滾動條datetimeUTC日期包含年、月、日和時間包含時、分datetime-local本地日期和時間time選擇時間包含時、分date選擇日期包含年、月、日week選擇星期包含年、第幾周month選擇月份包含年、月search搜索欄目的文本輸入域color顏色選擇器3. 按鈕標簽button有哪些類型？分別表示什么含義？答：有三種類型,分別是提交submit 重置reset或無動作按鈕button 類型.提交subm

14、it用于提交表單數(shù)據(jù)；重置reset用于重置表單填寫的內(nèi) 容；無動作按鈕button本身沒有任何動作,需要配合 JavaScript代碼使用.4. HTML5表單新增multiple屬性可以用于何種類型的input標簽？答：該屬性只適用于2種類型的input標簽：email 電子郵箱和file 上傳文 件控件.5. HTML5表單新增width和height屬性可以用于何種類型的input標簽？ 答：width和height屬性只能用于類型為image的input標簽.6. 如何使用HTML5表單新增pattern屬性限制用戶只允許輸入6位阿拉伯數(shù) 字？答：關于正那么表達式有多種用法,這里選擇

15、其中一種參考答案列舉如下：input type="text" name="number" pattern="0-96" title="請輸入 6 位數(shù)字"/第七章習題答案1 .創(chuàng)立畫布使用的HTML5標簽名稱是？為何要給畫布定義ID?答：在HTML5中創(chuàng)立畫布需要使用canvas6素.其中canvas和簽的id屬性為 必填內(nèi)容,使用JavaScrip砒行繪圖時可根據(jù)id找到需要繪圖的畫布.2 .試繪制HTML5畫布坐標系,并標記其中的原點0,0位置.答：畫布坐標系中原點的位置在畫布矩形框的左上角,即0,0準標的位置

16、.圖7-1 HTML5畫布坐標系示意圖3 .在畫布上繪制空心矩形與實心矩形分別使用的是哪種方法？答：在HTML5中可以使用strokeRect()方法繪制帶邊框的空心矩形； 在HTML5中 使用削Rect()方法繪制填充顏色的實心矩形.4 .文字的繪制有哪兩種方法？有什么區(qū)別？答：HTML5畫布API提供了兩種繪制文本的方法,劑Text()方法用于繪制實心文 本內(nèi)容,strokeText(方法用于為文本內(nèi)容描邊.5 .在畫布中顏色漸變有哪兩種模式？答：在HTML5中,顏色漸變效果分為線性漸變與徑向漸變兩種.6 .在畫布中設置顏色透明度有哪兩種方法,它們有什么不同？答：方法一：ctx.globa

17、lAplpha=S明度值；畫布中所有的圖形都被context對象中 globalAlpha的屬性值影響透明度.方法二：rgba(red, green, blue,透明度值);可以用該方法為圖形單獨設置透明度.7 .在HTML5畫布API中save(和restore.方法的作用是什么？答：在HTML5畫布中,save(并口 restore.方法是繪制復雜圖形的快捷方式,用于 記錄或恢復畫布的繪畫狀態(tài).8 .在HTML5畫布中如何將形狀的長和寬均縮放至原先的二分之一大小?答:ctx. scale(0.5, 0.5);第八章習題答案1 . HTML5音頻使用了何種標簽作為統(tǒng)一標準？有哪些音頻格式可以

18、被支持？答：HTML5提供了一種使用2的標簽來顯示音頻的標準方法.目前 HTML5支 持的常用音頻格式有三種：MP3格式、Ogg格式、Wav格式.2 . HTML5視頻使用了何種標簽作為統(tǒng)一標準？有哪些視頻格式可以被支持？答：HTML5提供了一種使用video標簽來包含視頻的標準方法.目前 HTML5支 持的常用視頻格式有三種： MPEG4a式、Ogg格式、WebM格式.3 .有哪些方法可以檢測瀏覽器是否支持audioD video標簽？答：可以使用audio湃Dvideo標簽檢測,或者使用JavaScript®行檢測.4 .如何獲取媒體文件播放的開始與結(jié)束時間？答：需要使用2口由或

19、3.標簽的seekable屬性.seekable屬性的start(index) 方法可以用于獲取媒體播放的開始時間,end(index)方法用于獲取媒體播放的結(jié) 束時間,其中index表示媒體對象的來源序號,默認只有一個的情況填數(shù)字0o5 .如何跳轉(zhuǎn)媒體文件的當前播放時間？答：可以通過設置audioM£video標簽的currentTime屬性值(單位：秒)來完 成.例如：var mediaFile = document.getElementById("media");mediaFile.currentTime=200;6 .如何終止媒體文件的后臺加載？答：可以先

20、使用pause()方法暫停媒體文件的播放,然后將2口由或3.標簽 的src屬性去除或者設置為空.7 .如果瀏覽器不支持2"的或60標簽,有什么備選方案可以讓瀏覽器正 常播放媒體文件？答：由于不支持audioM£videoft簽的瀏覽器會執(zhí)行該標簽首尾標記內(nèi)部的內(nèi) 容,可以利用該原理為此類瀏覽器增加一個Flash播放器的備選項,以保證瀏覽器可以正常播放媒體文件.第九章習題答案1 .目前有哪些常見的定位技術,它們有哪些利弊？答：目前常用的定位技術包括IP地址定位、GPSS位、Wifi定位和AGPSS位等. IP地址定位返回的位置信息不準確,只能精確到所在城市；GPS可以在室外提

21、供非常準確的定位信息,但是獲取時間相對較長并且在室 內(nèi)無法準確定位,還需要額外的硬件設備.Wifi定位即使在室內(nèi)也非常準確,但是Wifi定位僅僅適用于無線網(wǎng)路基地臺 較多的城市,如果是無線網(wǎng)稀少的地方就起不到作用了.APGS定位技術定位速度快、范圍廣、精確度也得到了提升.目前算是定位 精度最高的定位技術之一.2 .如何使用HTML5地理定位API獲取一次當前的定位信息？ 答：Geolocation接口中的getCurrentPosition()方法可用于獲取用戶當前的定位位 置.3 .如何使用HTML5地理定位API實時更新定位信息？答：geolocation對象提供的watchPositio

22、n()方法可以實時更新用戶當前的位置.4 .如何使用HTML5地理定位API停止已經(jīng)啟動的實時更新定位功能？答：如果不需要繼續(xù)更新用戶的定位信息可以使用clearWatch()方法來停止watchPosition()方法的實時監(jiān)控功能.該方法需要獲取 watchPosition()的返回值 watchID.5 .如何計算經(jīng)緯度的兩個坐標點在地平線上的距離？答：可以使用半正矢公式計算經(jīng)緯度數(shù)據(jù)的兩個坐標點之間的距離.半正矢公式也稱為Haversine公式,最早是航海學中的重要公式,其原理就是將地球看 作圓形,利用公式來計算圓形外表上任意兩個點之間的弧線距離.第十章習題答案1 .什么是HTML5

23、Web存儲,它與傳統(tǒng)的cookie存儲方式相比有哪些不同？ 答：HTML5 Web存儲API和cookie存儲方式類似,也是將數(shù)據(jù)以鍵-值對(key-value pairs)勺形式持久存儲在 Web客戶端. 相比HTTP cookie而言,HTML5 的Web存儲技術更適用于存儲大量數(shù)據(jù),其中IE每個域名下可以存放10M數(shù)據(jù), 而其他主流瀏覽器如 Chrome、Firefox和Opera每個域名下也可以存放 5M的數(shù) 據(jù)量,并且發(fā)生請求時不會帶上 Web存儲的內(nèi)容.2 . HTML5 Web存儲API中有哪兩種存儲方式,它們有什么不同？答：HTML5提供了兩種客戶端存儲數(shù)據(jù)的方法：本地存儲(l

24、ocalStorage)與會話存儲(sessionStorage.localStorage方法存儲的數(shù)據(jù)沒有時間限制,永久保存, 并且數(shù)據(jù)可以被不同的網(wǎng)頁頁面共享使用.sessionStorage主要是針對一個session會話的數(shù)據(jù)存儲,只能在創(chuàng)立session的網(wǎng)頁中使用,當用戶關閉瀏覽器 窗口時,該數(shù)據(jù)將被刪除.3 . HTML5 Web存儲API使用何種格式進行數(shù)據(jù)的存儲？答：數(shù)據(jù)是以“鍵-值對的方式進行存儲的,每個數(shù)據(jù)值對應一個指定的鍵名 稱進行索引.其中key換成需要存儲的鍵名稱(可自定義),value換成需要存儲 的數(shù)據(jù)值.這里的引號可以是單引號或雙引號的任意一種.4 .如何使用HTML5 Web存儲API讀取指定鍵名稱的存儲數(shù)