HTML5期末考试题型_第1页
HTML5期末考试题型_第2页
HTML5期末考试题型_第3页
HTML5期末考试题型_第4页
HTML5期末考试题型_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、作业单项选项题1. 以下哪个标记用来建立一个有序列表：（C ）A. < ni> B. <ul> C. <ol> D. <dl>2. 在HTML5中，哪个元素用于组合标题元素？（ D）A.<group>B.<header>C.vheadi ngs>D.<hgroup>3. HTML5中不再支持下面哪个元素？（ D ）PPT查看其他不再支持元素A. <q>B. <i ns>C. vme nu>D. vfont>4. 新的HTML5全局属性，“contented计able”用

2、于：（B ）A.规定元素的上下文菜单。该菜单会在用户点击右键点击元素时出现。B.规定元素内容是否是可编辑的。C.从服务器升级内容。D.返回内容在字符串中首次出现的位置。5. HTML5新增一种非常重要的功能是可以在客户端本地存数据的WebStorage功能。其中（A）持久化本地存储，类似于Cookie，但没有有效期，除非主动删除数据：A. localstorageB. Sessi on Storage（数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，非持久化）C. WebSQLD.创建可拖动的元素6. 在HTML5中，哪个属性用于规定输入字段是必填的？（ A ）A. req

3、uiredB. formvalidateC. validateD. placeholder7. 哪种输入类型定义滑块控件？（ D ）A. searchB. co ntrolsC. sliderD. ra nge绘制圆形的arc方法中，参数说明8. ext.arc (100,100,100,0,Math.Pl*2,true) Canvas正确的是：(D )圆半径,圆trun逆时A.心X坐标，圆心Y坐标，开始角度，结束角度，是否顺时针8 .圆心丫坐标，圆心X坐标，圆半径，开始角度，结束角度，是否顺时针C.圆心X坐标，圆心Y坐标，圆半径，开始角度，结束角度，是否顺时针D.圆心X坐标，圆心Y坐标，圆半

4、径，开始角度，结束角度，是否逆时针9 .读取localstorage 数据的方法是：（ B ）A. localstorage.getltem C 键值"）；B. localstorage.getltem （" 键名”）；C. localstorage.loaditem （"键值"）;D. localstorage.loadltem C 键名”）;10 .在一个img标记中决定图片文件位置的是哪个属性：（ C ）A: alt B: title C: src D: href11 . Canvas用于填充颜色的属性是：（ A ）A. fillStyle 填充色

5、B. fillRectC. li neWidth线条宽度D. strokeRect12 .不是HTML5特有的存储类型是：（B ）A、localstorageB CookieC、Application Cache 应用缓存D sessi on Storage二、填空题1 .在input标签中将type属性设置为radio即可定义单选按钮。查看关于INPUT标记的属性2 .为了使元素可拖动，把draggable属性设置为true。3 .在拖放过程，开始拖动元素会触发 dragstar事件，松开鼠标时会触发drop事件。元素拖动4 .在CSS3中，可以使用border-raidus属性实现圆角效果

6、。盒子阴影透明度等新增的5 . 如下图为一个border为1px的div块，总宽度为300px （包括border ），阴影区为padding-left:50px左侧内边距；,那么此div的width应设置为248px 。SOOpx+.ISOpx*1属性和其他CSS属性（颜色、宽高、变形、6 . 在CSS3中可以使用transitaion位置等）配合实现动画效果。三、简答题1 .写出标准的html5页面结构。<!doctype html><html><head><meta charset="utf-8"><title&g

7、t;无标题文档v/title></head><body>网页内容</body></html>2 .分别写出HTML5新增的语义标签及作用答：兀素名作用sect ion表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它可以与hi >h2、素结合起来使用标记文档结构。article表不页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。aside表示article元素内容之外的，与article元素内容相关的辅助信息。header表不贝囿中一个内容区块或整个贝闻的标题。hgroup用于整个贝向或贝囿中一个内容区块

