HTML5期末考試題型

1、作業(yè)一.單項選項題1.以下哪個標(biāo)記用來建立一個有序列表：CA.B.C.D.2.在 HTML5 中,哪個元素用于組合標(biāo)題元素？DA.B.C.D.3.HTML5 中不再支持下面哪個元素？DPPT 查看其他不再支持元素A.JB.C.D.|4.新的 HTML5 全局屬性,contenteditable用于：BA.規(guī)定元素的上下文菜單.該菜單會在用戶點擊右鍵點擊元素時出現(xiàn).B.規(guī)定元素內(nèi)容是否是可編輯的.C.從效勞器升級內(nèi)容.D.返回內(nèi)容在字符串中首次出現(xiàn)的位置.5.HTML 新增一種非常重要的功能是可以在客戶端本地存數(shù)據(jù)的 WebStorage 功能.其中A持久化本地存儲,類似于 Cookie,但沒有

2、有效期,除非主動刪除數(shù)據(jù)：A.localStorageB.SessionStorage數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀,非持久化C.WebSQLD.創(chuàng)立可拖動的元素6 .在 HTML5 中,哪個屬性用于規(guī)定輸入字段是必填的？AA.requiredB.formvalidateC.validateD.placeholder7 .哪種輸入類型定義滑塊控件？DA.searchB.controlsC.sliderD.range8 .cxt.arc100,100,100,0,Math.PI*2,trueCanvas 繪制圓形的 arc 方法中,參數(shù)說明正確的選項是：DA.

3、圓半徑,圓心 X 坐標(biāo),圓心 Y 坐標(biāo),開始角度,結(jié)束角度,是否順時針 trun 逆時針B.圓心 Y 坐標(biāo),圓心 X 坐標(biāo),圓半徑,開始角度,結(jié)束角度,是否順時針C.圓心 X 坐標(biāo),圓心 Y 坐標(biāo),圓半徑,開始角度,結(jié)束角度,是否順時針D.圓心 X 坐標(biāo),圓心 Y 坐標(biāo),圓半徑,開始角度,結(jié)束角度,是否逆時針9 .讀取 localStorage 數(shù)據(jù)的方法是：BA. localStorage.getItem鍵值；B. localStorage.getItem鍵名;C. localStorage.loadItem鍵值；D.localStorage.loadItem鍵名;10 .在一個img標(biāo)記中

4、決定圖片文件位置的是哪個屬性：CA:altB:titleC:srcD:href11 .Canvas 用于填充顏色的屬性是：AA. fillStyle 填充色B. fillRectC. lineWidth 線條寬度D. strokeRect12 .不是 HTML5 寺有的存儲類型是：BA、localStorageBCookieCApplicationCache 應(yīng)用緩存DsessionStorage二、填空題1.在input標(biāo)簽中將 type 屬性設(shè)置為 radio 即可定義單項選擇按鈕.查看關(guān)于INPUT 標(biāo)記的屬性2.為了使元素可拖動,把 draggable 屬性設(shè)置為 true.3.在拖放

5、過程,開始拖動元素會觸發(fā) dragstar 事件,松開鼠標(biāo)時會觸發(fā) drop事件.元素拖動4.在 CSS3 中,可以使用 border-raidus 屬性實現(xiàn)圓角效果.盒子陰影透明度等新增的5.如下列圖為一個 border 為 1px 的 div 塊,總寬度為 300Px包括 border,陰影區(qū)為padding-left:50Px 左側(cè)內(nèi)邊距；,那么此 div 的 width 應(yīng)設(shè)置為 248px.moopx#moopx#、w w6 650pW50pW6.在 CSS3 中可以使用 transitaion 屬性和其他 CSS 屬性顏色、寬高、變形、位置等配合實現(xiàn)動畫效果.三、簡做題寫出標(biāo)準(zhǔn)的

