HTML/CSS题库

一、 填空题

使用文本编辑器编辑完HTML后，扩展名可以是__html___或___htm__。
表格的标签是____table______，单元格的标签是____td______。
在编辑table表格时，合并行使用 __rowspan_____合并列使用_____colspan____。
在CSS层叠样式表当中经常用到的三种选择器：___元素选择器___、__类选择器__、__id选择器__。
在JavaScript脚本语言当中，定义函数使用___function__单词表示。
用来输入密码的表单域是___ input标签type属性等于password ____。
文件头标签也就是通常所见到的 _head___ 标签。
预格式化文本标记<pre></pre>的功能是___标记内的内容按照原格式显示在网页当中______。
__超链接___是网页与网页之间联系的纽带，也是网页的重要特色。
表单是Web__客户端__和Web__服务器___之间实现信息交流和传递的桥梁。
<tr>….</tr>是用来定义__表格的一行____；<td>…</td>是用来定义___表格的一列___；
在网页中插入背景图案（文件的路径及名称为/img/bg.jpg）的语句是

___<body background=/img/bg.jpg>_____。

设定图片高度及宽度的属性是___ heightwidth ____。
window的 ___onload___ 事件在浏览器完成页面加载后立即触发。
Javascript里Math的___ random()____方法返回介于0和1之间的伪随机数。
获得焦点的事件___ onfocus __,失去焦点的事件___ onblur ___。
W3C是指 __万维网联盟___ 。
当今比较流行的技术研发模式是__c/s___和__b/s___的体系结构来实现的
利用CSS设置网页背景颜色为绿色的语句____background-color=’green’___<body style=”background-color:green;”>____。
在HTML中，引入CSS的方法主要有___行内式____、___内嵌式___、___导入式___、___链接式__4种。
在标签当中可以通过__style__属性中设定CSS样式。
CSS样式遵循_就近_原则。
继承原则中，CSS所有的样式子标记都可以____继承___父标记所有的样式风格，而子标记的样式风格___完全不会影响___父标记。
表单的提交有两种方式，分别是:___get____、___post___。
表单对象的名称由__name__属性设定；提交方法由___method____属性指定；若要提交大数据量的数据，则应采用___post__方法；表单提交后的数据处理程序由__action___属性指定。
经常说的表单验证，那么表单是使用___form___标签表示。
表单实际上包含两个重要组成部分：一是描述表单信息的____ web页，二是用于处理表单数据的服务器端___表单处理程序___。
设置文档的可见部分开始标记符___<body>___；结束标记符是____</body>_______。
严格来说， ___html___并不是一种编程语言，而只是一些能让浏览器看懂的标记。
请写出在网页中设定表格边框的厚度的属性__border_____；设定表格单元格之间宽度属性___ cellpadding____；设定表格资料与单元格线的距离属性___ cellspacing___。

二、 选择题

1. 在HTML中有效，规范的注释声明是( D )。(选择一项)

A.	//这是注释
B.	<!--这是--注释-->
C.	/这是注释/
D.	<!--这是注释-->
2.分析下面的HTML代码片段，则选项中的说法正确的是( CD )(选择二项) <table cellspacing="30"> <tr><td colspan="2" align="center">姓名</td></tr> <tr><td rowspan="2" align="center">成绩</td> <td align="center">语文</td> </tr> <tr><td colspan="2" align="center">数学</td></tr> </table>

A.	该表格共有两行三列
B.	该表格边框宽度为30像素
C.	该表格中的文字均居中显示
D.	姓名”单元格跨2列

3.分析下面的HTML代码段，下面描述正确的是( A )(选择一项) *<frameset cols="30%,"> <frameset rows="50%,50%"> <frame name="fx" src="x.html"> <frame name="fy" src="y.html"> <frameset> <frame ame="fz" src="z.html"> <frameset>**

A.	在页面中创建了三个框架，左边一列包含两个框架(各占50%)，右边一列占窗口的70%
B.	在页面中创建了三个框架，左边一列占窗口的30%，右边一列包含两个框架(各占50%)
C.	在页面中创建了三个框架，上边一行占窗口的30%，下边一行包含两个框架(各占50%)
D.	在页面中创建了三个框架，上边一行包含两个框架(各占50%)，下边一行占窗口的70%
4. 在HTML中，通过( b )可以实现鼠标悬停在超链接上时，为无下划线的效果。(选择一项)

A、a{text-decoration:underline}
B、a{text-decoration:none}
C、a:hover{text-decoration:none}
D、a:link{text-decoration:underline}
5. 在HTML中，使用<IMG>标签插入图像，下列选项关于<IMG>的src属性说法正确的是( C )。(选择一项)

A.		用来设置图片文件的格式
B.		用来设置图片文件所在的位置
C.		用来设置鼠标指向图片时显示的文字
D.		用来设置图片周围显示的文字

