Web前端面试题(附答案及解析)（2025.7月最新版）

欢迎大家来到IT世界,在知识的湖畔探索吧!

目录

一、HTML篇

1、HTML5 新增那些标签?（⭐）

2、块元素、行内元素、行内块元素，三者有何不同以及区别？（⭐）

3、HTML4、HTML5、XML、XHTML它们之间有什么区别？（⭐）

4、DOCTYPE(⽂档类型) 的作⽤（⭐）

5、localStorage、sessionStorage、cookie 三者区别对比？（⭐⭐⭐）

6、网站TDK三大标签以及SEO优化 （⭐）

7、img标签的title属性与alt属性的区别是什么？（⭐）

8、src 和 href 的区别？（⭐）

9、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ （⭐）

10、iframe的基本介绍与使用 （⭐⭐⭐）

二、CSS篇

1、说一下 link 与 @import 的区别和用法？（⭐）

2、rgba和opacity的透明效果有什么不同？（⭐⭐）

3、display:none与visibility:hidden的区别？（⭐⭐）

4、定位布局 position中的relative、absolute、fixed、sticky它们之间的区别？（⭐⭐⭐）

5、如何用CSS3画一条0.5px的直线？（⭐）

6、如何用CSS3画一个三角形？（⭐）

7、CSS3盒子模型：标准盒模型、怪异盒模型（⭐⭐⭐）

8、浮动（float)以及清除浮动的方法（⭐⭐）

9、Flex布局（⭐⭐⭐）

10、CSS3中 transform 属性~平面转换（⭐）

11、CSS3中 “子绝父相” 定位布局（⭐⭐⭐）

12、盒子居中的几种方法：“子绝父相”、“Flex布局”、“transform”（⭐⭐⭐）

13、CSS3中有哪些新特性？（⭐）

14、CSS3选择器及其优先级（⭐）

15、CSS3中 “transition” 过渡属性（⭐）

16、结构伪类选择器&伪元素选择器（⭐）

17、display的block、inline和inline-block的区别？（⭐）

18、定位堆叠顺序z-index（⭐）

三、HTML&&CSS混合篇

1、Localstorage、sessionStorage、cookie 的区别（⭐⭐⭐）

2、如何实现双飞翼（圣杯）布局？ （⭐）

3、伪元素和伪类的区别和作用？（⭐）

4、img 的 alt 与 title 的异同，还有实现图片懒加载的原理？（⭐）

5、BFC 是什么？ （⭐）

四、JavaScript篇

1、JS基础类型和复杂类型（⭐⭐⭐）

2、箭头函数与普通函数的区别？（⭐⭐⭐⭐）

3、JS中null和undefined的判断方法和区别？（⭐⭐⭐）

4、原型链（⭐⭐⭐）

5、v-show 与 v-if 的区别？（⭐⭐）

6、keep-alive 的作用是什么?（⭐⭐）

7、闭包的理解?（⭐⭐⭐⭐⭐）

8、JS垃圾回收机制（⭐⭐⭐⭐⭐）

9、nextTick的实现？（⭐⭐）

10、混入mixin的原理？（⭐⭐）

11、js列举和数组操作相关的方法(常用)（⭐⭐⭐⭐⭐）

12、typeof和instanceof的区别是什么？ （⭐⭐）

13、JS中 “==“和“===“的区别详解（⭐⭐）

14、如何用原生 JS给一个按钮绑定两个 onclick 事件？（⭐⭐）

15、var、let和const的区别？（⭐⭐⭐）

16、讲解js的call、apply和bind区别？（⭐⭐⭐）

17、谈谈你对webpack的理解？（⭐⭐⭐）

18、 const定义的对象属性是否可以改变？（⭐⭐）

19、栈溢出及解决方法？（⭐⭐⭐）

20、JS如何实现多线程？（⭐⭐⭐）

21、浅拷贝和深拷贝区别概念常见情况？（⭐⭐⭐⭐）

22、事件循环，Promise和async/await的详解（⭐⭐⭐⭐）

23、JS中数组常用方法详解 （⭐⭐⭐⭐）

五、Vue2篇

1、什么是前端构建工具?比如（Vue2的webpack，Vue3的Vite）（⭐⭐）

2、Vue 组件之间的通信方式（⭐⭐⭐⭐⭐）

3、Vuex的理解及使用场景（⭐⭐⭐）

4、vue 的生命周期 八个阶段（⭐⭐⭐⭐）

5、简述Vue每个周期具体适合哪些场景？（⭐⭐⭐）

6、简述MVVM 和MVC的原理以及区别？（⭐⭐⭐）

