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

第一章習題答案1. 什么是Internet和萬維網(wǎng)，它們的區(qū)別在哪里？答：Internet是由成千上萬臺計算機設備互相連接，基于TCP/IP協(xié)議進行通信從而形成的全球網(wǎng)絡。萬維網(wǎng)是Internet上最重要的服務之一，也常被簡稱為“W3”或“Web”。萬維網(wǎng)主要使用HTTP協(xié)議將互聯(lián)網(wǎng)上的資源結合在了一起，并在瀏覽器中以Web頁面的方式呈現(xiàn)給用戶。2. 請簡單描述用戶上網(wǎng)瀏覽網(wǎng)頁的原理。答：用戶打開Web瀏覽器并輸入需要訪問的URL地址，該地址將發(fā)送給對應的Web服務器。Web服務器然后將該地址對應的文本、圖片等內容發(fā)送給用戶并顯示在用戶使用的Web瀏覽器中。3. Web前端技術的三大核心基礎是哪些內容？答：HTML、CSS和JavaScript。4. Web前端新技術HTML5與HTML有什么關系?答：HTML來源于Hypertext Markup Language（超文本標記語言）的首字母縮寫，是用于架構和呈現(xiàn)網(wǎng)頁的一種標記語言，也是萬維網(wǎng)上應用最廣泛的核心語言。HTML5是HTML的第五次修改版，也是目前HTML語言的最新版。第二章習題答案1. HTML5的文檔注釋是怎樣的？答：HTML5使用標簽為文檔進行注釋，注釋標簽以“”結束，中間的“.”替換為注釋文字內容即可。標簽支持單行和多行注釋。2. HTML5中列表標簽有哪些，它們之間有什么區(qū)別？答：包括有序列表標簽、無序列表標簽和定義列表標簽三種。有序列表標簽和用于定義帶有編號的有序列表；無序列表標簽和用于定義不帶編號的無序列表；定義列表標簽和是用于進行詞條定義的特殊列表，每條表項需要結合詞條標簽和定義標簽一起使用。3. HTML5中塊級元素與內聯(lián)元素的區(qū)別是什么？分別列舉有哪些標簽屬于塊級元素或內聯(lián)元素。答：塊級元素會默認在前后自動放置一個換行符；內聯(lián)元素不會自動在前后自動放置換行符，默認在同一行顯示。屬于塊級元素的有區(qū)域元素、段落標簽、表格標簽、標題標簽-等；屬于內聯(lián)元素的有容器標簽，超鏈接標簽等。4. HTML5新增的文檔結構標簽有哪些？答： 、。5. HTML5新增的格式標簽有哪些？答：記號標簽、進度標簽、度量標簽等。6. HTML5有哪些新增的功能API，分別起什么作用？答：常用的HTML5功能性API列舉如下：l 拖放：實現(xiàn)元素的拖放；l 畫布：實現(xiàn)2D和3D繪圖效果；l 音頻和視頻：實現(xiàn)自帶控件播放音頻和視頻；l 表單：新增一系列輸入類型，例如電話號碼、數(shù)字范圍、email地址等；l 地理定位：使用瀏覽器進行地理位置經緯度的定位；l Web存儲：實現(xiàn)本地持久化存儲大量數(shù)據(jù)；l Web Worker：實現(xiàn)線程效果第三章習題答案1. CSS樣式表有哪幾種類型？它們的層疊優(yōu)先級關系是？答：外部樣式表、內部樣式表和內聯(lián)樣式表。優(yōu)先級由低到高分別為：外部樣式表-內部樣式表-內聯(lián)樣式表。2. 常用的CSS選擇器有哪些？答：元素選擇器、id選擇器、類選擇器、屬性選擇器。3. CSS的注釋語句寫法是？答：CSS的注釋以“/*”開頭，以“*/”結尾，支持單行和多行注釋。4. CSS顏色值有哪幾種表達方式？答：常見有如下幾種表達方式：l 使用RGB顏色的方式：例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等；l RGB的十六進制表示法：例如#000000表示黑色、#FFFFFF表示白色等；l 直接使用英文單詞名稱：例如red表示紅色、blue表示藍色等。5. CSS背景圖像的平鋪方式有哪幾種？答： repeat-x（水平方向平鋪），repeat-y（垂直方向平鋪），repeat（水平和垂直方向都平鋪）以及no-repeat（不平鋪，只顯示原圖）。6. 如何使用CSS為文本添加下劃線？答：text-decoration: underline。7. 如何使用CSS為列表選項設置自定義標志圖標？1. 答：list-style-image: url(圖標文件的URL)。8. 如何使用CSS實現(xiàn)表格為單線條框樣式？答：border-collapse: collapse。9. 如何使用CSS設置元素的層疊效果？答：使用屬性z-index可以為元素規(guī)定層次順序，其屬性值為整數(shù)，并且該數(shù)值越大將疊放在越靠上的位置。10. 元素可以向哪些方向進行浮動？如何清除浮動效果？答：在CSS中float屬性可以用于令元素向左或向右浮動。常用clear:both來清除之前元素的浮動效果。第四章習題答案1. 引用JavaScript外部腳本的正確寫法是？在HTML頁面中直接插入JavaScript代碼的正確做法是何種標簽？答：外部腳本引用方法為：。在HTML頁面中直接插入JavaScript代碼的正確做法是標簽。2. 以下哪個屬于JavaScript注釋的正確寫法？ (1) (2) /被注釋掉的內容(3) “被注釋掉的內容”答：（2）為正確內容。3. 請分別說出下列內容中變量x運算結果。(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. 如何使用警告對話框顯示“Hello JavaScript”？答：alert(Hello JavaScript);6. 如何創(chuàng)建與調用自定義名稱的JavaScript函數(shù)？答：使用關鍵詞function來創(chuàng)建自定義函數(shù)，例如：function welcome() alert(Welcome to JavaScript World);函數(shù)可以通過使用函數(shù)名稱的方法進行調用，例如welcome()。7. 如何使用JavaScript對浮點數(shù)進行四舍五入獲取最接近的整數(shù)值？答：使用Math.round()方法。8. 如何獲取用戶當前瀏覽器的名稱和版本？答：navigator.appName以及navigator.appVersion。第五章習題答案1. 如何將元素設置為允許拖放的狀態(tài)？答：設置元素的draggable屬性值為true。2. 元素被拖拽直到放置在指定區(qū)域的完整過程中依次觸發(fā)了哪些拖放事件？答：dragstart-drag-dragenter-dragover-dragleave-drop-dragend。3. 可在拖放過程中被傳遞的常見數(shù)據(jù)類型有哪些？答：可用于傳遞的常用數(shù)據(jù)類型如下：l 純文本類型：text/plainl 超鏈接類型：text/uri-listl HTML代碼類型：text/html4. 使用DataTransfer對象中的何種方法可以自定義拖放圖標？答：setDragImage()方法。5. 如何將指定元素設置為允許放置元素的目標區(qū)域？答：作為可放置區(qū)域的元素必須帶有ondragover事件。6. 在進行本地文件的拖放時，DataTransfer對象中的哪個屬性可以用于獲取文件列表？答：直接在放置文件時使用DataTransfer對象的files屬性即可獲取文件列表，里面包含了所有文件。第六章習題答案1. 標簽的method屬性可以取哪些屬性值？分別表示什么含義？答：表單的method屬性用于規(guī)定了發(fā)送表單數(shù)據(jù)的兩種HTTP方法：GET和POST方法。其中表單標簽默認的提交方式為GET方法。l GET方法：提交表單數(shù)據(jù)時，GET方法會將表單組件的數(shù)據(jù)名稱和值轉換為文本形式的參數(shù)并直接加原URL地址后面，點擊提交按鈕后可以直接從瀏覽器地址欄看到全部內容。這種方式適用于傳遞一些安全級別要求不高的數(shù)據(jù)，并且有傳輸大小限制，每次不能超過2KB。l POST方法：這種方法傳遞的表單數(shù)據(jù)會放在HTML的表頭中，不會出現(xiàn)在瀏覽器地址欄里，用戶無法直接看到參數(shù)內容，適用于安全級別相對較高的數(shù)據(jù)。并且對于客戶端而言沒有傳遞數(shù)據(jù)的容量限制，完全取決于服務器的限制要求，總體來說傳輸?shù)臄?shù)據(jù)量比GET方法大。2. HTML5中新增了哪些標簽的常用類型？分別表示什么含義？答： HTML5中新增的常用類型如下表所示。類型名稱解釋tel電話號碼email電子郵箱地址urlURL網(wǎng)址number數(shù)值range包含數(shù)值范圍的滾動條datetimeUTC日期（包含年、月、日）和時間（包含時、分）datetime-local本地日期和時間time選擇時間（包含時、分）date選擇日期（包含年、月、日）week選擇星期（包含年、第幾周）month選擇月份（包含年、月）search搜索欄目的文本輸入域color顏色選擇器3. 按鈕標簽有哪些類型？分別表示什么含義？答：有三種類型，分別是提交（submit）、重置（reset）或無動作按鈕（button）類型。提交（submit）用于提交表單數(shù)據(jù)；重置（reset）用于重置表單填寫的內容；無動作按鈕（button）本身沒有任何動作，需要配合JavaScript代碼使用。4. HTML5表單新增multiple屬性可以用于何種類型的標簽？答：該屬性只適用于2種類型的標簽：email（電子郵箱）和file（上傳文件控件）。5. HTML5表單新增width和height屬性可以用于何種類型的標簽？答：width和height屬性只能用于類型為image的標簽。6. 如何使用HTML5表單新增pattern屬性限制用戶只允許輸入6位阿拉伯數(shù)字？答：關于正則表達式有多種用法，這里選擇其中一種參考答案列舉如下：第七章習題答案1. 創(chuàng)建畫布使用的HTML5標簽名稱是？為何要給畫布定義ID？答：在HTML5中創(chuàng)建畫布需要使用元素。其中標簽的id屬性為必填內容，使用JavaScript進行繪圖時可根據(jù)id找到需要繪圖的畫布。2. 試繪制HTML5畫布坐標系，并標記其中的原點(0,0)位置。答：畫布坐標系中原點的位置在畫布矩形框的左上角，即(0,0)坐標的位置。圖7-1 HTML5畫布坐標系示意圖3. 在畫布上繪制空心矩形與實心矩形分別使用的是哪種方法？答：在HTML5中可以使用strokeRect()方法繪制帶邊框的空心矩形；在HTML5中使用fillRect()方法繪制填充顏色的實心矩形。4. 文字的繪制有哪兩種方法？有什么區(qū)別？答：HTML5畫布API提供了兩種繪制文本的方法，fillText()方法用于繪制實心文本內容，strokeText()方法用于為文本內容描邊。5. 在畫布中顏色漸變有哪兩種模式？答：在HTML5中，顏色漸變效果分為線性漸變與徑向漸變兩種。6. 在畫布中設置顏色透明度有哪兩種方法，它們有什么不同？答：方法一：ctx.globalAplpha=透明度值; 畫布中所有的圖形都被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)一標準？有哪些音頻格式可以被支持？答：HTML5提供了一種使用標簽來顯示音頻的標準方法。目前HTML5支持的常用音頻格式有三種：MP3格式、Ogg格式、Wav格式。2. HTML5視頻使用了何種標簽作為統(tǒng)一標準？有哪些視頻格式可以被支持？答：HTML5提供了一種使用標簽來包含視頻的標準方法。目前HTML5支持的常用視頻格式有三種：MPEG4格式、Ogg格式、WebM格式。3. 有哪些方法可以檢測瀏覽器是否支持和標簽？答：可以使用和標簽檢測，或者使用JavaScript進行檢測。4. 如何獲取媒體文件播放的開始與結束時間？答：需要使用或標簽的seekable屬性。seekable屬性的start(index)方法可以用于獲取媒體播放的開始時間，end(index)方法用于獲取媒體播放的結束時間，其中index表示媒體對象的來源序號，默認只有一個的情況填數(shù)字0。5. 如何跳轉媒體文件的當前播放時間？答：可以通過設置或標簽的currentTime屬性值（單位：秒）來完成。例如：var mediaFile = document.getElementById(media);mediaFile.currentTime=200;6. 如何終止媒體文件的后臺加載？答：可以先使用pause()方法暫停媒體文件的播放，然后將或標簽的src屬性去除或者設置為空。7. 如果瀏覽器不支持或標簽，有什么備選方案可以讓瀏覽器正常播放媒體文件？答：由于不支持或標簽的瀏覽器會執(zhí)行該標簽首尾標記內部的內容，可以利用該原理為此類瀏覽器增加一個Flash播放器的備選項，以保證瀏覽器可以正常播放媒體文件。第九章習題答案1. 目前有哪些常見的定位技術，它們有哪些利弊？答：目前常用的定位技術包括IP地址定位、GPS定位、Wifi定位和AGPS定位等。l IP地址定位返回的位置信息不準確，只能精確到所在城市；l GPS可以在室外提供非常準確的定位信息，但是獲取時間相對較長并且在室內無法準確定位，還需要額外的硬件設備。l Wifi定位即使在室內也非常準確，但是Wifi定位僅僅適用于無線網(wǎng)路基地臺較多的城市，如果是無線網(wǎng)稀少的地方就起不到作用了。l APGS定位技術定位速度快、范圍廣、精確度也得到了提高。目前算是定位精度最高的定位技術之一。2. 如何使用HTML5地理定位API獲取一次當前的定位信息？答：Geolocation接口中的getCurrentPosition()方法可用于獲取用戶當前的定位位置。3. 如何使用HTML5地理定位API實時更新定位信息？答：geolocation對象提供的watchPosition()方法可以實時更新用戶當前的位置。4. 如何使用HTML5地理定位API停止已經啟動的實時更新定位功能？答：如果不需要繼續(xù)更新用戶的定位信息可以使用clearWatch()方法來停止watchPosition()方法的實時監(jiān)控功能。該方法需要獲取watchPosition()的返回值watchID。5. 如何計算已知經緯度的兩個坐標點在地平線上的距離？答：可以使用半正矢公式計算已知經緯度數(shù)據(jù)的兩個坐標點之間的距離。半正矢公式也稱為Haversine公式，最早是航海學中的重要公式，其原理就是將地球看作圓形，利用公式來計算圓形表面上任意兩個點之間的弧線距離。第十章習題答案1. 什么是HTML5 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存儲的內容。2. HTML5 Web存儲API中有哪兩種存儲方式，它們有什么不同？答：HTML5提供了兩種客戶端存儲數(shù)據(jù)的方法：本地存儲（localStorage）與會話存儲（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ù)據(jù)？答：在Storage接口中提供的getItem()方法可以用于獲取指定了鍵名稱的數(shù)據(jù)值。例如localStorage.getItem(name)。5. 如何獲取第n個存儲數(shù)據(jù)的鍵名稱或數(shù)據(jù)值？答：可以先使用Storage接口中的key(n)方法獲取鍵名稱，然后再使用getItem()方法獲取數(shù)據(jù)值。6. 如何使用HTML5 Web存儲API刪除指定鍵名稱的存儲數(shù)據(jù)？答：在Storage接口中提供的removeItem()方法可以用于刪除指定了鍵名稱的數(shù)據(jù)。例如localStorage.removeItem(name)。7. 如何使用HTML5 Web存儲API清空所有的存儲數(shù)據(jù)？答：在Storage接口中提供的clear()方法可以用于清空所有Web存儲數(shù)據(jù)。第十一章習題答案1. CSS3中哪個屬性可以為元素設