6. 在HTML中，( D )可以在网页上通过连接直接打开客户端的发送邮件工具发送电子邮件(选择一项)

A.	<A HREF="telnet:zhangming@aptech.com">发送反馈信息</A>
B.	<A HREF="mail:zhangming@aptech.com">发送反馈信息</A>
C.	<A HREF="ftp:zhangming@aptech.com">发送反馈信息</A>
D.	<A HREF="mailto:zhangming@aptech.com">发送反馈信息</A>

7. 下列常用属性设置中，( B )适用于<frame>标签 (选择一项)

A.	border="0"
B.	frameborder="1"
C.	scrolling="0"
D.	href="head.htm"

8. 下面关于外部样式表的说法错误的是( A )。(选择一项)

A.	文件扩展名为 .cs
B.	外部样式表内容不需要使用<style>标签,外部样式表内容不需要使用<style>标签
C.	使用<link>标签引入外部样式,使用<link>标签引入外部样式
D.	使用外部样式表可以使网站更加简洁，风格保持统一

9. 在HTML中，以下关于CSS样式中文本及字体属性的说法，错误的是( C )。(选择一项)

A.	font-size用来设置文本字体的大小
B.	text-align用来设置文本的对齐方式
C.	font-type用来设置字体的类型
D.	font-weight用来设置字体的粗细

10. 关于W3C标准，下列说法错误的是( B )。(选择一项)

A.	W3C标准是由W3C组织制定的一系列Web标准
B.	*.htm,<SPAN>,<p>是符合W3C标准规范的书写方式
C.	W3C标准主要包括XHTML、CSS、DOM和ECMAScript标准
D.	W3C提倡内容与表现分离的Web结构
11. 在HTML中，( A )用来表示特殊字符引号。(选择一项)

A.	"
B.	>
C.	©
D.

12. 下面的描述正确的是( D )(选择一项) #menu{ font-size:14px; }

A.	menu是标签选择器
B.	menu是元素选择器
C.	menu是类选择器
D.	menu是ID选择器

13. 关于浏览器的兼容性，下列说法正确的是( AD )。(选择二项)

A.	浏览器所使用的内核不同，是导致跨浏览器兼容性问题的根本原因
B.	浏览器的优先级别：IE8.0>IE7.0>IE6.0>Firefox
C.	clear:both不能用于清除浮动
D.	通过写CSS Hack的方式，可以解决浏览器兼容性的问题

14. 在html中,实现如下图所示效果,则横线处应填写的代码是( D ) <style> li{ 150px; font:28px 隶书; list-style:_____; float:_____; } </style> <div> <ul> <li>登录</li><li>注册</li><li>帮助</li> </ul> </div> 图: 登录注册帮助(选择一项)

A.	第一个横线:inherit 第二个横线:right
B.	第一个横线:none 第二个横线:right
C.	第一个横线:inherit 第二个横线:left
D.	第一个横线:none 第二个横线:left

15. 在HTML中，将表单中INPUT元素的TYPE属性值设置为( A )时，用于创建重置按钮。(选择一项)

A.	Reset
B.	Set
C.	Button
D.	Image

16. 如图所示，要求单击“天狼星”时，弹出页面“Page.html”,并显示“天狼星欢迎你”，则在HTMLPage.html中，正确实现此连接的代码是( C )(选择一项)

A.	<a href="HTMLPage.htm" target="_blank">天狼星</a>
B.	<a href="_blank" target="Page.htm">天狼星</a>
C.	<a href="Page.htm" target="_blank">天狼星</a>
D.	<a href="HTMLPage.htm" target="Page.htm">天狼星</a>

17. 在HTML中，以下( A )能够实现表格跨列。(选择一项)

A.	colspan属性
B.	rowspan属性
C.	colspan标签
D.	rowspan标签

18. 已知在HTML页面上定义了如下所示的CSS样式(选择一项) <STYLE TYPE="text/css"> .t{ border-left-0px;border-left-1px;border-right-style:dashed; padding-top:5px;padding-left:2px; } </STYLE> 分析如下的HTML代码片断，选项中说法错误的是( B ) <table> <tr> <td class="t">姓名：</td> <td colspan="2" class="tBorder"><input type="text" name="name"></td> </tr> <tr> <td class="t">性别：</td> <td class="t">男<input type="radio" name="sex" checked></td> <td class="t">女<input type="radio" name="sex"></td> </tr> </table>

A.	表格中某些单元格应用了t样式
B.	表格共两列，其中name文本框跨了两列
C.	表格单元格右边框为dashed(虚线框样式)
D.	表格单元格顶填充为5像素

19. CSS样式background-position:-5px 10px代表的意义是( A )(选择一项)