7、vue常见指令（⭐⭐⭐）

8、vue中的data为什么是一个函数？起到什么作用？ （⭐⭐⭐）

9、vue中ref的作用？ （⭐⭐⭐）

10、Vue中hash和history的区别 ？ （⭐⭐⭐）

六 、Vue3篇

1、Vue2.0和Vue3.0的区别？（⭐⭐⭐⭐）

2、Vue3带来了什么改变？ （⭐⭐⭐）

3、生命周期（vue2和vue3的生命周期对比）有哪些？（⭐⭐⭐）

4、Vue3.0中的响应式原理是什么？vue2的响应式原理是什么？（⭐⭐⭐）

5、vue3的常用 Composition API有哪些？（⭐⭐⭐）

6、Vue3中的ref函数（⭐⭐⭐）

七、React篇

1、讲讲什么是 JSX ？（⭐⭐⭐）

2、React 的生命周期方法有哪些？（⭐⭐⭐）

3、React的Hooks详解（⭐⭐⭐⭐⭐）

4、React和Vue.js的相似性和差异性是什么？（⭐⭐）

5、React的功能是什么？ （⭐⭐）

6、React的一些主要优点是？（⭐⭐）

7、React的局限性是什么？（⭐⭐）

8、如何理解React State不可变性的原则（⭐⭐）

9、React的特点和关键版本区别？（⭐⭐）

10、React Fiber的深入理解（⭐⭐）

八、uniapp篇

1、uniapp优缺点（⭐⭐）

2、uniapp目录结构（⭐）

3、跨端适配—条件编译 （⭐⭐）

4、uniapp 常用的指令语句（⭐⭐）

5、uniapp 应用的生命周期、页面的生命周期、组件的生命周期（⭐⭐）

九、Webpack篇

1、Webpack是什么？（⭐⭐）

2、Webpack的打包过程/打包原理/构建流程？ （⭐⭐）

3、Webpack中loader的作用/ loader是什么？（⭐⭐）

4、常见的loader有哪些？（⭐⭐）

5、Plugin有什么作用？Plugin是什么？（⭐⭐）

6、常见的Plugin有哪些？（⭐⭐）

7、Webpack中Loader和Plugin的区别（⭐⭐）

8、如何利用webpack来优化前端性能？（⭐⭐）

9、Webpack如何配置压缩代码？压缩了什么？（⭐⭐）

10、如何提高webpack的构建速度？ （⭐⭐）

十、Git/SVN篇

1、Git是什么？（⭐⭐）

2、简述Git中如何将一个新增文件添加到本地仓库？（⭐⭐）

3、Git常用命令（⭐⭐⭐）

4、Git和SVN有什么区别?（⭐⭐）

十一、B站开源视频大汇总，前端从入门到精通

1、web 入门（HTML5+CSS3）

2、js（JavaScript+jQuery+Ajax）

3、Vue 开发（Vue2+Vue3+实战项目）

4、React &&微信小程序开发&&uniapp

5、华为鸿蒙进阶

6、ssr（Nuxt+Next.js）

7、工程化（webpack+vite）

8、可视化（echarts ）

9、源码（虚拟DOM和diff算法）

10、移动App跨端开发（Uni-App）

11、桌面应用开发（Electron）

12、网络知识（网络概述+结构算法）

13、浏览器底层原理

觉得有帮助的小伙伴右上角点赞收藏哦~会一直持续更新得呦~有好的建议私信我~
一、HTML篇

1、HTML5 新增那些标签?（⭐）
（1）布局标签（语义化标签）

<header> : 头部标签
<nav> : 导航标签
<article> : 内容标签
<section> : 定义文档某个区域
<aside> : 侧边栏标签
<footer> : 底部标签
图形结合记忆法：

欢迎大家来到IT世界,在知识的湖畔探索吧!

（2）视频标签(video)

