前端高频面试题1：HTML/CSS/浏览器/计算机网络

目录

1.为什么会出现margin塌陷？

2.如何解决margin塌陷？

3.HTML5有哪些新特性？

4.常见的语义化标签有哪些？语义化标签的好处？

5.使用css和js做动画有何优劣

6.如何实现文本超出展示省略号

7.deep在css中存在吗？

8.xhtml和html的区别

 9.script标签中defer和async的区别

10.什么是强缓存、协商缓存？ 

 11.Cookie、Session、LocalStorage、SessionStorage的区别

12. 输入一个URL到页面过程中发生了什么

13. DNS解析的过程 

14.Cookie有哪些配置项 

---

1.HTML5有哪些新特性？

1. 语义化标签

2. 媒体标签（<video>和<audio>）

3. 图形动画（Canvas和svg）

4. 表单增强

   1. 新输入类型：email、url、number、date、range、search 等。

   2. 新属性：

      • placeholder：输入框提示文本。

      • required：必填字段验证。

      • autocomplete：自动填充建议。

      • pattern：正则表达式验证。

5. 本地存储

   1. Web Storage：客户端存储数据，替代 Cookie。

      • localStorage：永久存储，直到手动清除。

      • sessionStorage：会话期间存储，关闭标签页后失效。

   2. IndexedDB：浏览器端非关系型数据库，支持大量数据存储。

6. 拖放 API

7. 通信与实时交互

   1. WebSocket：全双工通信协议，支持实时数据传输（如聊天应用）。

   2. WebRTC：浏览器间直接音视频通信（如视频会议）。

2.常见的语义化标签有哪些？语义化标签的好处？

• 语义化标签：

  • <header>、<footer>：页眉和页脚。

  • <nav>：导航栏。

  • <article>：独立内容块（如博客文章）。

  • <section>：文档中的逻辑分区。

  • <aside>：侧边栏或附加内容。

  • <main>：页面主要内容区域。

  • <figure> 和 <figcaption>：媒体内容及其标题。

• 好处：

  • 提升 SEO（搜索引擎优化）

  • 增强可访问性（Accessibility）

  • 提高代码可读性与维护性

3.为什么会出现margin塌陷？

• 设计初衷 CSS规范中设定Margin塌陷是为了简化内容排版。例如，段落（<p>）默认有上下外边距，若多个段落垂直排列，合并外边距可使间距更自然（如两个margin: 20px的段落间距仍为20px，而非40px）。

• 触发条件

  • 相邻兄弟元素：垂直排列的两个块级元素，上下边距相遇时合并。

  • 父元素与子元素：父元素无边框、内边距或内容阻隔时，第一个/最后一个子元素的margin可能与父元素的margin合并。

  • 空块级元素：无内容、内边距、边框的元素，上下边距会合并。

补充：Margin塌陷的规则

• 合并后的值：取两个margin中的较大值。若一正一负，则取两者之和；若均为负，取绝对值较大者。

• 仅限垂直方向：水平方向的外边距不会合并。

• 仅块级元素：行内元素、浮动元素、绝对定位元素不会触发。

---

4.如何解决margin塌陷？

• 添加阻隔

  • 给父元素设置border或padding（即使border: 1px solid transparent）。

  • 在相邻元素间添加内容或注释（如<div style="content: ''"></div>）。

• 触发BFC（块级格式化上下文） BFC会阻止内部元素与外部元素的Margin合并。触发方式：

  • 设置父元素overflow: hidden/auto。

  • 使用display: flow-root（推荐，无副作用）。

  • 设置float: left/right或position: absolute/fixed。

• 避免空元素 为空元素添加padding、height或最小高度min-height。

• 替代方案

  • 使用padding代替margin。

  • 使用Flex或Grid布局，避免传统盒模型的Margin合并。

5.使用css和js做动画有何优劣

实现原理

