前端面试题（总结）

头像
小小蚊子
    阅读 6 分钟
    11

    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;
}
    • 使用flex布局

    父元素设置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 部分等待更新
    面试html5csshtml
    小小蚊子
    5.1k 声望285 粉丝

    不努力，就不知道前面有多精彩

    « 上一篇
    webpack4.0打包总结
    下一篇 »
    前端面试之JavaScript（总结）

    引用和评论

    推荐阅读
    头像
    小程序实现手写签名

    小小蚊子赞 23阅读 5.6k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Bitmap 和 布隆过滤器傻傻分不清？你这不应该啊

    程序员小富赞 10阅读 4.6k评论 1

    0 条评论
    得票最新