优先用 <ul>，除非公告有严格发布时间顺序且必须视觉编号；标题用 <h3> 或 <button> 保证可访问性；时间用 <time> 标签提供 ISO 格式 datetime；最新公告应置于首个 <li>，动态加载时用 unshift() 或 insertBefore() 确保置顶。

公告列表用 <ul> 还是 <ol>？

取决于公告是否需要严格时间顺序或编号语义。如果只是展示最新几条公告，<ul> 更自然；如果每条公告带“第1期”“第2期”这类显式序号，或者必须按发布时间从旧到新排列（需倒序渲染），<ol> 才有意义。浏览器默认的 <ol> 编号是 1. 2. 3.，不能直接改成“公告一、公告二”，得靠 CSS 的 list-style-type 或伪元素重写，反而多一层维护成本。

每条公告该用 <li> 还是 <article>？

纯前端静态公告页，<li> 足够。但如果公告含标题、日期、正文段落、甚至附件链接，且未来可能被 RSS 抓取或需要独立 SEO，建议嵌套结构：<li><article><h3>标题</h3><time datetime="2024-05-20">2024年5月20日</time><p>内容...</p></article></li>。注意：<time> 标签的 datetime 属性必须是 ISO 格式（如 2024-05-20），否则屏幕阅读器和搜索引擎无法正确解析时间。

如何让最新公告总在最上面？

HTML 本身不提供“自动置顶”逻辑，顺序完全由代码书写顺序决定。常见错误是把新公告追加到 HTML 文件末尾，结果它显示在列表底部。正确做法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 手写时，把最新公告写在 <ul> 或 <ol> 的第一个 <li> 位置
• 用 JavaScript 动态加载时，用 insertBefore() 或数组 unshift() + 重新渲染，而不是 push()
• 服务端生成（如 PHP/Node.js）时，在数据查询阶段用 ORDER BY created_at DESC 确保数组第一项就是最新的

移动端公告列表点不开？检查这三点

很多新手写的公告列表在手机上点不动，不是 JS 问题，而是基础 HTML/CSS 阻断了交互：

立即学习“前端免费学习笔记（深入）”；

• 确认没有给 <li> 设置 pointer-events: none 或父容器有 overflow: hidden 切掉了点击热区
• 如果公告区域用了 float 布局，父 <ul> 高度塌陷，导致实际可点击区域极小——加 overflow: auto 或伪元素清除浮动
• 字体大小小于 16px 且没设 user-scalable=no（不推荐禁缩放），iOS Safari 会强制放大触发区域，破坏布局——优先用 rem 或 em 保证最小字号 16px

实际发布前，打开浏览器开发者工具，用“设备模拟器”切到 iPhone SE 尺寸，手动点每条公告的标题和日期区域，看鼠标图标是否变成手型——这是最直接的验证方式。