A.	背景图片向左偏移5px，向下偏移10px
B.	背景图片向左偏移5px，向上偏移10px
C.	背景图片向右偏移5px，向下偏移10px
D.	背景图片向右偏移5px，向上偏移10px

20. 若某标签里内容超过标签尺寸，则超出内容自动隐藏的CSS样式是( C )。(选择一项)

A.	display:none
B.	visibility:hidden
C.	overflow:hidden
D.	clear:both

21. 阅读下面CSS代码，下面选项中与该代码段效果等同的是( A )。(选择一项) .box { margin:10px 5px; margin-right:10px; margin-top:5px; }

A.	.box { margin:5px 10px 10px 5px; }
B.	.box { margin:5px 10px 0px 0px; }
C.	.box { margin:5px 10px; }
D.	.box { margin:10px 5px 10px 5px; }

22. 阅读下面HTML代码，如果期望tabs位于box容器的右下角，则需要添加的CSS样式是( C )。(选择一项) <div id="box"><div id="tabs"></div></div>

A.	#tabs { position:absolute; right:0; bottom:0; }
B.	#tabs { position:relative; right:0; bottom:0; }
C.	#box { position:relative; } #tabs { position:absolute; right:0; bottom:0; }
D.	#box { position:relative; } #tabs { position:right bottom; }

23. 在HTML网页中添加如下CSS样式，鼠标悬浮在链接上面时，网页中的链接呈现的颜色为( B )。(选择一项) body { color:red; } a { color:black; } a:link,a:visited { color:blue; } a:hover,a:active { color:green; } ...

A.	红色
B.	绿色
C.	蓝色
D.	黑色
24. 在HTML中，( D )标签用于在网页中创建表单。(选择一项)

A.		<INPUT>
B.		<SELECT>
C.		<TABLE>
D.		<FORM>

25. 在HTML中，以下关于CSS样式中文本属性的说法，错误的是( D )。(选择一项)

A.	font-size用于设置文本字体的大小
B.	font-family用于设置文本的字体类型
C.	color用于设置文本的颜色
D.	text-align用于设置文本的字体形状

26. 在HTML中,要通过无列表符号来实现导航菜单, Css属性中 ( C )可以设置垂直叠放次序。 (选择一项)

A.	list-style
B.	padding
C.	z-index
D.	Float

27. 下列css代码，( C )能控制鼠标悬浮其上的超链接样式。(选择一项)

