一、HTML篇

1、简述一下你对HTML语义化的理解？

- 使用正确的标签做正确的事情，HTML语义化让页面的内容结构化，结构更清晰，便于浏览器解析和搜索引擎优化（SEO），即使没有样式，页面也能以文档格式显示，并且容易阅读维护。<header>,<nav>,<main>,<footer>等标签。

2、标签上title与alt属性的区别是什么？

alt是给搜索引擎识别的，在图像无法显示时的替代文本；title是关于元素的注释信息，当鼠标悬停时会显示，在IE浏览器中，alt起到了title的作用。

3、iframe的优缺点？

- 优点：解决加载缓慢的第三方内容如图标和广告等的加载问题，Security sandbox，并行加载脚本。

- 缺点：阻塞主页面Onload事件，即时内容为空，加载也需要时间，没有语意。

4、href与src的区别？

href指定网络资源的位置，建立当前元素或当前文档之间的链接；src指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。

二、CSS篇

1、介绍一下CSS的盒子模型？

- 盒模型包括内容（content）、填充（padding）、边框（border）和外边距（margin），有两种标准：IE盒子模型和W3C盒子模型。

2、css选择器优先级？

- 从高到低依次为：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符。

3、垂直居中的几种方式？

- 单行文本：line-height

- 定高块状元素：margin负值

- 不定高：absolute + transform

- 弹性布局：flex

- 网格布局：grid

三、HTML/CSS混合篇

1、HTML5、CSS3新增了哪些特性？

- HTML5新增了语义化标签，本地存储，音视频标签等，CSS3新增了圆角，阴影，动画，渐变等。

2、BFC是什么？

- BFC（Block Formatting Context）是CSS布局中的一种渲染规则，用于处理内外边距重叠、清除浮动等问题。

四、JS篇

1、JS数据类型有哪些？

- 基本数据类型有Number, String, Boolean, Undefined, Null, BigInt, Symbol，复杂数据类型有Object, Array, Function, Date, RegExp, Error等。

2、null和undefined的区别？

null表示“没有对象”，即该处不应该有值；而undefined表示变量被声明但未初始化。

3、new操作符具体干了什么？

new操作符创建一个新实例，执行构造函数，绑定this指向新创建的对象，并返回该对象。

4、JSON的了解？

- JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

五、Vue篇

1、谈谈你对MVVM开发模式的理解？

- MVVM模式通过ViewModel连接Model和View，View和Model之间没有直接联系，通过ViewModel进行交互，实现双向绑定。

2、v-if和v-show有什么区别？

v-if是条件渲染，会根据条件决定是否渲染元素；v-show则是通过设置CSS的display属性来控制元素的显示和隐藏。

3、Vue组件间通信有哪几种方式？

- 父子组件通信：props/events；兄弟组件通信：event bus或者vuex；跨级组件通信：provide/inject，或者利用全局状态管理工具如Vuex。

六、其他杂项篇

1、常见的浏览器内核有哪些？

- Trident（IE），Gecko（Firefox），Webkit（Safari，Chrome），EdgeHTML（旧版Edge），Blink（Chrome切换后的内核）。

2、网页前端性能优化的方式有哪些？

- 减少HTTP请求，使用CDN，开启Gzip，添加缓存头，压缩代码，按需加载，异步加载等。

3、HTTP常见的状态码？

- 200（成功），301（永久重定向），302（临时重定向），400（客户端错误），401（未授权），403（禁止访问），404（未找到），500（服务器内部错误），503（服务不可用）。

通过对这些常见前端问题的解答，可以帮助开发者更好地准备技术面试，提高面试成功率，希望本文能对大家有所帮助！