6、html5 頁面結(jié)構(gòu).無標(biāo)題文檔網(wǎng)頁內(nèi)容分別寫出 HTML5W 增的語義標(biāo)簽及作用答：元素名作用section表示貝囿中的一個內(nèi)容區(qū)塊,比方章節(jié)、頁眉、貞腳或貝囿中的其他局部.它口以與 h1、h2、素結(jié)合起來使用標(biāo)記文檔結(jié)構(gòu).article表小貝面中的一塊與上卜文不相關(guān)的獨立內(nèi)容,例如廛客中的一描文草.aside表示 article 兀素內(nèi)谷之外的,與 article 兀素內(nèi)谷相關(guān)的輔助信息.header表示貝囿中一個內(nèi)容區(qū)塊或整個貝囿的標(biāo)題.hgroup附于整個貝回或貝囿中一個內(nèi)容區(qū)塊的標(biāo)題進行組合.footer表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注.一般來說,它會包含創(chuàng)作者的姓名,創(chuàng)立日期

7、及nav表小貝囿中導(dǎo)航鏈接的局部figure表示一段獨立的流內(nèi)容,示文檔主體流內(nèi)容中的一個獨立單元,使用 figcaption 元素題.標(biāo)記定義音頻內(nèi)容標(biāo)記定義圖片標(biāo)記定義一個命令按鈕標(biāo)記定義一個下拉列表標(biāo)記定義一個元素的詳細內(nèi)容1.2.標(biāo)記定義一個對話框會話框標(biāo)記定義外部的可交互的內(nèi)容或插件標(biāo)記定義表單里一個生成的鍵值標(biāo)記定義有標(biāo)記的文本標(biāo) t 己定義 measurementwithinapredefinedrange標(biāo)記定義一些輸出類型標(biāo)記定義任務(wù)的過程標(biāo)記是用在 Rubyannotations 告訴那些不支持 Ruby 元素的瀏覽器如何去顯示標(biāo)記定義對 rubyannotations 的

8、解釋標(biāo)記定義 rubyannotations.標(biāo)記定義一個區(qū)域標(biāo)記定義媒體資源標(biāo)記定義一個日期/時間標(biāo)記定義一個視頻3 .簡述標(biāo)記中 method 和 action 屬性的作用.答：method 屬性作用是將表單數(shù)據(jù)從客戶端傳送到效勞器的方法,分別為 post 和 get 方法,post 方法比擬平安和常用；action 屬性作用是指定處理表單的效勞端程序,可以是程序或腳本的一個完整 URL4 .HTML 井新增了類型的新表單元素？作用分別是什么？答：類型：作用text：設(shè)置單行文本框元素email：表示當(dāng)前 input 標(biāo)簽接受一個郵箱的輸入tel:接受輸入url:只接受輸入網(wǎng)址nunber

9、：表示當(dāng)前標(biāo)簽只接受數(shù)字類型輸入rang:設(shè)置滑塊控件元素clolr:顏色選擇date:日期選擇器類型password:設(shè)置密碼元素file:設(shè)置文件元素hidden:設(shè)置隱藏元素,不會被瀏覽者看到,用于在不同頁面中傳遞域中所設(shè)定的值radio:設(shè)置單項選擇框元素checkbox:設(shè)置復(fù)選框元素button:設(shè)置普通按鈕元素submit:設(shè)置提交按鈕元素reset:設(shè)置重置按鈕元素Image：設(shè)置圖像域圖像按鈕元素5 .寫出 HTML 減單中新增的屬性及其作用.答：【屬性：作用】min 和 max:HTML 麻增加的屬性,表示當(dāng)前輸入框輸入的最小和最大值step:HTML5 新增加的屬性,是步

10、長的意思,也就是在點擊增大或者減小的時候的增加或減少的步長placeholder,提示信息autocomplete:form 或 input 域是否擁有自動完成功能值為 on 和 off.適用于以下類型的標(biāo)簽：text,search,url,telephone,email,password,datepickers,range 以及 color.autofocus:頁面加載時,域自動地獲得焦點.適用所有標(biāo)簽的類型.maxmin、step:適用以下類型的標(biāo)簽：datepickers、number 以及 range.placeholder:提示信息屬性.multiple:輸入域中可選擇多個值,用于文