autoplay 布尔属性，若存在则视频在加载完成后自动播放。 <video autoplay></video>
controls 布尔属性，若存在则显示视频控制控件（如播放按钮、进度条、音量控制等）。 <video controls></video>
loop 布尔属性，若存在则视频播放完毕后自动循环播放。 <video loop></video>
muted 布尔属性，若存在则视频默认静音。 <video muted></video>
poster 指定视频加载时显示的预览图片 URL，若未设置则显示视频第一帧。 <video poster=”preview.jpg”></video>
preload 定义视频的预加载方式，可选值：
– auto：自动预加载视频
– metadata：仅加载视频元数据（如时长、尺寸）
– none：不预加载视频 <video preload=”metadata”></video>
src 指定视频文件的 URL。 <video src=”video.mp4″></video>
width 设置视频的宽度（像素值）。 <video width=”800″></video>
height 设置视频的高度（像素值）。 <video height=”450″></video>
playsinline 布尔属性（主要用于移动端），若存在则视频在浏览器内播放，不进入全屏模式（需配合浏览器兼容性设置）。 <video playsinline></video>
controlslist 自定义控制控件的显示 / 隐藏，可选值（用空格分隔）：
– nodownload：隐藏下载按钮
– nofullscreen：隐藏全屏按钮
– noremoteplayback：禁止远程播放 <video controlslist=”nodownload nofullscreen”></video>
crossorigin 配置视频的跨域请求策略，可选值：
– anonymous：匿名跨域
– use-credentials：带凭证跨域 <video crossorigin=”anonymous”></video>
mediagroup 将多个视频元素分组，用于同步控制（如多个视频同时播放 / 暂停）。 <video mediagr
（3）音频标签(audio)

autoplay 布尔属性，若存在则音频在加载完成后自动播放。 <audio autoplay></audio>
controls 布尔属性，若存在则显示音频控制控件（如播放按钮、进度条、音量控制等）。 <audio controls></audio>
loop 布尔属性，若存在则音频播放完毕后自动循环播放。 <audio loop></audio>
muted 布尔属性，若存在则音频默认静音。 <audio muted></audio>
preload 定义音频的预加载方式，可选值：
– auto：自动预加载音频
– metadata：仅加载音频元数据（如时长、采样率）
– none：不预加载音频 <audio preload=”metadata”></audio>
src 指定音频文件的 URL。 <audio src=”music.mp3″></audio>
（4）图片标签（img）

src 指定图片文件的 URL，是标签的必需属性。 <img src=”image.jpg”>
alt 图片的替代文本，当图片无法加载或需要无障碍访问时显示。 <img alt=”风景图片”>
width 设置图片的宽度（像素值或百分比）。 <img width=”800″>
height 设置图片的高度（像素值或百分比），建议与width配合使用以避免图片变形。 <img height=”450″>
loading 定义图片的加载时机，可选值：
– eager：立即加载
– lazy：延迟加载（浏览器视口外的图片暂不加载） <img loading=”lazy”>
srcset 提供多个不同分辨率的图片 URL，浏览器会根据设备屏幕尺寸自动选择最佳图片。 <img srcset=”img-320.jpg 320w, img-640.jpg 640w”>
sizes 配合srcset使用，定义不同屏幕尺寸下应加载的图片尺寸，格式为(媒体条件) 图片宽度, 默认宽度。 <img sizes=”(max-width: 600px) 100vw, 600px”>
crossorigin 配置图片的跨域请求策略，可选值：
– anonymous：匿名跨域
– use-credentials：带凭证跨域 <img crossorigin=”anonymous”>
decoding 定义图片的解码优先级，可选值：
– async：异步解码（不阻塞页面渲染）
– sync：同步解码
– auto：浏览器自动决定 <img decoding=”async”>
class/id 为图片添加 CSS 类名或唯一标识符，用于样式控制或 JavaScript 操作。 <img class=”gallery-img” id=”main-img”>
usemap 关联图片映射（map标签），用于定义图片上的可点击区域。 <img usemap=”#image-map”>
ismap 布尔属性，若存在则图片为服务器端映射，点击图片会向服务器发送点击坐标。 <img ismap src=”map.jpg”>
（5）新的 API

音视频：audio 和 video 元素
绘图图形：canvas 元素
本地存储：localStorage，sessionStorage
多线程操作：Web Worker （Web Worker 是HTML5 新特性，允许我们在 js 主线程之外开辟新线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力 ）
更多HTML5新属性=>W3Cschool官网：开始学习HTML5_w3cschool

语义化的优点如下：

在没有CSS样式情况下也能够让页面呈现出清晰的结构
有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
方便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化
2、块元素、行内元素、行内块元素，三者有何不同以及区别？（⭐）
本质区别
分类 布局特性 典型标签
块级元素 独占一行，默认宽度 100%，可设置宽高、内外边距 <div>, <p>, <h1>, <ul>
行内元素 不独占行，宽度由内容决定，无法直接设置宽高，边距部分生效 <span>, <a>, <em>, <strong>
行内块元素 不独占行，但可设置宽高，兼具行内元素和块级元素的特性 <img>, <input>, <button>, <select>
（1）块元素

空间占据：默认占据父容器 100% 宽度，垂直方向与其他块级元素堆叠排列
尺寸可控：可通过 CSS 自由设置width、height、margin、padding
布局基石：常用于构建页面框架（如导航栏、内容区、页脚）
嵌套规则：通常可包含块级元素和行内元素，但<p>等少数标签例外
（2）行内元素

