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

短命女 2023-10-10 13:28 32阅读 0赞

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

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

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

**图片懒加载的原理**  
图像是img标记，浏览器根据图像的src属性请求图像，因此[惰性加载][Link 1]的关键是当图像不在可视区域时，不给\`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 图形。  
**二者比较**

![25d78e3705f442f155950a9a921ee202.png][]

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

关于CSS

![f77379448f0276479b4655a0197d0252.png][]

**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] 属性。  
基础语法：  
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实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为[生命周期][Link 2]。

![782ac9c7745e65d767b722a3c0f5f0c0.png][]

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

![5d9a227bb432da7c436317f80a26e4c1.png][]

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

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

[Link 1]: https://www.zhihu.com/search?q=%E6%83%B0%E6%80%A7%E5%8A%A0%E8%BD%BD&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[25d78e3705f442f155950a9a921ee202.png]: https://img-blog.csdnimg.cn/img_convert/25d78e3705f442f155950a9a921ee202.png
[f77379448f0276479b4655a0197d0252.png]: https://img-blog.csdnimg.cn/img_convert/f77379448f0276479b4655a0197d0252.png
[background-origin]: https://www.zhihu.com/search?q=background-origin&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[background-size]: https://www.zhihu.com/search?q=background-size&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[background-repeat]: https://www.zhihu.com/search?q=background-repeat&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[word-wrap]: https://www.zhihu.com/search?q=word-wrap&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[border-_-radius]: https://www.zhihu.com/search?q=border-*-radius&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[border-image]: https://www.zhihu.com/search?q=border-image&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[vue.js]: https://www.zhihu.com/search?q=vue.js&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[Link 2]: https://www.zhihu.com/search?q=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D
[782ac9c7745e65d767b722a3c0f5f0c0.png]: https://img-blog.csdnimg.cn/img_convert/782ac9c7745e65d767b722a3c0f5f0c0.png
[5d9a227bb432da7c436317f80a26e4c1.png]: https://img-blog.csdnimg.cn/img_convert/5d9a227bb432da7c436317f80a26e4c1.png
[Link 3]: https://www.zhihu.com/search?q=%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A420172671%7D