HTML5期末考试题型Word文件下载.docx
- 文档编号:21906156
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:17
- 大小:354.53KB
HTML5期末考试题型Word文件下载.docx
《HTML5期末考试题型Word文件下载.docx》由会员分享,可在线阅读,更多相关《HTML5期末考试题型Word文件下载.docx(17页珍藏版)》请在冰豆网上搜索。
A.圆半径,圆心X坐标,圆心Y坐标,开始角度,结束角度,是否顺时针trun逆时针
B.圆心Y坐标,圆心X坐标,圆半径,开始角度,结束角度,是否顺时针
C.圆心X坐标,圆心Y坐标,圆半径,开始角度,结束角度,是否顺时针
D.圆心X坐标,圆心Y坐标,圆半径,开始角度,结束角度,是否逆时针
9.读取localStorage数据的方法是:
(B)
A.("
键值"
);
B.("
键名"
C.("
"
10.在一个<
img>
标记中决定图片文件位置的是哪个属性:
(C)
A:
altB:
titleC:
srcD:
href
11.Canvas用于填充颜色的属性是:
(A)
A.fillStyle填充色
B.fillRect
C.lineWidth线条宽度
D.strokeRect
12.不是HTML5特有的存储类型是:
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>
html>
head>
metacharset="
utf-8"
>
title>
无标题文档<
/title>
/head>
body>
网页内容
/body>
/html>
2.分别写出HTML5新增的语义标签及作用
答:
元素名
作用
section
表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。
它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用标记文档结构。
article
表示页面中的一块与上下文不相关的独立内容,例如博客中的一篇文章。
aside
表示article元素内容之外的,与article元素内容相关的辅助信息。
header
表示页面中一个内容区块或整个页面的标题。
hgroup
用于整个页面或页面中一个内容区块的标题进行组合。
footer
表示整个页面或页面中一个内容区块的脚注。
一般来说,它会包含创作者的姓名,创建日期及创作者联系信息。
nav
表示页面中导航链接的部分
figure
表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,使用figcaption元素为figure元素组添加标题。
audio>
标记定义音频内容
canvas>
标记定义图片
command>
标记定义一个命令按钮
datalist>
标记定义一个下拉列表
details>
标记定义一个元素的详细内容
dialog>
标记定义一个对话框(会话框)
embed>
标记定义外部的可交互的内容或插件
keygen>
标记定义表单里一个生成的键值
mark>
标记定义有标记的文本
meter>
标记定义measurementwithinapredefinedrange
output>
标记定义一些输出类型
progress>
标记定义任务的过程
rp>
标记是用在Rubyannotations告诉那些不支持Ruby元素的浏览器如何去显示
rt>
标记定义对rubyannotations的解释
ruby>
标记定义rubyannotations.
section>
标记定义一个区域
source>
标记定义媒体资源
time>
标记定义一个日期/时间
video>
标记定义一个视频
3.简述<
form>
标记中method和action属性的作用。
method属性作用是将表单数据从客户端传送到服务器的方法,分别
为post和get方法,post方法比较安全和常用;
action属性作用是指定处
理表单的服务端程序,可以是程序或脚本的一个完整URL。
4.HTML5中新增了类型的新表单元素?
作用分别是什么?
类型:
text:
设置单行文本框元素
email:
表示当前input标签接受一个邮箱的输入
tel:
接受电话输入
url:
只接受输入网址
nunber:
表示当前标签只接受数字类型输入
rang:
设置滑块控件元素
clolr:
颜色选择
date:
日期选择器类型
password:
设置密码元素
file:
设置文件元素
hidden:
设置隐藏元素,不会被浏览者看到,用于在不同页面中传递域中所设定的值
radio:
设置单选框元素
checkbox:
设置复选框元素
button:
设置普通按钮元素
submit:
设置提交按钮元素
reset:
设置重置按钮元素
Image:
设置图像域(图像按钮)元素
5.写出HTML5表单中新增的属性及其作用。
【属性:
作用】
min和max:
HTML5新增加的属性,表示当前输入框输入的最小和最大值
step:
HTML5新增加的属性,是步长的意思,也就是在点击增大或者减小的时候的增加或减少的步长
placeholder,提示信息
autocomplete:
form或input域是否拥有自动完成功能(值为on和off)。
适用于以下类型的<
标签:
text,search,url,telephone,email,password,datepickers,range以及color。
autofocus:
页面加载时,域自动地获得焦点。
适用所有<
标签的类型。
max、min、step:
适用以下类型的<
datepickers、number以及range。
placeholder:
提示信息属性。
multiple:
输入域中可选择多个值,用于文件上传控件,设置此属性后,允许上传多个文件。
email和file。
required:
当前文本框在提交前必须有数据输入。
text,search,url,telephone,email,password,datepickers,number,checkbox,radio以及file。
pattern:
规定用于验证输入字段的模式。
pattern属性适用于以下类型的<
text,search,url,telephone,email以及password。
6.Canvas中画圆形、画矩形边框、画位图分别用什么方法
答:
arc、stokeRect、drawImage。
7.什么是拖放?
拖放可以分为两个动作,即拖拽(drag)和放开(drop)。
拖拽(drag):
移动鼠标到指定对象,按下左键,然后拖动。
放开(drop):
放开鼠标左键,放下对象。
8.行内样式表、内部样式表和外部样式表分别在HTML页面的什么位置引用?
如何引用?
在HTML文档中应用CSS有三种样式表,分别是:
行内样式表、内部样式表和外部样式表。
其中最常用的是内部样式表和外部样式表。
1)内部样式表:
在网页中可以使用style元素定义一个内部样式表,指定该网页内元素的CSS样式,内部样式一般添加到头部。
在style元素中通常可以使用type属性定义内容的类型(一般取值"
text/css"
)。
格式如下:
STYLEtype="
……
/STYLE>
2)外部样式表:
1 含义:
在HTML文档中可以使用<
link>
元素引用外部样式表。
元素的属性有:
href(指定被链接文档【样式表文件】的位置)、hreflang(指定在被链接文档中的文本的语言)、rel(指定当前文档与被链接文档之间的关系。
stylesheet,指向要导入的样式表的
URL;
)、media(指定被链接文档将被显示在什么设备上。
all,默认值,适用于所有设备;
)、type(指定被链接文档的
MIME
类型)
外部样式表种类:
一种是文件专门是布局用的样式,另一种是添加外部内容的样式一般命名为
2 添加外部样式表有多种方法:
本实验介绍用到的其中一种方法,第一步:
选择菜单栏中的文件功能-选择新建CSS-命名;
第二步:
选择菜单栏中的格式功能-css样式-添加附加css样式表-在弹出的链接外部样式表窗口中添加外部样式文件URL路径:
-点击确定。
在本次实验的注册页面就是采用外部样式表进行CSS样式设计,格式如下:
HEAD>
<
linkhref="
rel="
stylesheet"
type="
/HEAD>
添加外部内容的样式一般命名为,操作方法同上,格式如下:
linkrel="
href="
/>
3)行内样式表:
在HTML元素中使用style属性可以指定该元素的CSS样式,这种应用称为行内样式表。
直接在body标签中添加,如:
bodystyle="
background-color:
blue;
p>
网页的背景为蓝色<
/p>
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
分组选择器
就可以把这几个相同设定的选择器合并在一起,中间用逗号隔开
E>
子选择符
CSS2
选择所有作为E元素的子元素F。
E+F
相邻选择符
选择紧贴在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.选择器都有哪些类型,并且分别说明其作用及举例语法格式在HTML标签中使用的方法。
1)元素选择器
选择符类型版本简介
*通配符选择器CSS2所有元素对象。
E标签(HTML)选择器CSS1以HTML标签作为选择符。
E#myidid选择器CSS1以唯一标识符id属性等于myid的E对象作为选择符。
class选择器CSS1以class属性包含myclass的E对象作为选择符。
2)关系选择器
E,F分组选择器CSS1就可以把这几个相同设定的选择器合并在一起,中间用逗号隔开
EF包含(后代)选择器CSS1选择所有被E元素包含的F元素
F子选择器CSS2选择所有作为E元素的子元素F
E+F相邻选择器CSS2选择紧贴在E元素之后F元素
E~F兄弟选择符CSS3选择E元素所有兄弟元素F
3)伪类选择器
伪类用于向某些选择器添加特殊的效果。
伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。
选择符类型简介
a:
link链接伪类选择器设置超链接a在未被访问前的样式
visited链接伪类选择器设置超链接a在其链接地址已被访问过时的样式
E:
hover用户操作伪类选择器设置元素在其鼠标悬停时的样式
active用户操作伪类选择器设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式
focus用户操作伪类选择器设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式
lang():
lang()伪类选择器匹配使用特殊语言的E元素
选择符版本简介
rootCSS3匹配E元素在文档的根元素。
first-childCSS2匹配父元素的第一个子元素E。
last-childCSS3匹配父元素的最后一个子元素E。
only-childCSS3匹配父元素仅有的一个子元素E。
nth-child(n)CSS3匹配父元素的第n个子元素E。
nth-last-child(n)CSS3匹配父元素的倒数第n个子元素E。
first-of-typeCSS3匹配同类型中的第一个同级兄弟元素E。
last-of-typeCSS3匹配同类型中的最后一个同级兄弟元素E。
only-of-typeCSS3匹配同类型中的唯一的一个同级兄弟元素E。
nth-of-type(n)CSS3匹配同类型中的第n个同级兄弟元素E。
nth-last-of-type(n)CSS3匹配同类型中的倒数第n个同级兄弟元素E。
emptyCSS3匹配没有任何子元素(包括text节点)的元素E。
checkedCSS3匹配用户界面上处于选中状态的元素E。
(用于inputtype为radio与checkbox时)
enabledCSS3匹配用户界面上处于可用状态的元素E。
disabledCSS3匹配用户界面上处于禁用状态的元素E。
read-onlyCSS3匹配用户界面上处于只读状态的元素E
read-writeCSS3匹配用户界面上处于读写状态的元素E
3)属性选择器
4)伪元素选择器
13.HTML5用什么标记播放音频?
主要支持的音频格式有哪些?
标记:
;
格式:
mov、mp4、wav。
14.HTML5用什么标记播放视频?
主要支持的视频格式有哪些?
格式ogg、MPEG4、WebM、(注意:
flv不支持)。
15.简述什么是HTML5的WebStorage功能?
包括哪些技术?
它们的区别是什么?
HTML5新增一种非常重要的功能是可以在客户端本地存数据的WebStorage功能。
其中localStorage持久化本地存储,类似于Cookie,但没有有效期,除非主动删除
数据。
另一种sessionStorage用于本地存储一个会话中的数据,这些数据只在同一
个会话中的页面才能访问并且当会话结束后数据也随之销毁,类似于session。
四.编程题
1.编写一个form表单,实现一个学生信息输入。
包含学号、姓名、性别、爱好、出生年月等。
(注意首行缩进)
autocomplete<
formaction="
method="
get"
autocomplete="
on"
学号:
inputtype="
text"
name="
userid"
placeholder="
请输入学号"
autofocusrequired>
br/>
名字:
username"
请输入用户名"
off"
密码:
password"
psw"
请输入密码"
性别:
radio"
sex"
value="
男"
checked>
男
女"
女<
/br>
电话:
tel"
phone"
请输入电话号码"
邮箱:
email"
请输入注册邮箱"
>
生日:
date"
birthday"
兴趣爱好:
checkbox"
interser[]value="
篮球"
篮球
足球"
足球
舞蹈"
舞蹈
看电影"
看电影
颜色爱好:
1<
color"
2<
3<
建议:
textareaname="
suggeer"
rows="
3"
cols="
50"
请输入对本课程的建议
/textarea>
submit"
submitup"
提交"
/>
reset"
restup"
重交"
/form>
2.绘制一个边框为蓝色粗细为2个像素,填充为红色,宽和高分别是300,200的矩形。
要写出HTML5代码和相应的JavaScript代码。
画矩形<
canvasid="
myCanvas"
height=500width=500>
您的浏览器不支持canvas。
/canvas>
scripttype="
text/javascript"
functiondrawRect()
{
varc=("
//获取网页中的canvas对象
varctx=
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 期末考试 题型