【前端面试题✨】HTML 篇（一）

最新推荐文章于 2025-08-23 22:59:54 发布

原创最新推荐文章于 2025-08-23 22:59:54 发布 · 503 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

前端面经

1 篇文章

订阅专栏

1. HTML 语义化

HTML 语义化的核心思想是：用合适的标签表达合适的内容。
比如标题使用 <h1> ~ <h6>，段落使用 <p>，强调内容使用 <strong> 或
<em>。
这样做不仅有助于开发者阅读和维护代码，还能提升搜索引擎优化（SEO），并且让屏幕阅读器等辅助设备更好地解析页面结构。

举个例子：

<header>
  <h1>个人博客</h1>
</header>
<main>
  <article>
    <h2>第一篇文章</h2>
    <p>这是文章的正文部分。</p>
  </article>
</main>

2. Canvas

<canvas> 是 HTML5 新增的标签，可以用 JavaScript 在其中绘制图形。
它的特点是像素级操作，比如可以绘制直线、矩形、圆形，甚至做复杂的动画和游戏。
常见的应用场景：网页游戏、可视化图表、图片处理工具等。

简单示例：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 100, 50);
</script>

3. SVG 和 Canvas 的区别

SVG 和 Canvas 都能绘制图形，但它们有明显差异：

SVG 是基于 XML 的矢量图形，每个元素都是 DOM节点，支持事件绑定，放大缩小不会失真。
Canvas 是基于像素的画布，绘制完成后图形就固定了，适合高频率的动画渲染。

总结：SVG 适合静态可交互的矢量图，Canvas适合动态的、高性能的图形渲染。

4. HTML5 新特性

HTML5 带来了很多改进，常见的有：

新的语义化标签：<header>, <footer>, <section>, <article>
音视频支持：<audio>, <video>
图形支持：<canvas>, <svg>
表单增强：date, email, number 等类型
本地存储：localStorage, sessionStorage
WebSocket 通信
地理定位 API

这些特性让 Web 应用更接近原生应用，减少对插件的依赖。

WebSocket 通信（像"电话线"）

传统 HTTP 是"一问一答"的模式，获取最新数据需要不断请求，效率不高。
WebSocket 建立后就像电话一样，浏览器和服务器可以随时互相"说话"，适合实时聊天、在线游戏、股票价格推送、协作文档等场景。

示例：

const ws = new WebSocket('wss://example.com/chat');

ws.addEventListener('open', () => {
  ws.send('hello server');
});

ws.addEventListener('message', (e) => {
  console.log('来自服务器：', e.data);
});

地理定位 API（获取你的位置）

浏览器能请求设备的经纬度，来源可能是 GPS、WiFi、基站或 IP。必须 用户同意 并且 HTTPS 环境下才能用。

示例：

navigator.geolocation.getCurrentPosition(
  (pos) => {
    console.log(pos.coords.latitude, pos.coords.longitude);
  },
  (err) => {
    console.error(err);
  }
);

实际应用：外卖实时位置、附近商家、运动轨迹等。
和 WebSocket 结合，可以做"实时共享位置"的功能。

5. 如何处理 HTML5 新标签的浏览器兼容问题

老版本浏览器（如 IE8）不支持 HTML5 新标签，可以通过以下方式解决：

使用 HTML5 Shiv（一个 JavaScript 脚本，能让 IE 识别新标签）。

在 CSS 中强制让新标签以块级元素渲染，例如：

header, section, footer, article, aside, nav {
  display: block;
}

现在的现代浏览器基本都支持 HTML5 标签，但在面试中依然可以提到这些方案。

6. title 和 alt 属性

title 属性：鼠标悬停在元素上时，会显示额外提示信息。
alt 属性：主要用于 <img>
标签，表示图片的替代文本。图片无法加载时会显示 alt
的内容，同时也是搜索引擎识别图片的依据。

补充：从无障碍角度看，alt 很重要，而 title则不是必须的。

7. HTML 全局属性 (Global Attribute)

HTML 中有一些通用属性，几乎所有标签都能使用：

id：元素的唯一标识
class：定义元素的类名
style：内联样式
title：额外信息提示
lang：元素内容的语言
tabindex：控制键盘 Tab 键的导航顺序
contenteditable：是否可编辑
hidden：是否隐藏元素
draggable：是否可拖拽
data-*：自定义数据属性