前端面试难？面试宝典拿来吧你

相信各位端友们在面试的时候都遇见过比较专业的面试问题，这边简单的汇总了一些常见的面试问题，文章最后还有福利宝典~

关于HTML
img标签的title和alt属性有什么区别？

• alt：图片加载失败时，显示在网页上的替代文字
• title：鼠标（手机端该属性无意义）放在图片上时显示的文字
• alt是必需属性（但属性值可为空），title非必需

图片懒加载的原理
图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。

H5新增了哪些标签？
常见的有：article、aside、audio、video、footer、header、nav、section

H5和H4有什么不同？
H5新特性有： 用于媒体回放的video和audio元素 对本地离线存储的更好的支持 新的特殊内容元素，如article、footer、header、nav、section
简单地说，它更标准，提供更多的多功能支持。更标准、更可读性、更好的性能和更方便的执行。

块级元素、行内元素分别有哪些？
块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行内元素：span, strong, em, br, img , input, label, select, textarea, cite

SVG和CANVAS的区别？
SVG
表示以XML格式定义图像的可伸缩矢量图形。
CANVAS
通过 JavaScript 来绘制 2D 图形。
二者比较

svg如何调整颜色
标签fill属性设置即可

关于CSS

css3新的特性？
RGBA和透明度
是RGB颜色模型的一个扩展。本质上，在设置元素中添加了一个alpha通道，即一个表示除红色、绿色和蓝色三种颜色之外的透明度的通道。
background属性

• background-image：设置元素的背景图像。
• background-origin：规定背景图片的定位区域。
• background-size ：规定背景图片的尺寸。
• background-repeat：设置是否及如何重复背景图像。

word-wrap属性
word-wrap 属性允许长单词或 URL 地址换行到下一行。
注：所有主流浏览器都支持 word-wrap 属性。

基础语法：
word-wrap: normal|break-word;
text-shadow属性
text-shadow 属性：向文本设置阴影。
text-shadow基础语法：
text-shadow： 5px 5px 5px #FF0000;
参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；
font-face属性
font-face属性：定义自己的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

border-radius属性
border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。
基础语法：
border-radius: 1-4 length|% / 1-4 length|%;
注：该属性允许您为元素添加圆角边框！
border-image属性
border-image：将图片规定为包围 div 元素的边框
border-image基础语法：
border-image: url(border.png) 30 30 round
box-shadow属性
box-shadow属性：向框添加一个或多个阴影。（盒阴影）
box-shadow基础语法：
box-shadow: 10px 10px 5px #888888

于VUE
双向绑定的原理？
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过 object.defineproperty劫持各个属性的setter和gettr，在数据 变动时发布消息给订阅者，触发相应的的监听回调。
vue的生命周期有哪些？
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

除了以上面试题，这边还有一线名企的笔试面试真题

一共223道面试真题，私信我领取前端面试宝典喔~

最后不要忘记点赞加关注喔~