资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/前端面试题（总结）

前端面试题（总结）

lpjustdoit / 2658人阅读

摘要：为何只要写不基于标准通用标记语言，所以不需要引用，但需要来规范浏览器的行为使得浏览器知道应该以何种解析方式对文档进行解析基于，所以要引用才能告知浏览器文档所使用的文档类型讲讲行内元素块元素空元素有哪些行内元素，，，，，，，标记性元素块元素，

HTML 1.HTML5为何只要写

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高的线，在不同浏览器里，标准模式与怪异模式下都能保持一致的效果
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


    
fff

    
ffffdf


    
// 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


    
fff

    
ffffddd

    
ss


    
// css
.left{
    float: left;
    background: red;
}
.right{
    float: right;
    background: green;
}
.center{
    margin: 0 auto;
    background: yellow;
}

使用flex布局

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

// html


    
fff

    
ss

    
ffffddd


    
// 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值实现，也就是固比固（两边盒子宽度固定，中间盒子自适应）


    
dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
        dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg

    

    


    

.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.双飞翼布局 

    

        
dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
            dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
        

    

    

    


    
.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.如何水平居中一个浮动元素，如何水平居中一个绝对定位元素

居中浮动元素 


    



.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 部分等待更新
idc机房托管 专线服务 面试题 栈面试题 笔试面试题 面试题内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116717.html

相关文章

  • 前端最强面经汇总

    摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

    wangjuntytl 评论0 收藏0

  • 前端开发面试题链接

    摘要：手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入 手册网：http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集：http://www.codec...

    h9911 评论0 收藏0

  • 前端开发面试题链接

    摘要：手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入 手册网：http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集：http://www.codec...

    snifes 评论0 收藏0

  • 前端面试 - 收藏集 - 掘金

    摘要：一基础接口的意义百度规范扩展回调抽象类的意义我的前端面试经历百度前端掘金博主就读于电子科技大学，大三狗一枚面试是个漫长的过程，从海投到收获电话面试，一面二面三面，一个步骤出错那么后面就宣告终结。 一道常被人轻视的前端 JS 面试题 - 前端 - 掘金 目录前言第一问第二问变量声明提升函数表达式第三问第四问第五问第六问构造函数的返回值第七问最后前言 年前刚刚离职了，分享下我曾经出过的一道...

    lpjustdoit 评论0 收藏0

  • 深入理解js

    摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。 延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。 详解 Javascript十大常用设计模式 力荐~ ...

    caikeal 评论0 收藏0

  • 求职准备 - 收藏集 - 掘金

    摘要：一基础接口的意义百度规范扩展回调抽象类的意义想不想通过一线互联网公司面试文档整理为电子书掘金简介谷歌求职记我花了八个月准备谷歌面试掘金原文链接翻译者 【面试宝典】从对象深入分析 Java 中实例变量和类变量的区别 - 掘金原创文章，转载请务必保留原出处为：http://www.54tianzhisheng.cn/... , 欢迎访问我的站点，阅读更多有深度的文章。 实例变量 和 类变量...

    cuieney 评论0 收藏0

发表评论

登陆后可评论

0条评论

lpjustdoit

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<