11、件上傳控件,設(shè)置此屬性后,允許上傳多個文件.適用于以下類型的標(biāo)簽：email 和 file.required:當(dāng)前文本框在提交前必須有數(shù)據(jù)輸入.適用于以下類型的標(biāo)簽：text,search,url,telephone,email,password,datepickers,number,checkbox,radio 以及 file.pattern:規(guī)定用于驗證輸入字段的模式.pattern 屬性適用于以下類型的標(biāo)簽：text,search,url,telephone,email 以及 password.6 .Canvas 中畫圓形、畫矩形邊框、畫位圖分別用什么方法答：arc、stokeRect、

12、drawlmage.7 .什么是拖放？答：拖放可以分為兩個動作,即拖拽drag和放開drop.拖拽drag:移動鼠標(biāo)到指定對象,按下左鍵,然后拖動.放開drop:放開鼠標(biāo)左鍵,放下對象.8 .行內(nèi)樣式表、內(nèi)部樣式表和外部樣式表分別在 HTMLX 面的什么位置引用？如何引用?答：在 HTM 戊檔中應(yīng)用 CSS 有三種樣式表,分別是：行內(nèi)樣式表、內(nèi)部樣式表和外部樣式表.其中最常用的是內(nèi)部樣式表和外部樣式表.1內(nèi)部樣式表：在網(wǎng)頁中可以使用 style 元素定義一個內(nèi)部樣式表,指定該網(wǎng)頁內(nèi)元素的CSS 樣式,內(nèi)部樣式一般添加到頭部.在 style 元素中通常可以使用 type 屬性定義內(nèi)容的類型一般取

13、值text/css.格式如下：2外部樣式表：1含義：在 HTM 戊檔中可以使用元素引用外部樣式表.元素的屬性有:href指定被鏈接文檔【樣式表文件】的位置、hreflang指定在被鏈接文檔中的文本的語言、rel指定當(dāng)前文檔與被鏈接文檔之間的關(guān)系.stylesheet,指向要導(dǎo)入的樣式表的 URL、media指定被鏈接文檔將被顯示在什么設(shè)備上.all,默認值,適用于所有設(shè)備；、type指定被鏈接文檔的 MIME 類型外部樣式表種類：一種是 layout.css 文件專門是布局用的樣式,另一種是添加外部內(nèi)容的樣式一般命名為 style.css2添加外部樣式表有多種方法：本實驗介紹用到的其中一種方法

14、,第一步：選擇菜單欄中的文件功能-選擇新建 CSS-命名 layout.css;第二步：選擇菜單欄中的格式功能-css 樣式-添加附加 css 樣式表-在彈出的鏈接外部樣式表窗口中添加外部樣式文件 URLM徑：layout.css-點擊確定.在本次實驗的注冊頁面就是采用外部樣式表進行 CSS 樣式設(shè)計,格式如下：添加外部內(nèi)容的樣式一般命名為 style.css,操作方法同上,格式如下：3行內(nèi)樣式表：在 HTME 素中使用 style 屬性可以指定該元素的 CSS 樣式,這種應(yīng)用稱為行內(nèi)樣式表.直接在 body 標(biāo)簽中添加,如：網(wǎng)頁的背景為藍色9 .CSS 中的 padding、margin 和

15、 float 各表示什么屬性中英文背答：分別表示：內(nèi)填充、外邊距、浮動.10 .簡單描述一下什么是 css 盒子模型答：CSS 合 HTML素都賦予了內(nèi)容(content)、內(nèi)填充(padding)、邊框(border)和外邊距(margin)屬性,這些屬性形成 CSS 盒模型.整個盒模型在頁面中所占的寬度是由左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界組成.11 .簡述 CSS 珀哪些新特性？-HSL 顏色表現(xiàn)方法.1)八大屬性：圓角效果(border-radius)多彩邊框陰影(box-shadow)背景圖片尺寸(background-size)多歹 U(column-count)