行内排列：多个行内元素在同一行排列，直到父容器宽度不足时换行
尺寸限制：无法通过 CSS 设置width、height，仅内容撑开盒子
边距特性：margin-left/right有效，margin-top/bottom无效；padding全方向生效但不影响布局
嵌套规则：只能包含文本或其他行内元素，不能包含块级元素（<a>标签可嵌套行内元素但需注意嵌套规范）
（3）行内块元素

行内排列：可与其他行内 / 行内块元素在同一行排列
尺寸可控：可设置width、height、margin、padding
基线对齐：默认基于文本基线对齐（可通过vertical-align调整）
空白间隙：多个行内块元素之间的 HTML 空白（空格、换行）会渲染为间距
3、HTML4、HTML5、XML、XHTML它们之间有什么区别？（⭐）
技术 核心应用场景 当前趋势
HTML4 老旧网页、兼容性要求极高的 legacy 系统 逐步淘汰，仅在历史项目中使用
HTML5 现代网页开发、响应式设计、Web 应用（如单页应用）、移动端 H5 页面 主流标准，持续迭代新特性（如 WebGPU、WebAssembly）
XML 配置文件（如 Android manifest）、企业级数据交换（SOAP）、RSS、后端系统集成 在数据交换中仍有应用，但部分场景被 JSON 取代
XHTML1.0 早期移动设备网页、需严格 XML 解析的场景 极少新建项目使用，主要用于历史兼容
4、DOCTYPE(⽂档类型) 的作⽤（⭐）
DOCTYPE（文档类型）的核心作用与机制解析

一、DOCTYPE 的本质与核心功能

DOCTYPE（Document Type Declaration，文档类型声明）是 HTML 文档的 “身份标识”，其核心作用是：

告知浏览器解析规则：
声明当前文档遵循的 HTML 或 XML 标准（如 HTML4、HTML5、XHTML），让浏览器以对应模式渲染页面，避免因规则不明确导致的显示异常。

触发浏览器的渲染模式：

标准模式（Standard Mode）：严格遵循 W3C 标准解析 CSS 和布局。

怪异模式（Quirks Mode）：兼容旧浏览器的非标准解析方式（仅在 DOCTYPE 缺失或格式错误时触发）。

二、不同 DOCTYPE 的声明格式与作用对比

文档类型 DOCTYPE 声明示例 作用与浏览器行为
HTML5 <!DOCTYPE html> – 最简声明，告诉浏览器按 HTML5 标准解析，触发标准模式。
– 无需引用 DTD，语法简化，兼容现代浏览器。
HTML4.01 严格型 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “
http://www.w3.org/TR/html4/strict.dtd”> – 强制使用 HTML4 严格规范，禁止表现层标签（如<font>）和框架（<frameset>）。

– 触发标准模式，适合规范严格的网页。
HTML4.01 过渡型 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “
http://www.w3.org/TR/html4/loose.dtd”> – 允许使用表现层标签和过时特性，兼容旧项目。

– 触发标准模式，但对语法宽松度更高。
XHTML 1.0 严格型 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> – 遵循 XML 语法（标签小写、必须闭合等），禁止表现层标签。

