HTML5CSS3網(wǎng)頁設(shè)計基礎(chǔ)教程石磊課后參考答案_第1頁
HTML5CSS3網(wǎng)頁設(shè)計基礎(chǔ)教程石磊課后參考答案_第2頁
HTML5CSS3網(wǎng)頁設(shè)計基礎(chǔ)教程石磊課后參考答案_第3頁
HTML5CSS3網(wǎng)頁設(shè)計基礎(chǔ)教程石磊課后參考答案_第4頁
HTML5CSS3網(wǎng)頁設(shè)計基礎(chǔ)教程石磊課后參考答案_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第1章1.答：閱讀“1.2.1HTML變遷”一節(jié)。2.答：參考“1.1.1HTML5的目標”和“1.1.2HTML5新特性”兩節(jié)。3.答：按照“1.3.1搭建上機練習環(huán)境”和“1.3.2監(jiān)測瀏覽器是否支持”兩節(jié)所描述的步驟搭建上機環(huán)境并檢測本機所安裝的瀏覽器是否支持HTML5。4.答：參考1.3.3節(jié)編寫一個HTML5文檔。第2章1.答：閱讀“2.1.3HTML語法”一節(jié)的內(nèi)容。2.答：閱讀“2.2.2XHTML語法”一節(jié)的內(nèi)容。3.答：閱讀“2.3.1HTML5語法”一節(jié)的內(nèi)容。4.答：參考“2.4新增和廢除的屬性”一節(jié)的內(nèi)容。5.答：參考“2.5全局屬性”和“2.6新增的事件”兩節(jié)內(nèi)容。第3章1.答：參考3.1節(jié)。2.答：參考3.3節(jié)。3.答：參考3.4節(jié)。4.答：見“源代碼”中“第3章習題4源碼”。第4章1.新增的form屬性有autocomplete屬性、autocomplete屬性。詳情參考“4.1新增的form屬性”一節(jié)的內(nèi)容。2.參考“4.2新增的form元素”一節(jié)的內(nèi)容。3.參考“4.3新增的input類型”一節(jié)的內(nèi)容。4.參考“4.4新增的input屬性”一節(jié)的內(nèi)容。5.程序代碼如下：<head> <metacharset="UTF-8"> <title>自動驗證輸入的內(nèi)容是否為數(shù)字</title></head><body> <formmethod="post"> 用戶名：<inputname="user_name"type="text"requiredpattern="^(?!\d+$)(?![A-Za-z]+$)[a-zA-Z0-9]{6,8}$"/> <inputtype="submit"/> </form>第5章1.答：參考“5.1canvas元素基礎(chǔ)”節(jié)下的“5.1.1添加canvas元素”“5.1.2檢測瀏覽器支持”。2.答：程序如下：<head> <meta