8、的标题进行组合。footer表不整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名，创建日期及nav表不页面中导航链接的部分figure表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素为题vaudio>标记定义音频内容<ca nvas>标记定义图片<comma nd>标记定义一个命令按钮<datalist>标记定义一个下拉列表<details>标记定义一个元素的详细内容<dialog>标记定义一个对话框（会话框）vembed>标记定义外部的可交互的内容或插件 <

9、;keyge n>标记定义表单里一个生成的键值<mark>标记定义有标记的文本<meter>标记定义 measurement within apredefined range<output>标记定义一些输出类型<progress>标记定义任务的过程<rp>标记是用在Ruby annotations告诉那些不支持Ruby元素的浏览器如何去显示<rt>标记定义对rubyannotations的解释<ruby>标记定义 ruby annotations.<secti on>标记定义一个区域<s

10、ource>标记定义媒体资源<time>标记定义一个日期/时间<video>标记定义一个视频3 .简述vform>标记中method和action属性的作用。答：method属性作用是将表单数据从客户端传送到服务器的方法，分别为post和get方法，post方法比较安全和常 用；action属性作用是指定处理表单的服务端程序，可以是程序或脚本的一个完整URL4 .HTML5中新增了类型的新表单元素？作用分别是什么？类型：作用text ：设置单行文本框元素email :表示当前in put标签接受一个邮箱的输入tel :接受电话输入url :只接受输入网址nu

11、nber ：表示当前标签只接受数字类型输入rang :设置滑块控件元素clolr :颜色选择date :日期选择器类型password ： 设置密码元素file:设置文件元素hidden ： 设置隐藏元素，不会被浏览者看到，用于在不同页面中传递域中所设定的值 radio :设置单选框元素checkbox :设置复选框元素butt on :设置普通按钮元素submit :设置提交按钮元素reset :设置重置按钮元素 Image :设置图像域（图像按钮）元素5 .写出HTML5表单中新增的属性及其作用。答：【属性：作用】min和max:HTML5新增加的属性，表示当前输入框输入的最小和最大值st

12、ep : HTML5新增加的属性，是步长的意思，也就是在点击增大或者减小的时候的增加或减少的步长placeholder，提示信息autocomplete : form或in put域是否拥有自动完成功能（值为on和off ）。适用于以 下类型的vinput>标签：text, search, url, teleph one, email, password, datepickers, range 以及 color。autofocus :页面加载时，域自动地获得焦点。适用所有<input> 标签的类型。max min、step :适用以下类型的 vinput> 标签：dat

13、e pickers、number 以及 range 。 placeholder ：提示信息属性。multiple :输入域中可选择多个值，用于文件上传控件，设置此属性后，允许上传多个文件。适用于以下类型的 vin put>标签：email和file。required :当前文本框在提交前必须有数据输入。适用于以下类型的vinput>标签：text, search, url, teleph one, email, password, date pickers, nu mber, checkbox, radio 以及 file。pattern ：规定用于验证输入字段的模式。patter

14、n属性适用于以下类型的<in put>标签：text, search, url, telepho ne, email以及 password 。6 .Canvas中画圆形、画矩形边框、画位图分别用什么方法答：arc、stokeRect、drawlmage。7 .什么是拖放？答：拖放可以分为两个动作，即拖拽（ drag ）和放开（drop ）。拖拽（drag ）：移动鼠标到指定对象，按下左键，然后拖动。放开（drop ）：放开鼠标左键，放下对象。8 .行内样式表、内部样式表和外部样式表分别在HTML页面的什么位置引用？如何引用？答：在HTML文档中应用CSS有三种样式表，分别是：行内样

15、式表、内部样式表和外部样式表。其中最常用的是内 部样式表和外部样式表。1）内部样式表：在网页中可以使用style元素定义一个内部样式表，指定该网页内元素的CSS样式，内部样式一般添加到头部。在Style元素中通常可以使用type属性定义内容的类型（一般取值“text/css”）。格式如下：<head><STYLE type = "text/css"></STYLE></head>2）外部样式表： 含义：在HTML文档中可以使用vlink>元素引用外部样式表。vlink>元素的属性有：href （指定被链接文档【样式