– 需配合 XML 声明（<?xml version=”1.0″ encoding=”UTF-8″?>），触发标准模式。
无 DOCTYPE 声明 无 – 浏览器触发 “怪异模式”，按旧版本规则解析（如 IE6 的盒模型计算方式）。
– 可能导致布局错乱，现代开发中必须避免。
5、localStorage、sessionStorage、cookie 三者区别对比？（⭐⭐⭐）
特性 Cookie localStorage sessionStorage
存储大小 4KB 左右 5MB 或更大 5MB 或更大
数据有效期 可设置失效时间，默认浏览器关闭后失效。 除非被手动清除，否则永久保存。 仅在当前会话期间有效，关闭页面或浏览器后被清除。
与服务器通信 每次 HTTP 请求都会携带 cookie 数据，因此会带来额外的性能开销。 仅在客户端存储，不参与服务器通信。 仅在客户端存储，不参与服务器通信。
可见范围 在所有同源窗口中都是共享的。 在所有同源窗口中都是共享的。 在不同浏览器窗口中不共享，即使是同源的。
应用场景 用于身份验证（如登录状态）、跟踪用户会话等。 用于长期保存网站的配置信息、缓存数据等。 用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据不需要保留的场景。
读写 API 需要手动解析和设置 document.cookie，操作繁琐。 简单的 API：setItem (key, value)、getItem (key)、removeItem (key)、clear ()。 与 localStorage 相同：setItem (key, value)、getItem (key)、removeItem (key)、clear ()。
浏览器支持 所有主流浏览器都支持，包括 IE6+。 HTML5 新特性，IE8 + 支持。 HTML5 新特性，IE8 + 支持。
6、网站TDK三大标签以及SEO优化 （⭐）
标签 定义 SEO 优化要点 常见误区
Title（标题） 网页的标题，显示在浏览器标签栏和搜索结果标题位置，是搜索引擎判断页面主题的核心依据。 1. 长度控制在 55-60 字符（避免被搜索引擎截断）
2. 核心关键词前置，自然融入品牌名
3. 避免重复，每个页面唯一
4. 用「-」「 」分隔关键词，增强可读性。 1. 堆砌关键词（如 “SEO 优化，SEO 公司，SEO 服务”）
2. 标题过长或过短
3. 所有页面标题相同（如统一使用 “首页”）。
Description（描述） 网页的内容摘要，显示在搜索结果标题下方，用于引导用户点击并简述页面价值。 1. 长度控制在 150-160 字符
2. 包含核心关键词，自然扩展为语句
3. 突出页面优势（如服务、内容、优惠等）
4. 避免堆砌，保持语句通顺。 1. 重复关键词（如 “专注 SEO 优化，SEO 优化服务，提供专业 SEO 优化”）
2. 描述与页面内容无关
3. 照搬 Title 内容。
Keywords（关键词） 早期用于标注页面核心关键词，但目前主流搜索引擎（如百度、谷歌）已弱化其权重。 1. 仅保留 3-5 个核心关键词（与 Title、内容强相关）
2. 避免使用宽泛词（如 “互联网”“软件”）
3. 不强制填写，若填写需与内容高度匹配。 1. 堆砌大量无关关键词（如 “SEO, 淘宝，京东，拼多多”）
2. 使用竞争对手品牌词
3. 过度依赖 Keywords 标签（忽略内容本身优化）。
7、img标签的title属性与alt属性的区别是什么？（⭐）
特性 title 属性 alt 属性
定义 为元素提供额外的提示信息 为无法显示图像的用户提供替代文本
显示时机 鼠标悬停在元素上时显示 图像无法加载时显示；屏幕阅读器朗读；搜索引擎抓取内容
必要性 可选 必须（无障碍标准要求）
内容侧重点 补充说明图像的细节或背景信息 简明扼要地描述图像内容和功能
对 SEO 的影响 权重较低，辅助理解 权重较高，影响搜索排名
示例代码 <img src=”logo.png” title=”公司Logo：XX科技”> <img src=”logo.png” alt=”XX科技公司Logo”>
8、src 和 href 的区别？（⭐）
特性 src（Source） href（Hypertext Reference）
定义 指向需要嵌入当前文档的资源（如图片、脚本、视频等）。 指向与当前文档相关的外部资源（如样式表、链接等），建立当前文档与目标资源的关联。
作用 替换当前元素或引入外部资源到文档中，成为文档的一部分。 建立超链接关系，不替换当前元素，仅表示关联。
加载行为 浏览器会暂停对当前文档的解析，优先下载并处理 src 指向的资源（同步加载）。如：<img src>、<script src>。 浏览器继续解析文档，并行下载 href 资源（异步加载）。如：<link href>、<a href>。
应用场景 – 图片：<img src=”image.jpg”>
– 脚本：<script src=”script.js”></script>
– 视频：<video src=”video.mp4″></video>。 – 样式表：<link href=”style.css” rel=”stylesheet”>
– 超链接：<a href=”page.html”>链接</a>
– 外部资源：<link href=”favicon.ico” rel=”icon”>。
9、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ （⭐）
（1）title与h1的区别

特性 title（HTML 标签） h1（HTML 标题标签）
定义 定义整个 HTML 文档的标题（显示在浏览器标签栏）。 定义页面的主标题（通常是页面最重要的标题）。
位置 必须放在<head>标签内：
<head><title>页面标题</title></head>。 放在<body>标签内：
<body><h1>页面主标题</h1></body>。
SEO 权重 高（搜索引擎判断页面主题的核心依据）。 高（页面内容的核心主题）。
用户可见性 仅显示在浏览器标签栏、历史记录和书签中。 直接显示在网页内容中。
最佳实践 每个页面的 title 需唯一，包含核心关键词和品牌名。 每个页面只能有一个 h1 标签，通常与 title 相关但更具体。
示例 <title>SEO优化服务-专业网站排名提升-XX科技</title>。 <h1>专业SEO优化解决方案</h1>。
（2）b与strong 的区别

