搜集整理的前端面试题1
发布于 2016-10-31 10:29 1487 次浏览 0 赞 最后一次编辑是 2016-10-31 10:31 来自 笔试面试  

1.    Doctype作用?标准模式与兼容模式各有什么区别?

(1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2.    HTML5为什么只需要写 <!DOCTYPE HTML>

HTML5 不基于 SGML(标准通用语言),因此不需要对DTD(文档类型定义)进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);

  而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

3.    行内元素有哪些?块级元素有哪些?(void)元素有那些?

(1)行内元素有:a b span img input select strong(强调的语气)

(2)块级元素有:div ul ol li dl dt dd h1 ~h6 p

(3)常见的空元素:<br> <hr> <img> <input> <link><meta>

 鲜为人知的是:

<area> <base> <col> <command><embed> <keygen> <param> <source> <track><wbr>

替换元素:img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容,即是一个空元素。

非替换元素:大多数的元素都是非替换元素,如p

4.    页面导入样式时,使用link[@import](/user/import)有什么区别?

(1)link属于XHTML标签;[@import](/user/import)是CSS提供的,只能用于加载CSS;

(2)页面被加载的时,link会同时被加载,而[@import](/user/import)引用的CSS会等到页面被加载完再加载;

(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

(4)dom控制样式差别,JavaScript控制dom去改变样式的时候,只能用link标签

5.    浏览器的内核分别是什么?

IE浏览器的内核Trident,     -ms-

Firefox的内核Gecko           -moz-

Chrome和safari的内核webkit  -webkit- 

Opera用的是presto引擎,后改为webkit引擎;  Opera早期浏览器  -o-  

6.    常见的兼容性问题?

(1) 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

(2) IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。     块+float+横向margin

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;};这种情况之下IE会产生20px的距离

解决方案是在float的标签样式控制中加入 _display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

 (3图片默认有间距,几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

解决方案:使用float属性为img布局

备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

(4) 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度。

解决方法:a 在子标签最后清浮动{<divstyle="height:0;clear:both;">&nbsp;</div>}

         b 父标签添加{overflow:hidden;}

         c 给父标签设置高度

(5) Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性-webkit-text-size-adjust: none;

(6) 超链接访问过后hover样式就不出现了

被点击访问过的超链接样式不在具有hover和active了

解决方法是改变CSS属性的排列顺序:L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}

7.    html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML HTML5

HTML5 增加了 video 和 audio 元素

本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素,比如 article、footer、header、nav、section

表单控件,calendar、date、time、email、url、search

新的技术webworker,websockt, Geolocation

section:页面中一个内容区块

article:页面中和上下文不相关的独立内容

aside:aritle元素的内容之外,与aritle元素内容相关的辅助信息

header:页面中一个内容区块或整个页面的标题

hgroup:整个页面或页面中一个内容区块的标题进行组合

footer:整个页面或者页面中一个内容区块的脚注

nav:页面中的导航链接部分

figure:一段独立的流内容,一般表示文档主体流内容的一个独立单元

embed:插入各种多媒体

mark:需要突出显示或高亮显示的文字

progress:运行中的进程

canvas:图形,比如图表和其他图像

command:表示命令按钮,比如单选按钮,复选框或按钮

detail:用户要求得到并且可以得到的细节信息

datalist:可选数据列表

keygen:生成秘钥

output:不同类型的输出,比如脚本的输出

source:元素的媒介元素,定义媒介资源。

移除的元素

纯表现的元素:basefont,big,center,font, s,strike,tt,u;

对可用性产生负面影响的元素:frame,frameset,noframes;

支持HTML5新标签:

IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式:

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if ltIE 9]>

<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

如何区分: DOCTYPE声明\新增的结构元素\功能元素

8.    语义化的理解?

用正确的标签做正确的事情!

html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;

在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO。

使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

9.    iframe有那些优缺点?

优点:1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点:1. iframe会阻塞主页面的Onload事件

2. 即时内容为空,加载也需要时间

3. 没有语意,使用ifame框架的弊端是无法被搜索引擎所爬行抓取;

10. HTML5form如何关闭自动完成功能?

给不想要提示的 form设置为 autocomplete=off。

11. 如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

12. webSocket如何兼容低浏览器?

Adobe Flash Socket 、 ActiveX HTMLFile(IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

13. CSS的盒子模型?

(1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

(2)盒模型:内容(content)、填充(padding)、边界(margin)、边框(border).

14. CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

1.id选择器( # myid)

2.类选择器(.myclassname)

3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p)

5.子选择器(ul > li)

6.后代选择器(li a)

7.通配符选择器( * )

8.属性选择器(a[rel ="external"])

9.伪类选择器(a: hover, li:nth - child)

可继承的样式: font-size font-family color, UL LI DL DD DT;

不可继承的样式:border padding margin width height ;

优先级就近原则,同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为: !important >  id >class > tag      important 比 内联优先级高

CSS3新增伪类举例:

p:first-of-type    选择属于其父元素的首个<p> 元素的每个 <p> 元素。

  p:last-of-type    选择属于其父元素的最后<p> 元素的每个 <p> 元素。

  p:only-of-type    选择属于其父元素唯一的<p> 元素的每个 <p> 元素。

  p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

  p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p> 元素。

   :enabled  :disabled 控制表单控件的禁用状态。

  :checked        单选框或复选框被选中。

15. 如何居中div?如何居中一个浮动元素?

1)给一个已知宽度的元素居中

div{ width:200px;   margin:0 auto;   }

(2)居中一个浮动的元素

 <div class="pagination">

  <ul>

    <li><ahref="#">Prev</a></li>

    <li><ahref="#">1</a></li>

    <li><ahref="#">2</a></li>

    <li><ahref="#">3</a></li>

    <li><ahref="#">4</a></li>

    <li><ahref="#">5</a></li>

    <li><ahref="#">Next</a></li>

  </ul>

</div>

.pagination {

  float: left;

  width: 100%;

  overflow: hidden;

  position: relative;

}

.pagination ul {

  clear: left;

  float: left;

  position: relative;

  left: 50%;/*整个分页向右边移动宽度的50%*/

  text-align: center;

}

.pagination li {

  line-height: 25px;

  margin: 0 5px;

display: block;

  float: left;

  position: relative;

  right: 50%;/*将每个分页项向左边移动宽度的50%*/

}


(3)绝对定位实现一个已知宽度元素的居中

.element {

    width: 600px; height:400px;

    position: absolute; left:50%; top: 50%;

    margin-top: -200px;    /* 高度的一半 */

    margin-left: -300px;    /* 宽度的一半 */

}

使用css3中的translate,transform中translate偏移的百分比值是相对于自身大小的

.element {

    width: 600px; height:400px;

    position: absolute; left:50%; top: 50%;

    transform: translate(-50%,-50%);    /* 50%为自身尺寸的一半 */

}

(4)绝对定位实现一个未知宽度的元素居中

.pagination {

  position: relative;

}

.pagination ul {

  position: absolute;

  left: 50%;//列表的元素向右移动50%

}

.pagination li {

  line-height: 25px;

  margin: 0 5px;

 float: left;

  position: relative;/*注意,这里不能是absolute,大家懂的*/

  right: 50%;//列表项向左移动一半

}

  水平居中和垂直居中:

  水平居中(text-align)块级元素(margin:0 auto;)

  垂直居中:vertical-align:middle;

父元素高度不确定的文本,图片,块级元素的竖直居中:给父元素设置相同的上下边距实现

父元素高度确定的单行文本垂直居中:line-height值与父元素的高度值相同


添加回复
回到顶部