html5網(wǎng)頁前端設(shè)計(jì)課后習(xí)題答案

第一章習(xí)題答案什么是Internet和萬維網(wǎng)，它們的區(qū)別在哪里？答：Internet是由成千上萬臺(tái)計(jì)算機(jī)設(shè)備互相連接，基于TCP/IP協(xié)議進(jìn)行通信從而形成的全球網(wǎng)絡(luò)。萬維網(wǎng)是Internet上最重要的服務(wù)之一，也常被簡稱為“W3”或“Web”。萬維網(wǎng)主要使用HTTP協(xié)議將互聯(lián)網(wǎng)上的資源結(jié)合在了一起，并在瀏覽器中以Web頁面的方式呈現(xiàn)給用戶。請(qǐng)簡單描述用戶上網(wǎng)瀏覽網(wǎng)頁的原理。答：用戶打開 Web瀏覽器并輸入需要訪問的URL地址，該地址將發(fā)送給對(duì)應(yīng)的Web服務(wù)器。Web服務(wù)器然后將該地址對(duì)應(yīng)的文本、圖片等容發(fā)送給用戶并顯示在用戶使用的Web瀏覽器中。Web前端技術(shù)的三大核心基礎(chǔ)是哪些容？答：HTML、CSS和JavaScript。Web前端新技術(shù) HTML5與HTML有什么關(guān)系 ?答：HTML來源于 HypertextMarkupLanguage （超文本標(biāo)記語言）的首字母縮寫，是用于架構(gòu)和呈現(xiàn)網(wǎng)頁的一種標(biāo)記語言，也是萬維網(wǎng)上應(yīng)用最廣泛的核心語言。HTML5是HTML的第五次修改版，也是目前HTML語言的最新版。第二章習(xí)題答案HTML5的文檔注釋是怎樣的？答：HTML5使用<!--...-->標(biāo)簽為文檔進(jìn)行注釋，注釋標(biāo)簽以“ <!--”開頭，以“-->”結(jié)束，中間的“ ...”替換為注釋文字容即可。 <!--...-->標(biāo)簽支持單行和多行注釋。HTML5中列表標(biāo)簽有哪些，它們之間有什么區(qū)別？答：包括有序列表標(biāo)簽、無序列表標(biāo)簽和定義列表標(biāo)簽三種。有序列表標(biāo)簽 <ol>和</ol>用于定義帶有編號(hào)的有序列表；無序列表標(biāo)簽 <ul>和</ul>用于定義不帶編號(hào)的無序列表；定義列表標(biāo)簽 <dl>和</dl>是用于進(jìn)行詞條定義的特殊列表，每條表項(xiàng)需要結(jié)合詞條標(biāo)簽 <dt>和定義標(biāo)簽 <dd>一起使用。HTML5中塊級(jí)元素與聯(lián)元素的區(qū)別是什么？分別列舉有哪些標(biāo)簽屬于塊級(jí)元素或聯(lián)元素。答：塊級(jí)元素會(huì)默認(rèn)在前后自動(dòng)放置一個(gè)換行符；聯(lián)元素不會(huì)自動(dòng)在前后自動(dòng)放置換行符，默認(rèn)在同一行顯示。屬于塊級(jí)元素的有區(qū)域元素<div>、段落標(biāo)簽<p>、表格標(biāo)簽<table>、標(biāo)題標(biāo)簽<h1>-<h6>等；屬于聯(lián)元素的有容器標(biāo)簽<span>,超標(biāo)簽<a>等。HTML5 新增的文檔結(jié)構(gòu)標(biāo)簽有哪些？答：<header>、<nav>、<section>、<article>、<aside>、<footer>。HTML5 新增的格式標(biāo)簽有哪些？答：記號(hào)標(biāo)簽 <mark>、進(jìn)度標(biāo)簽<progress>、度量標(biāo)簽 <meter>等。HTML5 有哪些新增的功能 API ，分別起什么作用？答：常用的HTML5功能性API列舉如下：拖放：實(shí)現(xiàn)元素的拖放；畫布：實(shí)現(xiàn) 2D和3D繪圖效果；音頻和視頻：實(shí)現(xiàn)自帶控件播放音頻和視頻；表單：新增一系列輸入類型，例如、數(shù)字圍、email地址等；地理定位：使用瀏覽器進(jìn)行地理位置經(jīng)緯度的定位；Web存儲(chǔ)：實(shí)現(xiàn)本地持久化存儲(chǔ)大量數(shù)據(jù)；WebWorker：實(shí)現(xiàn)線程效果第三章習(xí)題答案CSS樣式表有哪幾種類型？它們的層疊優(yōu)先級(jí)關(guān)系是？答：外部樣式表、部樣式表和聯(lián)樣式表。優(yōu)先級(jí)由低到高分別為：外部樣式表 -->部樣式表 -->聯(lián)樣式表。常用的CSS選擇器有哪些？答：元素選擇器、id選擇器、類選擇器、屬性選擇器。CSS的注釋語句寫法是？答：CSS的注釋以“/*”開頭，以“*/”結(jié)尾，支持單行和多行注釋。CSS顏色值有哪幾種表達(dá)方式？答：常見有如下幾種表達(dá)方式：使用RGB顏色的方式：例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等；RGB的十六進(jìn)制表示法：例如#000000表示黑色、#FFFFFF表示白色等；直接使用英文單詞名稱：例如red表示紅色、blue表示藍(lán)色等。CSS背景圖像的平鋪方式有哪幾種？答：repeat-x（水平方向平鋪），repeat-y（垂直方向平鋪），repeat（水平和垂直方向都平鋪）以及 no-repeat（不平鋪，只顯示原圖）。如何使用 CSS 為文本添加下劃線？答：text-decoration:underline。如何使用 CSS 為列表選項(xiàng)設(shè)置自定義標(biāo)志圖標(biāo)？答：list-style-image:url（圖標(biāo)文件的URL）。如何使用 CSS 實(shí)現(xiàn)表格為單線條框樣式？答：border-collapse:collapse。如何使用CSS設(shè)置元素的層疊效果？答：使用屬性z-index可以為元素規(guī)定層次順序，其屬性值為整數(shù)，并且該數(shù)值越大將疊放在越靠上的位置。元素可以向哪些方向進(jìn)行浮動(dòng)？如何清除浮動(dòng)效果？答：在CSS中float屬性可以用于令元素向左或向右浮動(dòng)。常用clear:both來清除之前元素的浮動(dòng)效果。第四章習(xí)題答案引用JavaScript外部腳本的正確寫法是？在 HTML頁面中直接插入JavaScript代碼的正確做法是何種標(biāo)簽？答：外部腳本引用方法為：<scriptsrc="JavaScript文件URL"></script>。在HTML頁面中直接插入 JavaScript代碼的正確做法是<script>標(biāo)簽。以下哪個(gè)屬于 JavaScript注釋的正確寫法？<!--被注釋掉的容 -->//被注釋掉的容“被注釋掉的容”答：(2)為正確容。請(qǐng)分別說出下列容中變量 x運(yùn)算結(jié)果。varx=9+9;varx=9+"9";varx="9"+"9";答：(1)18，(2)99，(3)99。在JavaScript中有哪些常用的循環(huán)語句？答：for循環(huán)和for-in循環(huán)、while循環(huán)和do-while循環(huán)。如何使用警告對(duì)話框顯示“HelloJavaScript”？答：alert("HelloJavaScript");如何創(chuàng)建與調(diào)用自定義名稱的JavaScript函數(shù)？答：使用關(guān)鍵詞function來創(chuàng)建自定義函數(shù)，例如：functionwelcome(){alert("WelcometoJavaScriptWorld");函數(shù)可以通過使用函數(shù)名稱的方法進(jìn)行調(diào)用，例如welcome()。如何使用JavaScript對(duì)浮點(diǎn)數(shù)進(jìn)行四舍五入獲取最接近的整數(shù)值？答：使用Math.round()方法。如何獲取用戶當(dāng)前瀏覽器的名稱和版本？答：navigator.appName以及navigator.appVersion。第五章習(xí)題答案如何將元素設(shè)置為允許拖放的狀態(tài)？答：設(shè)置元素的draggable屬性值為true。元素被拖拽直到放置在指定區(qū)域的完整過程中依次觸發(fā)了哪些拖放事件？答：dragstart->drag->dragenter->dragover->dragleave->drop->dragend可在拖放過程中被傳遞的常見數(shù)據(jù)類型有哪些？答：可用于傳遞的常用數(shù)據(jù)類型如下：純文本類型：text/plain超類型：text/uri-listHTML代碼類型：text/html使用DataTransfer對(duì)象中的何種方法可以自定義拖放圖標(biāo)？答：setDragImage()方法。如何將指定元素設(shè)置為允許放置元素的目標(biāo)區(qū)域？答：作為可放置區(qū)域的元素必須帶有 ondragover事件。在進(jìn)行本地文件的拖放時(shí)，DataTransfer對(duì)象中的哪個(gè)屬性可以用于獲取文件列表？答：直接在放置文件時(shí)使用DataTransfer對(duì)象的files屬性即可獲取文件列表，里面包含了所有文件。第六章習(xí)題答案<form>標(biāo)簽的method屬性可以取哪些屬性值？分別表示什么含義？答：表單的method屬性用于規(guī)定了發(fā)送表單數(shù)據(jù)的兩種HTTP方法：GET和POST方法。其中表單標(biāo)簽?zāi)J(rèn)的提交方式為GET方法。GET方法：提交表單數(shù)據(jù)時(shí)，GET方法會(huì)將表單組件的數(shù)據(jù)名稱和值轉(zhuǎn)換為文本形式的參數(shù)并直接加原URL地址后面，點(diǎn)擊提交按鈕后可以直接從瀏覽器地址欄看到全部容。這種方式適用于傳遞一些安全級(jí)別要求不高的數(shù)據(jù)，并且有傳輸大小限制，每次不能超過2KB。POST方法：這種方法傳遞的表單數(shù)據(jù)會(huì)放在HTML的表頭中，不會(huì)出現(xiàn)在瀏覽器地址欄里，用戶無法直接看到參數(shù)容，適用于安全級(jí)別相對(duì)較高的數(shù)據(jù)。并且對(duì)于客戶端而言沒有傳遞數(shù)據(jù)的容量限制，完全取決于服務(wù)器的限制要求，總體來說傳輸?shù)臄?shù)據(jù)量比GET方法大。HTML5中新增了哪些＜input＞標(biāo)簽的常用類型？分別表示什么含義？答：HTML5中新增的常用類型如下表所示類型名稱解釋telemail電子地址urlURL網(wǎng)址number數(shù)值

range包含數(shù)值圍的滾動(dòng)條datetimeUTC日期（包含年、月、日）和時(shí)間（包含時(shí)、分）datetime-local本地日期和時(shí)間time選擇時(shí)間（包含時(shí)、分）date選擇日期（包含年、月、日）week選擇星期（包含年、第幾周）month選擇月份（包含年、月）search搜索欄目的文本輸入域color顏色選擇器按鈕標(biāo)簽＜button＞有哪些類型？分別表示什么含義?答：有三種類型，分別是提交（submit）、重置（reset）或無動(dòng)作按鈕（button）類型。提交（submit）用于提交表單數(shù)據(jù)；重置（reset）用于重置表單填寫的容；無動(dòng)作按鈕（button）本身沒有任何動(dòng)作，需要配合JavaScript代碼使用。HTML5表單新增multiple屬性可以用于何種類型的＜input＞標(biāo)簽?答：該屬性只適用于2種類型的＜input＞標(biāo)簽：email（電子）和file（上傳文件控件)HTML5表單新增width和height屬性可以用于何種類型的<input>標(biāo)簽？答：width和height屬性只能用于類型為image的<input>標(biāo)簽。如何使用HTML5表單新增pattern屬性限制用戶只允許輸入6位阿拉伯?dāng)?shù)字？答：關(guān)于正則表達(dá)式有多種用法，這里選擇其中一種參考答案列舉如下：<inputtype="text"name="number"pattern="[0-9]{6}"title=" 請(qǐng)輸入6位數(shù)字"/>第七章習(xí)題答案創(chuàng)建畫布使用的HTML5標(biāo)簽名稱是？為何要給畫布定義 ID？答：在HTML5中創(chuàng)建畫布需要使用<canvas>元素。其中<canvas>標(biāo)簽的id屬性為必填容，使用JavaScript進(jìn)行繪圖時(shí)可根據(jù) id找到需要繪圖的畫布。試?yán)L制HTML5畫布坐標(biāo)系，并標(biāo)記其中的原點(diǎn)(0,0)位置。答：畫布坐標(biāo)系中原點(diǎn)的位置在畫布矩形框的左上角，即(0,0)坐標(biāo)的位置?！缚拯c(diǎn) 一 中*(0-0) *(12,0)1事 ?(1工5 (12.12)T軸圖7-1HTML5畫布坐標(biāo)系示意圖.在畫布上繪制空心矩形與實(shí)心矩形分別使用的是哪種方法？答:在HTML5中可以使用strokeRect()方法繪制帶邊框的空心矩形；在HTML5中使用fillRect()方法繪制填充顏色的實(shí)心矩形。.文字的繪制有哪兩種方法？有什么區(qū)別？答：HTML5畫布API提供了兩種繪制文本的方法，fillText()方法用于繪制實(shí)心文本容，strokeText()方法用于為文本容描邊。.在畫布中顏色漸變有哪兩種模式？答：在HTML5中，顏色漸變效果分為線性漸變與徑向漸變兩種。.在畫布中設(shè)置顏色透明度有哪兩種方法，它們有什么不同？答：方法一：ctx.globalAplpha=透明度值;畫布中所有的圖形都被 context對(duì)象中g(shù)lobalAlpha的屬性值影響透明度。方法二：rgba(red,green,blue,透明度值);可以用該方法為圖形單獨(dú)設(shè)置透明度。.在HTML5畫布API中save()和restore。方法的作用是什么？答：在HTML5畫布中，save()和restore。方法是繪制復(fù)雜圖形的快捷方式， 用于記錄或恢復(fù)畫布的繪畫狀態(tài)。.在HTML5畫布中如何將形狀的長和寬均縮放至原先的二分之一大??？答：ctx.scale(0.5,0.5);第八章習(xí)題答案HTML5音頻使用了何種標(biāo)簽作為統(tǒng)一標(biāo)準(zhǔn)？有哪些音頻格式可以被支持？答：HTML5提供了一種使用<audio>標(biāo)簽來顯示音頻的標(biāo)準(zhǔn)方法。目前HTML5支持的常用音頻格式有三種：MP3格式、Ogg格式、Wav格式。HTML5視頻使用了何種標(biāo)簽作為統(tǒng)一標(biāo)準(zhǔn)？有哪些視頻格式可以被支持？答：HTML5提供了一種使用<video>標(biāo)簽來包含視頻的標(biāo)準(zhǔn)方法。目前HTML5支持的常用視頻格式有三種：MPEG4格式、Ogg格式、WebM格式。有哪些方法可以檢測瀏覽器是否支持 <audio>和<video>標(biāo)簽？答：可以使用<audio>和<video>標(biāo)簽檢測，或者使用JavaScript進(jìn)行檢測。如何獲取媒體文件播放的開始與結(jié)束時(shí)間？答：需要使用<audio>或<video>標(biāo)簽的seekable屬性。seekable屬性的start(index)方法可以用于獲取媒體播放的開始時(shí)間，end(index)方法用于獲取媒體播放的結(jié)束時(shí)間，其中index表示媒體對(duì)象的來源序號(hào)，默認(rèn)只有一個(gè)的情況填數(shù)字 0。如何跳轉(zhuǎn)媒體文件的當(dāng)前播放時(shí)間？答：可以通過設(shè)置 <audio>或<video>標(biāo)簽的currentTime屬性值(單位：秒)來完成。例如：varmediaFile=document.getElementById("media");mediaFile.currentTime=200;如何終止媒體文件的后臺(tái)加載？答：可以先使用pause()方法暫停媒體文件的播放，然后將 <audio>或<video>標(biāo)簽的src屬性去除或者設(shè)置為空。如果瀏覽器不支持 <audio>或<video>標(biāo)簽，有什么備選方案可以讓瀏覽器正常播放媒體文件？答：由于不支持<audio>或<丫1~60>標(biāo)簽的瀏覽器會(huì)執(zhí)行該標(biāo)簽首尾標(biāo)記部的容，可以利用該原理為此類瀏覽器增加一個(gè) Flash播放器的備選項(xiàng)，以保證瀏覽器可以正常播放媒體文件。第九章習(xí)題答案目前有哪些常見的定位技術(shù)，它們有哪些利弊？答：目前常用的定位技術(shù)包括 IP地址定位、GPS定位、Wifi定位和AGPS定位等。IP地址定位返回的位置信息不準(zhǔn)確，只能精確到所在城市；GPS可以在室外提供非常準(zhǔn)確的定位信息，但是獲取時(shí)間相對(duì)較長并且在室無法準(zhǔn)確定位，還需要額外的硬件設(shè)備。Wifi定位即使在室也非常準(zhǔn)確，但是 Wifi定位僅僅適用于無線網(wǎng)路基地臺(tái)較多的城市，如果是無線網(wǎng)稀少的地方就起不到作用了。APGS定位技術(shù)定位速度快、圍廣、精確度也得到了提高。目前算是定位精度最高的定位技術(shù)之一。如何使用HTML5地理定位API獲取一次當(dāng)前的定位信息？答：Geolocation接口中的getCurrentPosition()方法可用于獲取用戶當(dāng)前的定位位置。如何使用HTML5地理定位API實(shí)時(shí)更新定位信息？答：geolocation對(duì)象提供的watchPosition()方法可以實(shí)時(shí)更新用戶當(dāng)前的位置。如何使用HTML5地理定位API停止已經(jīng)啟動(dòng)的實(shí)時(shí)更新定位功能？答：如果不需要繼續(xù)更新用戶的定位信息可以使用clearWatch()方法來停止watchPosition()方法的實(shí)時(shí)監(jiān)控功能。該方法需要獲取 watchPosition()的返回值watchID如何計(jì)算已知經(jīng)緯度的兩個(gè)坐標(biāo)點(diǎn)在地平線上的距離？答：可以使用半正矢公式計(jì)算已知經(jīng)緯度數(shù)據(jù)的兩個(gè)坐標(biāo)點(diǎn)之間的距離。半正矢公式也稱為Haversine公式，最早是航海學(xué)中的重要公式，其原理就是將地球看作圓形，利用公式來計(jì)算圓形表面上任意兩個(gè)點(diǎn)之間的弧線距離。第十章習(xí)題答案什么是HTML5Web存儲(chǔ)，它與傳統(tǒng)的cookie存儲(chǔ)方式相比有哪些不同？答：HTML5Web存儲(chǔ)API和cookie存儲(chǔ)方式類似，也是將數(shù)據(jù)以 “鍵-值”對(duì)(key-valuepairs)的形式持久存儲(chǔ)在 Web客戶端。相比HTTPcookie而言，HTML5的Web存儲(chǔ)技術(shù)更適用于存儲(chǔ)大量數(shù)據(jù)，其中IE每個(gè)域名下可以存放10M數(shù)據(jù)，而其他主流瀏覽器如Chrome、Firefox和Opera每個(gè)域名下也可以存放5M的數(shù)據(jù)量，并且發(fā)生請(qǐng)求時(shí)不會(huì)帶上Web存儲(chǔ)的容。HTML5Web存儲(chǔ)API中有哪兩種存儲(chǔ)方式，它們有什么不同？答：HTML5提供了兩種客戶端存儲(chǔ)數(shù)據(jù)的方法：本地存儲(chǔ)(localStorage)與會(huì)話存儲(chǔ)(sessionStorage)。localStorage方法存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制，永久保存，并且數(shù)據(jù)可以被不同的網(wǎng)頁頁面共享使用。sessionStorage主要是針對(duì)一個(gè)session會(huì)話的數(shù)據(jù)存儲(chǔ)，只能在創(chuàng)建session的網(wǎng)頁中使用，當(dāng)用戶關(guān)閉瀏覽器窗口時(shí)，該數(shù)據(jù)將被刪除。HTML5Web存儲(chǔ)API使用何種格式進(jìn)行數(shù)據(jù)的存儲(chǔ)？答：數(shù)據(jù)是以“鍵-值”對(duì)的方式進(jìn)行存儲(chǔ)的，每個(gè)數(shù)據(jù)值對(duì)應(yīng)一個(gè)指定的鍵名稱進(jìn)行索引。其中key換成需要存儲(chǔ)的鍵名稱(可自定義)，value換成需要存儲(chǔ)的數(shù)據(jù)值。這里的引號(hào)可以是單引號(hào)或雙引號(hào)的任意一種。如何使用HTML5Web存儲(chǔ)API讀取指定鍵名稱的存儲(chǔ)數(shù)據(jù)？答：在Storage接口中提供的getItem()方法可以用于獲取指定了鍵名稱的數(shù)據(jù)值。例如localStorage.getItem('name')。如何獲取第n個(gè)存儲(chǔ)數(shù)據(jù)的鍵名稱或數(shù)據(jù)值？答：可以先使用Storage接口中的key(n)方法獲取鍵名稱，然后再使用getItem()方法獲取數(shù)據(jù)值。如何使用HTML5Web存儲(chǔ)API刪除指定鍵名稱的存儲(chǔ)數(shù)據(jù)？答：在Storage接口中提供的removeItem()方法可以用于刪除指定了鍵名稱的數(shù)據(jù)。例如localStorage.removeItem('name')7.7.如何使用HTML5Web存儲(chǔ)API清空所有的存儲(chǔ)數(shù)據(jù)？答：在Storage接口中提供的clear()方法可