面试题整合——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 使元素脱离文档流，常用于布局（如文字环绕图片）。

css 复制代码

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

如何清除浮动

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

4. 网页端适配方案

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

媒体查询（Media Query） ：

css 复制代码

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

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

rem/vw/vh：

css 复制代码

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 让元素左右浮动。
缺点：
- 需要清除浮动，避免父元素高度塌陷。
- 影响后续元素的排版。

css 复制代码

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

8. Flex 布局

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

css 复制代码

.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 画布，用于绘制图形、动画、数据可视化。

ini 复制代码

<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)`	画圆