新闻时间线必须用标签，因其唯一能被机器识别为有序序列；的datetime值须为ISO 8601格式；竖线圆点需用伪元素实现；每条新闻须用包裹并含标题与唯一id；配图须用组合且带懒加载与宽高属性。
新闻时间线必须用
时间线本质是「有严格先后顺序的事件流」，
套娃，连“这是个列表”都表达不出来——SEO 抓不到顺序，键盘用户 tab 键乱跳，打印出来只剩文字堆叠。
写
- ✅ 正确：
- ❌ 错误：
- ❌ 错误：
- ❌ 错误：
后端返回类似 "2026/08/04"？前端得先转：new Date("2026/08/04").toISOString().split('T')[0] 再塞进 datetime。
CSS 画竖线和圆点，别用 border-left
给
border-left: 2px solid #ccc 表面省事，实际会引发三类问题：缩放时竖线偏移、节点悬停左右抖动、打印时整条线错位——因为 border 是盒模型一部分，会影响所有子元素布局计算。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载
- 竖线必须用
::before
position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 2px;
- 圆点用每个
- ::after
position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #4a90e2;，锚定在中线上，不占空间也不扰流
- 左右交替靠
li:nth-child(odd) 和 li:nth-child(even) 控制内容对齐 + padding，别用 JS 判断奇偶
每条新闻必须用
只用 是最隐蔽的降权操作：Google Search Console 可能报 NewsArticle 类型缺失；视障用户按 article 键跳转时卡在一堆无意义的 div 里；后续加 JSON-LD 时还得手动补全 datePublished、headline、description 所有字段。id（如 id="news-20260804-001"），方便锚点跳转和 JS 动态操作。带图必须用 ![]()
![]()
loading="lazy" 和真实 width/height，否则首屏 CLS 直接拉低 Core Web Vitals 分数。
时间线本质是「有严格先后顺序的事件流」， 写 后端返回类似 给 实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。 只用
的值必须是 ISO 8601 格式 看着正常，但所有依赖时间语义的功能都会失效：Google 不收录发布时间、日历插件加不进去、甚至部分浏览器的“添加到日历”按钮灰掉。
（斜杠非法）（缺年份、缺时分秒）（含中文字符）"2026/08/04"？前端得先转：new Date("2026/08/04").toISOString().split('T')[0] 再塞进 datetime。CSS 画竖线和圆点，别用
border-left
border-left: 2px solid #ccc 表面省事，实际会引发三类问题：缩放时竖线偏移、节点悬停左右抖动、打印时整条线错位——因为 border 是盒模型一部分，会影响所有子元素布局计算。
::before
position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 2px;
position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #4a90e2;，锚定在中线上，不占空间也不扰流li:nth-child(odd) 和 li:nth-child(even) 控制内容对齐 + padding，别用 JS 判断奇偶每条新闻必须用
包裹NewsArticle 类型缺失；视障用户按 article 键跳转时卡在一堆无意义的 div 里；后续加 JSON-LD 时还得手动补全 datePublished、headline、description 所有字段。 内必须含至少一个 或更高阶标题，且每条要有唯一 id（如 id="news-20260804-001"），方便锚点跳转和 JS 动态操作。带图必须用 loading="lazy" 和真实 width/height，否则首屏 CLS 直接拉低 Core Web Vitals 分数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