A.	a:link{color:#ff7300;}
B.	a:visited{color:#ff7300;}
C.	a:hover{color:#ff7300;}
D.	a:active{color:#ff7300;}

28. 下列css属性中,用于指定背景图片的是( A ).(选择一项)

A.	background-image
B.	background-color
C.	background-position
D.	background-repeat

29. 在 html 中,下列css属性中不属于盒子属性的是( C ).(选择一项)

A.	Border
B.	Padding
C.	Float
D.	Margin

30. 下列css属性中用于指定内容与边框之间距离为2px的是( A )(选择一项)

A.	padding:2px;
B.	border:2px;
C.	margin:2px;
D.	content:2px;

三、 判断题

HTML的段落标志中,标注文本以原样显示的是<PRE></PRE>（ T ）
超链接只能在不同的网页之间进行跳转（ F ）
在源代码窗口可以看到html文件是标准的ASCII文件，它是包含了许多被称为标签(tag)的特殊字符串的普通文本文件（ T ）
一个大div块里包含一个小的div，设置小的div与大div的左边距5px样式的标准写法是margin-left:5px; （ F ）
在<form><form>标签对之间，不允许出现<p><ul>等非表单域元素。（ F ）
在符合XHTML1.0 Strict规范的HTML文档中，允许使用<embed>标签为页面添加音频、视频、动画等多媒体信息。（ F ）
在css层叠规则中，id选择器样式表的优先级高于类选择器。（ T ）
超链接：是一种标记，形象的说法就是单击网页中的这个标记则能够加载另一个网页，这个标记可以做在文本上也可以做在图像上。（ T ）
HTML是HyperText Markup Language（超文本标记语言）的缩写。超文本使网页之间具有跳转的能力，是一种信息组织的方式，使浏览者可以选择阅读的路径，从而可以不需要顺序阅读（ T ）

10. 标识<b>无需</b>标识（ F ）

11. 在HTML文档中，允许为无序列表（ul）的某个列表项（li）嵌入定义列表（dl）。（ T ）

12. CSS样式表的继承性是指html元素将自动继承父元素的所有css属性。（ F ）

13. 在css样式定义中，子选择器与后代选择器的含义相同。（ F ）

14. 在css层叠规则中，id选择器样式表的优先级高于类选择器。（ T ）

15. 只有IE浏览器支持CSS，而其他浏览器不支持。（ F ）

16. 在HTML文档中，<q>和<cite>标签通常配合使用，以描述引文和引用的来源。（ T ）

17. IE6下，制作一个大小为10*10px的div，样式是10px;height:10px; （ F ）

18. FTP协议是指超文本传输协议（ F ）

19. HTML中，空格的代码为 （ T ）

20. 可以用HTML、JavaScript或C语言编写自己的扩展（ T ）

四、 简答题

html和htm两者之间有什么区别？
表格、框架、DIV三种HTML布局方式的特点？
简述一下盒子模型！
什么是锚连接？请举例！
HTML表单的作用和常用表单类型！
CSS与HTML之间的关系或分别说明一下两者的意义！
CSS的定义和作用！
CSS分为哪几种选择器并说明他们各自的特点！
FORM表单中input设置为readonly和disabled的区别？
FORM表单提交的方法中分为哪几种？有什么区别请简要概述！

五、 编码题

1．请编写代码实现下图效果。（6分）

HTML:

1  <table style="border: 1px solid blue;">
2     <tr>
3         <td style="padding-right: 20px">红色</td>
4         <td style="padding-right: 20px">蓝色</td>
5         <td style="padding-right: 20px">绿色</td>
6     </tr>
7 </table>

2．请编码实现如下效果。（9分）

HTML:

 1  <table>
 2     <tr>
 3         <td>姓名</td>
 4         <td>
 5             <input type="text" id="uname"
 6                                                     name="username"onblur="checkname()">
 7         </td>
 8         <td id="namemess"></td>
 9     </tr>
10     <tr>
11         <td>密码</td>
12         <td>
13             <input type="password" id="pwd"  name="pwd">
14         </td>
15         <td></td>
16     </tr>
17     <tr>
18         <td>重复密码</td>
19         <td>
20             <input type="password" id="pwd2"
21                                                     name="pwd2"onblur="checkpwd()">
22         </td>
23         <td id="pwdmsg"></td>
24     </tr>
25     <tr>
26         <td>年龄</td>
27         <td>
28             <input type="text" id="age"
29                                             name="age" onblur="checkage()">
30         </td>
31         <td id="agemsg"></td>
32     </tr>
33     <tr>
34         <td>性别</td>
35         <td>
36             <input type="radio" value="1" name="sex">男
37   &nbsp;&nbsp;&nbsp;
38                 <input type="radio" value="0" name="sex">女
39         </td>
40     </tr>
41     <tr>
42         <td>爱好</td>
43         <td>
44             <input type="checkbox" value="1" name="aihao">足球 
45                                                 &nbsp;&nbsp;&nbsp;
46                 <input type="checkbox" value="2" name="aihao">蓝球
47                     <input type="checkbox" value="3" name="aihao">羽毛球
48                         <input type="checkbox" name="aihao"  value="4">乒乓球
49         </td>
50     </tr>
51     <tr>
52         <td>班级</td>
53         <td>
54             <select name="banji">
55                 <option value="1">一年级一班</option>
56                 <option value="2">一年级2班</option>
57                 <option value="3">一年级3班</option>
58                 <option value="4">一年级4班</option>
59             </select>
60         </td>
61     </tr>
62     <tr>
63         <td>
64             <input type="reset" value="重置">
65         </td>
66         <td align="center">
67             <input type="submit" value="提交">
68         </td>
69     </tr>
70 </table>

CSS:

 1 <style type="text/css">
 2     table
 3     {
 4         font-size: 12px;
 5         border: solid 1px blue;
 6         border-collapse:collapse;
 7     }
 8     td
 9     {
10         border:solid 1px blue;
11     }
12 </style>

3．请编写代码实现下图效果（5分）

HTML:

 1 <table>
 2     <tr>
 3         <td>姓名</td>
 4         <td>
 5             <input type="text" name="uname">
 6         </td>
 7     </tr>
 8     <tr>
 9         <td>密码</td>
10         <td>
11             <input type="text" name="pwd">
12         </td>
13     </tr>
14     <tr>
15         <td colspan="2" align="center">
16             <input type="submit" value="登录">
17         </td>
18     </tr>
19 </table>

CSS:

 1 table 
 2 {
 3     font-size: 12px;
 4     border: solid 1px blue;
 5     border-collapse: collapse;
 6      300px;
 7 }
 8 td 
 9 {
10     font-size: 12px;
11     border: solid 1px blue;
12 }

相关阅读:
[剑指offer] 7. 斐波那契数列
 [剑指offer] 6. 旋转数组的最小数字
 [剑指offer] 5. 用两个栈实现队列
 [剑指offer] 4. 重建二叉树
 [剑指offer] 3. 从头到尾打印链表
 vue.js从输入中的contenteditable元素获取innerhtml
CSS3 ------- object-fit属性
 mouseenter和mouseover区别
 元素scroll系列属性
 淘宝flexible.js源码分析
原文地址：https://www.cnblogs.com/guanghe/p/6063088.html