网页设计html 模拟试题

最新推荐文章于 2021-08-14 09:40:47 发布
最新推荐文章于 2021-08-14 09:40:47 发布
阅读量1.9k 收藏 28
点赞数 4
分类专栏： 笔记 文章标签： javascript css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46419890/article/details/111461587
版权

HTML模拟题：大题部分

  1. 根据输入的苹果和香蕉的数量
    用JS代码实现点击“计算”按钮时，计算并显示总重量和总价钱。
    在这里插入图片描述
    代码如下；
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<script src="index.js"></script>
	<div>苹果（公斤）：
		<input type="txt" id="pingguo">
		单价（2元/公斤）
	</div>	
	<div>香蕉（公斤）：
		<input type="txt" id="xiangjiao">
		单价（3元/公斤）
	</div>
	<div>
		水果总重（公斤）：<input type="txt" id="zhong" value=0>
	</div>
	<div>
		总价：<input type="txt" id="zong" value=0>元
	</div>
	<input type="button" value="提交" onclick="zong1();">
</body>
</html>

对应的js：

function zong1() {
	var p=document.getElementById("pingguo").value;

	var x=document.getElementById("xiangjiao").value;
	p=Number(p);
	x=Number(x);	
	var z=p+x;
	document.getElementById('zhong').value=z;
	var z1=p*2+x*3;
	document.getElementById('zong').value=z1;
}
  1. 根据输入的半径值，用ＪＳ代码实现点击“计算”按钮时，计算并显示周长和面积。
    在这里插入图片描述
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="index.js"></script>
	<div>输入半径：
		<input type="txt" id="r">
	</div>	
	<div>周长：
		<input type="txt" id="l">
	</div>
	<div>
		面积：<input type="txt" id="s" value=0>
	</div>
	<input type="button" value="提交" onclick="qiu();">
</body>
</html>

function  qiu(){
	var r=document.getElementById("r").value;
r=	Number(r);
var l=2*Math.PI*r;
var s=Math.PI*r*r;
document.getElementById("l").value=l;
document.getElementById("s").value=s;
}

3.写HTML代码实现下面截图效果的页面（表格背景颜色为99FFFF，并且表格在网页内居中对齐）
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" cellspacing="0" bgcolor="#99FFF" align="center">
		<tr>
			<th colspan="3" >表格的使用</th>
		</tr>	
		<tr > 
			<td width="150px" height="20px"></td>
			<td width="150px" height="20px"></td>
			<td rowspan=2 width="150PX" ></td>
		</tr>
		<tr>
			<td width="150px" height="20px"></td>
			<td width="150px" height="20px"></td>
		</tr>
	</table>
</body>
</html>
  1. 用写HTML代码实现下面截图效果的页面在这里插入图片描述
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

	<form class="a">
		<div style="background-color: #A8A8A8 ;">客户注册信息</div>
		<div>客户姓名：<input type="txt" name="1">(最多16个字符)</div>
		<div>&#12288;&#12288;密码：<input type="password" name="2">(最多16个字符)</div>
		<div>确认密码：<input type="txt" name="3"></div>
		<form><div>&#12288;&#12288;性别： <input type="radio" name="sex" value="female">男
			<input type="radio" name="sex" value="female">女</div></form>
			<div>&#12288;&#12288;城市：
				<select>
					<option>杭州</option>
					<option>无锡</option>
					<option>北京</option>
					<option>河北</option>
				</select>
			</div>
			<div>&#12288;&#12288;<input type="button" value="提交">&#12288;&#12288;&#12288;<input type="button" value="重置"></div>
		</form>

	</body>
	</html>

5.用写HTML代码实现下面截图效果的页面
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	姓名：<input type="txt" value="对方的时光"><br>
	E-mail:<input type="txt"><br>
	选择你最经常访问的网站：<input type="checkbox">地大热线
	<input type="checkbox">新浪网
	<input type="checkbox">搜狐<br>
	<form>请选择你所感兴趣的类别：
		<select>
			<option>时事新闻</option>
			<option>股市综述</option>
			<option>体育比赛</option>
			<option>文学艺术</option>
		</select>
	</form>
	</html>

