1、HTML5 新特性有哪些？
- 语义化标签：header、nav、main、article、section、aside、footer、figure、figcaption、mark、time 等，增强代码可读性和 SEO。
- 表单新特性：新增输入类型（email、tel、url、number、range、date、datetime-local、month、week、color、search）、新属性（required、pattern、placeholder、autofocus、autocomplete）、表单验证 API。
- 多媒体标签：audio（音频播放）、video（视频播放），原生支持多种格式，无需第三方插件。
- 本地存储：localStorage（永久存储，容量约 5-10M）、sessionStorage（会话存储，页面关闭销毁，容量约 5-10M）、IndexedDB（大容量结构化存储）。
- 绘图与图形：canvas（基于像素的动态绘图，适合游戏、动画）、SVG（基于矢量的静态图形，放大不失真，适合图标、图表）。
- 其他特性：WebSocket（双向通信）、Geolocation（地理位置定位）、拖放 API、Web Workers（后台线程处理）、History API（操作浏览器历史记录）、新的语义化元素（如 details、summary 用于展开 / 折叠内容）。
2、DOCTYPE 的作用是什么？
声明 HTML 文档的类型和版本，告诉浏览器以标准模式解析页面，避免怪异模式渲染
3、HTML5 为什么可以省略 DOCTYPE 声明？
不可以省略，只是 HTML5 的 DOCTYPE 声明简化成<!DOCTYPE html>，必须写，作用不变
4、div 和 span 的核心区别是什么？
div 是块级元素，独占一行，可设置宽高、内外边距；span 是行内元素，不独占一行，不能设置宽高，仅包裹行内内容
5、img 标签的 alt 属性的作用？
图片加载失败时显示的替代文本，提升页面可访问性，同时利于 SEO 搜索引擎收录
6、a 标签的 target="_blank" 有什么安全问题？如何解决？
存在钓鱼风险，新打开的页面可以获取原页面的 window 对象；解决：添加 rel="noopener noreferrer"
7、form 表单的 get 和 post 请求的区别？
get：参数拼接在 URL 上，长度有限，安全性低，请求可缓存，一般用于查询数据；post：参数在请求体中，无长度限制，安全性高，请求不缓存，一般用于提交数据
8、什么是 HTML 语义化？
使用有明确含义的 HTML 标签描述内容，而非纯 div/span 无意义标签，比如 header、nav、article、footer 等
9、使用 HTML 语义化的好处有哪些？
- 代码可读性更高，便于团队维护；2. 利于 SEO，搜索引擎能更好解析页面结构；3. 提升页面可访问性，适配屏幕阅读器等辅助工具
10、HTML5 新增了哪些核心的语义化标签？
header、nav、main、article、section、aside、footer、figure、figcaption、mark、time
11、link 标签和 @import 引入 CSS 的区别？
link 是 HTML 标签，并行加载 CSS，无兼容问题，权重更高；@import 是 CSS 语法，等待 HTML 加载完再加载 CSS，有兼容问题，权重低
12、script 标签的 defer 和 async 属性的区别？
defer：脚本异步下载，HTML 解析完后按顺序执行；async：脚本异步下载，下载完成立即执行，执行顺序不固定
13、为什么通常把 script 标签放在 body 底部？
避免脚本加载和执行阻塞 HTML 的解析渲染，防止页面出现白屏或加载卡顿
14、HTML5 新增的表单输入类型有哪些？
email、tel、url、number、range、date、datetime-local、month、week、color、search
15、HTML5 的本地存储有哪几种方式，区别是什么？
localStorage：永久存储，除非手动删除，同源共享，容量约 5-10M；sessionStorage：会话级存储，页面关闭即销毁，同源同窗口共享，容量约 5-10M；cookie：容量 4KB，每次请求自动携带到服务端，可设置过期时间
16、meta 标签的 viewport 属性作用是什么？
适配移动端页面，设置视口的宽度、缩放比例，核心写法：<meta name="viewport" content="width=device-width, initial-scale=1.0">，解决移动端页面缩放错乱问题
17、title 标签和 meta description 的作用？
title 是页面标题，显示在浏览器标签栏，是 SEO 核心权重标签；meta description 是页面描述，会在搜索引擎结果页展示，提升点击率
18、HTML 中的块级元素和行内元素有哪些典型代表？
块级：div、p、h1-h6、ul、ol、li、dl、dt、dd、form、header、footer、section、article行内：span、a、img、label、strong、em、i、b、u、s
19、行内元素可以嵌套块级元素吗？举例说明
大部分不行，比如 a 标签可以嵌套除自身外的任意元素，span 标签不能嵌套块级元素，p 标签不能嵌套 div 等块级元素
20、img 标签的 title 属性和 alt 属性的区别？
alt 是图片加载失败的替代文本，必须写；title 是鼠标悬浮在图片上显示的提示文本，可选写
21、HTML5 新增的多媒体标签是什么？
audio 音频标签、video 视频标签，原生支持音视频播放，无需依赖第三方插件
22、canvas 和 SVG 的核心区别？
canvas 是基于像素的画布，绘制的是位图，放大失真，适合动态图形 / 游戏；SVG 是基于矢量的图形，放大不失真，适合静态图标 / 可视化图表
23、HTML 中的注释写法是什么？
，注释内容不会被浏览器渲染，仅在源码中可见
24、label 标签的作用是什么？如何和 input 绑定？
提升表单的可点击区域和可访问性，点击 label 会聚焦对应的 input；绑定方式：1.label 的 for 属性值等于 input 的 id 值 2. 将 input 包裹在 label 内部
25、HTML5 中废除了哪些旧标签？
font、center、u、s、strike、frame、frameset、noframes 等纯样式和框架类标签
26、什么是 HTML 的空标签（自闭合标签）？举例说明
没有结束标签的标签，标签内无内容，直接闭合；比如 img、br、hr、meta、link、input、area、base
27、base 标签的作用是什么？
设置页面中所有 a 标签的默认跳转地址和 target 属性，一个页面只能有一个 base 标签，写在 head 里
28、如何在 HTML 中实现换行？
使用 br 标签实现强制换行；p 标签是分段，也会产生换行效果
29、HTML 中 h1-h6 标签的作用？为什么一个页面建议只写一个 h1？
h1-h6 是标题标签，权重从高到低，用于定义页面的层级标题；一个页面只写一个 h1 是为了让搜索引擎明确页面核心主题，提升 SEO 权重，避免权重分散
30、HTML 页面出现乱码的原因是什么？如何解决？
原因：页面编码格式和文件保存的编码格式不一致；解决：在 head 中添加<meta charset="UTF-8">，同时将文件保存为 UTF-8 编码格式