目前在从事前端工作, 特别总结写面试题知识供大家学习, 需要前端面试题答案的同学, 可以加我创建的前端群 937268047
一, 选择题
HTTP 是()
(A)文件传输协议 (B)超文本传输协议
(C)可扩展文件传输协议 (D)高度文件传输协议
html 是()
(A)超文本标记语言 (B)结构化数据标记语言
(C)可扩展标记语言 (D)文件标识语言
3.CSS 是()
(A)层叠式样式表 (B)嵌套式样式表
(C)结构化样式表 (D)继承式样式表
4. 下列说法正确的是()
(A)在 XHTML 中, 不能使用 b,u,i 等标签
(B)XHTML 是和 HTML 完全不同的两门语言
(C)XHTML 要求所有的标签名必须用小写字母, 所有属性都要用引号括
(D)我们做网站时通常使用 XHTML1.0 strict 版, 因为它最为严格
5. 表示有序列表语义的标签是()
(A)ol (B)list (C)ul (D)dl
6. 可以自己嵌套自己的标签()
(A)b (B)p (C)div (D)h1
7. 正确的插入图片的语句是()
- (A)<img src="image/1.jpg"></img>
- (B)<img scr="image/1.jpg" />
- (C)<img src="image/1.jpg" /></img>
- (D)<img src="image/1.jpg" />
8. 在新窗口中打开超级链接, 应该设置 a 标签的什么属性和值()
- (A)target="_blank" (B)_target="blank"
- (C)blank="_target" (D)_blank="target"
* 请注意, 下面 9~11 题的选项, 均为:
(A) (B) (C) (D)
若 HTML 代码如下, 显示效果为何?(B)
- <table>
- <tr>
- <td>
- 1
- </td>
- <td>
- 2
- </td>
- </tr>
- <tr>
- <td colspan="2">
- 3
- </td>
- </tr>
- </table>
10. 若 HTML 代码如下, 显示效果为何?(A)
- <table>
- <tr>
- <td colspan="2">
- 1
- </td>
- </tr>
- <tr>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- </tr>
- </table>
11. 若 HTML 代码如下, 显示效果为何?(C)
- <table>
- <tr>
- <td rowspan="2">
- 1
- </td>
- <td>
- 2
- </td>
- </tr>
- <tr>
- <td>
- 3
- </td>
- </tr>
- </table>
以下选项中, 正确的 "复选框" 标签为?(A)
- (A)<input type="checkbox" /> (B)<input name="radio" />
- (C)<input name="checkbox" /> (D)<input type="radio" />
以下选项中, 正确的 "下拉列表" 标签结构为?(B)
- (A)<option><select></select><select></select><option>
- (B)<select><option></option><option></option></select>
- (C)<swicth><option></option><option></option></swicth>
- (D)<option><swicth></swicth><swicth></swicth><option>
提交按钮的 type 是?(C)
(A)reset (B)button (C)submit (D)check
把 CSS 用 style 标签对儿包裹, 写在页面 head 里, 这种写法我们叫做?()
(A)外链式 (B)行内式 (C)内嵌式 (D)导入式
选择器 #box p, 下列说法中正确的是?()
(A)选择的是 id 为 box 的元素的第一个后代元素 p
(B)选择的是 id 为 box 的元素的所有后代元素 p
(C)选择的是 id 为 box 的元素的第一个子元素 p
(D)选择的是 id 为 box 的元素的所有子元素 p
17. 页面上有两个 #box 选择器, 如下:()
- #box{
- font-size:20px;
- font-weight:bold;
- }
- #box{
- font-size:30px;
- }
下面说法正确的是:
- (A)#box 字号 30px, 不加粗 (B)#box 字号 50px, 加粗
- (C)#box 字号 30px, 加粗 (D)#box 字号 20px, 加粗
18. 下列哪个 CSS 属性不可继承? ()
(A)font-style (B)color (C)width (D)text-align
19. 阅读下面 CSS 代码, 试问此盒模型真实占有的宽度是多少?()
- div{
- width:120px;
- height:120px;
- border-left-width:30px;
- border:20px solid red;
- padding:30px 40px 50px;
- padding-right:60px;
- }
- (A)210px; (B)250px; (C)260px; (D)270px;
20. 关于行内元素和块级元素, 下面说法唯一正确的是?()
(A)只有块级元素才能设置 border 属性
(B)行内元素不能设置宽度, 高度, 也不能设置 padding
(C)固定定位的元素, 必须刻意写 width:100%; 否则是不能自动撑满父亲的
(D)固定了的元素, 将不再区分行内元素和块级元素, 具有 "行块二像性"
21. 关于浮动, 下面说法唯一错误的是?()
(A)浮动的元素不能被内部文字撑高 (B)浮动的元素也可以有相对定位
(C)浮动的元素不区分行块了 (D)浮动的元素脱离标准流
22. 设置 a 标签的伪类, 我们必须按照一定的顺序来设置, 正确的顺序是?()
- (A)a:visited ,a:active ,a:hover ,a:link
- (B)a:visited ,a:link ,a:hover ,a:active
- (C)a:hover ,a:visited ,a:link ,a:active
- (D)a:link ,a:visited ,a:hover ,a:active
23. 图片尺寸为 200px200px, 盒子尺寸为 800px800px, 则语句 background-position:center center; 等价于:()
- (A)background-position:300px 300px;
- (B)background-position:200px 200px;
- (C)background-position:37.5% 37.5%;
- (D)background-position:25% 25%;
div[class |= "haha"]可以选中下面哪个元素()
- (A)<div class="1-haha"></div> (B)<div class="haha1"></div>
- (C)<div class="haha 1"></div> (D)<div class="haha-1"></div>
25. 无换行空格的字符实体是?()
(A)&nbps; (B)&nsbp; (C)&nspb; (D)
二, 简答题
1.CSS 属性默写:1设置文本下划线 2设置文本斜体 3段首 2 个文字空格
- text-decoration:underline;
- font-style:italic;
- text-indent:2em;
2. 书写只有 IE6,7 浏览器显示 "您的浏览器版本太低, 请升级!" 的 HTML hack.
1 <!--[if lt IE 8]>
2 <p > 您的浏览器版本太低, 请升级!</p>
3 <![endif]-->
3. 简述前端页面有哪三层构成, 分别是什么? 作用是什么?
1 结构层 作用: 从 HTML 角度搭建网页
2 样式层 作用: 从美化角度书写样式
3 行为层 作用: 从交互的角度描述我们的页面行为
4. 简述绝对定位的元素的参考点是什么? 请分类阐述.
答案: 1body.
有 top 参与, 参考点是左上角或者是右上角.
有 bottom 参与, 参考点是首屏的左下角或右下角
2距离最近, 同时有定位的祖先元素.
5. 如何设置垂直居中, 水平居中的绝对定位的元素? 用代码示例简述.
答案: 方法一:
- div{
- width: 400px;
- height: 400px;
- border:1px solid #ddd;
- position: relative;
- }
- div p{
- position: absolute;
- background: pink;
- width: 100px;
- height: 40px;
- left:50%;
- top:50%;
- margin-left:-50px;
- margin-top:-20px;
- }
方法二:
- div p{
- position: absolute;
- background: pink;
- width: 100px;
- height: 40px;
- left:50%;
- top:50%;
- transform:translate(-50%,-50%);
- }
6. 请看下面的 HTML 结构和对应的 CSS, 试问文字的颜色为何? 请简述原因.
- <div id="box1" class="div1">
- <div id="box2" class="div2">
- <div id="box3" class="div3">
- <p>
- 试问文字的颜色为何?
- </p>
- </div>
- </div>
- </div>
CSS 如下:
- #box p{
- color:blue;
- }
- .div1 div.div2 .div3 p{
- color:blue;
- }
- div.div1 #box2 p{
- color:green;
- }
- .div1 .div2 p{
- color:pink;
- }
1 正确答案: green
1 首先他们都选中了目标元素, 所以看权重, 因为绿色的权重 (1,1,2) 高.
7. 请看下面的 HTML 结构和对应的 CSS, 试问文字的颜色为何? 请简述原因.
- <div id="box1" class="div1">
- <div id="box2" class="div2">
- <div id="box3" class="div3">
- <p>
- 我是段落
- </p>
- </div>
- </div>
- </div>
CSS 如下:
- .div1 .div3{
- color:blue;
- }
- #box1 #box2{
- color:red;
- }
正确答案: 蓝色 blue. 因为都没有选中, 所以看距离远近.
8. 设置一个 div 从右下角到左上角的一个渐变, 颜色从红色到绿色. 红绿颜色比是 6:4. 用代码表示
- div{
- width: 200px;
- height: 200px;
- background-image: -webkit-linear-gradient(bottom right,red 60%,green);
- } 7
9. 定义一个动画(动画效果是一直匀速旋转. 一次动画完成时间是 1 秒动画), 并调用. 只写关键性语句
- 1 / 定义动画 /
- [email protected] zhuan{
- 3 from{
- 4 transform:rotate(0deg);
- 5
- }
- 6 to{
- 7 transform:rotate(360deg);
- 8
- }
- 9
- }
- 10 / 调用动画 /
- 11-webkit-animation:zhuan 1s linear 0s infinite;
10. 清除浮动有哪几种方式? 各自的优缺点为何? 请画出类似这样的图示并辅为简单文字描述即可:
答案: 设置父盒子高度.
1div{height:200px}
2外墙法: 在俩个父盒子中间加一堵有高度, 清除了浮动的墙
- 1.cl{
- 2 clear:both;
- 3 height:10px;
- }
3内墙法: 加在浮动元素的最低部
- 1cl{
- clear:both
- }
- 4overflow:hidden
5after 伪类:(内墙法)
- div::after{
- content:"";
- display:block;
- clear:both;
- }
来源: http://www.bubuko.com/infodetail-3097407.html