- 主页/
- 搜集整理的前端面试题1
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;"> </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. HTML5的form如何关闭自动完成功能?
给不想要提示的 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值与父元素的高度值相同