5．设计函数消除数组中重复的元素
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="text-align:center;">
	<script src="index.js"></script>
	<table border="1" cellspacing="0" >
		<tr>
			<th colspan="8" height="30px">原数组</th>
		</tr>
		<tr>
			<td width="200px" height="30px">1</td>
			<td width="200px" height="30px">1</td>
			<td width="200px" height="30px">3</td>
			<td width="200px" height="30px">2</td>
			<td width="200px" height="30px">4</td>
			<td width="200px" height="30px">6</td>
			<td width="200px" height="30px">3</td>
			<td width="200px" height="30px">6</td>
		</tr>
	</table>
	<input type="button" value="点击检查重复数字" onclick="chong()">
	<table border="1" cellspacing="0" text-align="center">
		<tr>
		<td width="200px" height="30px" id="a0">1</td>
			<td width="200px" height="30px" id="a1">1</td>
			<td width="200px" height="30px" id="a2">3</td>
			<td width="200px" height="30px" id="a3">2</td>
			<td width="200px" height="30px" id="a4">4</td>
			<td width="200px" height="30px" id="a5">6</td>
			<td width="200px" height="30px" id="a6">3</td>
			<td width="200px" height="30px" id="a7">6</td>
		</tr>
	</table>
</body>
</html>

js片段：

function chong(){
	var	a1=new Array(1,1,3,2,4,6,3,6);
	for (var i = 0; i < a1.length; i++) {
		var x=a1[i];
		for(var j = 0; j < a1.length; j++){
			if(x==a1[j]&&(i!=j))
				a1[j]="已被替换";
		}
	}
	document.getElementById("a0").innerHTML=a1[0];
	document.getElementById("a1").innerHTML=a1[1];
	document.getElementById("a2").innerHTML=a1[2];
	document.getElementById("a3").innerHTML=a1[3];
	document.getElementById("a4").innerHTML=a1[4];
	document.getElementById("a5").innerHTML=a1[5];
	document.getElementById("a6").innerHTML=a1[6];
	document.getElementById("a7").innerHTML=a1[7];

}

6．设计一函数计算数组中索引为奇数的元素之和。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="text-align:center;">
<script src="index.js"></script>
	<table border="1" cellspacing="0" >
		<tr>
			<th colspan="8" height="30px">数组</th>
		</tr>
		<tr>
			<td width="200px" height="30px">1</td>
			<td width="200px" height="30px">1</td>
			<td width="200px" height="30px">3</td>
			<td width="200px" height="30px">2</td>
			<td width="200px" height="30px">4</td>
			<td width="200px" height="30px">6</td>
			<td width="200px" height="30px">3</td>
			<td width="200px" height="30px">6</td>
		</tr>
	</table>
	<input type="button" value="点击求和" onclick="he()"><br>
	<div>总和：<div id="b1">0</div></div>
</body>
</html>

js片段：

function he(){
var	a2=new Array(1,1,3,2,4,6,3,6);
var x1=0;
for (var i = 0; i < a2.length; i++) {
	var j=i+1;
	if((j%2)==1){
		x1+=a2[i];
	}
}
document.getElementById("b1").innerHTML=x1;
}

7．小王今年23岁，他计划将10000元存为一年定期，利率为3%，按复利计算，请设计函数计算他60岁时这个存单的本息之和为多少元。.
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="index.js"></script>
<body style="text-align:center;">
	<div>小王今年23岁，他计划将10000元存为一年定期，利率为3%，按复利计算，请设计函数计算他60岁时这个存单的本息之和为多少元。.</div>
	<input type="button" value="点击计算" onclick="fuli()"><br>
	60岁时：<div id="c1">0</div>
</body>
</html>

js片段：

function fuli(){
var x=1;
for(var i=0;i<37;i++){
	x=1.03*x;
}

document.getElementById("c1").innerHTML=x+"万";
}

8．小王今年23岁，他计划每年年初定投10000元，假定年化收益为8%，按复利计算，请设计函数计算他60岁时本利和为多少万元。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="index.js"></script>
<body style="text-align:center;">
	<div>小王今年23岁，他计划每年年初定投10000元，假定年化收益为8%，按复利计算，请设计函数计算他60岁时本利和为多少万元。</div>
	<input type="button" value="点击计算" onclick="fuli1()"><br>
	60岁时：<div id="c2">0</div>
</body>
</html>

js:

function fuli1(){
	var x=1;
	for(var i=0;i<37;i++){
	x=1.03*x+1;
}
document.getElementById("c2").innerHTML=x+"万";
}

9．给一个不多于 5 位的正整数，
要求： 一、 求它是几位数， 二、 逆序打印出各位数字。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="index.js"></script>
<body style="text-align:center;">
<div>9．给一个不多于 5 位的正整数，
 要求： 一、 求它是几位数， 二、 逆序打印出各位数字。
</div>
<div>请输入一个不多于5位的数字：</div>
	<input type="txt" id="d1" onchange="shuzi()" value="0">
	<p>该数字是<span id="d2">0</span>位数字</p>
	<p>该数字逆序输出是：<span id="d3">0</span></p>
</body>
</html>

js:

function shuzi(){
	var x=document.getElementById("d1").value;
	x=Number(x);
	/*var x1= x%10;
	var x2=x%100-x1;
	var x3=x%1000-x2*100-x1;
	*/
var n=0;
if(x<10){
document.getElementById("d2").innerHTML=1;
n=1;
}
else if(x>=10&&x<100){
document.getElementById("d2").innerHTML=2;
n=2;
}
else if(x>=100&&x<1000){
	document.getElementById("d2").innerHTML=3;
	n=3;
}
else if(x>=1000&&x<10000){
	document.getElementById("d2").innerHTML=4;
	n=4;
}
else{
	document.getElementById("d2").innerHTML=5;
	n=5;
}
var x1=0;
var x2=0;
var x3=0;
var x4=0;
var x5=0;
if(n==1){
	document.getElementById("d3").innerHTML=x;
}
if(n==2){
x1=x%10;
x2=(x-x1)/10;
x1=String(x1);
x2=String(x2);
document.getElementById("d3").innerHTML=x1+x2;
}
if(n==3){
x1=x%10;
x2=(x%100-x1)/10;
x3=(x-x1-x2*10)/100;
x1=String(x1);
x2=String(x2);
x3=String(x3);
document.getElementById("d3").innerHTML=x1+x2+x3;
}
if(n==4){
x1=x%10;
x2=(x%100-x1)/10;
x3=(x%1000-x2*10-x1)/100;
x4=(x-x1-x2*10-x3*100)/1000;
x1=String(x1);
x2=String(x2);
x3=String(x3);
x4=String(x4);
document.getElementById("d3").innerHTML=x1+x2+x3+x4;
}
if(n==5){
x1=x%10;
x2=(x%100-x1)/10;
x3=(x%1000-x2*10-x1)/100;
x4=(x%10000-x1-x2*10-x3*100)/1000;
x5=(x-x1-x2*10-x3*100-x4*1000)/10000;
x1=String(x1);
x2=String(x2);
x3=String(x3);
x4=String(x4);
x5=String(x5);
document.getElementById("d3").innerHTML=x1+x2+x3+x4+x5;
}


}
猪萌萌
关注
专栏目录
html语言与网页设计考试题,HTML语言与网页设计题库(含答案)
weixin_33318222的博客
05-31 1378
HTML语言与网页设计题库(含答案)第1题 判断正误(1)HTML标记符的属性一般不区分大小写。(对)(2)网站就是一个链接的页面集合。(对)(3)将网页上传到Internet时通常采用FTP方式。(对)(4)所有的HTML标记符都包括开始标记符和结束标记符。(错)(5)用H1标记符修饰的文字通常比用H6标记符修饰的要小(错)。(6)B标记符表示用粗体显示所包括的文字。(对)(7)GIF格式的图...
html网页题,HTML及网页制作练习题-完整版
weixin_28630185的博客
06-19 1542
1、 在HTML中，()标记不可出现在和标记符之间。( C)(Ａ)(Ｂ)(Ｃ)(Ｄ)2、 属性中，rowspan定义的内容是( D)(A)单元格所跨的列数(B)行的宽度(C)列的高度(D)单元格所跨的行数3、 在HTML中，正确的嵌套方式是(B)。(Ａ)(Ｂ)(Ｃ)(Ｄ)4、 最大的标题是:(D )(A) (B) (C) (D) 5、 HTML样式格式文件的后缀名是： (C )(A) .asp(B...
html5多选题库_题库.试卷—--网页设计师基本题库.试卷全套
weixin_33377571的博客
12-31 990
网页设计考试基础复习测试试题单选题1、邮件的正确格式是：()A：maiil to://abc@http://www.doczj.com/doc/1f5295e88662caaedd3383c4bb4cf7ec4bfeb619.htmlB：mail to: abc@http://www.doczj.com/doc/1f5295e88662caaedd3383c4bb4cf7ec4bfeb619.ht...
html制作模拟考试试卷,网页设计与制作模拟试题
weixin_39849054的博客
06-10 498
1.域名服务器上存放着Internet主机的(　　　)。A．域名 B．电子邮箱地址C．域名与IP地址的对应表 D．IP地址2.HTTP协议是一种(　　　)协议。A．文件传输协议 B．远程登录协议C．邮件协议 D．超文本传输协议3.主机域名center.nbu.edu...
Dreamweaver网页设计模拟试题及参考答案.pdf
04-08
《Dreamweaver网页设计模拟试题及参考答案》的文档涵盖了Dreamweaver网页设计的基本操作和概念，主要涉及以下几个方面： 1. **站点管理**：在Dreamweaver中，站点管理是通过标志4指向的浮动面板组进行的，这包括...
Dreamweaver网页设计电大模拟试题库附答案.doc
10-07
Dreamweaver网页设计电大模拟试题库附答案....Dreamweaver网页设计电大模拟试题库附答案.doc涵盖了HTML、CSS、网页设计、浏览器、FTP、Telnet、E-mail和GIF等多方面的知识点，为网页设计和开发提供了完整的知识体系。
《HTML5网页设计》机试模拟试题一.zip
最新发布
12-17
《HTML5网页设计》机试模拟试题一.zip 这个压缩包文件主要包含了与HTML5网页设计相关的课程考试模拟题目，适用于2020-2021学年第一学期的教学活动。HTML5是现代网页设计的核心技术，它极大地提升了网页的交互性和...
《Dreamweaver网页设计》模拟试题4.pdf
10-13
以上是对《Dreamweaver网页设计》模拟试题的部分解析，这些题目涵盖了HTML基础、CSS样式、Dreamweaver的使用技巧和网页设计的基本概念。学习这些知识点有助于深入理解网页制作过程，并提升设计和开发能力。
《Dreamweaver网页设计》模拟试题.pdf
10-13
《Dreamweaver网页设计》模拟试题中的知识点涵盖了网页制作的基础概念和Dreamweaver软件的使用技巧。以下是这些知识点的详细说明： 1. **页面属性设置**：在Dreamweaver中，可以通过“页面属性”对话框来调整网页的...
网页制作-HTML试卷
05-12
一、制作表格页面。 二、利用所学知识制作三个简单的页面，要求： （1）主题自定，控制页面文字的显示方式，使用背景图或背景色，页面布局合理、美观。 （2）用超链接把三个页面链接起来，实现页面的跳转。
在线考试答题页面模板
04-18
模拟在线考试答题页面模板，考题静态页面展示，单选和多选
html设计题手写,网设计试题及html代码.doc
weixin_28802509的博客
06-09 95
2.2.3 字型设置标识功效：设置文字风格，如黑体、斜体、带下划线等，这是一组标识，它们能够单独使用，也能够混合使用产生复合修饰效果。常见标识有以下部分：… ：文字以粗体显示。… ：文字显示为斜体。… ：显示下划线。… ：删除线。… ：使文字大小相对于前面文字增大一级。… ：使文字大小相对于前面文字减小一级。… ：使文字成为前一个字符上标。…：使文字成为前一个字符下标。…：使文字显示为闪烁效果。…...
HTML题目
CIA的博客
08-14 4349
1.下列css属性中用于指定内容与边框之间距离为2px的是 A padding:2px B border:2px C margin:2px D content:2px 2.关于CSS控制字体样式说法错误的是 A font:bold 12px “宋体”，指定了字体为加粗的12px大小的宋体 B font-type属性用于指定字体的类型，如宋体、黑体等 C font-size属性用于指定字体的大小 D font-weight属性可指定字体的粗细 3.下面关于vw的描述正确的是 A vw是字号
html语言与网页设计考试题,html语言与网页设计题库(含答案).doc
weixin_35651578的博客
05-31 346
HTML语言与网页设计题库(含答案)第1题 判断正误(1)HTML标记符的属性一般不区分大小写。(对)(2)网站就是一个链接的页面集合。(对)(3)将网页上传到Internet时通常采用FTP方式。(对)(4)所有的HTML标记符都包括开始标记符和结束标记符。(错)(5)用H1标记符修饰的文字通常比用H6标记符修饰的要小(错)。(6)B标记符表示用粗体显示所包括的文字。(对)(7)GIF格式的图...
html制作选择题题库,HTML与网页制作测试题库
weixin_39998462的博客
06-03 1078
HTML语言与网页设计题库第1题判断正误(1)HTML标记符的属性一般不区分大小写。()(2)网站就是一个链接的页面集合。()(3)将网页上传到Internet时通常采用FTP方式。()(4)所有的HTML标记符都包括开始标记符和结束标记符。()(5)用H1标记符修饰的文字通常比用H6标记符修饰的要小()。(6)B标记符表示用粗体显示所包括的文字。()(7)GIF格式的图象最多可以显示256种颜色...
模拟试卷HTmL,网络模拟试卷完整版(附答案)
weixin_36488250的博客
06-10 251
特别提醒：所有答案必须写在试卷答案纸上，否则不得分！一、单项选择题(每小题2分，15小题共30分)1．在下列功能中，哪一个最好地描述了OSI模型的数据链路层？( )A、保证数据正确的顺序、无错和完整B、处理信号通过介质的传输C、提供用户与网络的接口D、控制报文通过网络的路由选择2．在TCP/IP参考模型中，TCP协议工作在哪一层。()A、应用层B、传输层C、网络互联层D、网络接口层3．下列哪个是合...
html制作试题,(完整版)HTML经典试题-网页制作.docx
weixin_39640845的博客
06-08 1268
16.16.1.在HTML中，表示页面背景的是()D.在本窗口中打开一个超链接的代码 在父窗口打开超链接的代码是()A. ..HTML 中,表示()正在点击文字的色彩是红色。可可链接文字的色彩是红色。非可链接文字的色彩是红色。已链接文字的色彩是红色。下列表示，可链接文字的颜色是黑色的是()下列表示，已经点击(访问)过的可链接文字的的颜色是黑色的是()下列表示，正被点击的可链接文字的颜色是白色的是(...
html网页制作试卷,&lbrack;网页设计与制作&rsqb;试卷
weixin_30686891的博客
06-18 1344
杭州市中等职业学校《网页设计与制作》试卷学校： 学籍号： 姓名：考试说明：1、请把教师机上“website”文件夹复制—>粘贴到本地D盘根目录下, 上交时必须把整．．．．．．．个文件夹压缩打包，并重命名为“学籍号.rar”，不要填加空格或是其他分隔符。 ．．．．．．．．．．．．．．．．．．．．．．2、此文件夹中只能包括主页文件(index.html)和三个下级文件夹files、images、...
网页设计师模拟试题与解答
网页设计与开发涉及多个方面，这些模拟题涵盖了CSS、网页类型识别、网站基础知识、HTML、Dreamweaver的使用以及万维网的基本概念。以下是相关知识点的详细说明： 1. CSS（层叠样式表）：CSS是一种样式表语言，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猪萌萌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值