优先用 ，除非公告有严格发布时间顺序且必须视觉编号；标题用 或 保证可访问性；时间用 标签提供 iso 格式 datetime；最新公告应置于首个 ，动态加载时用 unshift() 或 insertbefore() 确保置顶。
公告列表用 <ul></ul> 还是 <ol></ol>？
取决于公告是否需要严格时间顺序或编号语义。如果只是展示最新几条公告，<ul></ul> 更自然；如果每条公告带“第1期”“第2期”这类显式序号，或者必须按发布时间从旧到新排列（需倒序渲染），<ol></ol> 才有意义。浏览器默认的 <ol></ol> 编号是 1. 2. 3.，不能直接改成“公告一、公告二”，得靠 CSS 的 list-style-type 或伪元素重写，反而多一层维护成本。
每条公告该用 <li> 还是 <article></article>？
纯前端静态公告页，<li> 足够。但如果公告含标题、日期、正文段落、甚至附件链接，且未来可能被 RSS 抓取或需要独立 SEO，建议嵌套结构：<li><article><h3>标题</h3>
<time datetime="2024-05-20">2024年5月20日</time><p>内容...</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></article></li>。注意：<time></time> 标签的 datetime 属性必须是 ISO 格式（如 2024-05-20），否则屏幕阅读器和搜索引擎无法正确解析时间。
如何让最新公告总在最上面？
HTML 本身不提供“自动置顶”逻辑，顺序完全由代码书写顺序决定。常见错误是把新公告追加到 HTML 文件末尾，结果它显示在列表底部。正确做法：
- 手写时，把最新公告写在
<ul></ul>或<ol></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></ul>高度塌陷，导致实际可点击区域极小——加overflow: auto或伪元素清除浮动 - 字体大小小于 16px 且没设
user-scalable=no（不推荐禁缩放），iOS Safari 会强制放大触发区域，破坏布局——优先用rem或em保证最小字号 16px
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
