HTML+Css部分
什么是Doctype?它有什么作用?
为HTML 5的声明, 其作用是告诉浏览器按照哪一种HTML文档规范解析HTML文档xhtml和html有什么区别?
(1)XHTML要求正确嵌套
错误:<p>XHTML文档<strong>与HTML的主要区别</p></strong>
正确:<p>XHTML文档<strong>与HTML的主要区别</strong></p>
(2)XHTML所有元素必须关闭
错误:<p>XHTML与HTML的主要区别
正确:<p>XHTML与HTML的主要区别</p>
(3)XHTML区分大小写,HTML对大小写不敏感。
HTML中是不区分大小写的,但在XHTML中区分。XHTML所有标记和属性都要小写。如:
错误:<IMG SRC="a.jpg" ALT="pic" />
正确:<img src="a.jpg" alt="pic" />
(4)XHTML属性值要加引号
错误:<table width=800
正确:<table width="800"
属性值可以用双引号,也可以用单引号,但要成对。
(5)属性值不能简写
HTML中,有的元素属性值只有单一的固定值,这时可以只写属性名不写属性值,但在XHTML中必须写属性名和属性值。如:
错误:<input type="radio" checked>
正确:<input type="radio" checked=“checked”>
(6)公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。
简述CSS的盒子模型:
盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)
两种方式:
content-box:标准盒模型(W3C盒模型)
border-box:怪异盒模型( IE 盒子模型)
一般浏览器和IE9+默认值是content-box
两者区别:
content-box:padding和border不计算在定义的width和height之内。
盒子的实际宽度=定义的width+padding+border
border-box:padding和border计算在定义的width和height之内。
盒子的实际宽度=设置的width(包含padding和border,但他们不会影响定义的宽度值,定义了多少还是显示多少)
例如:
/* 红色区域的大小是160px ,整个区域为200px*/
.box {
width: 200px;
height: 200px;
padding: 20px;
background: #f00;
border: 20px solid #000;
box-sizing: border-box;
}
/* 红色区域的大小是240px,整个区域为280px */
.box {
width: 200px;
height: 200px;
padding: 20px;
background: #f00;
border: 20px solid #000;
box-sizing: content-box;
}
写一个左中右布局占满屏幕,其中左右两块是固定宽度200 , 中间自适应宽,要求先加载中间块,请写出结构及样式:
第一种方法利用定位
结构
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>
样式
html,body {margin: 0;padding:0}
#left,#right {width: 200px;height: 200px;background-color: #f00;position: absolute;}
#left {left: 0;top: 0;}
#right {right: 0; top: 0;}
#center {margin: 0 200px;background-color:#ff0;height: 200px;}
css样式默认加载顺序 选择器优先级越高,其中的样式优先级越高: !important>行内样式>id选择器> 类选择器> 标签选择器
对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高 所以把类选择器center写在后面就可以了。
第二种方法利用Flex布局+css3 的 calc()函数
结构
<div class="box">
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>
</div>
样式
.box{display: flex}
#left,#right {width: 200px;height: 200px;background-color: #f00;}
#center{width: calc(100% - 400px);background-color: blue;height: 200px;}
第三种方法利用浮动+css3 的 calc()函数
结构
<div class="box">
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>
</div>
样式
.box{overflow: hidden;}
#left,#right {float: left;width: 200px;height: 200px;background-color: #f00;}
#center{float:left;width: calc(100% - 400px);height: 200px;background-color:#ff0;}
Position的值 relative\absolute\fixed 分别相对什么进行定位?有什么区别?什么时候用?
position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。
position | absolute\relative\fixed\static |
---|---|
相对定位 position:relative | 相对于当前元素(其自身)定位,原位置保留;一般和绝对定位一起搭配使用 |
绝对定位 position:absolute | 默认情况下相对于浏览器/body定位,若让其相对于第一个父元素定位,需要给它爸爸添加position:relative。一般小图标放在右上角左下角这种可以使用,场景不同,使用方式不同,视情况而定 |
固定定位 position:fixed | 滚动条滚动时固定不动,相对于浏览器窗口进行定位;一般用于广告位使用或者侧边栏 |
static | 默认值,没有定位,元素出现在正常的流中;我一般和媒体查询一起使用,PC端布局使用了定位,移动端不需要定位就用static 覆盖 |
解释下Css sprites,以及你要如何在页面或网站中使用它
CSS Sprites (css图片精灵)其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS 的"background-image",“background-repeat”,“background-position” 的组合进行背景定位,background-position 可以用数字能精确的定位出背景图片的位置。
CSS Sprites 的优点:
1、减少图片的字节
2、减少网页的http请求,从而大大提高页面的性能
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名即可,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便
简述px 、em 、rem的区别
- px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
- em和rem相对于px更具有灵活性,他们是相对长度单位,代表其长度不是固定的,更适用于响应式布局。
em与rem比较:
em相对于父元素,rem相对于根元素
更倾向于使用rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。
通过rem既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。IE9以下版本不支持,应对方法就是多写一个绝对单位的声明,这些浏览器会忽略用rem设定的字体大小。
例子:
p {font-size:14px; font-size:.875rem;}
css中,哪些属性是可以被子元素继承的?举例说明
子标签会继承父标签的(font- text- line-以及color)样式
color(颜色,a元素除外)
font-family(字体系列)
font-size(字体大小)
line-height(行高)
text-align(用于设置对齐方式)…
如何使用伪元素清除浮动
div:after{
content:""; /*设置内容,必须*/
display:block; /*将文本转为块级元素*/
clear:both; /*清除浮动*/
}
div{
zoom:1; /*兼容IE*/
}
单文本及多文本溢出用省略号…展示
单文本溢出
div {
white-space: nowrap; // 强制一行内显示文本不换行
overflow: hidden; //超出的部分隐藏
text-overflow: ellipsis; //文字用省略号替代超出的部分
}
多行文本的溢出(兼容性不好,适合webkit和移动设备)
div {
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; //弹性伸缩盒子模型显示
-webkit-line-clamp:2; //限制在一个块元素显示的文本行数
-webkit-box-orient:vertical; //设置或者检索伸缩对象的子元素的排列方式
}
javaScript部分
下面有关JavaScript中 call和apply的描述,错误的是?
A.call与apply都属于Function.prototype的一个方法,所以每个function实例都有call、apply属性
B.两者传递的参数不同,call函数第一个参数都是要传入给当前对象的对象,apply不是
C.apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入
D.call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
正确答案是 B
call()方法和apply()方法的作用相同,他们的区别在于接收参数的方式不同。对于call(),第一个参数是this值没有变化,变化的是其余参数都直接传递给函数。(在使用call()方法时,传递给函数的参数必须逐个列举出来。使用apply()时,传递给函数的是参数数组)如下代码做出解释:
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
1.JS有哪些基本数据类型
undefined、null、number、boolean、string
2.判断基本数据类型的方法有哪些,请举例
3.请说出bind、call、apply的区别
4.事件DOMContentLoaded和load的区别
他们的区别是,触发的时机不一样,先触发DOMContentLoaded事件,后触发load事件。
- DOM文档加载的步骤为 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。//DOMContentLoaded
- 加载图片等外部文件。
- 页面加载完毕。//load
在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。
$(document).ready()和windows.onload的区别
执行时机不同
window.onload方法是在网页中所有的元素(包括元素的相关联文件)都加载到浏览器后才能执行,即JavaScript此时才可以访问网页中的任何元素。
$(document).ready在DOM完全就绪的时候就可以被调用
执行方法数量不同
window.onload只能绑定一个函数,而$(document).ready( ) 可以写很多个
什么是跨域?你会用什么方法处理跨域请求?简要说明
内存溢出与内存泄露: https://blog.csdn.net/dreamy_wx/article/details/117265358
js数组几种常见的操作方法
方法 | 作用 | 是否影响原数组 |
---|---|---|
push() | 向数组的末尾添加一个或多个元素,并返回数组新的长度 | 是 |
pop() | 删除数组的最后一个元素,并将删除的元素作为返回值返回 | 是 |
unshift() | 向数组开头添加一个或多个元素,并返回新的数组长度;向前边插入元素以后,其他的元素索引会依次调整 | 是 |
shift | 删除数组的第一个元素,并将被删除的元素作为返回值返回 | 是 |
slice() | 用来从数组提取指定元素,不会改变原数组,而是将截取到的元素封装到一个新的数组中返回 | 否 |
splice() | 将指定元素从原数组中删除,并将被删除的元素作为返回值返回 | 是 |
concat() | 链接两个或多个数组,并将新的数组返回 | 否 |
join() | 将数组转换为一个字符串 | 否 |
reverse() | 用来反转数组(前面的到后面,后面的来前面) | 是 |
sort() | 用来对数组中的元素进行排序;也会影响原数组,默认会按照Unicode编码进行排序 | 是 |
forEach() | 遍历数组 |
请写出在循环语句中,break语句与continue语句的区别。
break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)
continue:立即跳出当前这一次循环,继续下一次循环(比如,对for循环,就跳到i++的地方)
关于闭包: https://blog.csdn.net/dreamy_wx/article/details/117260016
IE低版本与高级浏览器的事件机制(事件的阶段)有什么区别? 如何阻止冒泡?
事件处理机制:ie低版本只有事件冒泡阶段,高级浏览器同时支持两种事件模型,也就是:事件捕获阶段和事件冒泡阶段;
ev.stopPropagation();(旧ie的方法 ev.cancelBubble = true;)
代码题:
var w = [1,2,3,4,5];
var s =w;
s.push(6);
console.log(w)
Log输出的内容中w的值会改变吗?如果会改变,请换一种写法,让s改变时w不会改变
ES6
let和var的区别:
let关键字用来声明变量
- 不允许重复声明
- 块儿级作用域
- 不存在声明提升
var关键字用来声明变量
1)可以声明多次
2)没有局部作用域
3)可以声明提升
const关键字
const 关键字用来声明常量,const声明有以下特点
- 声明一定要赋初始值
- 不允许重复声明
- 值不允许修改
- 块儿级作用域
Vue部分
1.vue里边如何让css样式只在当前组件中生效
在组件中的style标签中加入scoped即可
<style scoped>
.box{border:1px solid #f00}
</style>
2.v-if和v-show的区别
相同点:v-if 和 v-show都可以控制dom元素隐藏。
不同点:
(1)v-if是直接销毁和重建dom节点达到让元素显示或隐藏的效果;v-show是通过修改元素的display来让其显示或隐藏。
(2)v-if可以实现组件的重新渲染,有更高的切换消耗过程,v-show有更高的初始化渲染消耗。
(3)v-if适用于运行条件不大可能改变的场合;v-show适用于频繁切换的长度
2-1 在vue.js中,如何实现控制一个元素的显示和隐藏?
3.$route 和 $router的区别
this.$route 是路由【参数对象】,所有路由中的参数, params, query 都属于它;
this.$router 是路由【导航对象】,用它 可以方便的 使用 JS 代码,实现路由的 前进、后退、 跳转到新的 URL 地址
4.vue.js的两个核心是什么?
数据驱动:保证数据和视图的一致性。
组件系统:
组件的核心选项
1 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
2 初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
3 接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。
4 方法(methods):对数据的改动操作一般都在组件的方法内进行。
5 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。
6 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
5.vue几种常用的指令
1、v-if:根据表达式值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
2、v-show:根据表达式之真假值,切换元素的 display CSS 属性。
3、v-for:循环指令,基于一个数组或者对象渲染一个列表,vue 2.0以上必须需配合 key值 使用。
4、v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。
5、v-on:用于监听指定元素的DOM事件,比如点击事件。绑定事件监听器。
6、v-model:实现表单输入和应用状态之间的双向绑定
7、v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
6.vue常用的修饰符
.stop //阻止单击事件冒泡
.prevent //提交事件不再重新加载页面
.capture //添加事件侦听器时使用事件捕获模式
.self //只当事件在该元素本身时触发回调(在其子元素上不触发)
.once //只触发一次事件
7.vue中 key 值的作用
1、元素的唯一性,diff方法中提高了匹配元素index的性能。有key时遍历key-index对象(快),无key时遍历旧Vnode(慢)。
2、在元素list一直变化的情况下,key值设置唯一时,能很精确找到变更元素,key不唯一时,不能精确找到要匹配的元素。
但对于是原地复用元素还是重新创建元素没有直接影响,只要新旧两个Vnode满足sameVnode,就会复用已有元素。
8.什么是vue的计算属性
computed
计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的 DOM 部分也会同步自动更新
9.Vue中computed、methods和watch之间的区别
10.vue等单页面应用及其优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。
单页面的优点和缺点:
优点:(数据驱动、组件化、轻量、简洁)
1、用户体验好,快,内容的改变不需要重新加载整个页面,对服务器压力较小。
2、前后端分离
3、完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整;
缺点:
1、第一次加载首页耗时相对长一些
2、不利于 SEO优化,单页页面,数据在前端渲染,就意味着没有 SEO。
3、页面导航不可用,如果一定要导航需要自行实现前进、后退。
11.请简述vue中双向数据绑定的基本实现原理,并尝试写一段原生JavaScript代码,实现简单的双向数据绑定功能
**
其他:
**
1.网络响应状态码中,200/302/304/403/404/500等常规状态码分别对应什么意思?
状 态 码 | 描述 | 解释 |
---|---|---|
200 | OK(成功) | 请求响应体包含服务器返回的数据 |
301 | 资源被永久转移到新位置 | |
302 | Found | 请求临时转移到新地址。返回新地址。 |
304 | Not Modified | 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用 |
403 | Forbidden | 请求被禁止、超出访问权限。与401不同,请求已经通过了身份验证,只是没有获得资源授权 |
404 | Not Found | 服务器无法找到被请求的资源 |
500 | Internal Server Error | 请求未完成。服务器内部遇到不可预知的错误 |
2.常规开发中,如何在浏览器中进行调试?
3.前端发送请求post与get提交的数据有什么区别?
4.操作数组的常规方法有哪些?
5.前端如何控制post请求发送的数据类型属于表单类型或者json类型?
防抖节流
https://blog.csdn.net/dreamy_wx/article/details/117286575
注:题型均来自面试中遇到的试题,答案有涉及到他人总结的地方,可以提醒我加上对应出处链接。