网站首页 > 教程分享正文

h5测试期末（测试类h5模板）

henian88 2024-09-10 14:11:28 教程分享 12 ℃ 0 评论

1、运用浮动和定位，实现下列网页

<!DOCTYPE html>

<html>

<head>

<style>

margin:0;

padding:0;

}

color:#000;

text-decoration: none;

}

.zuo{

float:left;

}

.you{

float:right;

}

ul{

list-style:none;

}

.item{

width:310px;

height: auto;

border:solid 1px #CCCCCC;

margin:80px 100px;

padding:15px;

overflow:hidden;

position:absolute;

}

.item h3{

color: #666;

}

.item .item-pic{

display:block;

width:310px;

height:190px;

margin:10px auto;

position:relative;

z-index: 2;

}

ul{

width:130px;

height:20px;

position:absolute;

right: -5px;

bottom: 5px;

text-align:center;

}

li{

width:15px;

height:15px;

background:#fff;

display:inline-block;

margin: 0 4px;

border: 2px solid red;

}

.item p{

font-size: 15px;

margin: 10px 0;

}

.item p span{

font-weight: bold;

}

.price1{

font-size:30px;

color:orange;

font-weight: bold;

}

button{

width: 80px;

height: 30px;

color: #fff;

font-weight: 550;

letter-spacing: 0.2em;

background: orange;

border-radius: 5px;

border: none;

margin: 5px 0 0 40px;

}

</style>

</head>

<body>

<ul>

</ul>

</a>

<p>

过桥米线代金券1张，无需预约，全场通用

</a>

</p>

<div>

</div>

</div>

</body>

</html>

轮播

<!doctype html>

<html>

<head>

<title>网页焦点图页面</title>

<style>

margin:0;

padding:0;

border:0;

list-style:none;

}

text-decoration:none;

font-size:30px;

color:#fff;

}

div{

width:580px;

height:200px;

margin:50px auto;

position:relative;

}

float:left;

width:25px;

height:90px;

line-height:90px;

background:#333;

opacity:0.7;

text-align:center;

border-radius:4px;

display:none;

cursor:pointer;

}

.left{

position:absolute;

left:-12px;

top:60px;

}

.right{

position:absolute;

right:-12px;

top:60px;

}

div:hover a{

display:block;

}

ul{

width:110px;

height:20px;

background:#333;

opacity:0.5;

border-radius:8px;

position:absolute;

right:30px;

bottom:20px;

text-align:center;

}

li{

width:5px;

height:5px;

background:#ccc;

border-radius:50%;

display:inline-block;

}

