前端面试题

小菜鸟最近在找实习，所以有备无患，准备一些前端面试题给自己一些底气，都是从其他大神那里整理而来。

1、HTML和XHTML的区别。

XHTML 是基于XML的 HTML，作用与HTML相同，确定文档结构的markup规则与XML相同。但是XHTML比HTML的书写方面更加严格。

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

2、关于语义化HTML

根据语义来选择相应的合适的标签，而不是仅仅为了实现某一个功能去使用这个标签，比如你想要放大字体，使用h1的标签仅仅是达到了字体放大的效果却不是为了语义使用的，根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

3、关于DOCTYPE

doctype声明在文档中的最前面，处于<html>标签之前。告知浏览器以何种模式来渲染文档。用来告知浏览器用什么文档标准来解析这个文档。而当DOCTYPE不存在或者书写不正确时会导致文档以兼容模式呈现。兼容模式中，页面要求比较宽松，会向后兼容。如果文档包括形式完整的DOCTYPE，那么将以标准模式来呈现。标准模式的排版会以浏览器支持的最高标准来运行。

而doctype文档类型在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种。

HTML 4.01 Strict（严格版本）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional（过渡版本）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset（框架版本）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

HTML 5

<!DOCTYPE html>

4、行内元素和块级元素的区别

行内元素是跟相邻的行内元素在同一行，不会自动换行，他的高度宽度和内边距的高度外边距的高度都是不可以设置改变。

块级元素自动换行从下一行开始，而且是独占一行，他的高度宽度边距都可以设置改变。

5、浏览器渲染过程

浏览器从服务器接收到html文档，对文档进行解析构造渲染，首先生成DOM树，将文档中的节点构建成一颗树，接下来构造渲染树，将对各个节点的渲染元素渲染效果计算出来构造成一棵渲染树，最后计算出布局树，然后将DOM树和渲染树还有布局树进行结合绘制出render树展现在页面上。

6、三栏布局，两边固定，中间自适应。

一、圣杯布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之圣杯布局</title>
    <style type="text/css">
    .container {
        padding: 0 300px 0 200px;
    }
    .left, .main, .right {
        position: relative;
        min-height: 130px;
        float: left;
    }
    .left {
        left: -200px;
        margin-left: -100%;
        background: green;
        width: 200px;
    }
    .right {
        right: -300px;
        margin-left: -300px;
        background-color: red;
        width: 300px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

二、双飞翼布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之双飞翼布局</title>
    <style type="text/css">
    .left, .main, .right {
        float: left;
        min-height: 130px;
        text-align: center;
    }
    .left {
        margin-left: -100%;
        background: green;
        width: 200px;
    }

    .right {
        margin-left: -300px;
        background-color: red;
        width: 300px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }
    .content{
        margin: 0 300px 0 200px;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">
    　　<div class="content">main</div> 
    </div>
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

三、flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之Flex布局</title>
    <style type="text/css">
    .container{
        display: flex;
        min-height: 130px;
    }
    .main{
        flex-grow: 1;
        background-color: blue;
    }
    .left{
        order: -1;
        flex-basis: 200px;
        background-color: green;
    }
    .right{
        flex-basis: 300px;
        background-color: red;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

四、绝对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之绝对定位布局</title>
    <style type="text/css">
    .container{
        position: relative;
    }
    .main,.right,.left{
        top: 0;
        height: 130px;
    }
    .main{
        margin: 0 300px 0 200px;
        background-color: blue;
    }
    .right{
        position: absolute;
        width: 300px;
        right: 0;
        background-color: red;
    }
    .left{
        position: absolute;
        width: 200px;
        background-color: green;
        left: 0;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

7、css sprites

css sprites是一种网页图片处理方式，将网页所需要的图片都整合到一张图片上面，然后通过background-image,background-repeat,background-position来对图片进行定位和显示要求。

优点：多张图片整合到一起减少了http请求，减少了请求头的字节数，命名更加方便，

缺点：需要精确的计算每个图片的排版位置，精确度需要非常的高，如果更改的图片和原图片差异比较大，则需要对于其他的图片进行更改。

8、盒模型

IE浏览器总宽度：margin+width(padding+border+content),在IE浏览器中width为padding+border+content总和。

标准盒子总宽度：margin+padding+border+content，在标准盒子中width为content的宽度。

9、HTML5新增的元素，移除的元素

新增：canvas，video,audio,header,nav,footer,aside,section,article,

移除的元素：frame，frameset

10、cookie、localstorage、sessionstorage

都是保存在浏览器端，都是同源的。

cookie是为了识别用户身份所存储在浏览器端的数据，在同源http请求中携带，在浏览器和服务端传递。存储数据很小，不超过4K,可以设置过期时间，在失效时间之前一直都有效。

localstorege是本地存储，存储时间长久，存储数量大，可以达到5M。

sessionstorege是会话存储，从一个会话打开到会话结束就失效。

11、选择器优先级

1、！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
2、权重算法：(0,0,0,0)==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重
3、比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

12、清除浮动

1、添加<div style="clear:both"></div>或者<br clear="all" />

2、给父级同时设置浮动

3、给父级设定高度（适用于布局中高度固定）

4、给父级元素设置overflow:hidden

13、absolute、relative、fixed

absolute:相对于父级元素，是绝对定位

relative:相对于普通文档流定位，相对定位。

fixed:相对于浏览器生产固定的元素，绝对元素。

14、css布局方式

1、table

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实现三栏水平布局之绝对定位布局</title>
        <link rel="stylesheet" type="text/css" href="css/test.css" />
    </head>
    <body>
        <div class="container">
            　　<table>
                <tr>
                    <td class="left">左侧</td>
                    <td class="right">右侧</td>
                </tr>
            </table>
        </div>
    </body>
</html>
以下是test.css文件内容
*{
    margin: 0;
    padding: 0;
}
.left{
    background-color: aqua;
    width: 100px;
    height: 200px;
}
.right{
    background-color: antiquewhite;
    width: 100px;
    height:200px;
}

2、flex布局

*{
    margin: 0;
    padding: 0;
}
.container{
    display: flex;
    width: 200px;
    height: 200px;
}
#left{
    background-color: aqua;
    flex: 1;
}
#right{
    background-color: antiquewhite;
    flex: 1;
}
#middle{
    flex: 1;
    background-color: bisque;
}

3、float布局

父元素添加overflow:auto或者overflow:hidden

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/test.css" />
    </head>
    <body>
        <div class="container">
            <span class="left">float</span>
            <span>中间</span>
            <span class="right">float</span>
        </div>
        <div class="container" style="height: 200px;background: blue">
        </div>
    </body>
</html>
以下爱是test.css:

*{
margin: 0;
padding: 0;
}
.container{
width: 200px;
background-color:gold;
/* overflow: auto; */
overflow: hidden;
}
.left{
background-color: aqua;
float: left;
width: 50px;
height: 50px;
}
.right{
background-color: antiquewhite;
float: right;
width: 50px;
height: 50px;
}

通过给父级设置伪类：：after清除浮动

.container::after{
    clear: both;
    content: "";
    /* visibility: hidden; */
    /* height: 0; */
    display: block;
}

4、响应式布局

标签<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

posted @ 2019-06-21 19:14 蒋涂涂 Views(159) Comments(0) Edit 收藏举报

刷新页面返回顶部

蒋涂涂

前端面试题

HTML 4.01 Strict（严格版本）

HTML 4.01 Transitional（过渡版本）

HTML 4.01 Frameset（框架版本）

HTML 5

公告