• CSS Transform/Animation

  • 浏览器优化机制：通过 CSS 的 transform 或 animation 实现的动画，浏览器会在合成器线程（Compositor Thread）中处理，跳过主线程的布局（Layout）和绘制（Paint）阶段。

  • 硬件加速：transform 和 opacity 属性的动画会被浏览器自动优化，触发 GPU 加速（通过 will-change 或 translateZ 进一步强化），生成独立的合成层（Composite Layer），避免重排（Reflow）和重绘（Repaint）。

  • 声明式语法：通过 @keyframes 或 transition 定义动画，浏览器自动插值计算中间帧。

• JavaScript 动画

  ---

  • 逐帧控制：通常通过 requestAnimationFrame 或定时器（如 setInterval）逐帧修改元素的属性（如 left、width 或 transform 值）。

  • 主线程依赖：大多数属性修改（如 width、margin）会触发重排和重绘，这些操作在主线程执行，可能被其他任务阻塞，导致卡顿。

  • 手动优化：开发者需要自行处理性能优化，例如批处理 DOM 操作、使用 transform 替代布局属性等。

性能对比

特性​​	​​CSS Transform/Animation​​	​​JavaScript 动画​​
​​线程执行​​	合成器线程（独立于主线程）	主线程（可能被阻塞）
​​重排/重绘​​	无（仅合成阶段）	可能触发（依赖修改的属性）
​​GPU 加速​​	自动优化	需手动触发（如使用 transform）
​​帧率稳定性​​	高（浏览器优化）	低（依赖代码质量）

优缺点对比

• CSS 动画的优点：

  • 高性能：浏览器自动优化，适合简单动画（如平移、旋转、缩放）。

  • 代码简洁：声明式语法实现动画更简单（如 transition: transform 0.3s ease）。

  • 流畅性：独立于主线程运行，不受 JavaScript 任务阻塞。

• CSS 动画的缺点：

  • 控制能力弱：难以实现复杂逻辑（如弹性动画、路径跟随）。

  • 调试困难：动态修改参数需要覆盖 CSS 类或内联样式。

• JavaScript 动画的优点：

  • 精细控制：适合复杂动画（如物理效果、逐帧滚动、游戏动画）。

  • 灵活交互：动态调整动画参数（如暂停、反转、实时响应事件）。

• JavaScript 动画的缺点：

  • 性能风险：不当使用易导致卡顿（如频繁修改布局属性）。

  • 开发成本高：需手动优化性能（如节流、缓存变量）。

 6.如何实现文本超出展示省略号

// 多行文本
.text {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 控制显示的行数 */line-clamp: 2; /* 标准属性，部分浏览器可能不支持 */
}// 单行文本
.single-line {overflow: hidden;      /* 隐藏溢出内容 */white-space: nowrap;   /* 禁止文本换行 */text-overflow: ellipsis; /* 溢出显示省略号 */width: 200px;         /* 必须设置宽度（或父级有宽度限制） */
}

7.deep在css中存在吗？

deep是一种vue语法糖，在原生css中不存在，具体写法如下

语法	推荐程度	兼容性	使用场景
/deep/	不推荐	已废弃	旧版 Vue
>>>	不推荐	已废弃	早期 CSS Modules
::v-deep	推荐	Vue 2 和 Vue 3 兼容	Vue 2 或向后兼容
:deep()	强烈推荐	Vue 3 标准	Vue 3

8.xhtml和html的区别

XHTML和HTML的主要区别在于语法严格性、文件扩展名、标签和属性要求以及应用场景等方面。

首先，语法严格性是两者最显著的区别之一。XHTML要求所有标签必须闭合，即使是空标签也需要闭合（例如<br>应写作<br/>），而HTML则相对宽松，某些情况下标签可以不闭合。此外，XHTML区分大小写，标签和属性名称必须使用小写，而HTML不区分大小写。XHTML的属性值必须用引号括起来，无论是单引号还是双引号都可以使用，而HTML则不需要。

其次，文件扩展名也不同。HTML文件的扩展名可以是.html或.htm，而XHTML文件的扩展名则是.xhtml、.xht或.xml。

在标签和属性要求方面，XHTML要求所有标签必须正确嵌套和闭合，标签名必须小写，属性值必须用引号括起来。例如，正确的XHTML代码是<img src="img.jpg" /> ，而错误的写法是<img src=img.jpg>。

最后，应用场景方面，XHTML更适合用于需要严格结构的应用，如XML处理工具，因为它符合XML规范。而HTML则适用于传统的Web浏览器解析，语法相对宽松，更适合快速开发和部署。

 9.script标签中defer和async的区别

• 默认情况：<script>标签会按照在HTML中的顺序执行，下载后同步加载脚本，阻塞页面加载和渲染

• async属性：脚本会异步下载并执行，不会阻塞页面加载和渲染，脚本下载完后立即执行，不管其在文档中的位置。

• defer属性：脚本也会异步下载，但不会立即执行，将在文档解析完成时，按照在文档中的顺序加载。

10.什么是强缓存、协商缓存？ 

• 强缓存： 当浏览器请求资源时，首先检查本地缓存是否命中。如果命中，则直接从缓存中读取资源，无需向服务器发送任何请求。（返回200）

• 协商缓存： 当强缓存未命中时，浏览器会向服务器发送请求，询问服务器资源是否发生变化。如果服务器告知资源未改变，则浏览器从缓存中读取资源；如果服务器告知资源已改变，则浏览器会下载新资源并更新缓存。（返回304）

 11.Cookie、Session、LocalStorage、SessionStorage的区别

• Cookie:

  • 存储位置：Cookie存储在客户端的浏览器中。

  • 生命周期：Cookie可以设置过期时间（Expires或Max-Age），到期后自动删除；若未设置过期时间，则为会话级（浏览器关闭后清除）。

  • 容量限制：一般大小限制为4KB左右。

  • 使用场景：主要用于用户身份认证（如记住登录状态）、保存用户偏好设置和跟踪用户行为（如广告点击记录）。

  • 安全性：容易被劫持（如XSS攻击），可以通过设置HttpOnly和Secure属性提高安全性。

  • 登录状态：可以在用户未登录时使用。

  • 跨页面：可以跨多个页面和不同子域共享。

  • 传输数据：每次请求都会携带 Cookie 数据。

• Session:

    高安全性场景：适用于需要保护敏感数据的场景，如在线银行、支付系统等。

  • 存储位置：Session存储在服务端，服务器为每一个用户创建唯一的会话（Session）。

  • 生命周期：Session存在于用户活动的会话期间，当用户退出或者关闭浏览器，会话数据就会被删除。

  • 容量限制：取决于服务器配置。

  • 使用场景：用户会话管理：用于存储用户的会话信息，如购物车数据、用户权限等。

  • 安全性：相对安全，通过加密的 Session ID 进行识别和验证，且客户端不可见。

  • 登录状态：需要用户登录后才能创建和访问会话数据。

  • 跨页面：通常只能在单个会话期间。

  • 传输数据：仅在初始会话时传输 Session ID，后续请求不再携带全部会话数据。

• LocalStorage:

    前端缓存：用于缓存大量数据，提高应用性能和用户体验。

  • 存储位置：存储在客户端，浏览器内。

  • 生命周期：持久性存储，除非手动删除，否则永久有效。

  • 容量限制：一般为 5-10MB，各浏览器可能不同。

  • 使用场景：长期数据存储：适用于存储长期有效的数据，如用户偏好设置、浏览历史等。

  • 安全性：易受 XSS 攻击，数据存储在客户端。

  • 登录状态：需要用户登录后才能创建和访问会话数据。

  • 跨页面：可以在同一域下的所有页面中共享数据。

  • 传输数据：不随请求发送，仅在客户端存储和访问。

• SessionStorage:

    多标签页数据隔离：在同一域名下的不同标签页之间实现数据隔离，防止数据污染。

  • 存储位置：存储在客户端，浏览器内。

  • 生命周期：会话级别，浏览器关闭或标签页关闭后失效。

  • 容量限制：一般为 5-10MB，各浏览器可能不同。

  • 使用场景：临时数据存储：适用于存储会话级别的数据，如表单数据、页面状态等。

  • 安全性：易受 XSS 攻击，数据存储在客户端。

  • 登录状态：需要用户登录后才能创建和访问会话数据。

  • 跨页面：手动新建标签页无法共享数据，通过链接打开新页面会复制一套原有数据，但与原数据是独立的。

  • 传输数据：不随请求发送，仅在客户端存储和访问。

