以下是一些 HTML 面试题，涵盖基础概念、语义化、SEO 以及 HTML5 相关的知识。
基础部分
-
什么是 HTML？它的作用是什么？
-
HTML 语义化是什么？请举例说明。
-
div 和 span 的区别是什么？
-
HTML 中 id 和 class 的区别是什么？
-
em 和 strong 标签有什么作用？它们的区别是什么？
-
alt 属性的作用是什么？为什么图片标签
必须包含 alt 属性？
-
这行代码的作用是什么？
进阶部分
-
HTML5 新增了哪些结构性标签？
-
b 和 strong，i 和 em 的区别是什么？
-
HTML5 的 localStorage 和 sessionStorage 有什么区别？
-
iframe 是什么？它的优缺点是什么？
-
HTML5 的 data-* 属性是什么？它有什么作用？
-
在 HTML5 中，
和 标签的区别是什么？ - 表单的 method="GET" 和 method="POST" 有什么区别？
实战部分
-
如何在 HTML 页面中嵌入视频和音频？
-
input 标签的 type="file" 如何实现多个文件上传？
-
如何让一个链接在新标签页打开？
- 表格的 colspan 和 rowspan 属性的作用是什么？
-
如何让 HTML 页面支持暗黑模式（Dark Mode）？
-
HTML 页面优化有哪些方法？
-
meta 标签中 viewport 有什么作用？
-
什么是无障碍（Accessibility, A11y）？HTML 如何优化无障碍体验？
-
语义化标签如何影响 SEO？
-
什么是懒加载（Lazy Loading）？HTML5 如何支持懒加载？
SEO & 性能优化
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
以下是 HTML 面试题的答案：
基础部分
什么是 HTML？它的作用是什么？
HTML（HyperText Markup Language，超文本标记语言） 是构建网页的标准语言，用于定义网页的结构和内容，如文本、图片、链接、表单等。
HTML 语义化是什么？请举例说明。
HTML 语义化是指使用有意义的标签来描述内容，而不是仅使用 <div> 或 <span> 这样的非语义标签。例如：
<header> 表示页眉
<article> 表示一篇独立的文章
<nav> 表示导航菜单
<footer> 表示页脚
div 和 span 的区别是什么？
<div> 是块级元素，默认独占一行，可用于布局结构。
<span> 是行内元素，适用于包裹部分文本或小块内容，不会独占一行。
HTML 中 id 和 class 的区别是什么？
id 在整个 HTML 文档中必须唯一，常用于 JavaScript 操作。
class 可以重复使用，常用于 CSS 选择器。
em 和 strong 标签有什么作用？它们的区别是什么？
<em>（emphasis）表示强调，通常用斜体表示。
<strong> 表示更重要的内容，通常加粗显示。
alt 属性的作用是什么？为什么图片标签 <img> 必须包含 alt？
alt 主要用于描述图片内容，在图片加载失败或屏幕阅读器使用时可用。
对于无障碍访问（Accessibility, A11y）和 SEO 友好性很重要。
## <meta charset="UTF-8"> 这行代码的作用是什么？
指定网页的字符编码为 UTF-8，确保支持多语言字符显示。
进阶部分
HTML5 新增了哪些结构性标签？
HTML5 增加了语义化标签，如：<header>、<nav>、<section>、<article>、<aside>、<footer>，用于增强网页结构和 SEO 友好性。
b 和 strong，i 和 em 的区别是什么？
<b>（bold）仅仅是视觉上的加粗，<strong> 具有语义上的强调意义。
<i>（italic）是纯视觉上的斜体，<em> 表示强调，并可能影响屏幕阅读器朗读方式。
HTML5 的 localStorage 和 sessionStorage 有什么区别？
localStorage：数据持久存储，不随页面关闭而丢失。
sessionStorage：会话存储，页面关闭后数据即被清除。
iframe 是什么？它的优缺点是什么？
iframe 用于在网页中嵌入另一个 HTML 页面。
优点：可用于加载第三方内容（如广告、地图、视频）。
缺点：影响 SEO、加载速度较慢、可能存在安全风险（XSS 攻击）。
HTML5 的 data-* 属性是什么？它有什么作用？
data-* 是自定义数据属性，可用于存储与元素相关的额外信息，便于 JavaScript 操作数据。
在 HTML5 中，<section> 和 <article> 标签的区别是什么？
<section>：用于表示文档中的一个逻辑区域，可包含多个 <article>。
<article>：表示独立的文章，如博客文章、新闻条目等。
<form> 表单的 method="GET" 和 method="POST" 有什么区别？
GET：数据通过 URL 传输，参数可见，适用于小数据量和查询请求。
POST：数据在 HTTP 请求体中传输，参数不可见，适用于大数据量和安全性要求较高的请求。
实战部分
如何在 HTML 页面中嵌入视频和音频？
<video controls> <source src="video.mp4" type="video/mp4"> </video>
<audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio>
input 标签的 type="file" 如何实现多个文件上传？
<input type="file" multiple>
如何让一个链接在新标签页打开？
<a href="https://example.com" target="_blank">点击打开新标签
<table> 表格的 colspan 和 rowspan 属性的作用是什么？
colspan：合并单元格列数。
rowspan：合并单元格行数。
<td colspan="2">合并两列</td> <td rowspan="2">合并两行</td>
如何让 HTML 页面支持暗黑模式（Dark Mode）？
使用 prefers-color-scheme 进行 CSS 适配：
@media (prefers-color-scheme: dark) { body { background-color: black; color: white; } }
SEO & 性能优化
HTML 页面优化有哪些方法？
使用语义化标签提高可读性
减少 HTTP 请求，合并 CSS 和 JavaScript
使用 lazy loading 优化图片加载
使用 meta viewport 适配移动端
采用 CDN 加速
meta 标签中 viewport 有什么作用？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
让网页适配移动端，避免缩放问题。
什么是无障碍（Accessibility, A11y）？HTML 如何优化无障碍体验？
A11y 让网页对残障人士友好，如使用屏幕阅读器的用户。
通过 alt 属性、aria-label、键盘导航（tabindex）、适当的对比度提升可访问性。
语义化标签如何影响 SEO？
使用 <h1>-<h6> 结构化内容，提升搜索引擎可读性
<article>、<section> 让爬虫更好理解页面层次
<meta description> 提供页面摘要，提高点击率
什么是懒加载（Lazy Loading）？HTML5 如何支持懒加载？
懒加载延迟加载资源，减少初始加载时间。
`HTML5 直接支持 loading="lazy"： 
这份答案已经涵盖了 HTML 面试的核心知识点，如果你有任何不理解的地方，欢迎继续讨论！
