HTML5 新特性不是拿来“学完再用”的，而是遇到具体问题时直接查、直接试、直接改——多数时候你根本不需要“从头学 HTML5”，只需要知道哪几个标签/属性能解决手头的 bug 或体验短板。
怎么判断该不该用 <dialog></dialog> 而不是自己写 modal
当你发现 JS 控制遮罩层、焦点捕获、Esc 关闭、Backdrop 点击穿透这些逻辑反复出错，<dialog></dialog> 就是答案。它原生支持 showModal()、close()、open 属性，且自动处理焦点陷阱和 backdrop 样式。
- 必须用
document.querySelector('dialog').showModal()触发，直接设open属性不会显示模态框 -
<dialog></dialog>默认无样式，至少要加position: fixed和z-index，否则可能被其他元素盖住 - Safari 15.4+ 才完全支持，旧版需用
dialog-polyfill，但 polyfill 无法完美模拟focusin事件流 - 关闭时触发
close事件，不是closed—— 写成dialog.addEventListener('closed', ...)会静默失败
fetch() 替代 XMLHttpRequest 的三个硬性前提
别为了“用新不用旧”而换，fetch() 不是万能替代品。它在错误处理、超时、上传进度、Cookie 控制上和 XMLHttpRequest 行为差异明显。
-
fetch()只有网络断开才算 reject，HTTP 404/500 仍走then()，必须手动检查response.ok - 没有内置超时机制，需用
AbortController配合signal参数，漏写会导致请求永远挂起 -
credentials: 'include'必须显式设置，否则跨域请求不带 Cookie，和XMLHttpRequest默认行为不同 - 上传大文件时无法监听进度，得退回
XMLHttpRequest.upload.onprogress
为什么 input type="date" 在 iOS 上点不动，但 type="datetime-local" 可以
iOS Safari 对 type="date" 的支持长期残缺：点击无反应、不触发 input 事件、value 始终为空字符串。这不是你代码的问题，是系统级限制。
立即学习“前端免费学习笔记（深入）”；
- 真实场景中，只要需要用户选择日期（尤其含年月日），优先用
type="datetime-local"，iOS 会渲染时间选择器，且value包含日期部分（如"2024-06-15T10:30"），后端可截取日期段 - 若必须用纯日期，可用
<input type="text" inputmode="numeric" pattern="\d{4}-\d{2}-\d{2}">+ 自定义 picker 库，避免依赖原生行为 - 所有日期类 input 都要配
min和max，否则 iOS 可能默认显示 1970 年，用户滑动半天才到今年
HTML5 新特性的坑，大多藏在「浏览器实现不一致」和「规范与现实脱节」里。比如 <dialog></dialog> 的 focus 管理、fetch() 的错误语义、iOS 对表单类型的阉割——它们不会报错，只会让你花半天调试“为什么没反应”。盯住具体行为，而不是文档标题，才是实操的关键。
