2024年前端最新零基础也能看懂！16个前端小知识之小白入门篇(2)，2024年最新Web前端程序员面试笔试宝典

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3、 IOS 手机容器滚动条滑动不顺畅

overflow: auto;
-webkit-overflow-scrolling: touch;

4、修改滚动条样式

隐藏 div 元素的滚动条

div::-webkit-scrollbar {
display: none;
}

5、解决 ios audio / video 无法自动播放、循环播放的问题

// 解决ios audio无法自动播放、循环播放的问题
var music = document.getElementById(‘video’);
var state = 0;

document.addEventListener(‘touchstart’, function(){
if(state==0){
music.play();
state=1;
}
}, false);

document.addEventListener(“WeixinJSBridgeReady”, function () {
music.play();
}, false);
//循环播放
music.onended = function () {
music.load();
music.play();
}

6、去除图片底边3像素的问题

img {
vertical-align:middle
}

7、contenteditable

contenteditable=“true” 可以将标签变成可编辑状态。

8、CSS中calc()方法

这个属性能适应自适应的布局。

div {
width: calc(50% - 20px);
}

9、解析get 参数

通过 replace 方法获取 url 中的参数键值对，可以快速解析 get 参数。

const q = {};
location.search.replace(/([^?&=]+)=([&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);

10、解析连接url

创造 a 标签，给 a 标签赋值 href 属性的方式，获取到协议，pathname，origin等 location 对象上的属性。

// 创建a标签
const aEle = document.createElement(‘a’);
// 给a标签赋值href路径
aEle.href = ‘/test.html’;
// 访问aEle中的属性
aEle.protocol; // 获取协议
aEle.pathname; // 获取path
aEle.origin;
aEle.host;
aEle.search;

11、浏览器秒变编辑器

HTML5中新加的contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。

data:text/html,

12、文字模糊效果

color: transparent;
text-shadow: #111 0 0 5px;

13、多重边框

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】