前端面试题精华

最新推荐文章于 2023-09-20 22:15:31 发布

coderToTop

最新推荐文章于 2023-09-20 22:15:31 发布

阅读量1.2k

点赞数 1

HTML

1.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

<!DOCTYPE> 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作。

准标准模式（almost standards mode）

//这种模式下的浏览器特性有很多都是符合标准的，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。

2.Html5为什么只需要写<!doctype html>

在html4.01中，声明引用DTD,因为HTML4.01基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。

html5不基于SGMl,所以不需要引用DTD。

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

行内元素有：a b span img input select strong（强调的语气）
块级元素有：divul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素：
<br> <hr> <img> <input><link> <meta>
鲜为人知的是：
<area> <base> <col><command> <embed> <keygen> <param> <source><track> <wbr>

4.页面导入样式时，使用link和@import有什么区别？

　区别1：；link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

5.绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

所谓内核，就是常驻内存、能够快速响应的那一部分核心代码，非内核代码都是要用到时再调入内存并执行的。

{Trident内核代表产品InternetExplorer，又称其为IE内核

Gecko内核代表作品Mozilla

WebKit内核代表作品Safari、Chromewebkit

Presto内核代表作品OperaPresto}

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

它主要是关于图像，位置，存储，多任务等功能的增加。
新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素有下列这些：
显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。
如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
处理兼容问题有两种方式：
1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

7.简述一下你对HTML语义化的理解？

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

8. HTML5的离线储存怎么使用，工作原理能不能解释一下？

原理：HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

9.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

10.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

sessionStorage 对象负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据。

The localStorage 对象负责存储没有到期的数据。当 Web 页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量。

11. iframe有那些缺点？

1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
12. Label的作用是什么？是怎么用的？（加 for 或包裹）

元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

13. HTML5的form如何关闭自动完成功能？

<form autocomplete="on|off">

14.如何实现浏览器内多个标签页之间的通信? (阿里)

1.cookie

（1）客户端和服务器端都会请求服务器，性能下降

（2）存储限制，4kb

（3）页面的cookie是共享的

storage

只是在客户端使用，不会请求服务器处理,存储量比较大,只能存储字符串，非字符串的数据在存储之前会被转换为字符串

1. sessionStorage

临时性的，页面打开有，页面关闭没有

数据不共享

2.localStorage

永久性的存储

数据共享

3.api

clear（）删除所有值，ff中没有实现

getItem（）根据指定的名字name获取对应的值

key（index）获得index处的值

removeItem（name）删除由name指定的明值对

setItem(name，value)

15. webSocket如何兼容低浏览器？(阿里)

16.页面可见性（Page Visibility）API 可以有哪些用途？

该API一个很好的用处就是能够在页面切换到不可见状态时暂停执行一些不必要的操作,以减少资源的浪费.

17.如何在页面上实现一个圆形的可点击区域？

①<img src="01.jpg"alt="//"/ usemap="#map">

②<style>

.disc{

width:100px;

height:100px;

background-color:dimgray;

border-radius: 50%;

cursor: pointer;

position: absolute;

left:50px;

top:50px;

line-height: 100px;

text-align: center;

color: white;

}

</style>

③ document.οnclick=function(e){

varoEvent=e||event;

var r=100;//圆的半径

var x1=100,y1=100,x2= oEvent.clientX;y2=oEvent.clientY;

//计算鼠标点的位置与圆心的距离

var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));

if(len<=100){

console.log("内")

}else{

console.log("外")

}

18.实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

19.网页验证码是干嘛的，是为了解决什么安全问题？

主要是用于验证对网站发出的操作时人在进行而不是脚本程序发出的。
和网站安全的关系也很明朗：防止攻击者大量恶意发出大量的注册或登录请求，导致服务器不断接受请求，数据库不断读取写入，会对整个网站的性能造成很大的影响。

CSS

1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准的css盒子模型：他的宽度=内容的宽度+边框的宽度+加上内边具的宽度

