web前端测试题
一.填空题
1.网页的后缀名通常为: .html和 .htm的页面
2.请写出在网页中设定表格边框的厚度的属性 border；设定表格单元格之间宽度属性cellspacing，；设定表格资料与单元格线的距离属性Cellpadding
3.预格式化文本标记<pre></pre>的功能是_标记内的内容按照原格式显示在网页中。
4.css中的选择器基本可以分为7种,分别是标签选择器,id选择器,类选择器,子代选择器,后代选择器,组选择器,伪类选择器
5.在页面中实现文字滚动的属性是_marquee
6.通过属性_ poster 可以设置在页面视频播放前的图片呈现
7.在页面中嵌入多媒体,如电影,声音等用到的属性标签是_embed
8.用来在视频窗口下附加MS-WINDOWS的AVI播放控制条的属性是_control
9.css新增的伪类有_属性选择器,和伪类选择器
10.每间隔三秒就刷新页面的代码:在<head><meta http-equiv="Refresh" content="5"> </head>
11.属性display的值有:none,inline,block,inline-block
12.表单对象的名称由_name属性设定；提交方法由_method属性指定；若要提交大数据量的数据，则应采用_post方法；表单提交后的数据处理程序由_action属性指定
二.简答题
1.HTML5中为什么要写<Doctype html>?
它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5文档类型，<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前，告诉浏览器文档使用哪种 HTML 或 XHTML 规范。
2.行内元素,块元素,空元素有哪些?
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea等
块元素：div、ul、li、dl、dt、dd、p、h1-h6、table form等
空元素：<br> <hr> <img> <input> <link> <meta>
3.页面导入样式时,link和@import有什么区别?
(1)link属于XHTML标签,除了加载css外,还能用于定义RSS定义rel连接属性等作用,而@import是css提供的,只能用于加载css
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
4.介绍一下盒子模型
盒模型的组成包括:content(内容), padding(外边距), border(边框), margin(内边距)组成。
5.CSS中新增的伪类有哪些?
（1）属性选择器分为5种
E:[attr=value]
E:[attr]
E:[attr*=value]
E:[attr^=value]
E:[attr$=value]
（2）伪类选择器
E::first-child 选择第一个元素
E::last-child 选择最后一个元素
E::nth-child(n)选择第n个元素
E::nth-child(even)/E::nth-child(odd)选择偶数/奇数元素
E::nth-last-child(n)选择倒数第几个元素
E::target 结合锚点使用 ,用户点击时选择
E::selection 选中的区域
E::empty 选择没有内容的元素
E::after/before 在元素内容之后或之前添加内容(元素)
E::first-line 选择元素内容首行
E::first-letter 选择元素内容首字
6.margin-top塌陷是如何产生的,以及解决办法有哪些?
产生:一个元素中有一个子元素,给子元素设置margin_top时,会发现将其设置给了父元素,所以产生塌陷问题.
解决:(1)给父元素设置属性:overflow:hidden
(2)给父元素设置边框:border
(3)使用伪元素类
7.浮动元素不会撑开父元素的大小,那么如何解决父元素撑开的问题?
(1)设置overflow:hidden
(2)给父元素添加一个空的子元素,给子元素设置clear:both
(3)使用伪对象类after,before
8.前端开发由三部分构成,分别是什么以及作用是什么?
1、结构层（HTML）由HTML 或XHTML 之类的标记语言创建。
2、表现层(CSS)用于美化CSS层，可以很好地将结构层和表现层分离出来
3、行为层(JS)：提供用户和界面的交互方式
9,你对css的权重如何理解?
权重也就是优先级
优先级的顺序如下：
important > 内联(style) > ID > 类(class) > 标签(li...) | 伪类(:hover,:focus...) | 属性选择[attr=''] > 伪对象(:before,:after) > 通配符(*) > 继承(inherit)
10.表单提交时,get和post提交方式的区别是什么?
(1)get提交的数据量小,有限制,会将表单信息数据显示在URL地址栏中,也不安全
(2)post提交的数据量大,不会显示表单数据,比较安全.
比较官方的话语:
区别::1.get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据
队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各
个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5.get安全性非常低，post安全性较高。
三.编程题
1.实现3d立方体沿y轴360deg旋转.
效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
/*perspective: 300px;*/
}
.big{
width: 200px;
height: 200px;
/*border: 1px dashed black;*/
margin: 100px auto;
transform: rotateY(20deg) rotateX(20deg);
transform-style: preserve-3d;
/*position: relative;*/
}
.wrap {
width: 200px;
height: 200px;
/*border: 1px dashed black;*/
margin: 100px auto;
transform-style: preserve-3d;
position: relative;
border-radius: 50%;
/*transform: rotateY(10deg) rotateX(10deg);*/
animation: dong 5s linear infinite;
}
@keyframes dong {
from {}
to {
transform: rotateY(360deg) /*rotateX(360deg)*/;
}
}
.wrap>div {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
opacity: 0.5;
}
.front {
background: red;
transform: translateZ(100px);
}
.back {
background: pink;
transform: translateZ(-100px);
}
.left {
background: green;
transform: translateX(-100px) rotateY(-90deg);
}
.right {
background: blue;
transform: translateX(100px) rotateY(90deg);
}
.up {
background: black;
transform: translateY(-100px) rotateX(90deg);
}
.down {
background: yellow;
transform: translateY(100px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="big">
<div class="wrap">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="up"></div>
<div class="down"></div>
</div>
</div>
</body>
</html>2.使用css3 中新增的伪类after和before实现八卦图并360deg无限旋转.
效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.wrap{
width: 300px;
height: 300px;
/*border: 1px solid black;*/
margin: 100px auto;
}
.tu{
width: 200px;
height: 0px;
border-top-width: 100px;
border-bottom-width: 100px;
border-style: solid;
border-top-color: red;
border-bottom-color: green;
border-radius: 100px;
position: relative;
animation: tu 2s linear infinite;
}
@keyframes tu{
from{}
to{transform: rotate(360deg);}
}
.tu::before,.tu::after{
content: '';
width: 20px;height: 20px;
border-radius: 100%;
position: absolute;
top: -51px;
border-width: 41px;
border-style: solid;
border-color: green;
}
.tu::before{
border-color: green;
background: red;
left: 0;
}
.tu::after{
border-color: red;
background: green;
left: 100px;
right: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="tu"></div>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