16、嵌入字體(font-face)透明度(opacity)HSL 和 HSLAa 色表現(xiàn)方法2)四大類(關(guān)系選擇器、偽類選擇器、屬性選擇器、偽元素選擇器)關(guān)系選擇器選擇符名稱版本簡介EF包含選擇符CSS1選擇所有被 E 元素包含的 F 元素.就可以把這幾個相同設(shè)定的選擇器合并在一起,中間用逗號隔E,F分組選擇器CSS1開EF子選擇符CSS2選擇所有作為 E 元素的子元素 F.E+F相鄰選擇符CSS2選擇緊貼在 E 元素之后 F 元素.EF兄弟選擇符CSS3選擇 E 元素所有兄弟元素 F.偽類選擇器a.結(jié)構(gòu)性偽類選擇器符版本簡介E E：rootrootCSSSIffiETLIffiETL素在戲的根兀

17、素.E:first-childCSS2CSS2四配父元素的第*元素E.E.E:last-childE:last-childCSSSCSSSE615E615沅釉m m子蒜E.E.E E：on1-childon1-childcsss喳痂t t怖的 Y 子謹E E.E E：DthhLld(a)DthnCSS3簡介設(shè)置對象內(nèi)的第 T 字符的樣式.設(shè)置對象內(nèi)的擔(dān)一右的樣式設(shè)置在刈空前依據(jù)對象樹的邏情結(jié)構(gòu)發(fā)生的內(nèi)容.用來JUJU屬性一起使用設(shè)置在對象后依據(jù)對象樹的邏輯結(jié)構(gòu)發(fā)生的內(nèi)容.用來和3 3屬性一使用設(shè)置對象疫選時的顏色taansition、animation)transform 字面上就是變形,改變

18、的意思.在包括以下幾種：旋轉(zhuǎn) rotate、扭曲 skew、縮放 scale 和移動 translate 以及矩陣變形 matrix.Animation 只應(yīng)用在頁面上已存在的 DO 雨素上,我們使用 CSS3的 Animation 制作動畫我們可以省去復(fù)雜的 js,jquery 代碼.12.CSS3.0 選擇器都有哪些類型,并且分別說明其作用及舉例語法格式在 HTML 標(biāo)簽中使用的方法.1元素選擇器選擇符類型版本簡介*通配符選擇器 CSS2 所有元素對象.E 標(biāo)簽HTML選擇器 CSS1 以 HTML 標(biāo)簽作為選擇符.E#myidid 選擇器 CSS1 以唯一標(biāo)識符 id 屬性等于 myid

19、 的 E 對象作為選擇符.E.myclassclass 選擇器 CSS1 以 class 屬性包含 myclass 的 E 對象作為選擇符.2關(guān)系選擇器選擇符類型版本簡介E,F 分組選擇器 CSS1 就可以把這幾個相同設(shè)定的選擇器合并在一起,3偽類選擇器偽類用于向某些選擇器添加特殊的效果.偽類對元素進行分類是基于特征而不是它們的名字、屬性或者內(nèi)容.選擇符類型簡介a:link 鏈接偽類選擇器設(shè)置超鏈接 a 在未被訪問前的樣式a:visited 鏈接偽類選擇器設(shè)置超鏈接 a 在其鏈接地址已被訪問過時的樣式E:hover 用戶操作偽類選擇器設(shè)置元素在其鼠標(biāo)懸停時的樣式E:active 用戶操作偽類選

20、擇器設(shè)置元素在被用戶激活在鼠標(biāo)點擊與釋放之間發(fā)生的CSS3 中 transform 主要中間用逗號隔開EF 包含后代選擇器CSS1 選擇所有被 E 元素包含的 F 元素EF 子選擇器CSS2 選擇所有作為 E 元素的子元素 FE+F相鄰選擇器CSS2選擇緊貼在 E 元素之后 F 元素兄弟選擇符CSS3選擇 E 元素所有兄弟元素 F事件)時的樣式E:focus 用戶操作偽類選擇器設(shè)置元素在成為輸入焦點(該元素的 onfocus 事件發(fā)生)時的樣式E:lang():lang()偽類選擇器匹配使用特殊語言的 E 元素 a.結(jié)構(gòu)性偽類選擇器選擇符版本簡介E:first-childCSS2 匹配父元素的