12. 输入一个URL到页面过程中发生了什么

1. 通过 DNS 解析域名的实际 IP 地址

2. 检查浏览器是否有缓存，命中则直接取本地磁盘的 html，如果没有命中强缓存，则会向服务器发起请求（先进行下一步的 TCP 连接）

3. 若强缓存和协商缓存都没有命中，则返回请求结果

4. 然后与 WEB 服务器通过三次握手建立 TCP 连接。期间会判断一下，若协议是 https 则会做加密，如果不是，则会跳过这一步

5. 加密完成之后，浏览器发送请求获取页面 html，服务器响应 html，这里的服务器可能是 server、也可能是 cdn

6. 接下来是浏览器解析 HTML，开始渲染页面

   1. 构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象

   2. 构建CSS规则树：生成CSS规则树（CSS Rule Tree）

   3. 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）

   4. 布局（Layout）：计算出每个节点在屏幕中的位置

   5. 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

13. DNS解析的过程 

1. 浏览器缓存：浏览器首先检查自身缓存是否有该域名的IP记录，若有则直接使用。

2. 系统缓存与Hosts文件：若浏览器无缓存，操作系统检查本地缓存（如Windows的DNS缓存）及Hosts文件，存在记录则返回。

3. 本地DNS服务器查询：

   1. 用户配置的本地DNS服务器（如ISP提供的或公共DNS）接收递归查询请求。

   2. 若本地DNS有缓存且未过期，直接返回IP；否则开始迭代查询。

4. 根域名服务器指引：本地DNS向根服务器查询，根服务器返回管理该顶级域（如.com）的顶级域名服务器地址。

5. 顶级域名服务器指引：本地DNS询问顶级服务器（如.com服务器），获取管理目标域（如example.com）的权威服务器地址。

6. 权威域名服务器解析：本地DNS向权威服务器查询，获得域名对应的IP（如www.example.com的A记录），并缓存结果。

7. 结果返回与缓存：本地DNS将IP返回给用户，浏览器缓存该记录，后续请求可快速响应。 

14.Cookie有哪些配置项 

1.名称和值（Name and Value）

每个Cookie都有一个名称和值，名称和值由服务器设置，并在发送给客户端时存储在浏览器中。

document.cookie = "username=JohnDoe";

2.域（Domain）

指定Cookie所属的域。默认情况下，Cookie属于创建它的域。

document.cookie = "username=JohnDoe; domain=example.com";

3.路径（Path）

指定Cookie的有效路径。只有在该路径下的页面才能访问Cookie。

document.cookie = "username=JohnDoe; path=/account";

4.有效期（Expires）

指定Cookie的过期时间。可以设置为特定的日期和时间，超过这个时间后，Cookie将被删除。

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT";

5.最大年龄（Max-Age）

指定Cookie从创建开始的有效时间，以秒为单位。这个属性比expires属性更精确。

document.cookie = "username=JohnDoe; max-age=3600";

6.安全性（Secure）

指定Cookie只能通过HTTPS协议发送，确保数据传输的安全性。

document.cookie = "username=JohnDoe; secure";

7.HttpOnly

指定Cookie只能通过HTTP协议访问，客户端JavaScript无法访问，增加安全性，防止跨站脚本攻击（XSS）。

document.cookie = "username=JohnDoe; HttpOnly";

8.SameSite

指定Cookie的SameSite属性，防止跨站请求伪造（CSRF）攻击。取值可以是Strict、Lax或None。

document.cookie = "username=JohnDoe; SameSite=Strict";

15.实现垂直居中布局

1.使用绝对定位，先设置top:50%和left:50%将元素左上角定位到页面的中心，然后再通过translate(-50%,-50%)来调整元素的中心点到页面的中心

2.使用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况

3.使用绝对定位，先设置top:50%和left:50%将元素左上角定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

4.使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中

16.什么是盒模型

盒模型由margin、border、padding和content四个部分组成。

• 标准盒模型的width和height属性的范围只包含了content，
• IE盒模型的width和height属性的范围包含了border、padding和content

17.常见的定位有哪些（position的值可以是什么？）