charset="utf-8"> <title>canvas元素示例</title> <scripttype="text/javascript"charset="gb2312"> functiondraw(){ varc=document.getElementById("canvas1"); if(c==null)returnfalse; varcontext=c.getContext('2d'); context.fillStyle="#FF0000"; context.fillRect(50,50,100,100); } </script> </head> <bodyonload="draw()"> <canvasid="canvas1"width="400"height="300"> 您的瀏覽器不支持HTML5canvas標簽。 </canvas> </body>3.答：在canvas元素中繪制圖形時，需要為圖形指定擺放位置。fillRect(50,50,100,100)的前兩個參數(shù)就是指定所繪制矩形的x軸和y軸坐標值。在canvas中，坐標原點（0,0）位于canvas元素的左上角，x軸水平向右延伸，y軸向下延伸，如圖所示。4.答：參考“5.2繪制簡單圖形”一節(jié)的示例。5.答：參考“5.4.1保存與恢復canvas狀態(tài)”一節(jié)的示例。6.答：參考“.6.1裁剪圖像”一節(jié)的“5.6.1裁剪圖像”的內(nèi)容講解。第6章1.答：參考“6.1HTML5多媒體技術(shù)概述”一節(jié)的內(nèi)容。2.答：參考“6.3audio元素與video元素”一節(jié)的內(nèi)容。3.答：參考“6.3audio元素與video元素”一節(jié)的內(nèi)容。4.答：參考“6.5對音頻或視頻添加字幕”一節(jié)的內(nèi)容。5.答：程序代碼如下：<videocontrols><sourcesrc="video.mp4"type="video/mp4"><sourcesrc="video.webm"type="video/webm"><tracklabel="EnglishCaptions"kind="captions"srclang="en"src="video_cc_en.vtt"><tracklabel="GermanSubtitles"kind="subtitles"srclang="de"src="video_sub_de.vtt"><tracklabel="FrenchSubtitles"kind="subtitles"srclang="fr"src="video_sub_fr.vtt"><tracklabel="EnglishDescriptions"kind="descriptions"srclang="en"src="video_audesc_en.vtt"><tracklabel="Chapters"kind="chapters"srclang="en"src="video_chapters_en.vtt"></video>第7章1.答：Cookie是HTML5之前，客戶端瀏覽器中信息存儲的主要方式之一，它使用文本來存儲信息，當有應(yīng)用程序使用Cookie時，服務(wù)器端就會發(fā)送Cookie到客戶端，客戶端瀏覽器將其保存下來。下次頁面請求時，客戶端瀏覽器就會把Cookie發(fā)送到服務(wù)器。Cookie最典型的應(yīng)用是保存用戶信息，如用戶設(shè)置、密碼等。使用Cookie存儲信息的優(yōu)點有：簡單易用，瀏覽器負責發(fā)送數(shù)據(jù)，且自動管理不同站點的Cookie。使用Cookie保存信息的缺點有：安全性差，存儲容量只有4KB，且存儲的鍵值對數(shù)量有限；用戶可以將瀏覽器設(shè)置為禁用Cookie；另外，由于Cookie由請求來傳遞，因此傳遞大量數(shù)據(jù)時，效率顯得極低下。2.答：WebStorage存儲機制比傳統(tǒng)的Cookie更加強大，彌補了Cookie的許多缺點，主要在兩方面做了加強：第一，WebStorage提供了簡單易用的API接口，只需設(shè)置鍵值即可；第二，在存儲容量方面可以根據(jù)用戶分配的磁盤配額進行存儲，能夠在每個用戶域存儲5MB~10MB的內(nèi)容，用戶不僅可以存儲session，還可以存儲許多信息，如設(shè)置偏好、本地化的數(shù)據(jù)和離線數(shù)據(jù)等。WebStorage還提供了使用JavaScript編程的接口，開發(fā)者可以使用JavaScript客戶端腳本實現(xiàn)許多以前只能在服務(wù)器端才能完成的工作。3.答：參考“7.2使用Web存儲”一節(jié)的內(nèi)容。4.答：參考“7.3本地數(shù)據(jù)庫”一節(jié)下的“7.3.1本地數(shù)據(jù)庫的基本概念”。5.答：參考“7.3.4綜合應(yīng)用——點評功能”一節(jié)的功能。第8章1.答：參考“8.1.1本地緩存技術(shù)產(chǎn)生的原因”一節(jié)的內(nèi)容。2.答：參考“8.1.3本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別”一節(jié)的內(nèi)容。3.答：參考“8.2.1Web服務(wù)器配置”一節(jié)的內(nèi)容。4.答：參考“8.2.2manifest文件結(jié)構(gòu)與含義”一節(jié)的內(nèi)容。5.答：參考“8.2.4離線應(yīng)用中瀏覽器和服務(wù)器交互過程”一節(jié)的內(nèi)容。6.答：參考“8.2.4離線應(yīng)用中瀏覽器和服務(wù)器交互過程”一節(jié)的內(nèi)容。7.答：參考“8.2.4離線應(yīng)用中瀏覽器和服務(wù)器交互過程”一節(jié)的內(nèi)容。8.參考“8.4緩存網(wǎng)站的首頁”一節(jié)描述的操作步驟。第9章1.答：參考“9.1.2HTML5對長耗時操作的解決”和“9.1.4WebWorkers的使用場合”。2.答：參考“【例9-2】使用WebWorkers優(yōu)化求和運算”。3.答：參考“9.2.2與線程進行數(shù)據(jù)的交互”。4.答：參考“9.3.2在多個子線程中進行數(shù)據(jù)交互”。5.答：專用線程：創(chuàng)建一個工作線程需要使用Worker()構(gòu)造函數(shù)，參數(shù)是需要在另一個線程中運行的JavaScript文件名稱。varworker=newWorker("myworker.js");然后在實例上監(jiān)聽onmessage事件，來獲取消息。worker.onmessage=function(event){//從工作線程獲取消息}共享線程與專用線程：二者的區(qū)別在于共享線程可以有多個連接。用于解決多連接并發(fā)的問題。它們并不是綁定于一個HTML頁面的。如果你在同一個瀏覽器上打開了同一個網(wǎng)站的頁面，這些頁面都可以訪問其中任意頁面創(chuàng)建的共享工作線程?？梢允褂肧haredWorker（）構(gòu)造函數(shù)，創(chuàng)建共享工作線程。除了腳本的路徑外，這個構(gòu)造函數(shù)還需要一個可選的name參數(shù)。如果name參數(shù)沒有指定會使用一個空字符串。如果創(chuàng)建一個和既有實例使用相同腳本和名字的共享工作線程，只會為已存在的線程增加一個新的連接而并不會創(chuàng)建一個全新的線程。6.答：參考“9.6線程工作原理”。7.答：參考【例9-5】。第10章1.答：GeolocationAPI提供了一個可以準確感知瀏覽器用戶當前位置的方法。如果瀏覽器支持，且設(shè)備具有定位功能，就能夠直接使用這組API來獲取當前位置信息。該GeolocationAPI可以應(yīng)用于移動設(shè)備中的地理位置。GeolocationAPI允許用戶在Web應(yīng)用程序中共享位置信息，使得用戶能夠享受位置感知服務(wù)。該接口的使用方法比較簡單，請求一個位置信息，如果用戶同意，瀏覽器就會返回位置信息。該位置信息是通過支持HTML5地理定位功能的底層設(shè)備，例如，筆記本電腦或手機，提供給瀏覽器的。位置信息由緯度、經(jīng)度坐標和其他元數(shù)據(jù)組成。2.答：參考“10.1.2位置信息來源”一節(jié)的內(nèi)容。3.答：參考“10.2.2獲取當前地理位置”一節(jié)的內(nèi)容。4.答：使用watchPosition方法可以持續(xù)獲取用戶的當?shù)氐乩砦恢眯畔?，它會定期地自動獲取。watchPosition方法的使用格式如下：intwatchCurrentPosition(onSuccess,onError,options);該方法參數(shù)的說明和使用與getCurrentPosition方法相同。調(diào)用該方法后會返回一個數(shù)字，這個數(shù)字的用法與JavaScript腳本中setInterval方法的返回值用法類似，可以被clearWatch方法使用，以停止對當前地理位置信息的監(jiān)視。5.請參考網(wǎng)上相關(guān)資料。第11章1.答：請參考“11.1.1CSS產(chǎn)生的原因”一節(jié)的內(nèi)容。2.答：參考“【例11-1】一個使用CSS樣式表現(xiàn)網(wǎng)頁外觀的例子”。3.答：參考“11.2了解CSS3新增特性”一節(jié)的內(nèi)容。4.答：參考“11.3CSS3兼容性速查”一節(jié)的內(nèi)容。第12章1.答：在CSS樣式表中，一般會書寫大量代碼，在大型網(wǎng)站中，樣式表中的代碼可能會達到幾千行。麻煩的是，當整個網(wǎng)站或整個Web應(yīng)用程序全部書寫好之后，需要針對樣式表進行修改時，在洋洋灑灑一大片CSS代碼之中，并沒有說明什么樣式服務(wù)于什么元素，只是使用了class屬性，然后在頁面中指定了元素的class屬性。但是，使用元素的class屬性有兩個缺點：第一，class屬性本身沒有語義，它純粹用來為CSS樣式服務(wù)，屬于多余屬性；第二，如果使用class屬性，并沒有把樣式和元素綁定起來，針對同一個class屬性，文本框也可以使用，下拉框也可以使用，甚至按鈕也可以使用，這樣其實是非?；靵y的，修改樣式時也很不方便。所以，在CSS3中，提倡使用選擇器來將樣式和元素直接綁定起來，這樣一來，在樣式表中什么樣式與什么元素相配一目了然，修改起來很方便。不僅如此，通過選擇器，還可以實現(xiàn)各種復雜的制定，同時還能大量減少樣式表的代碼書寫量，最終書寫出來的樣式表也變得簡潔明了。2．答：CSS3在此基礎(chǔ)上新增加了3個屬性選擇器，與已經(jīng)定義的4個屬性選擇器構(gòu)成了強大的標簽屬性過濾器。E[foo^="bar"]：選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值包含前綴為“bar”的子字符串。例如，body[lang^="en"]匹配<bodylang="en-us"><body>，而不匹配<bodylang="fr-argot"><body>。E[foo$="bar"]：選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值包含后綴為“bar”的子字符串。例如，img[src$="jpg"]匹配<imgsrc="pic.jpg"/>，而不匹配<imgsrc="pic.gif"/>。E[foo*="bar"]：選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值包含“bar”的子字符串。例如，img[src*="jpg"]匹配<imgsrc="pic.jpg"/>，而不匹配<imgsrc="pic.gif"/>。3.答：仿照“【例12-1】為不同類型的鏈接添加不同的顯示圖標”的操作。4.答：參考“12.3結(jié)構(gòu)偽類選擇器”一節(jié)的內(nèi)容。5.答：參考“12.4UI元素狀態(tài)偽類選擇器”一節(jié)的內(nèi)容。第13章1.答：參考“13.1CSS3文本屬性概述”一節(jié)的內(nèi)容。2.答：參考“【例13-1】”的操作方法。3.答：參考“【例13-2】文字凹凸效果制作”的內(nèi)容。4.答：參考“13.2.4為文本指定多個陰影”一節(jié)的內(nèi)容。5.答：參考“【例13-4】給文本添加描邊效果”的內(nèi)容。6.答：參考“13.3.2文本溢出”一節(jié)的內(nèi)容。7.答：參考“13.4顏色模式”一節(jié)的內(nèi)容。第14章1.答：在CSS3中，可以使用border-colors屬性來實現(xiàn)多色邊框，使得開發(fā)人員可以更加靈活地設(shè)置邊框的顏色。border-colors屬性的基本語法如下：-moz-border-top-colors:顏色值;-moz-border-right-colors:顏色值;-moz-border-bottom-colors:顏色值;-moz-border-left-colors:顏色值;例如：#div1{width:200px;height:100px;border-width:8px;border-style:solid;-moz-border-top-colors:#D0EDFD#B8E4FD#9DD9FC#8DD4FC#71C9FC#4ABBFC#1DACFE#00A2FF;-moz-border-right-colors:#D0EDFD#B8E4FD#9DD9FC#8DD4FC#71C9FC#4ABBFC#1DACFE#00A2FF;-moz-border-bottom-colors:#D0EDFD#B8E4FD#9DD9FC#8DD4FC#71C9FC#4ABBFC#1DACFE#00A2FF;-moz-border-left-colors:#D0EDFD#B8E4FD#9DD9FC#8DD4FC#71C9FC#4ABBFC#1DACFE#00A2FF;}2.答：在CSS3中，可以使用border-image屬性為邊框添加背景圖片。border-image屬性的最簡單的使用方法如下：border-image:url(圖像文件的路徑)ABCD平鋪方式;例如：.border_image{width:400px;height:100px;border:1emdoubleorange;border-image:url(img/border.png)27round;}3.答：在CSS3中，可以使用border-radius屬性為元素添加圓角效果。語法格式如下：border-radius:長度值;例如：#div1{width:100px;height:50px;border:1pxsolidgray;border-radius:10px;}4.答：box-shadow是給對象實現(xiàn)圖層陰影效果的。其語法格式如下：box-shadow屬性的使用語法如下：E{box-shadow:<length><length><length>?<length>?||<color>}也就是：E{box-shadow:insetx-offsety-offsetblur-radiusspread-radiuscolor}例如：

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論