.max{

width:12px;

background:#03BDE4;

border-radius:6px;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

3编写一个简单的视频播放器

<!doctype html>

<html>

<head>

<title>视频播放器</title>

</head>

<body>

<video src="video/pian.mp4" controls>浏览器不支持video标签</video>

<br>

</body>

</html>

4使用Canvas画布编写一个圆形

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var c=document.getElementById("drawing");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(200,200,100,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

5实现弹力小球的动画

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

var canvas = document.getElementById('phcontext');

var context=canvas.getContext("2d");

var width=400;

var height=200;

var qidian=0;

var exp=1;

context.strokeStyle = "rgba(255,0,0,1)";

function draw(){

context.clearRect(0,0,width,height)

context.fillStyle="blue";

context.beginPath();

context.arc(180,qidian,20,0,Math.PI*2,1);

context.closePath();

context.fill();

qidian=qidian+exp;

if(qidian==0 || qidian==height-1){

exp=exp*-1;

}

</script>

6、利用HTML5图形动画功能，实现小球变大变小的动画

<!DOCTYPE html>

<head>

</head>

<body>

<br>

</body>

</html>

var canvas = document.getElementById('php100');

var p100=canvas.getContext("2d");

var dir=0;

var width=500;

var height=200;

var exp=1;

function fff(){

p100.clearRect(0,0,width,height);

p100.fillStyle="red";

p100.beginPath();

p100.arc(180,dir,dir,0,Math.PI*2,1);

p100.closePath();

p100.fill();

dir=dir+exp;

if(dir==0 || dir==height){

exp=exp*-1;

}

</script>

7实现按钮发光的动画效果

<!DOCTYPE html>

<head>

<style>

.button {

width:100px;

height:20px;

display: block;

padding: 20px;

border-radius: 20px;

color: #fff;

font-size: 18px;

text-align: center;

text-decoration: none;

background-color: rgba(30, 144, 225, 1);

box-shadow: 0px 3px 60px rgba(255, 0, 0, 1);

}

</style>

</head>

<body>

<a class="button" href="#">发光的按钮</a>

</div>

</body>

</html>

8、使用Canvas画布实现在线画板的效果

<!DOCTYPE html>

<head>

<title>签名为图片</title>

canvas{

border:1px dashed black;

}

</style>

</head>

<body>

</div>

</body>

</html>

var canvas;

var context;

window.onload = function() {

canvas = document.getElementById("drawingCanvas");

context = canvas.getContext("2d");

canvas.onmousedown = startDrawing;

canvas.onmouseup = stopDrawing;

canvas.onmouseout = stopDrawing;

canvas.onmousemove = draw;

};

var isDrawing = false;

function startDrawing(e) {

isDrawing = true;

context.beginPath();

context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);

}

function stopDrawing() {

isDrawing = false;

}

function draw(e) {

if (isDrawing == true) {

var x = e.pageX - canvas.offsetLeft;

var y = e.pageY - canvas.offsetTop;

context.lineTo(x, y);

context.stroke();

}

</script>

1、CSS3新增属性中下列哪个是用于定义一个计数器的（）

A、content

B、quotes

C、counter-increment

D、counter-reset

2、在CSS3新增的背景相关属性中，设置背景图片大小的是

A、background-clip

B、background-origin

C、background-position

D、background-size

3、CSS3提供的圆角边框中用于指定右上角的圆角半径是

A、border-top-left-radius

B、border-top-right-radius

C、border-bottom-right-radius

D、border-bottom-left-radius

4、CSS3中tab-size是( )

A、检索或设置对象中的文字的间隔

B、设置或检索对象中的文字的描边厚度

C、检索或设置文本流的方向

D、检索或设置对象中的制表符的长度

5、哪个是设置或检索对象左边的多重颜色的？( )

A、border-color

B、border-left-style

C、border-left

D、border-left-colors

6、下列哪个是设置或检索对象的倒影的?( )

A、box-reflect

B、border-radius

C、box-shadow

D、border-image

7、在CSS3中box-shadow是?( )

A、设置或检索对象复合属性

B、设置或检索对象阴影

C、设置或检索对象顶边的特性

D、设置或检索对象的倒影

8、设置或检索对象的背景图像如何铺排填充是?( )

A、background-origin

B、background-position

C、background-size

D、background-repeat

9、在CSS3中opacity是设置或检索对象的不透明度的，它的默认值是多少?( )

A、0.1

B、1

C、0.5

D、2

10、text-align取值内容对齐结束边界的是?( )

A、left

B、start

C、end

D、center

11、设置或检索导航顺序的是?( )

A、nav-index

B、nav-up

C、nav-down

D、nav-left

12、哪个是设置或检索对象的列与列之间的边框厚度?( )

A、column-rule

B、column-rule-style

C、column-span

D、column-rule-width

13、column-count是设置对象的?( )

A、宽度

B、间隙

C、列数

D、样式

14、column-rule-style设置列与列之间的边框样式,隐藏边框的是?( )

A、solid

B、double

C、hidden

D、dottde

15、下列检索或设置对象所应用的动画名称的是?( )

A、animation-name

B、animation-play-state

C、animation-duration

D、animation-delay

16、animation-timing-function是检索或设置对象动画的过渡类型，线性过渡是?( )

A、ease

B、linear

C、ease-out

D、linear-in

17、下列函数取值用于比较数值大小并取出最大的是?( )

A、attr()

B、calc()

C、min()

D、max()

18、css3新增属性resize，该属性用于指定是否允许用户通过拖动来改变元素的大小，resize的both属性值是用来设置?( )

A、不允许用户通过拖动来改变组件的大小

B、不允许用户通过拖动来改变组件的高度和宽度

C、不允许用户通过拖动来改变组件的高度

D、不允许用户通过拖动来改变组件的宽度

19、CSS样式表存在于文档的( )区域中。

A、HTML

B、BODY

C、HEAD

D、TABLE

20、在Dreamweaver CS3中，按住( )键，再单击文档窗口中需要选择的框架，即可选中框架。

A、Shift

B、Ctrl

C、Enter

D、Alt

D2分一档[修改]

21、linear-gradient()是用线性渐变创建图像，取值哪个是设置底部开始渐变的纵坐标值?( )

A、left

B、bottom

C、top

D、right

22、

哪个是接时间单位的?( )

A、<angle>

B、<time>

C、<grid>

D、<fraction>

23、border-image-repeat是设置或检索对象的?( )

A、边框背景的扩展

B、框样式使用图像来填充

C、边框背景图的分割方式

D、边框图像的平铺方式

24、background-origio决定了背景在盒模型中的初始位置，控制背景起始于左上角的边框是?( )

A、border

B、padding

C、content

D、center

25、multi-column layout是多列布局，让文字以多列显示,其中指规定应该横跨列数的是?( )

A、column-rule-color

B、column-span

C、column-rule-width

D、column-rule-style

26、css的内部样式写在下列哪个标签里?( )

A、<head></head>

B、<title></title>

C、<div></div>

D、<body></body>

27、TimeRanges对象包含了一个( )属性，该属性可以获取TimeRanges里包含的几个时间段

A、volume

B、muted

C、length

D、buffered

28、animation-delay是检索或设置对象动画的?( )

A、持续时间

B、延迟的时间

C、过渡类型

D、循环次数

29、transition-delay是检索或设置对象?( )

A、过渡的持续时间

B、过渡的类型

C、过渡的样式

D、延迟过渡的时间

30、表单在DOM中由HTMLFormElement对象表示，不包括下列哪个属性?( )

A、action

B、select

C、reset

D、method

31、以下是HTML5新增的标签是：( )

A、<aside>

B、<isindex>

C、<samp>

D、<s>

32、以下不是HTML5的新增的标签是：( )

A、<bdi>

B、<xmp>

C、<command>

D、<dialog>

33、以下不是HTML5新增的API是:

A、Media API

B、Command API

C、History API

D、Cookie API

34、新的 HTML5 全局属性，"contenteditable" 用于：

A、规定元素的上下文菜单。该菜单会在用户点击右键点击元素时出现。

B、规定元素内容是否是可编辑的。

C、从服务器升级内容。

D、返回内容在字符串中首次出现的位置。

35、以下说法不正确的是：

A、HTML5 标准还在制定中

B、HTML5兼容以前HTML4下浏览器

C、<canvas>标签替代Flash

D、简化的语法

36、在 HTML5 中，contextmenu 和 spellcheck 是：

A、HTML 属性

B、HTML 元素

C、事件属性

D、样式属性

37、以下不是canvas的方法是：

A、getContext()

B、fill()

C、stroke()

D、controller()

38、关于HTML5说法正确的是：

A、HTML5只是对HTML4的一个简单升级

B、所有主流浏览器都支持HTML5

C、HTML5新增了离线缓存机制

D、HTML5主要是针对移动端进行了优化

39、HTML5 中不再支持下面哪个元素？

A、<q>

B、<ins>

C、<menu>

D、<font>

40、HTML5不支持的视频格式是：

A、ogg

B、mp4

C、flv

D、WebM

C2分一档[修改]

41、由 SVG 定义的图形是什么格式的？

A、CSS

B、HTML

C、XML

D、DIV

42、HTML5中的< canvas >元素用于:

A、显示数据库记录

B、操作 MySQL 中的数据

C、绘制图形

D、创建可拖动的元素

43、不是HTML5特有的存储类型是：

A、localStorage

B、Cookie

C、Application Cache

D、sessionStorage

44、哪个 HTML5 内建对象用于在画布上绘制？

A、getContent

B、getContext

C、getGraphics

D、getCanvas

45、在 HTML5 中，哪个属性用于规定输入字段是必填的？

A、required

B、formvalidate

C、validate

D、placeholder

46、以下关于FileReader说法正确的是：

A、readAsText方法有3个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。

B、readAsBinaryString：该方法将文件读取为二进制字符串

C、onabort事件，中断时触发

D、onload事件，文件读取成功完成时触发

47、哪种输入类型定义滑块控件？

A、search

B、controls

C、slider

D、range

48、哪种输入类型用于定义周和年控件（无时区）？

A、date

B、week

C、year

D、day

49、以下关于canvas说法正确的是：

A、clearRect(width, height,left, top)清除宽为width、高为height,左上角顶点在(left,top)点的矩形区域内的所有内容。

B、drawImage()方法有4中原型

C、fillText()第3个参数maxWidth为可选参数

D、fillText()方法能够在画布中绘制字符串

50、哪个 HTML5 元素用于显示已知范围内的标量测量？

A、<gauge>

B、<range>

C、<measure>

D、<meter>

51、以下关于canvas说法正确的是：

A、HTML5标准中加入了WebSql的api

B、HTML5支持IE8以上的版本(包括IE8)

C、HTML5 仍处于完善之中

D、Html5将取代Flash在移动设备的地位

52、CSS是利用什么XHTML标记构建网页布局？

A、<dir>

B、<div>

C、<dis>

D、<dif>

53、在CSS语言中下列哪一项是"左边框"的语法？

A、border-left-width: <值>

B、border-top-width: <值>

C、border-left: <值>

D、border-top-width: <值>

54、在CSS语言中下列哪一项的适用对象是"所有对象"？

A、背景附件

B、文本排列

C、纵向排列

D、文本缩进

55、以下关于video说法正确的是：

A、当前，video元素支持三种视频格式,其中WebM = 带有 Thedora 视频编码和 Vorbis 音频编码的 WebM 文件。

B、source元素可以添加多个,具体播放哪个有浏览器决定。

C、video内使用img展示有视频封面

D、loop属性可以使媒介文件循环播放。

56、下列选项中不属于CSS 文本属性的是

A、font-size

B、text-transform

C、text-align

D、line-height

57、在CSS 中不属于添加在当前页面的形式是

A、内联式样式表

B、嵌入式样式表

C、层叠式样式表

D、链接式样式表

58、以下关于video说法错误的是：

A、navigator.geolocation可以用来判断浏览器是否支持地理定位

B、window.navigator.cookieEnabled判断浏览器是否支持cookie

C、Canvas不依赖分辨率

D、window.FileReader判断浏览器是否支持FileReader

59、在CSS语言中下列哪一项是"列表样式图象"的语法？

A、width: <值>

B、height: <值>

C、white-space: <值>

D、list-style-image: <值>

60、以下不是input在html5的新类型的是：

A、DateTime

B、file

C、Colour

D、Range

61、以下不是HTML5新特性的是：

A、新的@font-face字体设置

B、新的离线存储

C、新的音频、视频API

D、新的内容标签

62、下列哪一项是css正确的语法构成？

A、body:color=black

B、{body;color:black}

C、body {color: black;}

D、{body:color=black(body}

63、关于html5说法正确的是：

A、HTML5是在原有HTML上的升级版

B、HTML可以不需要DTD

C、没有<!DOCTYPE html>HTML5可以正常工作

D、<output>是html5的新标签

64、下面哪个CSS属性是用来更改背景颜色的？

A、background-color:

B、bgcolor:

C、color:

D、text:

65、关于html5说法错误的是：

A、Canvas是HTML中你可以绘制图形的区域

B、SVG表示可缩放矢量图形

C、queryselector的功能类似于jQuery的选择器

D、queryString是html5查找字符串的新方法

66、怎样给所有的< h 1 >标签添加背景颜色?

A、.h1 {background-color:#FFFFFF}

B、h1 {background-color:#FFFFFF;}

C、h1.all {background-color:#FFFFFF}

D、#h1 {background-color:#FFFFFF}

67、下列哪个css属性可以更改样式表的字体颜色？

A、text-color=

B、fgcolor:

C、text-color:

D、color:

68、关于Web Workers说法错误的是：

A、Web Worker只能使用terminate()中止

B、Web worker线程不能修改HTML元素

C、Web worker线程不能修改全局变量和Window.Location

D、Web Worker 是 HTML5 提供的一个javascript多线程解决方案

69、下列哪个css属性可以更改字体大小？

A、text-size

B、font-size

C、text-style

D、font-style

70、关于应用缓存说法正确的是：

A、FALLBACK:后退命令,优选使用缓存而不是网络更新

B、NETWORK:不需要缓存命令

C、CACHE :命令指出哪些文件需要被缓存.

D、所有manifest文件都以"CACHE MANIFEST"语句开始.

71、关于Web SQL的说法更合理的是：

A、WebSql是HTML5的一个规范

B、WebSQL是一个在浏览器客户端的结构关系数据库和使用mysql一样

C、本地存储没有生命周期

D、Local storage和Cookie一样。

72、下列哪段代码能够定义所有P标签内文字加粗？

A、<p style="text-size:bold">

B、<p style="font-size:bold">

C、p {text-size:bold}

D、p {font-weight:bold}

73、以下哪个不是?HTML5?的新标签：

A、<article>

B、<section>

C、<address>

D、<time>

74、如何去掉文本超级链接的下划线？

A、a {text-decoration:no underline}

B、a {underline:none}

C、a {decoration:no underline}

D、a {text-decoration:none}

75、HTML5 之前的 HTML 版本是？

A、HTML 4.01

B、HTML 4

C、HTML 4.1

D、HTML 4.9

76、如何设置英文首字母大写？

A、text-transform:uppercase

B、text-transform:capitalize

C、样式表做不到

D、text-decoration:none

77、HTML5 的正确 doctype 是？

A、<!DOCTYPE html>

B、<!DOCTYPE HTML5>

C、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" >

D、<!DOCTYPE html "http://www.w3.org/TR/html5/strict.dtd">

78、下列哪个css属性能够更改文本字体？

A、f:

B、font=

C、font-family:

D、text-decoration:none

79、在 HTML5 中，哪个元素用于组合标题元素？

A、<group>

B、<header>

C、<headings>

D、<hgroup>

80、HTML5 中不再支持下面哪个元素？

A、<cite>

B、<acronym>

C、<abbr>

D、<base>

81、下列哪个css属性能够设置文本加粗？

A、font-weight:bold

B、style:bold

C、font:b

D、font=

82、在 HTML5 中，onblur 和 onfocus 是：

A、HTML 元素

B、样式属性

C、事件属性

D、样式属性

83、下列哪个css属性能够设置盒模型的内补丁为10、20、30、40（顺时针方向）？

A、padding:10px 20px 30px 40px

B、padding:10px 1px

C、padding:5px 20px 10px

D、padding:10px

84、用于播放 HTML5 视频文件的正确 HTML5 元素是：

A、<movie>

B、<media>

C、<video>

D、<MV>

85、下列哪个属性能够设置盒模型的左侧外补丁？

A、margin:

B、indent:

C、margin-left:

D、text-indent:

86、用于播放 HTML5 音频文件的正确 HTML5 元素是：

A、<mp3>

B、<audio>

C、<sound>

D、<mp>

87、在HTML中，以下关于CSS样式中文本属性的说法，错误的是

A、font-size用来设置文本的字体大小

B、font-family用来设置文本的字体类型

C、color用来设置文本的颜色

D、text-align用来设置文本的字体形状

88、在 HTML5 中，哪个方法用于获得用户的当前位置？

A、getPosition()

B、getCurrentPosition()

C、getUserPosition()

D、getDown()

89、如何能够定义列表的项目符号为实心矩形？

A、A.list-type: square

B、type: 2

C、type: square

D、list-style-type: square

上一篇：如何设计一个牛逼的本地缓存（本地缓存guava）
下一篇：看看这些，或许有你不懂滴!（你看一下不懂）

网站首页 > 教程分享正文

h5测试期末（测试类h5模板）

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 教程分享 正文

h5测试期末（测试类h5模板）

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 教程分享正文

取消回复欢迎你发表评论: