面试题整合——html篇

引言

下面介绍九个面试时碰到的关于html的面试题。

1. 行内元素和块级元素的特点

行内元素（inline elements）

• 特点：

  • 不能设置 width、height，大小由内容决定。
  • 默认不会换行，多个行内元素在同一行显示。
  • 只能包裹文本或其他行内元素，不能包含块级元素。

• 常见的行内元素：
  <a>、<span>、<b>、<i>、<strong>、<em>、<label>、<img>、<input>

块级元素（block elements）

• 特点：

  • 独占一行，默认宽度 100%（除 div 外）。
  • 可以设置 width、height，可以包含块级和行内元素。

• 常见的块级元素：
  <div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<section>、<article>、<aside>、<footer>

---

2. HTML5 新特性

结构语义化标签

• <header>、<footer>、<article>、<section>、<nav>、<aside> 提升 SEO 和可读性。

表单增强

• <input type="email | number | date | range">
• <datalist> 提供自动补全
• <output> 用于显示计算结果

多媒体支持

• <audio>、<video> 直接播放音频和视频。
• <canvas> 画布绘图。

本地存储

• localStorage：长期存储，数据不随浏览器关闭而丢失。
• sessionStorage：仅会话存储，浏览器关闭即丢失。

WebSockets

• 实现实时通信（如 Web 聊天、推送）。

Geolocation API

• 获取用户地理位置。

---

3. 浮动（float）及清除浮动

浮动的作用

• float 使元素脱离文档流，常用于布局（如文字环绕图片）。

img {
  float: left;
  margin-right: 10px;
}

如何清除浮动

详细见上篇文章：简单介绍清除浮动解决高度塌陷的四种方法✍🏻

---

4. 网页端适配方案

1. 流式布局：使用 width: % 使内容适应不同屏幕。

2. 媒体查询（Media Query） ：

   @media (max-width: 600px) {
     body {
       background-color: lightblue;
     }
   }
   

3. 弹性布局（flexbox/grid） ：使用 display: flex 适配不同屏幕。

4. rem/vw/vh：

   html { font-size: 16px; }
   body { font-size: 1rem; } /* 适应不同设备 */
   

---

5. 盒子模型

• 标准盒模型：width = content + padding + border + margin
• IE 盒模型（box-sizing: border-box;） ：width = content + padding + border（更方便布局）

---

6. 重排（Reflow）和重绘（Repaint）

• 重排（Reflow） ：涉及 DOM 结构变化（影响布局）。

  • 触发：添加/删除元素、width、height、position 变化。
  • 解决方案：减少 DOM 操作、使用 display: none 批量修改后再显示。

• 重绘（Repaint） ：仅涉及视觉更新（不影响布局）。

  • 触发：color、background 变化。

---

7. Float 布局

• float: left/right 让元素左右浮动。

• 缺点：

  • 需要清除浮动，避免父元素高度塌陷。
  • 影响后续元素的排版。

.container {
  width: 500px;
}
.left {
  float: left;
  width: 200px;
}
.right {
  float: right;
  width: 200px;
}

---

8. Flex 布局

• display: flex 让子元素可以自动调整布局，适用于响应式开发。

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

常见属性

属性	作用
flex-direction	方向（row、column）
justify-content	主轴对齐方式（center、space-between、space-around）
align-items	交叉轴对齐方式（stretch、center）
flex-wrap	是否换行（nowrap、wrap）

---

9. Canvas

<canvas> 是 HTML5 提供的 2D 画布，用于绘制图形、动画、数据可视化。

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100); // 绘制红色方块
</script>

Canvas API

方法	作用
fillRect(x, y, width, height)	绘制矩形
strokeRect(x, y, width, height)	绘制边框矩形
beginPath()	开始路径
moveTo(x, y)	移动画笔
lineTo(x, y)	画线
arc(x, y, r, start, end)	画圆