前端八股文-HTML5篇
文章目录
- 1.HTML5
- 1.1 HTML5新增特性
- 1.2 行内元素、块级元素有哪些?
- 1.3 iframe的优缺点
- 1.4 回流重绘是什么意思?如何避免它?
- 1.5 src和href的区别
1.HTML5
1.1 HTML5新增特性
- 语义化标签: header、nav、footer、section
- 媒体标签:audio音频、video标签
- 表单类型属性:email、number、时间控件、color 颜色拾取器、placeholder、autofocus 自动获取焦点
- cavas 绘图
- web 存储:loaclStorage,sessionStorage
示例说明:
1.表单类型属性
HTML5 扩展了 <input> 标签的 type 属性，新增了一些更适用于现代应用的类型：
如 type="email" —— 电子邮箱输入框
- 只允许输入合法的 email 格式（例如 abc@example.com）
- 浏览器自动验证输入是否符合 email 格式
- 移动端会弹出带有 @ 和 . 的键盘
<input type="email" name="userEmail" required>
2.canvas和SVG的区别
<canvas> 是 HTML5 新增的标签，用来通过 JavaScript 动态绘制图形、动画或游戏画面。
特点是:
- 是一个“画布”，你可以用 JavaScript 去在上面画点、线、图像等
- 所有内容都是像素级绘制（位图），不具备元素结构。
- 绘制后不能直接修改图形（除非重新绘制）。
示例代码:
<canvas id="myCanvas" width="200" height="100"></canvas><script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");ctx.fillStyle = "blue";ctx.fillRect(10, 10, 150, 75); // 画一个蓝色矩形
</script>
SVG 是 Scalable Vector Graphics（可缩放矢量图形），是一种用 XML 语法描述图形的语言。
特点:
- 所有图形是“元素”，如
、 ，可以用 CSS 或 JS 操作。 - 是基于矢量的图形，缩放不会失真。
- 可搜索、可编辑、支持事件监听。
<svg width="200" height="100"><rect width="150" height="75" x="10" y="10" fill="blue" />
</svg>
3.loaclStorage和sessionStorage的区别?
1.2 行内元素、块级元素有哪些?
- 行内元素:a、span、img、input…
- 块级元素：div、ul、li、ol、dt、dh、p、h1-6
示例说明:
行内元素和块级元素的区别?
| 特性 | 块级元素 (Block-level Element) | 行内元素 (Inline Element) |
|---|---|---|
| 布局方式 | 独占一行，多个块级元素会从上到下垂直排列。 | 不会独占一行，多个行内元素会在同一行内从左到右水平排列，直到行尾才换行。 |
| 尺寸设置 | 可以设置 width 和 height 属性。 | 不可以设置 width 和 height 属性。其宽度和高度由内容决定。 |
| 外边距(Margin) | 可以设置 margin-top, margin-bottom, margin-left, margin-right。 | 只能设置 margin-left 和 margin-right，设置 margin-top 和 margin-bottom 无效。 |
| 内边距(Padding) | 可以设置 padding-top, padding-bottom, padding-left, padding-right。 | 可以设置 padding-left 和 padding-right。设置 padding-top 和 padding-bottom 也会生效，但不会影响周围元素的位置（可能会与上下方内容重叠）。 |
1.3 iframe的优缺点
<iframe> 是 HTML 中的一个标签，全称是 inline frame（内联框架）。它的作用是：
在当前网页中嵌套另一个独立的网页，可以显示其他网页的内容（甚至是其他网站的网页）。<iframe src="https://example.com" width="600" height="400"></iframe>
这段代码的效果是：在当前页面中显示一个 600×400 的窗口，内容是 https://example.com 网站的页面。
iframe 的优点
- 复用性,可以在一个页面中嵌入其他页面，实现复用
- 隔离性强 iframe 中的页面与主页面相互独立（沙箱环境），互不影响
- 异步加载 iframe 的内容在主页面之后加载，不会阻塞主页面的渲染
iframe 的缺点
- 性能差 每个 iframe 都是一个独立的浏览器上下文，资源开销较大
- 影响 SEO 搜索引擎对 iframe 内的内容抓取有限，可能影响被收录效果
- 导航与交互复杂 如果嵌套页面很多，会让前端交互和状态管理变复杂
1.4 回流重绘是什么意思?如何避免它?
回流是什么?
回流（Reflow）又叫布局（Layout），是指当页面的结构、位置、尺寸等发生变化时，浏览器重新计算元素的几何位置和大小的过程。
✅ 会触发回流的操作包括：
- 添加或删除 DOM 元素
- 改变元素尺寸、位置（如 width、height、top、margin）
- 修改字体大小、字体类型
- 改变窗口大小（resize）
- 获取某些属性（如 offsetTop、clientHeight、getComputedStyle()）时，会强制刷新计算结果
重绘是什么?
重绘（Repaint）是指元素样式发生改变，但不影响布局时，浏览器只重新绘制元素外观（颜色、字体、边框等）而不重新计算布局。
✅ 会触发重绘但不回流的操作包括:
- 改变 color、background-color、border-color 等
- 设置 visibility 为 hidden
- 修改阴影、透明度等视觉样式
总结:
回流当DOM变化影响了元素，比如元素的尺寸、布局、显示隐藏等改变了，需要重写构建。每个页面至少需要一次回流，就是在页面第一次加载的时候，这个时候一定会发生回流。
重绘当一个元素的外观发生变化，但是没有改变布局，重新渲染元素的外观。比如background-color、color
回流必将引起重绘，而重绘不一定会引起回流
为什么要避免回流重绘?
浏览器为了优化性能，会把多个 DOM 操作合并批处理。但如果频繁操作 DOM 或强制同步布局，性能会严重下降，尤其在动画或移动端页面中非常明显。
如何避免回流重绘?
- 批量 DOM 操作:将多次 DOM 改动放在一次性操作中
- 脱离文档流再修改:改变元素时先用 display: none 隐藏，改完再显示
- 避免表格布局复杂化:表格（）的回流成本远高于其他元素，尽量简化表格结构
实战举例:
// ❌ 坏方式：在循环中频繁访问 DOM
for (let i = 0; i < 100; i++) {document.getElementById("box").style.marginTop = i + "px";
}// ✅ 好方式：使用变量存储并一次性修改
const box = document.getElementById("box");
box.style.marginTop = "100px";
1.5 src和href的区别
src指向外部资源的位置，将指向的内容嵌入到文档中当前标签所在的位置，如js脚本、img图片、iframe等
href用于在当前文档和引用资源之间确立联系，一般是用在link、a等元素