比如：.box{width:100px;border:10px solid #ccc;padding:10px}

那么标准的css盒子模型中的box这个的总的宽度就是140px=100+10+10+10+10；

但是低版本ie的盒子模型box的宽度还是100px，

2. CSS选择符有哪些？哪些属性可以继承？

ID 和 CLASS

Class 可继承

伪类A标签可以继承

列表 UL LI DL DD DT 可继承

优先级就近原则，样式定义最近者为准

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

优先级为

!important > [ id > class > tag ]

Important 比内联优先级高

3. CSS优先级算法如何计算？

元素标签中定义的样式（Style属性）,加1,0,0,0

每个ID选择符(如 #id),加0,1,0,0

每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0

每个元素选择符（如p）或伪元素选择符(如 :firstchild)等，加0,0,0,1

然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，

然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。

4. CSS3新增伪类有那些？

:first-of-type    p:first-of-type    选择属于其父元素的首个 <p>元素的每个 <p> 元素。
:last-of-type    p:last-of-type    选择属于其父元素的最后 <p>元素的每个 <p> 元素。
:only-of-type    p:only-of-type    选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
:only-child    p:only-child    选择属于其父元素的唯一子元素的每个<p> 元素。
:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个<p> 元素。
:nth-last-child(n)   p:nth-last-child(2)    同上，从最后一个子元素开始计数。
:nth-of-type(n)    p:nth-of-type(2)   选择属于其父元素第二个 <p>元素的每个 <p> 元素。
:nth-last-of-type(n)   p:nth-last-of-type(2)    同上，但是从最后一个子元素开始计数。
:last-child    p:last-child    选择属于其父元素最后一个子元素每个<p> 元素。
:root   选择文档的根元素。
:empty    p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。
:target    #news:target    选择当前活动的 #news 元素。
:enabled    input:enabled    选择每个启用的 <input>元素。
:disabled    input:disabled    选择每个禁用的 <input>元素
:checked    input:checked    选择每个被选中的<input> 元素。
:not(selector)    :not(p)    选择非 <p> 元素的每个元素。
::selection    ::selection    选择被用户选取的元素部分。

5.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

设置容器的浮动方式为相对定位

div{

width:500px;

height:300px;

margin:-150px 0 0 -250px;

position:absolute;

left:50%;

top:50%;

background-color:yellow;

}

6. display有哪些值？说明他们的作用。

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

7. position的值relative和absolute定位原点是？

relative（相对定位）的定位原点是以自己本省原来所在位置做为原点的。
absolute（绝对定位）的定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的，（当然，如果自己的所有父元素都没有设置position，那么就以body为定位原点）

8. CSS3有哪些新特性？

// CSS3有哪些新特性：

// 新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）

// 圆角（border-radius:8px）

// 多列布局（multi-column layout）

// 阴影和反射（Shadow\Reflect）

// 文字特效（text-shadow、）

// 文字渲染（Text-decoration）

// 线性渐变（gradient）

// 旋转（transform）

// 增加了旋转,缩放,定位,倾斜,动画，多背景

// transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation

9.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

弹性盒布局模型的浏览器前缀形式

.flex-container {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

.flex-item {

-webkit-box-flex: auto;

-moz-box-flex: auto;

-webkit-flex: auto;

-ms-flex: auto;

flex: auto;

}

.flex-item {

-webkit-box-ordinal-group: 1;

-moz-box-ordinal-group: 1;

-ms-flex-order: 1;

-webkit-order: 1;

order: 1;

}

10.用纯CSS创建一个三角形的原理是什么？

.caret {

display: inline-block;

width: 0;

height: 0;

margin-left: 2px;

vertical-align: middle;

border-top: 4px solid;

border-right: 4px solid transparent;

border-left: 4px solid transparent;

}

11.一个满屏品字布局如何设计?

12. 常见的兼容性问题

<!-- [if IE]>

你想要执行的代码

<![endif]-->

<!-- [if lt IE 8]>

你想要执行的代码

<![endif]-->

<!-- [if ! IE 8]>

你想要执行的代码

<![endif]-->

1.IE6双边距bug: 给float元素添加display：inline 即可正常显示

2.上下margin重合问题：不要同时采用top和bottom ,统一一些

3.有些浏览器解析img标签也有不同，img是行内的，一般都会紧接着排放，但是在有些情况下还是会突然出现个间距：解决办法是给它来个浮动 float

4.标签属性min-height是不兼容的，所以使用的时候也要稍微改改。这样吧：

.box{min-height:100px;height:auto !important;height:100px; overflow:visible;}

另一方面，IE是不支持min-height这类属性的，所以有些时候也可以考虑使用CSS表达式

#container{

min-width:600px;

width: expression(document.body.clientWidth< 600? "600px":"auto");

5.纳闷超链接访问过后样式就混乱了

a:link{} a:visited{} a:hover{} a:active

6. chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：

-webkit-text-size-adjust: none;

7. IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) +width + (padding-right) + (border-right-width) + (margin-right)

8. 鼠标的手势也有问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer

9消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效

10.CSS控制透明度问题：一般就直接opacity: 0.6 ; IE就 filter: alpha(opacity=60)

但在IE6下又有问题，所以又得弄成 filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

13.为什么要初始化CSS样式。

因为浏览器的兼容性，因为每个浏览设计时都有自己的特性，没有统一的规定，所以对于某些标签是不同的，不进行浏览器初始化，则会造成浏览器显示页面有微小的差异

coderToTop

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端面试题精华

HTML1.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作。准标准模式（almost standards mode）//这种模式下的浏览器特性有很多都是符合标准的，不标准的地方主要体现在处理图片间隙的时
复制链接

扫一扫