特性 b（Bold） strong（Strong Importance）
语义 仅表示文本 “加粗显示”，无特殊语义。 表示文本具有 “重要性”，强调内容的关键性。
无障碍性 屏幕阅读器可能忽略 b 标签的语义。 屏幕阅读器会强调 strong 标签的内容（如朗读时加重语气）。
SEO 影响 无明确权重提升。 可能被搜索引擎视为重要内容，略微提升关键词相关性。
最佳实践 用于纯装饰性加粗（如产品名称、UI 元素）。 用于强调重要信息（如警告、关键说明、结论）。
示例 <b>iPhone 15</b> 现已上市。 <strong>注意：</strong> 此操作不可逆。
（3）i 与 em 的区别

特性 i（Italic） em（Emphasis）
语义 仅表示文本 “斜体显示”，无特殊语义。 表示文本具有 “强调” 语气（通常译为 “着重”）。
无障碍性 屏幕阅读器可能忽略 i 标签的语义。 屏幕阅读器会强调 em 标签的内容（如朗读时提高音调）。
SEO 影响 无明确权重提升。 可能被搜索引擎视为重要内容，略微提升关键词相关性。
最佳实践 用于斜体装饰（如书籍标题、外来词、分类名称）。 用于强调句子中的特定词汇（如突出对比、重要术语）。
示例 《<i>JavaScript高级程序设计</i>》第4版。 你应该使用 <em>const</em> 而不是 var。
总结

语义化优先：优先使用 strong 和 em，因为它们携带语义信息，有助于无障碍访问和 SEO。

装饰性需求：仅在无强调语义时使用 b 和 i（如纯视觉效果）。

SEO 建议：title 和 h1 需精准匹配页面主题，strong 和 em 用于突出关键词但避免滥用。

10、iframe的基本介绍与使用 （⭐⭐⭐）
介绍：

iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。

使用举例：<iframe src=”URL”></iframe>

iframe的缺点：

页面样式调试麻烦，出现多个滚动条；
浏览器的后退按钮失效；
过多会增加服务器的HTTP请求；
小型的移动设备无法完全显示框架；
产生多个页面，不易管理；
不容易打印；
代码复杂，无法被一些搜索引擎解读。
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe的优点：

iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
总而言之：

运维性网站或继承性开发的网站，可以使用iframe
销售内，官网、展示性网站等建议不使用iframe
标准的网页设计是不使用iframe的
嵌入的网页必须与主页面同源，否则会受到浏览器的安全限制
嵌入的网页可能会影响页面性能和加载速度，特别是当嵌入的网页包含大量的资源（如图片、CSS 和 JavaScript）时
嵌入的网页可能会被恶意攻击者用于钓鱼或注入恶意代码的攻击，因此需要谨慎使用
二、CSS篇

1、说一下 link 与 @import 的区别和用法？（⭐）
页面导入外部css文件的方法通常有两种，一种在网页中直接link标签加入，另一种在页面中@import引入css文件。两种引入形式如下：
link引入形式：

<link href=”styles.css” type=”text/css” />
AI写代码
javascript
运行
@import引用形式：

<style type=”text/css”>
@import url(“styles.css”);
</style>
AI写代码
javascript
运行
1、适用范围不同
@import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。

2、功能范围不同
link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义rel连接属性，定义RSS等，@import就只能加载CSS。
3、加载顺序不同
页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）
4、兼容性
由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
5、控制样式时的差别
使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。
6、使用DOM控制样式时的差别
当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

2、rgba和opacity的透明效果有什么不同？（⭐⭐）
opacity
opacity是一个属性。opacity属性的值，可以被其子元素继承，给父级div设置opacity属性，那么所有子元素都会继承这个属性，并且，该元素及其继承该属性的所有子元素的所有内容透明度都会改变。

rgba（0，0，0，0.5）
rgba是一个属性值。rgba设置的元素，只对该元素的背景色有改变，并且，该元素的后代不会继承该属性。
补冲：rgba只是一个属性值，在background 里用改变背景色，在color里是改字体颜色，shadow里是改阴影色，不止是能够改元素的背景色，要看具体是在哪个属性上用

3、display:none与visibility:hidden的区别？（⭐⭐）
这两个属性都是让元素隐藏，不可见。两者区别如下：

（1）在渲染树中

display: none 会让元素完全从渲染树中消失，渲染时不会占据任何空间；
visibility: hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
（2）是否是继承属性

display: none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility: hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility: visible可以让子孙节点显示；
（3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；
（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

（5）display：none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
（6）visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

