前端面试题 43578943

时间: 2023-10-25 15:10:59 浏览: 127

前端面试题

web前端面试题----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### 前端面试题详解 #### 一、HTML常见题目 **01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?** - **Doctype作用**：文档类型声明（Doctype）告诉浏览器正在使用的HTML版本。这对于确保页面正确渲染至关重要。 - **严格模式与混杂模式**： - **严格模式**：当浏览器识别到正确的doctype时，它将采用严格的渲染方式，遵循W3C的标准来解析文档。 - **混杂模式**：若doctype缺失或错误，浏览器则进入混杂模式，按照自己的规则来解析页面，可能导致显示不一致。 - **意义**：正确的doctype能够确保页面被现代浏览器正确解析，避免因解析模式不一致导致的布局问题。 **02、HTML5为什么只需要写<!DOCTYPE HTML>？** - HTML5简化了doctype声明，仅需`<!DOCTYPE HTML>`即可，这主要是因为HTML5旨在减少冗余，简化语法，并向前兼容所有主流浏览器。这样的声明方式使得HTML5文档更加简洁，易于编写和维护。 **03、行内元素、块级元素、空(void)元素有哪些？** - **行内元素**：`<a>`, `<span>`, `<img>`, `<input>`, `<button>`等。 - **块级元素**：`<div>`, `<p>`, `<ul>`, `<ol>`, `<table>`等。 - **空(void)元素**：`<br>`, `<hr>`, `<meta>`, `<link>`等。这类元素没有闭合标签。 **04、页面导入样式时，使用link和@import有什么区别？** - **link**：使用`<link rel="stylesheet" href="styles.css">`引入样式，这种方式被广泛推荐。它会在页面加载时立即执行，且不会阻塞页面渲染。 - **@import**：使用`@import url('styles.css');`引入样式，通常放在`<style>`标签或外部样式表文件中。此方式可能会影响页面渲染性能，因为它可能会阻塞页面渲染直到样式加载完成。 **05、介绍一下你对浏览器内核的理解？** 浏览器内核主要包括两部分：渲染引擎和JavaScript引擎。渲染引擎负责解析HTML/CSS并呈现页面，而JavaScript引擎则负责解析和执行JavaScript代码。不同的浏览器内核有着不同的特性和性能表现。 **06、常见的浏览器内核有哪些？** - **WebKit**：被Safari、Chrome早期版本所使用。 - **Blink**：由Google基于WebKit开发，用于Chrome及部分其他浏览器。 - **Gecko**：Firefox的内核。 - **Trident**：IE的内核，现在已被EdgeHTML取代。 **07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？** - **新特性**：包括语义化标签（如`<article>`, `<section>`, `<header>`）、多媒体支持（`<video>`, `<audio>`）、离线存储、拖放功能等。 - **移除的元素**：`<acronym>`, `<applet>`, `<basefont>`, `<center>`, `<dir>`, `<frame>`, `<frameset>`, `<noframes>`, `<isindex>`等。 - **兼容性处理**：可以通过polyfills库（如html5shiv）为旧版浏览器提供支持。 **08、如何区分HTML和HTML5？** - HTML5是对HTML标准的扩展和改进，主要通过新的标签、APIs和功能来区分。例如，HTML5引入了更多的语义标签来增强网页结构，以及新的媒体标签（`<video>`, `<audio>`）等。 **09、简述一下你对HTML语义化的理解？** - **HTML语义化**是指使用恰当的HTML标签来表达文档结构和内容意义的做法。例如，使用`<header>`表示页面头部，`<footer>`表示页面底部，`<article>`表示独立的文章内容等。这样有助于提高网页的可读性和可访问性。 **10、HTML5的离线储存怎么使用，工作原理能不能解释一下？** - **HTML5离线存储**通过`applicationCache`接口实现。开发者可以在`manifest`文件中指定离线可用的资源列表，浏览器在首次加载页面时会下载这些资源，并缓存在本地，即使网络断开也能访问页面。 **11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？** - 浏览器根据`manifest`文件中的资源列表来管理离线资源，当页面加载时，浏览器会检查是否有更新版本的资源，并将最新版本缓存起来供后续使用。这种机制能够提高页面加载速度和用户体验。 **12、请描述一下cookies、sessionStorage和localStorage的区别？** - **Cookies**：存储在客户端的小文本文件，可用于用户身份验证和个性化设置。大小有限制，会随着HTTP请求发送至服务器。 - **sessionStorage**：临时存储数据，适用于当前窗口或标签页。当窗口关闭时数据消失。 - **localStorage**：持久化存储数据，除非手动删除，否则数据一直存在。适用于长期存储数据。 **13、iframe有那些缺点？** - **性能问题**：每个iframe都相当于加载了一个完整的页面，增加了资源消耗。 - **SEO问题**：搜索引擎对iframe中的内容识别度较低。 - **跨域问题**：由于同源策略限制，iframe与主页面之间可能存在跨域访问限制。 **14、Label的作用是什么？是怎么用的？（加for或包裹）** - **Label**标签用来为表单控件定义标签，增强可访问性。使用时通过`for`属性关联相应的表单控件ID，或者直接包裹在表单控件外面。 **15、HTML5的form如何关闭自动完成功能？** - 可以通过设置`autocomplete="off"`来禁用自动完成功能。 **16、如何实现浏览器内多个标签页之间的通信?(阿里)** - 可以通过Web Storage API（`localStorage`/`sessionStorage`）或`IndexedDB`等技术来实现跨标签页的数据共享。 **17、webSocket如何兼容低浏览器？(阿里)** - 可以使用WebSocket polyfill库（如SockJS）来实现对旧版浏览器的支持。 **18、页面可见性（PageVisibility）API可以有哪些用途？** - 页面可见性API允许开发者检测当前页面是否处于活动状态，常用于暂停播放视频、调整广告展示逻辑等。 **19、如何在页面上实现一个圆形的可点击区域？** - 使用CSS `border-radius`属性将元素设为圆形，并添加合适的事件监听器使其可点击。 **20、实现不使用border画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。** - 可以通过设置`div`的高度为`1px`，并通过`background-color`属性设置颜色来实现。这样在不同浏览器模式下都可以保持一致性。 **21、网页验证码是干嘛的，是为了解决什么安全问题？** - 网页验证码（CAPTCHA）用于区分人类和机器人用户，防止自动化工具进行恶意操作，如垃圾邮件、刷票等。 **22、title与h1的区别、b与strong的区别、i与em的区别？** - **title**：表示文档或部分标题；**h1**：表示一级标题。 - **b**：表示粗体文本，无语义含义；**strong**：表示强调，有语义含义。 - **i**：表示斜体文本，无语义含义；**em**：表示强调，有语义含义。 #### 二、CSS类的题目 **01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？** - **标准盒子模型**：宽度由内容决定，边框和内边距不包含在宽度内。 - **IE盒子模型**（低版本IE）：宽度包括内容、边框和内边距，这会导致页面布局差异。 **02、CSS选择符有哪些？哪些属性可以继承？** - **CSS选择符**：ID选择符（`#id`）、类选择符（`.class`）、元素选择符（`element`）、属性选择符（`[attribute]`）等。 - **可继承属性**：`color`, `font-family`, `font-size`, `text-align`等。 **03、CSS优先级算法如何计算？** - CSS优先级由特定性（specificity）决定，特定性越高，优先级越高。特定性的计算规则为：内联样式 > ID选择符 > 类/属性/伪类选择符 > 元素/伪元素选择符。 **04、CSS3新增伪类有那些？** - **CSS3新增伪类**：`:not()`, `:nth-child()`, `:nth-last-child()`, `:nth-of-type()`, `:nth-last-of-type()`等。 **05、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？** - **居中div**：可以使用`margin: auto`实现水平居中。 - **居中浮动元素**：可以通过父元素设置`text-align: center`实现居中。 - **绝对定位居中**：设置`left: 50%`和`top: 50%`，然后通过`transform: translate(-50%, -50%)`调整位置。 **06、display有哪些值？说明他们的作用。** - **display**的常见值包括：`block`、`inline`、`inline-block`、`flex`、`grid`等。这些值决定了元素如何在页面上显示及其与其他元素的关系。 **07、position的值relative和absolute定位原点是？** - **relative**：相对其自身位置定位，不会脱离文档流。 - **absolute**：相对于最近的已定位祖先元素定位，若无，则相对于初始包含块。 **08、CSS3有哪些新特性？** - **新特性**：响应式布局、动画和过渡、多列布局、媒体查询、阴影和渐变等。 **09、请解释一下CSS3的Flexbox（弹性盒布局模型），以及适用场景？** - **Flexbox**是一种灵活的布局模型，通过设置容器的`display: flex`属性启用。它可以轻松实现复杂布局，如垂直居中对齐、多列布局等。 **10、用纯CSS创建一个三角形的原理是什么？** - 通过设置`border`和透明边框，利用边框宽度和颜色的不同来创建三角形效果。 **11、一个满屏品字布局如何设计?** - 可以通过使用`display: flex`或`display: grid`结合适当的对齐方式来实现。 **12、常见兼容性问题？** - **兼容性问题**：浏览器解析差异、CSS3新特性的支持程度、IE8及以下版本浏览器的特殊处理需求等。 **13、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？** - 这通常是由于默认的`list-style`或`margin`/`padding`造成的。解决方法是重置样式或将`li`设置为`display: inline-block`。 **14、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？** - **兼容性问题**：包括IE的盒模型问题、透明PNG支持、CSS3新特性支持等。 - **解决方法**：使用条件注释、前缀、polyfills等。 - **hack技巧**：如针对IE的`*` hack或`_` hack。 **15、为什么要初始化CSS样式。** - 初始化CSS样式的目的是消除浏览器默认样式带来的差异，确保页面在不同浏览器中的外观一致。 **16、absolute的containing block计算方式跟正常流有什么不同？** - **absolute**元素的包含块取决于最近的已定位祖先元素，若无，则基于初始包含块。 - 正常流元素的包含块为父元素的边框盒。 **17、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？** - `visibility: collapse`用于隐藏表格单元格，使其不占用空间。在非表格元素中不起作用。 - 不同浏览器对于`collapse`的支持程度和行为可能略有不同。 **18、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？** - 这些特性共同作用于元素的布局和显示方式，具体表现取决于它们之间的组合关系。 **19、对BFC规范(块级格式化上下文：block formatting context)的理解？** - BFC是一种特殊的布局环境，其中的元素遵循一定的布局规则。创建BFC可以避免外边距折叠等问题。 **20、CSS权重优先级是如何计算的？** - CSS权重由特定性（specificity）决定，特定性越高，优先级越高。特定性的计算规则为：内联样式 > ID选择符 > 类/属性/伪类选择符 > 元素/伪元素选择符。 **21、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式** - **浮动**：元素脱离文档流，向左或向右移动，使其他元素围绕它排列。 - **清除浮动**：通过`clear`属性或伪元素（如`:after`）清除浮动，防止后续元素受到影响。 **22、移动端的布局用过媒体查询吗？** - **媒体查询**（Media Queries）用于根据不同的设备特征（如屏幕尺寸）应用不同的CSS样式，非常适合响应式设计。 **23、使用CSS预处理器吗？喜欢那个？** - **CSS预处理器**：Sass、Less、Stylus等，可以增强CSS的功能，提高代码可维护性。 - 个人偏好取决于具体需求和个人喜好。 **24、CSS优化、提高性能的方法有哪些？** - **优化方法**：合并样式表、压缩CSS代码、使用CSS Sprites、合理使用媒体查询等。 **25、浏览器是怎样解析CSS选择器的？** - 浏览器按照CSS选择器的优先级顺序解析选择器，从最具体的到最通用的。 **26、在网页中的应该使用奇数还是偶数的字体？为什么呢？** - 字体大小的选择通常基于可读性和美观性考虑，而非奇偶数规则。实际应用中，可以根据设计需求来选择。 **27、margin和padding分别适合什么场景使用？** - **margin**：用于控制元素之间的间距。 - **padding**：用于控制元素内部内容与边界之间的距离。 **28、抽离样式模块怎么写，说出思路，有无实践经验？** - 抽离样式模块通常涉及将样式组织成可复用的组件。实践中，可以采用CSS Modules或使用命名约定如BEM。 **29、元素竖向的百分比设定是相对于容器的高度吗？** - 是的，百分比高度通常是相对于最近的具有百分比值的祖先元素的高度。 **30、全屏滚动的原理是什么？用到了CSS的那些属性？** - **全屏滚动**：通过设置元素的`height: 100vh`和`overflow: hidden`来实现。 - 使用`transform`或`scroll-behavior`属性可以进一步优化滚动效果。 **31、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？** - **响应式设计**是一种让网站在不同设备和屏幕尺寸上自适应显示的设计方法。 - **基本原理**：使用流体网格、媒体查询和灵活的图像。 - **兼容性处理**：可以使用polyfills库（如respond.js）为旧版IE提供支持。 **32、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）** - **视差滚动**：通过设置不同层的速度差，创造出深度感和动态效果。 - 实现不同动画效果，可以通过监听滚动事件，根据滚动位置调整元素的位置或可见性。 **33、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。** - 双冒号（`::`）是CSS3中的写法，而单冒号（`: `）是CSS2中的写法。两者功能相同，但双冒号更符合CSS3规范。 - 这两个伪元素用于在元素之前或之后插入内容。 **34、如何修改chrome记住密码后自动填充表单的黄色背景？** - 可以通过CSS的`:focus-within`伪类选择器来改变输入框获得焦点时的状态。 **35、你对line-height是如何理解的？** - `line-height`属性用于控制行间距，即行内元素的基线之间的距离。它影响文本的可读性和排版布局。 **36、设置元素浮动后，该元素的display值是多少？（自动变成display:block）** - 浮动元素默认的`display`值为`block`。 **37、怎么让Chrome支持小于12px的文字？** - Chrome默认不支持小于12px的文字，可以通过CSS的`transform: scale()`或`font-size-adjust`属性来变通实现。 **38、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing:antialiased;）** - 通过使用`-webkit-font-smoothing: antialiased;`可以使字体变得更加平滑和清晰。 **39、font-style属性可以让它赋值为“oblique”oblique是什么意思？** - `oblique`表示倾斜样式，与`italic`类似，但呈现效果有所不同。 **40、position:fixed;在android下无效怎么处理？** - 可以尝试使用CSS的`transform: translateZ(0)`或设置`-webkit-transform: translateZ(0)`来解决Android设备上的`position: fixed`问题。 **41、如果需要手动写动画，你认为最小时间间隔是多少？** - 动画的时间间隔通常取决于性能和视觉效果的需求，一般建议不超过16ms，以确保流畅的动画体验。

