最简留言列表应使用包裹，每条留言用语义化封装；内部按（昵称/时间）→（正文）顺序组织，时间用标记，状态等非渲染信息存于data-属性，css优先用flex布局并重置默认间距。
用 <ul></ul> + <li> 构建最简留言列表结构
纯静态展示留言，不需要交互或后端，<ul></ul> 是最轻量、语义最准的选择。每个留言用 <li> 包裹，避免滥用 <div> 导致语义丢失或屏幕阅读器识别异常。
<p>常见错误是把每条留言写成独立的 <code><div> 块，结果既没层级关系又难用 CSS 批量控制间距和样式。
<ul>
<li>每条 <code><li> 内部建议按顺序组织：<h4></h4>（昵称/时间）→ <p></p>（留言正文），保持可读性
<ul></ul> 套在某条 <li> 里即可，但一级列表必须是 <ul></ul> 或 <ol></ol>
<ul></ul> 设 list-style: none 后就忘了重置 margin 和 padding，否则默认上下边距会撑开空白用 datetime 属性标记时间，兼顾机器可读与显示需求
用户看到的是“2024-05-20 14:30”，但搜索引擎和辅助工具需要结构化时间。直接在 <time></time> 标签里用 datetime 属性，比单纯写字符串更可靠。
示例：
<time datetime="2024-05-20T14:30:00+08:00">2024-05-20 14:30</time>
-
datetime值必须符合 ISO 8601 格式（如YYYY-MM-DDTHH:MM:SS+TZ），否则会被忽略 - 显示文本可以本地化（如“昨天下午”），但
datetime不能跟着变，它只负责机器解析 - 不要用
<span></span>+ 自定义属性模拟，<time></time>是唯一原生支持该语义的标签
用 data- 属性存非渲染信息，比如留言 ID 或状态
前端需要知道哪条是已审核、哪条带敏感词，又不想暴露在可见文本里——data- 属性就是干这个的。它不影响页面渲染，但 JS 可随时读取。
示例（一条待审核留言）：
游客
这个功能很好用！
-
data-名称全小写，用短横线分隔（如data-user-type），别写成data_userType - 值尽量用字符串，JS 里用
parseInt()或JSON.parse()转类型，别依赖浏览器自动转换 - 别把敏感数据（如用户手机号）塞进
data-属性，它在源码里完全可见
加基础 CSS 时优先用 flex 控制单条留言布局
昵称、时间、内容混排时，浮动或绝对定位容易错位。display: flex 在现代浏览器中兼容足够好，且一行代码就能对齐。
示例（对单个 <li> 内部）：
li { display: flex; flex-direction: column; }
li h4 { margin: 0; font-size: 0.9em; color: #666; }
li p { margin: 0.5em 0 0; line-height: 1.5; }
- 别给
<li>设固定高度，文字换行或字体缩放时会截断 - 时间戳建议和昵称放在同一行，用
<span></span>包裹并设margin-left: auto实现右对齐 - 移动端需加
word-break: break-word防止超长英文或 URL 撑破容器