4、定位布局 position中的relative、absolute、fixed、sticky它们之间的区别？（⭐⭐⭐）

（1）relative: 相对定位，相对于自己本身在正常文档流中的位置进行定位。

（2）absolute: 生成绝对定位，相对于最近一级定位不为static的父元素进行定位。

（3）fixed: 生成绝对定位，相对于浏览器窗口或者frame进行定位。（老版本IE不支持）

（4）static: 默认值，没有定位，元素出现在正常的文档流中。（很少用）
（5）sticky: 生成粘性定位的元素，容器的位置根据正常文档流计算得出。（很少用）

5、如何用CSS3画一条0.5px的直线？（⭐）
height: 1px;
transform: scale(0.5);
AI写代码
javascript
运行
6、如何用CSS3画一个三角形？（⭐）
<style>
.up{
width:0;
height:0;
border: 100px solid transparent;
border-top: 100px solid red;/*红色*/
}
.down{
width:0;
height:0;
border: 100px solid transparent;
border-bottom: 100px solid blue;/*蓝色*/
}
.left{
width:0;
height:0;
border: 100px solid transparent;
border-left: 100px solid pink;/*黑色*/
}
.right{
width:0;
height:0;
border: 100px solid transparent;
border-right: 100px solid pink;/*黄色*/
}
</style>

<body>
<div class=”up”></div>
<div class=”down”></div>
<div class=”left”></div>
<div class=”right”></div>
</body>
AI写代码
javascript
运行

实现效果：

7、CSS3盒子模型：标准盒模型、怪异盒模型（⭐⭐⭐）
盒子模型分为两种:

第一种是 W3C 标准的盒子模型（标准盒模型）
第二种 IE 标准的盒子模型（怪异盒模型）
标准盒模型与怪异盒模型的表现效果的区别之处：

1、标准盒模型中 width 指的是内容区域 content 的宽度

height 指的是内容区域 content 的高度

标准盒模型下盒子的大小 = content + border + padding + margin

2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小 = width（content + border + padding） + margin

除此之外，我们还可以通过属性 box-sizing 来设置盒子模型的解析模式

可以为 box-sizing 赋两个值：

1、box-sizing: content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin

2、box-sizing: border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型，总宽=width+margin

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷

8、浮动（float)以及清除浮动的方法（⭐⭐）
(1) 脱标

(2) 清除浮动

(3) 清除浮动的方法

清除浮动 —— 额外标签法
清除浮动 —— 父级添加 overflow

清除浮动 —— :after 伪元素法

清除浮动 —— 双伪元素清除浮动

9、Flex布局（⭐⭐⭐）
1、主轴对齐方式

使用 justify-content 调节元素在主轴的对齐方式

2、侧轴对齐方式

使用 align-items 调节元素在侧轴的对齐方式

3、换轴

使用 flex-direction 改变元素排列方向

4、弹性盒子换行

目标：使用 flex-wrap 实现弹性盒子多行排列效果

10、CSS3中 transform 属性~平面转换（⭐）
（1）位移：transform: translate(水平移动距离, 垂直移动距离)

（2）旋转

transform: rotate(角度); 注意：角度单位是deg

取值为正, 则顺时针旋转 Ø 取值为负, 则逆时针旋转

（3）缩放

transform: scale(x轴缩放倍数, y轴缩放倍数);

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

（4）transition的基本用法

transition：[属性名] [持续时间] [速度曲线] [延迟时间]

我们可以很方便的用这个过渡来给某一个属性加上好看的动效。

例如，高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒：

transition:height 2s ease 0.5s
或者一个属性不够，想要监听所有属性。

transition: all 2s ease .5s

11、CSS3中 “子绝父相” 定位布局（⭐⭐⭐）
弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

12、盒子居中的几种方法：“子绝父相”、“Flex布局”、“transform”（⭐⭐⭐）
（1）利用定位（子绝父相）、margin-left、margin-top实现

（2）利用定位（子绝父相）、transform属性实现

（3）利用flex布局实现盒子居中

13、CSS3中有哪些新特性？（⭐）
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadoweflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画,多背景
14、CSS3选择器及其优先级（⭐）

对于选择器的优先级：

标签选择器、伪元素选择器：1
类选择器、伪类选择器、属性选择器：10
id 选择器：100
内联样式：1000
注意事项：

!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
15、CSS3中 “transition” 过渡属性（⭐）
transition: 要过渡的属性 花费时间 运动曲线 何时开始；