16、表文件】的位置）、hreflang （指定在被链接文档中的文本的语言）、回（指定当前文档与被链接文档之间的关系。stylesheet，指向要导入的样式表的URL ）、media （指定被链接文档将被显示在什么设备上。all，默认值，适用于所有设备；）'type （指定被链接文档的MIME类型）外部样式表种类：一种是layout.css文件专门是布局用的样式，另一种是添加外部内容的样式一般命名为style.css 添加外部样式表有多种方法：本实验介绍用到的其中一种方法，第一步：选择菜单栏中的文件功能选择新建CSS-命名layout.css ；第二步：选择菜单栏中的格式功能css样式添加附

17、加css样式表在弹出的链接外部样式表窗口中添加外部样式文件URL路径：layout.css 点击确定。在本次实验的注册页面就是采用外部样式表进行CSS样式设计，格式如下：<HEAD><li nk href="layout.css" rel=nstylesheer type=',text/cssu></HEAD>添加外部内容的样式一般命名为style.css，操作方法同上，格式如下：<HEAD><li nk rel=Mstylesheetu type=',text/cssn href=nstyle.cssn

18、 /></HEAD>3）行内样式表：在HTML元素中使用style属性可以指定该元素的CSS样式,，这种应用称为行内样式表。直接在body标签中添加，如：<body style="backgro un d-color: blue;”vp>网页的背景为蓝色v/p></body>9 . CSS中的padding、margin和float各表示什么属性 中英文背答：分别表示：内填充、 外边距、浮动。10 .简单描述一下什么是css盒子模型答：CSS给HTML元素都赋予了内容(content)、内填充(padding)、边框(border)和

19、外边距(margin)属性，这些属性形成CSS盒模型。整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成。11 .简述CSS3有哪些新特性？HSL颜色表现方法。1)八大属性：圆角效果(borderradius )多彩边框阴影(box-shadow)背景图片尺寸(backgrou nd-size )多歹！j(columncount )嵌入字体(£。讨42。6 )透明度(opacity )HSL和HSLA颜色表现方法2)四大类(关系选择器、伪类选择器、属性选择器、伪元素选择器)关系选择器选择符名称版本简介E F包含选择符CSS1选择所有被E元素包含的