21、第一個子元素 E.CSS3 匹配同類型中的唯一的一個同級兄弟元素 E.E:nth-of-type(n)CSS3 匹配同類型中的第 n 個同級兄弟元素 E.E:nth-last-of-type(n)CSS3 匹配同類型中的倒數(shù)第 n 個同級兄弟元素 E.E:emptyCSS3 匹配沒有任何子元素(包括 text 節(jié)點)的元素 E.b.UI 元素狀態(tài)偽類選擇器選擇符版本簡介E:checkedCSS3匹配用戶界面上處于選中狀態(tài)的元素與checkbox時)E:enabledCSS3 匹配用戶界面上處于可用狀態(tài)的元素 E.E:disabledCSS3 匹配用戶界面上處于禁用狀態(tài)的元素 E.3)屬性選擇器

22、選擇符版本簡介E:rootCSS3匹配 E 元素在文檔的根元素.E:last-childCSS3 匹配父元素的最后一個子元素 E.E:only-childCSS3E:nth-child(n)CSS3匹配父元素僅有的一個子元素 E匹配父元素的第 n 個子元素 E.E:nth-last-child(n)CSS3匹配父元素的倒數(shù)第 n 個子元素 EE:first-of-typeCSS3匹配同類型中的第一個同級兄弟元素 E.E:last-of-typeCSS3 匹配同類型中的最后一個同級兄弟元素 EE:only-of-typeE.(用于 inputtype 為 radioE:read-onlyCSS3

23、匹配用戶界面上處于只讀狀態(tài)的元素 EE:read-writeCSS3 匹配用戶界面上處于讀寫狀態(tài)的元素 EE:checkedCSS3 匹配用戶界面上處于選中狀態(tài)的元素 E.用于 inputtype 為 radio 與 checkbox 時E:enabledCSS3 匹配用戶界面上處于可用狀態(tài)的元素 E.E:disabledCSS3 匹配用戶界面上處于禁用狀態(tài)的元素 E.E:read-onlyCSS3 匹配用戶界面上處于只讀狀態(tài)的元素 EE:read-writeCSS3 匹配用戶界面上處于讀寫狀態(tài)的元素 E4偽元素選擇器選擇符版本簡介E:checkedCSS3 匹配用戶界面上處于選中狀態(tài)的元素

24、E.用于 inputtype 為 radio與 checkbox 時E:enabledCSS3 匹配用戶界面上處于可用狀態(tài)的元素 E.E:disabledCSS3 匹配用戶界面上處于禁用狀態(tài)的元素 E.E:read-onlyCSS3 匹配用戶界面上處于只讀狀態(tài)的元素 EE:read-writeCSS3 匹配用戶界面上處于讀寫狀態(tài)的元素 E13.HTML5I 什么標(biāo)記播放音頻？主要支持的音頻格式有哪些？答：標(biāo)記：;格式：mov、mp4、wav.14.HTML5I 什么標(biāo)記播放視頻？主要支持的視頻格式有哪些？答：標(biāo)記：;格式 ogg、MPEG4WebM注意：Hv 不支持.15.簡述什么是 HTML

25、5 勺 WebStorage 功能？包括哪些技術(shù)？它們的區(qū)別是什么？答：HTML 新增一種非常重要的功能是可以在客戶端本地存數(shù)據(jù)的 WebStorage 功能.其中 localStorage 持久化本地存儲,類似于 Cookie,但沒有有效期,除非主動刪除數(shù)據(jù).另一種sessionStorage用于本地存儲一個會話中的數(shù)據(jù),這些數(shù)據(jù)只在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀,類似于 session.四.編程題1.編寫一個 form 表單,實現(xiàn)一個學(xué)生信息輸入.包含學(xué)號、姓名、性別、愛好、出生年月等.注意首行縮進答:autocomplete學(xué)號：名字：密碼：性另1J：男女：郵箱：生日：興趣愛好：inputtype=checkboxname=interser 口 value=inputtype=checkboxname=interservalue