1. 固定定位 fixed： 元素相对于浏览器窗口固定位置，即使页面滚动也不会移动。fixed 定位使元素脱离文档流，不占据空间，可能与其他元素重叠。
2. 相对定位 relative： 元素首先保留在文档流中的原始位置，然后可以相对于该位置进行偏移。无论是否移动，元素始终占据原始空间，移动时可能覆盖其他元素。
3. 绝对定位 absolute： 元素相对于最近的已定位父元素进行定位。若无定位父元素，则相对于 body 定位。absolute 定位同样使元素脱离文档流，不占据空间且可能与其他元素重叠。
4. 粘性定位 sticky： 元素首先按普通文档流定位，当到达特定阈值时转为固定定位。其定位参照为 flow root (BFC) 和最近的块级祖先元素。
5. 默认定位 static： 默认定位方式。元素遵循正常文档流，忽略 top、bottom、left、right 和 z-index 属性。

6. 继承父级 inherit：使元素继承父元素的 position 属性值。

18.flex布局的常用属性

1.flex-direction属性决定主轴的方向（即项目的排列方向）。

2.flex-wrap属性定义，如果一条轴线排不下，如何换行。

3.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4.justify-content属性定义了项目在主轴上的对齐方式。

5.align-items属性定义项目在交叉轴上如何对齐。

6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

19.flex属性是由哪几个属性组成的，例如flex:1的含义是什么

flex属性是以下属性的简写

• flex-grow 增长规则
• flex-shrink  收缩规则
• flex-basis 初始大小

可以使用一个，两个或三个值来指定 flex 属性。

• 单值语法：值必须是以下之一：

  • 一个 <flex-grow> 的有效值：此时简写会扩展为 flex: <flex-grow> 1 0。
  • 一个 <flex-basis> 的有效值：此时简写会扩展为 flex: 1 1 <flex-basis>。
  • 关键字 none 或者全局关键字之一。

• 双值语法：

  • 第一个值必须是一个 flex-grow 的有效值。

  • 第二个值必须是以下之一：

    • 一个 flex-shrink 的有效值：此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0。
    • 一个 flex-basis 的有效值：此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>。

• 三值语法：值必须按照以下顺序指定：

  1. 一个 flex-grow 的有效值。
  2. 一个 flex-shrink 的有效值。
  3. 一个 flex-basis 的有效值

flex: 1的含义是当总宽（高）度大于所需宽（高）度时按1份的比例进行扩大，不足时按此比例缩小，一般用于flex布局时其余部分宽（高）度固定，用含有此属性的组件填充剩余宽（高）

20.常见的浏览器状态码有哪些

•  
• 200 OK​​：请求成功，服务器成功处理了请求
• ​​201 Created​​：请求成功，并在服务器创建了新的资源
• ​​301 Moved Permanently​​：请求的资源已永久移动到新位置（客户端应使用新URI进行后续请求，如网站域名永久更改）
• ​​302 Found​​：请求的资源临时移动到另一个位置（客户端应使用新URI进行本次请求，但后续请求可能使用原URI，如临时维护重定向）
• ​​303 See Other​​：服务器指示客户端通过GET方法在另一个URI获取资源（常用于POST请求后的重定向，如提交表单后跳转到结果页面）
• ​​304 Not Modified​​：资源未修改，客户端可使用缓存版本（用于条件GET请求，如浏览器缓存有效时）
• ​​400 Bad Request​​：请求语法错误（多为传参形式错误）
• ​​401 Unauthorized​​：请求需要用户身份认证（未登录）
• ​​403 Forbidden​​：无访问权限
• ​​404 Not Found​​：请求资源不存在
• ​​405 Method Not Allowed​​：请求方式不被允许（如使用Post请求一个Get请求）
• ​​500 Internal Server Error​​：服务器内部错误
• ​​502 Bad Gateway​​：服务器作为网关或代理，上游服务器无法收到响应（如后台通过nginx代理，但后台服务没有启动）
• ​​503 Service Unavailable​​：服务器暂时无法处理请求（通常由于过载或维护，客户端可稍后重试，如服务器重启中）

更新于2025.5.30，后续继续更新