20、F元素。E,F分组选择器CSS1就可以把这几个相同设定的选择器合并在一起，中间用逗号隔开E>F子选择符CSS2选择所有作为E元素的子元素F。E+F相邻选择符CSS2选择紧贴在E元素之后F元素。EF兄弟选择符CSS3选择E元素所有兄弟元素F。伪类选择器a.结构性伪类选择器版本蜀介E；n)(rtCSS3£兀素碗曲舐八Edlrst-chIMCSS2E： last-childCSS3的霸什子侯E ： on!-childCSSJU又有I子气E：nth<liLd(a)css?ER父元*的第介子元选择符版本,哈介E: checkedE:enAbledE: di cabledCSS3匹配

21、用户界面上处于选中状态的元素E.（用于 inpin typ 吧为 rpdio 与 checkbox 时）CSS3匹配用户界面上处于可用状态的元素E.CSS3Erread onlvE: read-writeCSS3CSS3匹配用户界面上处于禁用状态的元素E. 匹配用户界面上处于只读状态的元素E 匹配用户界面上处于读写状态的元素Eb. UI元素状态伪类选择器属性选择器伪元素选择器觐符版本CSS2具有触直性的E元素。E眄F>TCSS2瞬具有如属性且属性值等于讪的E元素。Ea ( (-=T»var CSS2卿具有吐属性且属性值为一用空格分隔的字词列JS,其中一承1 讪的E元素。Eart

22、 AvarjCSS3选择具有迫属性目属性值为以vatfrk的字符串的E元素EattS=nvaI1TCSS3选择具有抽属性性值为以V”第尾的字符串的E元素。Eart*=ftval,tCSS3选择具有册属性目属性值为包含“口的字符串的E兀素.EturKvilnCSS 2鞋具有砒tjg性且属性值为以讪开头并用连接符分隔的字符串 的E元素，3 CSS添力 )了三个动画效果属性(transform 、 CSS3中伪元素在以前的基础上增加了一个“严，即：first-letter;:! line,:b efore,: after,另外他还增加 了 一个：sei ec lion两个叭严和一个“产在m 口中主要

23、用来区分是伪类还是伪元素.这两种方式都 是被接受的。选择符E: first-let terAE:first-let terE: first-line AE:first-lineE:版本CSS3CSS5CSS3E: after/E:afterE:£electk>u简介设置对象内的马f字:看的样式。 设直刈象内的猫tl的样式设置在灯象斯（依据对象树的逻辑结构1发生的内客.用来Ju属性使用设置在对象后C依据对象树的逻辑结构）发生的 内容*用来和on属性一耙使再CSS3设置对象度选捋口寸的颜色taan siti on 、ani mati on )transform字面上就是变形，改变的

24、意思。在CSS3中transform主要包括以卜几种：旋转rotate '扭曲skew、缩放scale和移动translate以 及矩阵变形matrix。 Animation只应用在页面上已存在的DOM元素上，我们使用CSS3的Animation制作动画我们可以省去复杂的jsjquery代码。12. CSS3.0选择器都有哪些类型，并且分别说明其作用及举例语法格式在HTML标签中使用的方法。1）元素选择器选择符类型版本简介*通配符选择器CSS2所有元素对象。E标签（HTML）选择器CSS1以HTML标签作为选择符。E#myid id选择器CSS1以唯一标识符id属性等于myid的E对象

25、作为选择符。E.myclass class选择器CSS1以class属性包含myclass的E对象作为选择符。2）关系选择器选择符类型版本E,F分组选择器CSS1EF包含（后代）选择器简介中间用逗号隔开就可以把这几个相同设定的选择器合并在一 起.CSS1 选择所有被E兀素包含的F兀素E>F子选择器CSS2 选择所有作为E兀素的子兀素FE+F相邻选择器CSS2 选择紧贴在E兀素之后F兀素EF兄弟选择符CSS3 选择E兀素所有兄弟兀素F3）伪类选择器伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。选择符类型简介a：link链接伪类选择器设置超链

26、接a在未被访问前的样式a：visited链接伪类选择器设置超链接a在其链接地址已被访问过时的样式E:hover用户操作伪类选择器设置元素在其鼠标悬停时的样式Ewctive用户操作伪类选择器设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式设置元素在成为输入焦点（该元素的on focus事件发生）时E：f°cus用户操作伪类选择器的样式匹配使用特殊语言的E 元素E:la ng（）：la ng （）伪类选择器a.结构性伪类选择器选择符版本简介E:root CSS3匹配E兀素在文档的根兀素。E:first-childCSS2匹配父兀素的第一个子兀素E:last-childCSS

27、3匹配父兀素的最后一个子兀素E:o nly-childCSS3匹配父兀素仅有的一个子兀素E: nth-child( n)CSS3匹配父兀素的第n个子兀素E。E:nth-last-child(n) CSS3匹配父兀素的倒数第n个子兀素E:first-of-type CSS3匹配向类型中的第一个问级兄弟兀素E:last-of-typeCSS3匹配同类型中的最后一个同级兄弟兀素E:only-of-typeCSS3匹配同类型中的唯一的一个何级兄弟兀素E。E: nth-of-type( n)E:n th-last-of- type( n)E:empty CSS3CSS3匹配向类型中的第n个同级兄弟兀素E

28、。CSS3 匹配同类型中的倒数第n个同级兄弟兀素E匹配没有任何子兀素（包括text节点）的兀素b.UI元素状态伪类选择器选择符版本简介E:checked CSS3匹配用户界面上处于选中状态的元素E。（用于in put type与 checkboxE:en abledCSS3匹配用户界面上处于可用状态的元素E。E:disabledCSS3匹配用户界面上处于禁用状态的元素E。E:read-o nly CSS3匹配用户界面上处于只读状态的元素EE:read-write CSS3匹配用户界面上处于读写状态的元素E为 radio3）属性选择器选择符版本 简介E:checked CSS3匹配用户界面上处于

29、选中状态的元素E。（用于in put type 为radio与 checkbox 时）E:en abled CSS3匹配用户界面上处于可用状态的元素E。E:disabled CSS3匹配用户界面上处于禁用状态的元素E。E:read-o nly CSS3匹配用户界面上处于只读状态的元素EE:read-write CSS3匹配用户界面上处于读写状态的元素E4）伪元素选择器选择符版本简介E:checked CSS3匹配用户界面上处于选中状态的元素E。（用于in put type为radio与 checkbox 时）E:en abled CSS3匹配用户界面上处于可用状态的元素E。E:disabled

30、 CSS3匹配用户界面上处于禁用状态的元素E。E:read-o nly CSS3匹配用户界面上处于只读状态的元素EE:read-write CSS3匹配用户界面上处于读写状态的元素E13. HTML5用什么标记播放音频？主要支持的音频格式有哪些？答：标记：<audio> ；格式：mov、mp4、wav。14. HTML5用什么标记播放视频？主要支持的视频格式有哪些？答：标记：wide。；格式ogg、MPEG4 WebM （注意：flv不支持）。15. 简述什么是HTML5勺Web Storage功能？包括哪些技术?它们的区别是什么？答：HTML嘲增一种非常重要的功能是可以在客户端本

31、地存数据的Web Storage功能。其中localstorage持久化本地存储，类似于Cookie，但没有有效期，除非主动删除数据。另一种 sessi on Storage用于本地存储一个会话中的数据，这些数据只在同一个会话中的页面才能访问并且 当会话结束后数据也随之销毁，类似于session。四-编程题1 .编写一个form表单，实现一个学生信息输入。包含学号、姓名、性别、爱好、出生年月等。（注意首行缩进）答： v!doctype html><html><head> <meta charset=nutf-8n> <title>autoc

32、omplete</title></head><body><form acti on=HH method=Hget,f autocomplete=HonH>学号：<in put type=MtextM n ame=Huseridn placeholder='请输入字号” autofocusrequiredxbr/>名 字:vinput type="textHname='username" placeholder”请输入用户名”autocomplete=,offlxbr/>密石马：input ty

33、pe=npasswordH name=HpswH placeholder='请输入密码”>vbr7>性另 U： <input type=HradioH name=HsexH value=f, 男 checked> 男<in put type=HradioM n ame=HsexH value=H电话：<input type=HtelH name=Hphone,f placeholder'女“checked,女 </br>请输入电话号码”>v/br>由F箱T 曰 . I I a i i iv«i i iv i

34、i a v«i iplaceholder=" j青输入，主册由R箱” ></br>/卜目 <in put type=ndate,f n ame=nbirthdayHx/br>兴趣爱好：<in put type=ncheckboxH n ame=Hi nterser value=f,<in put type=McheckboxH n ame=Hi nterser value=' <in put type=HcheckboxH n ame=Hi nterser value=H <in put type=Hcheckb

35、oxf, n ame=Hi nterser value'颜色爱好:1<i nput type=,fcolorM>2<in put type=HcolorH>3<in put type=,'coloru></br>建议：<textarea n ame=nsuggeer" rows=,3" cols="50"> 请输入对本课程的建议</textareax/br><in put type=Hsubmitn n ame=nsubmitupn提交 H/>value-

36、,重交",<in put type=Hresetf, n ame=nrestup'f value*'2 .绘制一个边框为蓝色粗细为2个像素，填充为红色，宽和高分别是篮球、篮球足球 '1>足球舞蹈、 舞蹈看电影、看 电影300，200的矩形。要写出HTML5代码和相应的JavaScript代码。答:Vdoctype html><html><head><meta charset=Hutf-8H><title> 画矩形 </title></head> <body><canvas id="myCanvas" height=500 width=500> 您的浏览器不支持 canvas。</canvas><script type=wtext/javascript,f>function drawRect()获取网页中的canvas对象var c=document.getElementByld(HmyCanvasn); /var ctx=c.getContext(n2dfl); /获取canvas对象的2d上下文ctx.li neWidth = 2;/ct

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论