属性：想要变化的css属性，宽度高度/背景颜色/内外边距都可以，如果想要所有的属性都变化过渡，写一个all 就可以
花费时间：单位是 秒（必须写单位）比如0.5s
运动曲线：
何时开始：单位是 秒（必须写单位）可以设置延迟出发时间，默认是0s(可以省略)
举例：transition：width .5s ease 1s

16、结构伪类选择器&伪元素选择器（⭐）
1、结构伪类选择器：可方便的选取一个或多个特定的元素

:first-child 选取属于其父元素的首个子元素
:last-child 选取属于其父元素的最后一个子元素
:nth-child(n) 选择第n个子元素
　　　 n=even / 2n ：选取偶数孩子

　　　　n=odd / 2n+1 ：选取奇数孩子

2、伪元素选择器：

::first-letter / line: 文本第一个单词 / 第一行
::selection: 改变选中文本的样式
::before & ::after
这两兄弟特性一样：1.必须要带content属性（可以为空）

　　　　　　　　　2.属于行内盒子

3、属性选择器：

div[class=xx]: 选择类名为xx的div
div[class^=xx]: 选择以类名为xx开头的div
div[class$=xx]: 选择类名是以xx结束的div
div[class*=xx]: 选择类名带有xx的div
（1）结构伪类选择器

（2）伪元素选择器

17、display的block、inline和inline-block的区别？（⭐）
（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

（2）inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

（3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

行内元素

设置宽高无效；
可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
不会自动换行；
块级元素

可以设置宽高；
设置margin和padding都有效；
可以自动换行；
多个块状，默认排列从上到下。
18、定位堆叠顺序z-index（⭐）
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法： 选择器 { z-index: 1; }
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来居上

数字后面不能加单位

只有定位的盒子才有 z-index 属性

三、HTML&&CSS混合篇
1、Localstorage、sessionStorage、cookie 的区别（⭐⭐⭐）
共同点：都是保存在浏览器端、且同源的

三者区别：

1、cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器

间来回传递，而 sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。 cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下

2、存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie、 所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存 储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

3、数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭之前有效；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie：只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭
4、作用域不同

sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；

localstorage 在所有同源窗口中都是共享的；

cookie 也是在所有同源窗口中都是共享的

5、web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

6、web Storage 的 api 接口使用更方便。

2、如何实现双飞翼（圣杯）布局？ （⭐）

1、利用定位实现两侧固定中间自适应

父盒子设置左右 padding 值

给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

中间盒子自适应

2、利用 flex 布局实现两侧固定中间自适应

父盒子设置 display：flex

左右盒子设置固定宽高

中间盒子设置 flex：1

3、伪元素和伪类的区别和作用？（⭐）
伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
p::before {content:”第一章：”;}
p::after {content:”Hot!”;}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
AI写代码
javascript
运行
伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
a:hover {color: #FF00FF}
p:first-child {color: red}
AI写代码
javascript
运行
总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

4、img 的 alt 与 title 的异同，还有实现图片懒加载的原理？（⭐）
异同
alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字,title

是对图片的描述与进一步说明;

这些都是表面上的区别，alt 是 img 必要的属性，而 title 不是 对于网站 seo 优化来说，title 与 alt 还有最重要的一点： 搜索引擎对图片意思的判断，主 要靠 alt 属性。所以在图片 alt 属性中以简要文字说明，同时包含关键词，也是页面优化的 一部分。条件允许的话，可以在 title 属性里，进一步对图片说明 由于过多的图片会严重影响网页的加载速度，并且移动网络下的流量消耗巨大，所以 说延迟加载几乎是标配了。

原理
图片懒加载的原理很简单，就是我们先设置图片的 data-set 属性（当然也可以是其他任意的， 只要不会发送 http 请求就行了，作用就是为了存取值）值为其图片路径，由于不是 src，所 以不会发送 http 请求。 然后我们计算出页面 scrollTop 的高度和浏览器的高度之和， 如果 图片距离页面顶端的坐标 Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是 其他情况），这时候我们再将data-set 属性替换为 src 属性即可。

5、BFC 是什么？ （⭐）
定义
BFC (Block formatting context) 直译为 “块级格式化上下文”。它是一个独立的渲染区域，

只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区

域外部毫不相干。

布局规则

1、内部的 Box 会在垂直方向，一个接一个地放置
2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin
会发生重叠
3、每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往
右的格式化，否则相反)。即使存在浮动也是如此
4、BFC 的区域不会与 float box 重叠
5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
6、计算 BFC 的高度时，浮动元素也参与计算
哪些元素会生成 BFC

1、根元素
2、float 属性不为 none
3、position 为 absolute 或 fixed
4、display 为 inline-block， table-cell， table-caption， flex， inline-flex
5、overflow 不为 visible