完整版HTML5期末考试题型Word下载.docx
《完整版HTML5期末考试题型Word下载.docx》由会员分享，可在线阅读，更多相关《完整版HTML5期末考试题型Word下载.docx（20页珍藏版）》请在冰点文库上搜索。
A.searchB.controlsC.sliderD.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.在一个<
img>
标记中决定图片文件位置的是哪个属性：
A:
altB:
titleC:
srcD:
href
11.Canvas用于填充颜色的属性是：
（A）
A.fillStyle填充色
B.fillRect
C.lineWidth线条宽度
D.strokeRect
12.不是HTML5特有的存储类型是：
A、localStorageB、Cookie
C、ApplicationCache应用缓存
D、sessionStorage
二、填空题
1.在<
input>
标签中将type属性设置为radio即可定义单选按钮。
查看关于
INPUT标记的属性
2.为了使元素可拖动，把draggable属性设置为true。
3.在拖放过程，开始拖动元素会触发dragstar事件，松开鼠标时会触发
drop事件。
元素拖动
4.在CSS3中，可以使用border-raidus属性实现圆角效果。
盒子阴影透明度
等新增的
如下图为一个border为1px的div块，总宽度为300px（包括border），阴影区为padding-left:
50px左侧内边距;
，那么此div的width应设置为248px。
6.在CSS3中可以使用transitaion属性和其他CSS属性（颜色、宽高、变形、
位置等）配合实现动画效果。
三、简答题
1.
<
!
doctypehtml>
html>
head>
metacharset="
utf-8"
>
title>
无标题文档<
/title>
/head>
body>
网页内容
/body>
/html>
写出标准的html5页面结构。
2.分别写出HTML5新增的语义标签及作用答：
元素名
作用
section
表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。
它可以与h1
等元素结合起来使用标记文档结构。
article
表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。
aside
表示article元素内容之外的，与article元素内容相关的辅助信息。
header
表示页面中一个内容区块或整个页面的标题。
hgroup
用于整个页面或页面中一个内容区块的标题进行组合。
footer
表示整个页面或页面中一个内容区块的脚注。
一般来说，它会包含创作者的姓名，创建日
nav
表示页面中导航链接的部分
figure
表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption
添加标题。
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表单中新增的属性及其作用。
【属性：
作用】
lmin和max:
HTML5新增加的属性，表示当前输入框输入的最小和最大值
lstep：
HTML5新增加的属性，是步长的意思，也就是在点击增大或者减小的时候的增加或减少的步长
lplaceholder，提示信息
lautocomplete：
form或input域是否拥有自动完成功能（值为on和off）。
适用于以下类型的<
标签：
text,search,url,telephone,email,password,datepickers,range以及color。
lautofocus：
页面加载时，域自动地获得焦点。
适用所有<
标签的类型。
lmax、min、step：
适用以下类型的<
标签：
datepickers、number以及
range。
lplaceholder：
提示信息属性。
lmultiple：
输入域中可选择多个值，用于文件上传控件，设置此属性后，允许上传多个文件。
适用于以下类型的<
email和file。
lrequired：
当前文本框在提交前必须有数据输入。
text,search,url,telephone,email,password,datepickers,number,checkbox,radio以及file。
lpattern：
规定用于验证输入字段的模式。
pattern属性适用于以下类型的<
标签：
text,search,url,telephone,email以及password。
6.Canvas中画圆形、画矩形边框、画位图分别用什么方法答：
arc、stokeRect、drawImage。
7.什么是拖放？
拖放可以分为两个动作，即拖拽（drag）和放开（drop）。
拖拽（drag）：
移动鼠标到指定对象，按下左键，然后拖动。
放开（drop）：
放开鼠标左键，放下对象。
8.行内样式表、内部样式表和外部样式表分别在HTML页面的什么位置引用？
如何引用？
答：
在HTML文档中应用CSS有三种样式表，分别是：
行内样式表、内部样式表
和外部样式表。
其中最常用的是内部样式表和外部样式表。
1）
STYLEtype="
text/css"
……
/STYLE>
内部样式表：
在网页中可以使用style元素定义一个内部样式表，指定该网页内元素的CSS样式，内部样式一般添加到头部。
在style元素中通常可以使用type属性定义内容的类型（一般取值"
）。
格式如下：
2）外部样式表：
1含义：
在HTML文档中可以使用<
link>
元素引用外部样式表。
元素的属性有：
href（指定被链接文档【样式表文件】的位置）、hreflang（指定在被链接文档中的文本的语言）、rel（指定当前文档与被链接文档之间的关系。
stylesheet，指向要导入的样式表的URL；
）、media（指定被链接文档将被显示在什么设备上。
all，默认值，适用于所有设备；
）、type（指定被链接文档的MIME类型）
外部样式表种类：
一种是layout.css文件专门是布局用的样式，另一种是添加外部内容的样式一般命名为style.css
2添加外部样式表有多种方法：
本实验介绍用到的其中一种方法，第一步：
选择菜单栏中的文件功能-选择新建CSS-命名layout.css；
第二步：
选择菜单栏中的格式功能
HEAD>
linkhref="
layout.css"
rel="
stylesheet"
type="
/HEAD>
添加外部内容的样式一般命名为style.css，操作方法同上，格式如下：
linkrel="
href="
style.css"
/>
-css样式-添加附加css样式表-在弹出的链接外部样式表窗口中添加外部样式文件URL路径：
layout.css-点击确定。
在本次实验的注册页面就是采用外部样式表进行CSS样式设计，格式如下：
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关系选择器
选择
符
名称
版
本
简介
EF
包含选择符
C
SS1
选择所有被E元素包含的F元素。
E,F
分组选择器
CS
S1
就可以把这几个相同设定的选择器合并在一起，中间用逗号隔开
E>
F
子选择
SS2
选择所有作为E元素的子元素F。
E+F
相邻选择符
选择紧贴在E元素之后F元素。
E~F
兄弟选择符
SS3
选择E元素所有兄弟元素F。
2伪类选择器
a.
结构性伪类选择器
b.UI元素状态伪类选择器
3属性选择器
4伪元素选择器
animation）
1transform字面上就是变形，改变的意思。
在CSS3中transform主要
包括以下几种：
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
2Animation只应用在页面上已存在的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元素
F子选择器CSS2选择所有作为E元素的子元素FE+F相邻选择器CSS2选择紧贴在E元素之后F元素E~F兄弟选择符CSS3选择E元素所有兄弟元素F
3）伪类选择器
伪类用于向某些选择器添加特殊的效果。
伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。
选择符类型简介
a:
link链接伪类选择器设置超链接a在未被访问前的样式
visited链接伪类选择器设置超链接a在其链接地址已被访问过时的样式
E:
hover用户操作伪类选择器设置元素在其鼠标悬停时的样式
active用户操作伪类选择器设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
focus用户操作伪类选择器设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式
lang（）:
lang（）伪类选择器匹配使用特殊语言的E元素
a.结构性伪类选择器
选择符版本简介
rootCSS3匹配E元素在文档的根元素。
first-child
CSS2
匹配父元素的第一个子元素E。
last-child
CSS3
匹配父元素的最后一个子元素E。
only-child
匹配父元素仅有的一个子元素E。
nth-child（n）
匹配父元素的第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。
b.UI元素状态伪类选择器选择符版本简介
checkedCSS3匹配用户界面上处于选中状态的元素E。
（用于inputtype为
radio与checkbox时）
enabledCSS3匹配用户界面上处于可用状态的元素E。
disabled
匹配用户界面上处于禁用状态的元素E。
read-only
匹配用户界面上处于只读状态的元素E
read-write
匹配用户界面上处于读写状态的元素E
3）属性选择器
4）伪元素选择器
13.HTML5用什么标记播放音频？
主要支持的音频格式有哪些？
标记：
；
格式：
mov、mp4、wav。
14.HTML5用什么标记播放视频？
主要支持的视频格式有哪些？
格式ogg、MPEG4、WebM、（注意：
flv不支持）。
15.简述什么是HTML5的WebStorage功能？
包括哪些技术？
它们的区别是什么？
其中localStorage持久化本地存储，类似于Cookie，但没有有效期，除非主动删除数据。
另一种sessionStorage用于本地存储一个会话中的数据，这些数据只在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，类似于session。
四．编程题
1.编写一个form表单，实现一个学生信息输入。
包含学号、姓名、性别、爱好、出生年月等。
（注意首行缩进）
autocomplete<
formaction="
method="
get"
autocomplete="
on"
学号：
inputtype="
text"
name="
userid"
placeholder="
请输入学号"
autofocusrequired>
br/>
名字：
username"
请输入用户名"
autocomplete="
off"
密码：
password"
psw"
请输入密码"
性别：
radio"
sex"
value="
男"
checked>
男
女"
女<
/br>
电话：
tel"
phone"
请输入电话号码"
邮箱：
inputtype="
email"
请输入注册邮箱"
生日：
date"
birthday"
兴趣爱好：
checkbox"
interser[]value="
篮球"
篮球
足球"
足球
舞蹈"
舞蹈
看电影"
看电影
颜色爱好：
1<
color"
2<
3<
建议：
textareaname="
suggeer"
rows="
3"
cols="
50"
请输入对本课程的建议
/textarea>
submit"
submitup"
提交"
/>
升级会员 