前端面试题(总结)

2018-06-14 admin

HTML

1.HTML5为何只要写<!doctype html>

  • HTML5不基于SGML(标准通用标记语言),所以不需要引用DTD,但需要doctype来规范浏览器的行为(使得浏览器知道应该以何种解析方式对文档进行解析)
  • HTML4.0基于SGML,所以要引用DTD才能告知浏览器文档所使用的文档类型

2.讲讲行内元素、块元素、空元素有哪些

  • 行内元素:a,span,img,input,select,strong,em,b(标记性元素)
  • 块元素:div,p,ul,li,ol,dd,dt,dl,h1-h6
  • 空元素:hr,br,input,img,link,meta

3.导入样式时,使用link与@import的区别

  • link属于XHTML标签,除了可以加载css外,还能定义SSR,定义rel连接属性等作用,@import是css提供的,只能加载css样式
  • 页面加载时,link引入的资源能够同时被加载,而@import引入的css必须等页面加载完成后才能进行加载
  • link是XHTML标签,无兼容问题,而@import是css2.1提出的,IE5以下的低版本浏览器不支持

4.简述对HTML5语义化的理解

  • 在没有css样式时,以一种文档的形式显示,并且是容易阅读的
  • HTML5语义化使页面的内容结构化,结构更清晰,便于浏览器、搜索引擎解析
  • 有利于哪些有视障的人使用屏幕阅读器根据标记来访问网站
  • 有利于团队的开发和维护
  • 有利于SEO:便于爬虫抓取更多有效的信息

5.描述下cookie、localStorage和sessionStorage的区别

  • cookie本是用来客户端与服务端进行通信的,因为其有存储功能,而被借用来存储信息,cookie数据会始终在同源http请求中携带

  • localStorage和sessionStorage不会自动把数据发送到服务器上,仅在本地存储

  • 存储大小

    • cookie只有4k;而localStorage和sessionStorage可以达到5M或者更大
  • 过期时间

    • cookie在设置的过期时间前一直有效,
    • localStorage长期有效,关闭浏览器数据不会丢失,除非用户主动删除数据
    • sessionStorage数据在当前浏览器窗口关闭后自动删除

6.实现不用border画出1px高的线,在不同浏览器里,标准模式与怪异模式下都能保持一致的效果

<div style="height: 1px;overflow:hidden;"></div>

7.网页验证码的作用及解决的安全问题

区分用户是人还是机器,可以防止恶意破解密码、刷票等;可以防止黑客对某一特定注册用户以暴力破解的方式不断的尝试登录

8.data-属性的作用

data-*用于存储页面或者应用程序的私有自定义的数据,可以在所有的html元素中嵌入data-自定义属性,可以被js利用来操作数据

注意:data属性应该为小写,且data-后至少要有一个字符,不能单单使用data,data属性值可以是任意字符串

9.说说HTML5新特性,移除的元素(说说HTML5)

新特性:

  • 绘画canvas
  • 用于媒介回放的video、audio元素
  • 本地离线locaStorage长期存储数据,浏览器关闭后数据不丢失
  • sessionStorage在浏览器关闭后数据自动删除
  • 表单控件:data、email、search、url、calendar、time
  • 语义化标签:header、footer、nav、section、article
  • 新的技术:webworker、websocket、Geolocation

移除的元素

  • 纯表现元素:basefont、center、font、big、u、tt、strike、s
  • 对可用性产生负面影响的元素:frame、frameset、noframes

CSS

1.介绍下标准的盒子模型和IE的怪异盒子模型

  • w3c标准盒子模型:content的width就是设置的width
  • IE怪异盒子模型:content的width包含border和padding

2.css优先级计算

  • 优先级就近原则,同等权重时样式最近者优先级更高
  • !import > id > class > tag
  • !import比内联样式优先级更高

3.简述css文件为什么要reset

浏览器种类众多,不同浏览器的默认样式不一样,需要进行reset统一浏览器的样式

4.如何使两个div进行水平布局

  • 使用flex布局:父元素设置:display:flex
  • 使用浮动布局(或者使用display:inline-block)
// html
<div class="box">
    <div class="left">fff</div>
    <div class="right">dddf</div>
</div>    
// css
.left{
    float: left;
    background: red;
    /*display: inline-block;*/
}
.right{
    overflow: hidden;
    background: green;
    /*display: inline-block;*/
}

5.左边固定宽度,右边自适应

  • 左边定宽+设置浮动width:300px;float:left;右边设置overflow:hidden(或者margin-left:左边的宽度)
.left{
    float: left;
    width: 300px;
    background: red;
}
.right{
    overflow: hidden;
    background: green;
}
  • 父元素设置display:flex;左边设置width:300px;右边设置flex-grow:1
  • 父元素设置display:table;左边设置width:300px;右边设置display:table-cell;width:100%;
  • 父元素设置position:relative;左边设置position:absolute;width:300px;右边设置margin-left:左边的宽度

6.两个div完成两列布局:要求高度不定(父元素也是),两个div实时等高(左边div高度被子元素撑高时,右边div高度与左边一致)

  • 父元素设置display:table;右边设置:display:table-cell
  • 父元素设置display:flex;右边设置flex-grow:1