前端面试题是用来评估前端开发者的技能和知识的一套题目。这些题目通常涵盖HTML、CSS、JavaScript、框架和库等方面的知识。对于前端开发者来说，熟练掌握这些题目是非常重要的。在准备前端面试题时，可以通过查找一些常见的前端面试题目来进行练习。有很多网站和博客都提供了大量的前端面试题目和答案供参考。此外，在面试之前，可以与HR询问关于公司的待遇以及其他相关的信息。

阅读全文

前端面试题 43578943

相关推荐

前端面试宝典、前端面试题库、高频前端面试题、大厂面试题、算法面试题、前端面试题大全

前端面试题前端面试题.pdf

前端面试题以及vue前端面试题

前端面试题.docx前端面试题

前端面试，独有前端面试题详解，前端面试刷题必备，1000+前端面试真题，Html、Css、JavaScript、Vue

2021年前端面试题汇总包括腾讯华为等前端面试题

前端开发面试题大收集，前端面试集锦前端开发面试题大收集，前端面试集锦基于前端开发面试题大收集.zip

96道web前端面试题96道web前端面试题.pdf

前端面试题：前端框架面试题大全

前端面试题 java面试题

前端开发面试题、腾讯华为前端面试题

搜集了众多经典高频前端面试题和大厂前端面试题以及相关代码题 pdf.pdf

前端面试题汇总_madeaef_html/css/javascript_前端面试题汇总_

前端面试，独有前端面试题详解，前端面试刷题必备

前端面试题：包括js面试题、vue面试题、react面试题、性能优化

《JAVA面试题》--面试相关：Java面试题，Android面试题，IOS面试题，UI设计面试题，前端面试题等等.zip

web前端面试题-面试题答案

最新推荐

2022前端面试题集锦1

2019自己整理的前端工程师面试题题及答案(全面综合).doc

你要的FPGA&数字前端笔面试题都在这儿了.pdf

vue前端面试题汇总（常问-进阶篇）

百度javascript前端面试题

JavaScript实现的高效pomodoro时钟教程

管理建模和仿真的文件

【WebLogic客户端兼容性提升秘籍】：一站式解决方案与实战案例

使用jupyter读取文件“近5年考试人数.csv”，绘制近5年高考及考研人数发展趋势图，数据如下（单位：万人）。

CMake 3.25.3版本发布：程序员必备构建工具