html无法独立实现短视频评论功能，需js与后端协作完成提交、加载、交互及存储；弹窗须用dialog或fixed+手动焦点/esc/滚动控制；渲染需防xss，推荐dompurify过滤；时间格式化用intl.datetimeformat；移动端需处理ios聚焦跳动问题。
HTML里没法直接做短视频评论功能
纯HTML只能写静态结构，评论的提交、加载、交互、数据存储全靠JavaScript和后端配合。所谓“HTML做评论”，实际是用 <form></form> 搭骨架，靠 fetch() 或 XMLHttpRequest 发请求，再用JS动态更新 <div id="comments"> 里的内容。面试时如果只写一堆 <code><p><span>用户A：好看！</span></p>，会被直接问：“那新评论怎么加？删了怎么同步？点赞状态怎么保持？”
弹窗评论框必须用 dialog 或 position: fixed 实现
别用 <div style="display:none"> + JS切显隐来模拟弹窗——它不阻断背景操作、不处理焦点陷阱、按ESC也不关闭，面试官一眼看出没实操经验。推荐两种靠谱方式：
<ul>
<li>
<code><dialog></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;"> 更可控，但必须手动加 <code>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></strong>、<a href="https://..."></a>，其余标签/属性全部移除——推荐用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)) 更稳。
移动端评论框聚焦时页面乱跳，关键在 viewport 和 scrollIntoView
iOS Safari 在 <textarea></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锁定滚动位置，关弹窗再恢复
这些细节不写进代码，光说“我用过弹窗”基本等于没做过真实项目。