7.实现左右两边宽度固定,中间自适应

  • 使用左右浮动布局,中间居中布局,此时中间div要放在右浮动下面(因为center的div在正常文档流中,占据全屏宽度,右边的浮动元素会放置在下一行)
// html
<div class="box">
    <div class="left">fff</div>
    <div class="right">ddddd</div>
    <div class="center">ss</div>
</div>    
// css
.left{
    float: left;
    background: red;
}
.right{
    float: right;
    background: green;
}
.center{
    margin: 0 auto;
    background: yellow;
}

父元素设置display:flex;左边定宽width:300px;右边定宽width:300px;中间设置flex-grow:1

// html
<div class="box">
    <div class="left">fff</div>
    <div class="center">ss</div>
    <div class="right">ddddd</div>
</div>    
// css
.box{
    display: flex;
}
.left{
    width: 300px;
    background: red;
}
.right{
    width: 300px;
    background: green;
}
.center{
    flex-grow: 1;
    background: yellow;
}
  • 使用绝对定位,左右两边绝对定位,脱离文档流,中间使用margin留出定宽的margin值
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    background: red;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    background: green;
}
.center{
    margin: 0 300px;
    background: yellow;
}

8.圣杯布局(与双飞翼布局差不多)

其实是利用负margin值实现,也就是固比固(两边盒子宽度固定,中间盒子自适应)

<div class="box">
    <div class="center col">dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
        dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg</div>
    <div class="left col"></div>
    <div class="right col"></div>
</div>    

.box{
    overflow: hidden;
    padding: 0 150px;
}
.left{
    left: -150px;
    margin-left: -100%;
    width: 150px;
    height: 50px;
    background: red;
}
.right{
    right: -150px;
    margin-left: -150px;
    width: 150px;
    height: 50px;
    background: green;
}
.center{
    width: 100%;
    height: 50px;
    background: yellow;
}
.col{
    position: relative;
    float: left;
}

定位完成后,要进行position:relative;再左右两栏添加left和right值,使中间的内容不被遮盖

9.双飞翼布局

<div class="box">
    <div class="wrap col">
        <div class="center">dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
            dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
        </div>
    </div>
    <div class="left col"></div>
    <div class="right col"></div>
</div>    
.left{
    margin-left: -100%;
    width: 150px;
    height: 50px;
    background: red;
}
.right{
    margin-left: -150px;
    width: 150px;
    height: 50px;
    background: green;
}
.center{
    width: 100%;
    height: 50px;
    background: yellow;
}
.col{
    float: left;
}
.wrap{
    margin: 0 150px;
}
与圣杯布局只是中间的div增加了包含的容器,防止遮盖文字使用了在包含容器中设置margin:0 定宽值;

10.如何居中一个浮动元素,如何居中一个绝对定位元素

居中浮动元素

<div class="box">
    <div class="right col"></div>
</div>
.right{
    float:left;
    width: 150px;
    height: 50px;
    margin: 0 0 0 -75px;
    position: relative;
    left: 50%;
    top: 50%;
    background: green;
}

居中绝对定位元素

.right{
    position: absolute;
    width: 150px;
    height: 50px;
    margin: 0 auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: green;
}

11.position的值relative和absolute的定位原点是哪里

  • absolute:生成绝对定位元素,相对于值不为static的第一个父元素进行定位
  • fixed:生成绝对定位,相对于浏览器窗口进行定位
  • relative:生成相对定位元素,相对于其正常位置进行定位
  • static:没有定位,元素出现在正常的流中(忽略偏移声明:top、left、right、bottom、z-index)
  • inherit:从父元素继承position属性的值

12.li与li之间有看不见的空白间隔是什么原因引起的

行框的排列会受到中间空白(回车或者空格)的影响,空格也属于字符,也会应用样式,占据空间 将字符大小设为0就可以将间隔去除

13.优雅降级与渐进增强

  • 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进,追加功能达到更好的用户体验
  • 优雅降级:先构建完整的功能,再针对低版本浏览器进行兼容

JS 部分等待更新

原文链接:https://segmentfault.com/a/1190000015282209

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34008.html

文章标题:前端面试题(总结)

相关文章
javascript字面量
你在JavaScript中使用文字代表值。 这些都是固定的值,而不是变量 从字面上 提供在你的脚本。 本节描述以下类型的文字: 数组 布尔 浮点型 整数 对象 字符串字面值 数组字面量 数组文字是零个或多个表达式的列表,每个代表一个数组元素...
2015-11-12
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
JavaScript实现模仿桌面窗口的方法
本文实例讲述了JavaScript实现模仿桌面窗口的方法。分享给大家供大家参考。具体如下: 这里使用JS模仿了桌面窗口的移动、八个方向的缩放、最小化、最大化和关闭,以及 双击缩小放大窗口、改变窗口大小的预览效果等功能。 &lt;!DOCTY...
2017-03-27
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
javascript 中的try catch应用总结
&lt;script language=&quot;javascript&quot;&gt; try { throw new Error(10,&quot;asdasdasd&quot;) } catch (e) { alert(e.mes...
2017-04-05
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
使用AngularJS实现可伸缩的页面切换的方法
AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出...
2017-03-24
bootstrap实现的自适应页面简单应用示例
本文实例讲述了bootstrap实现的自适应页面简单应用。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&#x27;u...
2017-03-14
回到顶部