« 上一篇下一篇 »

Web前端面试题目及答案整理汇总

 

HTML+CSS

01

对Web标准以及W3C的理解和认识


标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;


02

xhtml和html有什么区别


HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

延伸:雅虎面试题

有这么一段HTML,请挑毛病:

<P>  哥写的不是HTML,是寂寞。<br><br>  我说:<br>不要迷恋哥,哥只是一个传说

 解答部分:

考点1:html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的,在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的,p,br需要闭合, 标签不允许大写,P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签,是可以不用闭合的。

考点2:考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp
考点3:合理使用标签
br是强制折行标签,p是段落。原题用连续的br制造两个段落的效果,效果是达到了,但显然用的不合理,段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

改进方式:

html 4.01:

<p>哥写的不是HTML,是寂寞。<p>我说:<br> 不要迷恋哥,哥只是一个传说


xhtml 1.0:

<p>哥写的不是HTML,是寂寞。</p><p>我说:<br /> 不要迷恋哥,哥只是一个传说</p>

加分:合理的用语义化标签


在前面的基础上合理的用语义化标签,对内容进行必要的标记,是加分的。但过度的使用标签,就画蛇添足了。如“我说”的话,可以用q标签标注。

<p>哥写的不是HTML,是寂寞。
<p>我说:<br> <q>不要迷恋哥,哥只是一个传说</q>


03

Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 


用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug

04

行内元素有哪些?块级元素有哪些?空(void)元素有哪些?


行内元素: a、b、br、i、span、input、select、img、button、textarea

块级元素:div p h1-h6 form ul
Css盒模型:内容,border ,margin,padding

空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

延伸1:什么是盒子模型?

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

延伸2:行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?

块级元素(block)特性:

  • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;

  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性:

  • 和相邻的内联元素在同一行;

  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的),就是里面文字或图片的大小。

那么问题来了,浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些

答案:<input> 、<img> 、<button> 、<texterea> 、<label>

05

CSS引入的方式有哪些? link和@import的区别是?


内联 内嵌 外链 导入

区别 :

link属于XHTML标签,而@import是CSS提供的

前者无兼容性,后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式,后者不可


06

简述一下src与href的区别


href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

07

如何垂直居中一个浮动元素?

CSS
// 方法一:已知元素的高宽#div1{
    background-color:#6699FF;
    width:200px;
    height:200px;

    position: absolute;        //父元素需要相对定位    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height,width    margin-left: -100px;
    }//方法二:未知元素的高宽  #div1{
    width: 200px;
    height: 200px;
    background-color: #6699FF;

    margin:auto;
    position: absolute;        //父元素需要相对定位    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }

那么,如何垂直居中一个<img>呢?

CSS
#container     //<img>的容器设置如下{
    display:table-cell;
    text-align:center;
    vertical-align:middle;}

08

display:none与visibility:hidden的区别是什么?


  • display : 隐藏对应的元素但不挤占该元素原来的空间。

  • visibility隐藏对应的元素并且挤占该元素原来的空间。

  • 即是,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

  • 延伸题目:CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?

  • 最基本的:

  • 设置display属性为none,或者设置visibility属性为hidden

  • 技巧性:

  • 设置宽高为0,设置透明度为0,设置z-index位置在-1000

09

你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?


IE: trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)


10

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?


标签选择符、类选择符、id选择符
    继承不如指定 Id>class>标签选择
    后者优先级高


11

前端页面有哪三层构成,分别是什么?作用是什么?


结构层 Html、表示层CSS、行为层 js


12

写出几种IE6 BUG的解决方法


1.双边距BUG float引起的 使用display
2.像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 !Important 解决
7.select 在ie6下遮盖 使用iframe嵌套


13

你如何对网站的文件和资源进行优化?期待的解决方案包括


文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用


14

清除浮动的几种方式,各自的优缺点


1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,,,增加无意义的标签)
2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.是用afert伪元素清除浮动(用于非IE浏览器)


15

什么是语义化的HTML?


直观的认识标签,对于搜索引擎的抓取有好处

15

css reset 和 css sprites 的作用/用途


css reset:Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一

css sprites:Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量


16

超链接访问过后hover样式就不出现的问题是什么?如何解决?


被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)


17

css中可以让文字在垂直和水平方向上重叠的两个属性是什么?


垂直方向:line-height


水平方向:letter-spacing


那么问题来了,关于letter-spacing的妙用知道有哪些么?


答案:可以用于消除inline-block元素间的换行符空格间隙问题。


温馨提示:文章内容仅代表作者个人观点,不代表初橙博客赞同其观点和对其真实性负责!
版权声明:本站部分为转载文章,来源于网络 ,版权归原作者所有,欢迎分享本文,如原作者不同意转载请邮箱联系站长处理!
转载申明:本站文章,欢迎转载。但转载时请保留原文地址。
原文地址:http://www.gxuan.cc/post/84.html
分享到: