引言
下面介绍九个面试时碰到的关于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:
csshtml { 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) |
画圆 |