HTML无法独立实现短视频评论功能，需JS与后端协作完成提交、加载、交互及存储；弹窗须用dialog或fixed+手动焦点/ESC/滚动控制；渲染需防XSS，推荐DOMPurify过滤；时间格式化用Intl.DateTimeFormat；移动端需处理iOS聚焦跳动问题。
HTML里没法直接做短视频评论功能
纯HTML只能写静态结构，评论的提交、加载、交互、数据存储全靠JavaScript和后端配合。所谓“HTML做评论”，实际是用 <form> 搭骨架，靠 fetch() 或 XMLHttpRequest 发请求，再用JS动态更新 <div id="comments"> 里的内容。面试时如果只写一堆 <p><span>用户A：好看！</span></p>，会被直接问：“那新评论怎么加？删了怎么同步？点赞状态怎么保持？”
弹窗评论框必须用 dialog 或 position: fixed 实现
别用 <div style="display:none"> + JS切显隐来模拟弹窗——它不阻断背景操作、不处理焦点陷阱、按ESC也不关闭，面试官一眼看出没实操经验。推荐两种靠谱方式：
-
<dialog>是原生语义化弹窗，支持showModal()、close()、自动聚焦首个可交互元素，但 Safari 旧版本兼容性差（iOS 15.4+ 才稳定） - 手写
<div class="comment-modal" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;">更可控，但必须手动加tabindex="-1"、监听ESC键、禁用背后滚动（document.body.style.overflow = 'hidden'）
评论列表渲染要防XSS，别直接 innerHTML = comment.text
用户输入的评论可能含 <script>alert(1)</script> 或 <img src=x onerror=...>，直接插入会执行恶意代码。安全做法只有两个：
- 用
textContent替代innerHTML（但会丢失换行、@用户名等简单格式） - 白名单过滤 HTML：只允许
<br>、<strong>、<a href="https://...">，其余标签/属性全部移除——推荐用DOMPurify.sanitize(html)库，比正则靠谱得多
顺带一提：后端返回的评论时间字段如果是 "2024-05-20T14:23:18Z"，前端别用 new Date().toLocaleString() 直接转，中文环境可能出“5/20/2024, 2:23:18 PM”。用 Intl.DateTimeFormat('zh-CN', { hour12:false }).format(new Date(time)) 更稳。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
移动端评论框聚焦时页面乱跳，关键在 viewport 和 scrollIntoView
iOS Safari 在 <textarea> 获焦时默认把输入框顶到视口顶部，常导致弹窗错位、视频被遮挡。解决方法不是加 scrollIntoView({ behavior: 'smooth' })，而是：
- 给
<meta name="viewport">加上viewport-fit=cover，并确保没有user-scalable=no - 在
textarea.focus()后立刻调用element.scrollIntoView({ block: 'center' })，且加setTimeout延迟 100ms（iOS 的 focus 和键盘弹起有微小延迟） - 更彻底的方案：弹窗打开时，先
document.documentElement.scrollTop = 0锁定滚动位置，关弹窗再恢复
这些细节不写进代码，光说“我用过弹窗”基本等于没做过真实项目。
