网站首页 > 技术文章 正文
问题分五个部分，分别是HTML、CSS、JavaScript、Vue和Web API。
HTML面试题
1. 写出HTML5的文档类型声明。
<!DOCTYPE html>
2. 列举HTML5新增的标签。
html5新增的标签有<header>、<footer>、<nav>、<article>、<section>、<video>和<audio>等
3. 列举HTML标签的全局属性。
html的全局属性有 唯一标识id、类名class、style和title，style可以直接在标签里定义css，而title显示鼠标悬停时的提示文本。
4. 如何实现资源的预加载？
使用 <link> 标签，设置 rel="preload"
5. 如何指定根URL？
在 <head> 标签中使用 <base> 标签
如<base href="https://example.com/">
6. 如何实现页面打开3秒后自动跳转至网址“http://www.gov.cn”？
在head标签里用content = "3; url=网址"
7. 简述代码”<meta name="viewport" content="width=device-width,initial-scale=1” />”的作用。
确保页面在不同设备上可以正常显示
解释：width=device - width 让页面宽度等于设备屏幕宽度， initial - scale = 1 表示初始缩放比例为1，确保页面在不同设备上能正确显示。
8. 列举“form”标签“method”和“enctype”的值及其用途。
method 的值有 get 和 post ，get 从服务器获取数据，post 向服务器提交数据。
enctype 的值有 application/x - www - form - urlencoded (默认值)，用于上传普通表单数据，multipart/form - data 用于上传文件等二进制数据，text/plain 以纯文本形式发送数据。
9. 简述“form”标签“novalidate”属性和“input”标签“required”、“pattern”属性的用途。
novalidate 是表单验证，required要求输入框是必填项，pattern 是验证输入的内容是否符合要求。
10. 谈谈你对“Data URLs”的理解。
Data URLs是一种将数据（如图片、文本等）直接嵌入到URL中的技术，它可以减少网络请求，提高页面加载速度，常用于一些小图标等资源。
11. HTML表格如何跨行、列合并单元格？
rowspan 行合并，colspan 列合并
如<td rowspan="2"> 跨行合并2行
<td colspan="3"> 跨列合并3列
12. 简述Canvas和SVG的异同。
两个都是用来画图的，Canvas基于像素，SVG基于矢量，前者不支持放大缩小不失真，后者支持，Canvas适合绘制复杂图形，且性能比SVG好。
CSS面试题
1. 简述CSS尺寸单位和颜色值。
有px、em和rem，颜色值有十六进制和RGB等
2. 简述CSS选择器优先级。
内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器、伪元素选择器。相同权重按顺序后定义的优先。
3. 简述CSS盒模型。
从外到里依次是外边距margin、边框border、内边距padding和内容content，盒子的宽高指内容的宽高。
按顺时针方向，外边距margin的用法是margin：上 右 下 左，内边距一样的用法
4. 谈谈你对Flex Box的理解。
弹性盒布局，根据窗口大小来调整内容
5. 简述块级元素与内联元素的区别。
块级元素独占一行，可设置宽高。内联元素不会独占一行，根据内容决定宽高。
6. 谈谈你对浮动的理解。
使元素脱离文档流，向左或向右浮动，周围元素会环绕它，容易造成父元素高度塌陷
7. 伪类和伪元素有什么区别？
伪类用于选择处于特定状态的元素，如 :hover ，以单冒号表示；
伪元素用于创建虚拟的元素，如 ::before ，以双冒号表示。
8. 谈谈你对定位的理解。
静态定位、相对定位、绝对定位、固定定位和粘性定位，常用相对和绝对定位。相对定位relative相对于自身位置移动，绝对定位absolute根据夫级元素定位。
9. 列举外边距合并（折叠/塌陷）的条件。
相邻块元素垂直外边距的合并，嵌套块元素垂直外边距的塌陷。
10. 举例说明你对变（转）换、过渡、动画的理解。
用变换将元素移动，过渡让移动有渐变效果，动画可以让元素按特定轨迹反复移动。
11. 举例说明“响应式”实现方式。
使用弹性布局flex或百分比布局
12. 列举你常用的简写属性及其作用。
外边距margin和内边距padding，可以同时设置上下左右的边距。
JavaScript面试题
1. 列举JavaScript数据类型。
string字符串、 number 数字、 boolean 布尔值、 null 空值、 undefined 未定义、 symbol 符号、object 对象、array 数组、 function 函数
2. 简述JavaScript变量命名规则。
以字母、下划线或美元符号开头，后面可以跟字母、数字、下划线或美元符号。
3. 举例说明var、let和const的区别。
var 存在变量提升，可重复声明
let 不存在变量提升，不允许重复声明const 常量，必须初始化且不能重新赋值
4. JavaScript条件表达式中哪些值等价于“false”？
false 、 0 、 -0 、 0n 、 "" （空字符串）、 null 、 undefined 、 NaN
5. 举例说明条件表达式就近（短路）原则。
&& 并且，当第一个操作数为 false 时，不会再计算第二个操作数。
|| 或，当第一个操作数为 true 时，不会再计算第二个操作数。
6. 简述“continue”、“break”和“return”语句的区别。
continue跳过这次循环继续下一次循环
break结束循环
return结束函数并返回值
7. for……in、for……of、forEach有何区别？
for……in遍历对象的可枚举属性
for……of遍历可迭代对象
forEach遍历数组
8. 举例说明如何获取函数的参数个数。
用length，如console.log(num.length)
9. JavaScript匿名函数和“箭头”函数有何不同？
匿名函数是没有名字的函数，通常用于临时定义一个函数。
箭头函数是ES6引入的新语法，更简洁，且没有自己的 this 、 arguments 等绑定， this 取决于定义时的上下文。
10. 简述async、await关键字的用途。
async 用于定义一个异步函数，该函数返回一个 Promise 对象。
await 只能在 async 函数内部使用，用于暂停异步函数的执行，等待 Promise 被解决（resolved）或被拒绝（rejected）。
11. Function对象的call、bind和apply方法有何异同？
相同点：都能改变函数内部 this 的指向。不同点： call 和 apply 会立即执行函数， call 接受参数列表， apply 接受数组形式的参数。 bind 返回一个新函数，不会立即执行，可用于预先绑定 this 和部分参数。
12. 简述isFinite( )和isNaN( )的用途。
isFinite() 用于判断一个值是否为有限的数字。
isNaN() 用于判断一个值是否为 NaN （非数字）。
13. 举例说明Array.splice( )方法的用途。
let arr = [1, 2, 3, 4, 5]
14. 闭包是什么？举例说明如何基于闭包实现私有属性和方法？
有权访问另一个函数内部变量的函数。
15. 举例说明如何基于对象的原型定义属性和方法？
16. 谈谈你对原型链和继承的理解。
原型链是指对象通过 __proto__ 属性连接到其原型对象，形成的一条链。
继承是指一个对象可以继承另一个对象的属性和方法。
17. 简述set、get、#、static、this、constructor、super、extends的用途。
set 和 get 用于定义对象的存取器属性，可拦截对属性的赋值和取值操作。
# 用于定义类的私有属性。
static 用于定义类的静态成员，可通过类名直接访问。
this 指向函数执行时的上下文对象。
constructor 是类的构造函数，用于创建和初始化类的实例。
super 用于在子类中调用父类的构造函数或方法。
extends 用于实现类的继承，指定子类继承自哪个父类。
18. 举例说明“？”在正则表达式贪婪模式方面的应用。
在贪婪模式下， * 、 + 、 ? 等量词会尽可能多地匹配字符。
例如，正则表达式 /\d+?/ ， ? 使 + 变为非贪婪模式，会尽可能少地匹配数字。
字符串 "123abc" ， /\d+?/ 会匹配到 "1" ，而 /\d+/ 会匹配到 "123" 。
19. 举例说明正则表达式如何匹配汉字？
可以使用 /[\u4e00-\u9fa5]/ 来匹配单个汉字。
Web API面试题
1. 谈谈你对事件冒泡和事件委托的理解。
事件冒泡：指当一个元素触发某个事件时，该事件会从当前元素开始向上传播，依次触发父元素上相同类型的事件，直到到达文档根节点。
事件委托：是一种利用事件冒泡机制来优化事件处理的技术。将事件处理程序绑定到父元素上，而不是每个子元素都绑定，通过判断事件源来确定具体是哪个子元素触发了事件，从而执行相应的操作。
2. 举例说明如何在元素遍历的过程中移除某个元素？
使用 parentNode.removeChild() 方法来移除元素。
3. 谈谈你对Cookie、LocalStorage、SessionStorage的理解。
Cookie：通常用于身份验证、记录用户偏好等。Cookie有过期时间，存储容量小。
LocalStorage：数据会一直保留，直到被手动删除。存储容量较大，一般为5MB - 10MB。
SessionStorage：数据仅在当前会话期间有效，浏览器关闭后数据会被清除，存储容量较大。
4. 谈谈你对Promise的理解。
Promise是一种异步编程的解决方案，用于处理异步操作的结果。它代表一个尚未完成但预期将来会完成的操作，有三种状态： pending 进行中、 fulfilled 已成功和 rejected 已失败。
5. JSON可（反）序列化哪些类型的数据？
对象、数组、字符串、数字、布尔值、 null
6. JSON.parse( )和JSON.stringify( )的用途是什么？
JSON.parse() ：用于将JSON格式的字符串转换为JavaScript对象。
JSON.stringify() ：用于将JavaScript对象转换为JSON格式的字符串。
Vue面试题
vue的面试题在第二篇已经复习了，这里就不写了。我们一起学习前端知识吧[来看我]
猜你喜欢
- 2025-06-18 服务端渲染SSR:渐进式水合技术前沿
- 2025-06-18 详解如何使用vite-plugin-svg-icons在Vue3项目中集成SVG图标
- 2025-06-18 前端能限制用户截图吗?（前端限制图片大小）
- 2025-06-18 极客Web前端开发资源大荟萃#020（极客代码）
- 2025-06-18 SVG Drawing Animation – SVG 绘制
- 2025-06-18 想要字体图标设计师却给了SVG?没关系，自己转
- 2024-10-04 css实现的svg路径动画html页面前端源码
- 2024-10-04 5分钟搞懂SVG画图 svg绘制
- 2024-10-04 svg、canvas、css 3d 实现数据可视化(伪 3D 效果)
- 2024-10-04 零基础如何入门SVG?( 计育韬老师高校公益巡讲答疑实录2024)
欢迎 你 发表评论:
- 532℃Oracle分析函数之Lag和Lead()使用
- 531℃几个Oracle空值处理函数 oracle处理null值的函数
- 529℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 519℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 513℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 504℃【数据统计分析】详解Oracle分组函数之CUBE
- 484℃最佳实践 | 提效 47 倍，制造业生产 Oracle 迁移替换
- 483℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (61)
- 前端数组 (73)
- 前端排序 (47)
- 前端密码加密 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论，来添加一个吧(●'◡'●)