HTML5期末考试题型.docx - 冰豆网
HTML5期末考试题型.docx
- 文档编号:23383506
- 上传时间:2023-05-16
- 格式:DOCX
- 页数:21
- 大小:355.09KB
HTML5期末考试题型.docx
《HTML5期末考试题型.docx》由会员分享,可在线阅读,更多相关《HTML5期末考试题型.docx(21页珍藏版)》请在冰豆网上搜索。
HTML5期末考试题型
作业
一.单项选项题
1.以下哪个标记用来建立一个有序列表:
(C)
A。
〈ni〉B。
〈ul>C.〈ol〉D.
2.在 HTML5 中,哪个元素用于组合标题元素?
(D)
A。
B.〈header〉
C.〈headings>
D。
〈hgroup〉
3.HTML5 中不再支持下面哪个元素?
(D) PPT查看其他不再支持元素
A.〈q〉
B。
C.〈menu〉
D.〈font〉
4.新的 HTML5 全局属性,"contenteditable” 用于:
(B)
A。
规定元素的上下文菜单。
该菜单会在用户点击右键点击元素时出现。
B。
规定元素内容是否是可编辑的。
C.从服务器升级内容。
D。
返回内容在字符串中首次出现的位置.
5.HTML5新增一种非常重要的功能是可以在客户端本地存数据的WebStorage功能。
其中(A)持久化本地存储,类似于Cookie,但没有有效期,除非主动删除数据:
A.localStorage
B.SessionStorage(数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,非持久化)
C。
WebSQL
D。
创建可拖动的元素
6.在 HTML5 中,哪个属性用于规定输入字段是必填的?
(A)
A。
required
B.formvalidate
C.validate
D。
placeholder
7.哪种输入类型定义滑块控件?
(D)
A。
search
B.controls
C.slider
D。
range
8.cxt。
arc(100,100,100,0,Math.PI*2,true)Canvas绘制圆形的arc方法中,参数说明正确的是:
(D)
A。
圆半径,圆心X坐标,圆心Y坐标,开始角度,结束角度,是否顺时针trun逆时针
B.圆心Y坐标,圆心X坐标,圆半径,开始角度,结束角度,是否顺时针
C.圆心X坐标,圆心Y坐标,圆半径,开始角度,结束角度,是否顺时针
D。
圆心X坐标,圆心Y坐标,圆半径,开始角度,结束角度,是否逆时针
9.读取localStorage数据的方法是:
(B)
A。
localStorage.getItem("键值");
B。
localStorage.getItem(”键名”);
C.localStorage。
loadItem("键值”);
D.localStorage.loadItem("键名");
10.在一个
(C)
A:
altB:
titleC:
srcD:
href
11.Canvas用于填充颜色的属性是:
(A)
A.fillStyle填充色
B。
fillRect
C。
lineWidth线条宽度
D。
strokeRect
12.不是HTML5特有的存储类型是:
(B)
A、localStorage
B、Cookie
C、ApplicationCache应用缓存
D、sessionStorage
二、填空题
1.在〈input>标签中将type属性设置为radio即可定义单选按钮。
查看关于INPUT标记的属性
2.为了使元素可拖动,把draggable属性设置为true.
3.在拖放过程,开始拖动元素会触发dragstar事件,松开鼠标时会触发drop事件。
元素拖动
4.在CSS3中,可以使用border—raidus属性实现圆角效果.盒子阴影透明度等新增的
5.如下图为一个border为1px的div块,总宽度为300px(包括border),阴影区为padding-left:
50px左侧内边距;,那么此div的width应设置为248px。
6.在CSS3中可以使用transitaion属性和其他CSS属性(颜色、宽高、变形、位置等)配合实现动画效果。
三、简答题
1.写出标准的html5页面结构。
〈!
doctypehtml〉
〈head>
无标题文档〈/title〉
〈/head>
网页内容
〈/body〉
〈/html〉
2.分别写出HTML5新增的语义标签及作用
答:
元素名
作用
section
表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。
它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用标记文档结构.
article
表示页面中的一块与上下文不相关的独立内容,例如博客中的一篇文章。
aside
表示article元素内容之外的,与article元素内容相关的辅助信息.
header
表示页面中一个内容区块或整个页面的标题。
hgroup
用于整个页面或页面中一个内容区块的标题进行组合。
footer
表示整个页面或页面中一个内容区块的脚注。
一般来说,它会包含创作者的姓名,创建日期及创作者联系信息。
nav
表示页面中导航链接的部分
figure
表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,使用figcaption元素为figure元素组添加标题。
〈canvas〉 标记定义图片
〈command>标记定义一个命令按钮
9.CSS中的padding、margin和float各表示什么属性中英文背
答:
分别表示:
内填充、外边距、浮动.
10.简单描述一下什么是css盒子模型
答:
CSS给HTML元素都赋予了内容(content)、内填充(padding)、边框(border)和
外边距(margin)属性,这些属性形成CSS盒模型。
整个盒模型在页面中所占的
宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成。
11.简述CSS3有哪些新特性?
—
HSL颜色表现方法。
1)八大属性:
圆角效果(border—radius)
多彩边框
阴影(box—shadow)
背景图片尺寸(background-size)
多列(column-count)
嵌入字体(@font-face)
透明度(opacity)
HSL和HSLA颜色表现方法
2)四大类(关系选择器、伪类选择器、属性选择器、伪元素选择器)
1 关系选择器
选择符
名称
版本
简介
E F
包含选择符
CSS1
选择所有被E元素包含的F元素。
E,F
分组选择器
CSS1
就可以把这几个相同设定的选择器合并在一起,中间用逗号隔开
E>F
子选择符
CSS2
选择所有作为E元素的子元素F。
E+F
相邻选择符
CSS2
选择紧贴在E元素之后F元素.
E~F
兄弟选择符
CSS3
选择E元素所有兄弟元素F.
2 伪类选择器
a.结构性伪类选择器
b.UI元素状态伪类选择器
3 属性选择器
4 伪元素选择器
3)CSS添加了三个动画效果属性(transform、taansition、animation)
1 transform字面上就是变形,改变的意思。
在CSS3中transform主要
包括以下几种:
旋转rotate、扭曲skew、缩放scale和移动translate以
及矩阵变形matrix。
2 Animation只应用在页面上已存在的DOM元素上,我们使用CSS3
的Animation制作动画我们可以省去复杂的js,jquery代码.
12.CSS3.0选择器都有哪些类型,并且分别说明其作用及举例语法格式在HTML标签中使用的方法。
1)元素选择器
选择符类型版本简介
*通配符选择器CSS2所有元素对象.
E标签(HTML)选择器CSS1以HTML标签作为选择符。
E#myidid选择器CSS1以唯一标识符id属性等于myid的E对象作为选择符。
E.myclassclass选择器CSS1以class属性包含myclass的E对象作为选择符.
2)关系选择器
选择符类型版本简介
E,F分组选择器CSS1就可以把这几个相同设定的选择器合并在一起,中间用逗号隔开
EF包含(后代)选择器CSS1选择所有被E元素包含的F元素
E>F子选择器CSS2选择所有作为E元素的子元素F
E+F相邻选择器CSS2选择紧贴在E元素之后F元素
E~F兄弟选择符CSS3选择E元素所有兄弟元素F
3)伪类选择器
伪类用于向某些选择器添加特殊的效果。
伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。
选择符类型简介
a:
link链接伪类选择器设置超链接a在未被访问前的样式
a:
visited链接伪类选择器设置超链接a在其链接地址已被访问过时的样式
E:
hover用户操作伪类选择器设置元素在其鼠标悬停时的样式
E:
active用户操作伪类选择器设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式
E:
focus用户操作伪类选择器设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式
E:
lang():
lang()伪类选择器匹配使用特殊语言的E元素
a.结构性伪类选择器
选择符版本简介
E:
rootCSS3匹配E元素在文档的根元素。
E:
first—childCSS2匹配父元素的第一个子元素E。
E:
last—childCSS3匹配父元素的最后一个子元素E。
E:
only-childCSS3匹配父元素仅有的一个子元素E。
E:
nth—child(n)CSS3匹配父元素的第n个子元素E。
E:
nth—last-child(n)CSS3匹配父元素的倒数第n个子元素E。
E:
first—of-typeCSS3匹配同类型中的第一个同级兄弟元素E。
E:
last—of—typeCSS3匹配同类型中的最后一个同级兄弟元素E。
E:
only-of—typeCSS3匹配同类型中的唯一的一个同级兄弟元素E。
E:
nth—of-type(n)CSS3匹配同类型中的第n个同级兄弟元素E.
E:
nth—last-of-type(n)CSS3匹配同类型中的倒数第n个同级兄弟元素E。
E:
emptyCSS3匹配没有任何子元素(包括text节点)的元素E。
b.UI元素状态伪类选择器
选择符版本简介
E:
checkedCSS3匹配用户界面上处于选中状态的元素E.(用于inputtype为radio与checkbox时)
E:
enabledCSS3匹配用户界面上处于可用状态的元素E。
E:
disabledCSS3匹配用户界面上处于禁用状态的元素E。
E:
read-onlyCSS3匹配用户界面上处于只读状态的元素E
E:
read—writeCSS3匹配用户界面上处于读写状态的元素E
3)属性选择器
选择符版本简介
E:
checkedCSS3匹配用户界面上处于选中状态的元素E。
(用于inputtype为radio与checkbox时)
E:
enabledCSS3匹配用户界面上处于可用状态的元素E。
E:
disabledCSS3匹配用户界面上处于禁用状态的元素E。
E:
read—onlyCSS3匹配用户界面上处于只读状态的元素E
E:
read-writeCSS3匹配用户界面上处于读写状态的元素E
4)伪元素选择器
选择符版本简介
E:
checkedCSS3匹配用户界面上处于选中状态的元素E。
(用于inputtype为radio与checkbox时)
E:
enabledCSS3匹配用户界面上处于可用状态的元素E。
E:
disabledCSS3匹配用户界面上处于禁用状态的元素E。
E:
read-onlyCSS3匹配用户界面上处于只读状态的元素E
E:
read—writeCSS3匹配用户界面上处于读写状态的元素E
13.HTML5用什么标记播放音频?
主要支持的音频格式有哪些?
答:
标记:
mov、mp4、wav。
14.HTML5用什么标记播放视频?
主要支持的视频格式有哪些?
答:
标记:
〈video>;格式ogg、MPEG4、WebM、(注意:
flv不支持).
15.简述什么是HTML5的WebStorage功能?
包括哪些技术?
它们的区别是什么?
答:
HTML5新增一种非常重要的功能是可以在客户端本地存数据的WebStorage功能。
其中localStorage持久化本地存储,类似于Cookie,但没有有效期,除非主动删除
数据。
另一种sessionStorage用于本地存储一个会话中的数据,这些数据只在同一
个会话中的页面才能访问并且当会话结束后数据也随之销毁,类似于session。
四.编程题
1.编写一个form表单,实现一个学生信息输入.包含学号、姓名、性别、爱好、出生年月等.(注意首行缩进)
答:
doctypehtml〉
〈html>
〈metacharset="utf-8"〉
〈title〉autocomplete〈/title>
〈/head〉
〈formaction=””method=”get"autocomplete=”on”>
学号:
名字:
〈inputtype=”text”name="username”placeholder=”请输入用户名”autocomplete=”off">〈br/>
密码:
〈inputtype="password"name=”psw"placeholder="请输入密码">
性别:
〈inputtype=”radio”name=”sex”value=”男”checked〉男
〈inputtype=”radio"name="sex"value=”女"checked〉女〈/br>
电话:
〈inputtype="tel"name=”phone"placeholder="请输入电话号码”〉〈/br〉
邮箱:
〈inputtype=”email"name="email”placeholder="请输入注册邮箱”〉
生日:
〈inputtype="date"name=”birthday">
兴趣爱好:
〈inputtype=”checkbox"name=”interser[]value="篮球”〉篮球
〈inputtype=”checkbox”name="interser[]value=”舞蹈”>舞蹈
〈inputtype="checkbox"name="interser[]value="看电影">看电影
颜色爱好:
12
3
建议:
请输入对本课程的建议
〈/textarea>
〈inputtype=”submit"name=”submitup"value=”提交”/>
2.绘制一个边框为蓝色粗细为2个像素,填充为红色,宽和高分别是300,200的矩形。
要写出HTML5代码和相应的JavaScript代码.
答:
〈!
doctypehtml>
〈head>
〈title>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
HTML5
期末考试
题型
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。