千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
html：
1如何理解HTML5结构语义化?
HTML5结构语义化是指使用合适的HTML标签来描述网页内容的结构和含义，以便于开发者和搜索引擎理解和解析页面。通过使用语义化标签，可以使网页具有更好的可读性、可维护性和可访问性。
2.htm15的新特性?
HTML5的新特性包括但不限于以下几个方面：
- 新增的语义化标签，如<header>、<footer>、<nav>等，用于更好地描述网页结构。
- 新增的表单元素，如<input type="date">、<input type="email">等，方便用户输入验证和互动。
- 强大的多媒体支持，包括<video>和<audio>标签，以及相关的API。
- Canvas绘图功能，使得在网页中可以使用JavaScript进行高性能绘图。
- Web存储功能，包括localStorage和sessionStorage，用于在浏览器端存储数据。
- 改进的JavaScript API，包括历史管理、地理位置、拖放等。
- HTML5语义化的优点包话
- 1.提升页面的可读性和可维护性:通过使用具有语义的标签，可以更清晰地描述页面内容的结构和意义，使代码更易于理解和维护。
- 2.有助于搜索引擎优化:搜索引擎可以通过标签来判断页面的内容和重要性，从而更好地抓取并展示页面内容。
- 3.提高网站的可用性和无障碍性;使用具有语义的标签可以使屏幕阅读器等辅助技术更好地理解页面内容，从而提高网站的可用性和无障碍件。
- 4.更好的跨平台和跨设备支持:通过使用HTML5标准的语义化标签，可以更好地支持各种设备包括桌面、移动设等)和各种平台(包括浏览器、搜索引擎等)。
- 常用的HTML5语义化标签包括: header、nav、main、article、section、aside、footer、h1-h6、p、a、ul、ol、 figure，figcaption、time、address等，当然，语义化不是万能的，需要根据具体情况和需求来选择合适的标签
3.请描述一下 cookies，sessionStorage 和 localStorage 的区别?
cookies、sessionStorage和localStorage是网页中用于存储和管理数据的三种机制，它们的区别如下：
- cookies: 是由服务器发送到浏览器并保存在浏览器中的小段文本数据。每次发送HTTP请求时，浏览器都会将cookies发送到服务器。Cookies具有过期时间，可以设置过期时间后自动删除。
- sessionStorage: 是浏览器中的一个对象，用于临时保存用户会话数据，数据只在当前会话有效，关闭浏览器标签页或窗口后被删除。
- localStorage: 也是浏览器中的一个对象，用于持久保存数据，数据在浏览器关闭后仍然存在。
4.浏览器的渲染机制一般分为几个步骤?
浏览器的渲染机制一般分为以下几个步骤：
- 解析HTML：浏览器将HTML文档解析为DOM树。
- 构建渲染树：浏览器将DOM树和CSS样式表结合，构建出渲染树，渲染树只包含需要显示的元素。
- 布局计算：浏览器根据渲染树的信息，计算出每个元素在页面中的位置和大小。
- 绘制页面：浏览器按照渲染树和布局计算的结果，将页面绘制到屏幕上。
- 重绘和回流：如果页面的某些部分发生变化，浏览器会重新计算样式和布局，并进行重绘。如果影响了页面布局，就会触发回流（重排）。
5.重绘(Repaint) 和回流 (Reflow)
重绘（Repaint）和回流（Reflow）是浏览器中的两个概念：
- 重绘：当元素的可见样式发生改变，但不影响布局（如颜色、背景等），浏览器会将这些元素重新绘制一次，这个过程称为重绘。
- 回流：当元素的布局发生改变，浏览器需要重新计算元素的大小和位置，然后重新绘制，这个过程称为回流（也称为重排）。
回流比重绘的成本更高，因为它会涉及到整个渲染树的重新计算和布局。所以在开发中，应尽量避免频繁的回流操作，以提高性能。
css：
- display: none; 与 visibility: hidden; 的区别
display: none; 和 visibility: hidden; 的区别如下：
- display: none;：元素在布局中完全不占据空间，即元素被隐藏且不影响周围元素的布局，无法通过JavaScript获取其尺寸和位置。
- visibility: hidden;：元素被隐藏但仍占据空间，即元素不可见但仍会影响周围元素的布局，可以通过JavaScript获取其尺寸和位置。
2.外边距折暨(collapsing margins)
外边距折叠（collapsing margins）是指在某些情况下，相邻两个元素之间的外边距会合并（折叠）成一个较大的外边距。具体情况包括：
- 父元素与第一个子元素之间的外边距会折叠。
- 相邻的兄弟元素之间的外边距会折叠。
3.z-index是什么?在position的值什么时候可以触发?
z-index是CSS属性，用于控制元素的堆叠顺序（层级）。当元素设置了定位（position）属性（如relative、absolute、fixed）时，z-index属性才会生效。z-index的值越高，元素在堆叠顺序中越靠上，即越接近用户。
4.简述box-sizing的有效值以及所对应的盒模型规则
box-sizing是CSS属性，用于控制盒模型的计算方式，它的有效值有两个：
- content-box：默认值，宽度和高度仅包括内容，不包括边框和内边距。
- border-box：盒模型的宽度和高度包括内容、边框和内边距，即总宽度 = 内容宽度 + 边框宽度 + 内边距宽度，总高度 = 内容高度 + 边框高度 + 内边距高度。
5.移动端适配怎么做?
移动端适配需要考虑不同设备的屏幕尺寸和像素密度。常用的方法有：
- 使用响应式设计：使用CSS媒体查询针对不同屏幕宽度设置不同的样式。
- 使用Viewport元标签：通过设置<meta name="viewport">标签来控制视口的尺寸和缩放。
- 弹性布局：使用弹性布局（flexbox）或网格布局（grid）来自适应不同屏幕尺寸。
- 使用rem或em单位：使用相对单位（rem或em）进行布局和字体大小设置，以便根据根元素的字体大小进行相应的缩放调整。
- 使用框架或库：使用移动端适配的框架或库（如Bootstrap、Ant Design Mobile等），简化适配过程。
- 需要注意的是，移动端适配是一个复杂的问题，具体的实现方法需要根据具体项目和需求来选择和调整。
6.什么是CSS3 transform? transition? animation? 区别是什么?
CSS3中的transform、transition和animation是用于实现动画效果的属性和特性，它们的区别如下：
- transform：通过对元素的旋转、缩放、平移、倾斜等变换操作，实现对元素外观的改变。transform属性是一个复合属性，可以同时设置多个变换操作。
- transition：用于控制元素在状态变化时的过渡效果，如颜色渐变、尺寸变化等。通过指定过渡属性的初始值和最终值，并设置过渡的持续时间、延迟时间和过渡曲线，实现元素的平滑过渡效果。
- animation：通过关键帧（keyframes）来定义元素的动画效果。通过指定动画的名称、持续时间、循环次数等属性，实现元素的动态变化。可以定义多个关键帧，每个关键帧指定元素的样式，浏览器会在指定的时间内自动计算中间帧的样式。
7.父元素和子元素宽高不固定，如何实现水平垂直居中
实现父元素和子元素水平垂直居中的方法有多种，以下是其中一种常用的方法：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
以上代码使用flex布局，通过设置父元素的display: flex;和justify-content: center; align-items: center;属性，实现子元素在父元素中水平垂直居中。注意，父元素需要有明确的宽度和高度，或者根据情况设置相应的布局属性。
8.假设高度默认100px，请写出三栏布局，其中左栏、右栏各为 300px，中间自适应
三栏布局中，左侧栏和右侧栏固定宽度，中间栏自适应宽度的示例代码如下：
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>
.wrapper {
display: flex;
}
.left, .right, .content {
height: 100px;
}
.left, .right {
width: 300px;
}
.content {
flex-grow: 1;
}
以上代码使用flex布局，将左侧栏和右侧栏设置固定宽度，中间栏设置flex-grow: 1;，使其自动填充剩余空间，从而实现左右两栏固定宽度，中间栏自适应宽度的布局。
