【前端面试题✨】HTML 篇（一）
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-*：自定义数据属性