HTML5常见问题包括：语义标签误用导致渲染异常，required属性失效，音视频加载失败无控制台报错，Flex/Grid在IE11兼容性差，以及语义标签与ARIA配合缺失影响可访问性。
HTML5 标签写错导致浏览器静默忽略
浏览器对非法 HTML5 结构通常不报错，而是直接跳过或自动修复，结果页面渲染异常却找不到源头。比如把 <main> 放在 <header> 外但嵌套在 <div> 里，部分旧版 Safari 会丢弃整个 <main> 内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用 W3C Nu Validator 在线校验，它比浏览器开发者工具更早发现语义结构错误
- 避免在
<section>、<article>等语义容器内直接写<div>包裹标题——应优先用<h2>~<h6>构建大纲 -
<footer>不等于“页面底部”，它必须是其最近的<article>或<body>的结尾内容，否则会被降级为普通<div>
form 表单提交时 required 不生效
常见于动态插入的表单控件，或用了自定义属性如 data-required 代替原生 required。原生校验只响应 required 布尔属性本身，且要求元素在 DOM 中已存在、未被 display: none 隐藏（visibility: hidden 可以）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查是否误写成
required="true"—— 正确写法是required（无值）或required="" - 动态添加的
<input required>必须在插入 DOM 后再调用input.checkValidity()触发校验逻辑 - 若用 CSS 隐藏字段但又想保留校验，改用
aria-hidden="true"+position: absolute; left: -9999px，避免display: none
audio/video 标签加载失败但控制台无报错
HTML5 媒体标签加载失败时，往往只触发 error 事件，而不会在控制台打印错误信息，容易误判为资源路径正常。尤其当服务器返回 403、404 或 MIME 类型不匹配（如 MP4 文件被返回为 text/plain）时，<video> 就卡在黑屏或显示“X”图标。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
error事件并打印event.target.error.code：1=AbortError，2=NetworkError，3=DecodeError，4=NotSupported - 服务端确保正确设置 Content-Type：
video/mp4、audio/mpeg等，Nginx 中可用types { video/mp4 mp4; } - 本地开发时 Chrome 对
file://协议下的<video>有跨域限制，必须起本地 server（如npx serve）
CSS Flex/Grid 布局在 IE11 下完全失效
HTML5 本身兼容 IE9+，但现代布局方案依赖的 CSS 特性（如 display: flex、grid-template-areas）在 IE11 中支持不完整，且语法差异大。例如 IE11 不支持 gap，flex: 1 解析异常，grid-column: span 2 会崩溃。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 Autoprefixer 输出带
-ms-前缀的 CSS，但注意它无法修复语法级不兼容（如gap需手动替换为margin） - IE11 的 Flex 子项必须显式设
flex-basis，不能只靠flex: 1；推荐写成flex: 1 1 auto - Grid 布局在 IE11 中仅支持旧语法（
display: -ms-grid），且不支持fr单位，需换算为calc()或百分比
<nav> 没加 aria-label，屏幕阅读器就无法区分多个导航区；或者 <dialog> 打开后没调用 showModal()，键盘焦点就出不去。这些不报错，但可访问性直接归零。 
