HTML资讯头条列表应使用语义化标签：用<article>标记每条独立新闻，<section>包裹整个列表，标题按<h2><h3>层级规范使用，时间用<time>、作者用<footer>、摘要用<p>，避免滥用<div>。
HTML 本身不“搭建”列表，它只负责标记结构；所谓“资讯头条列表”，本质是用语义化标签组织标题、摘要、时间等字段——关键不是学多少标签，而是别把 <div> 当万能筐乱套。
用对 <article> 和 <section>，别堆 <div>
很多人一上来就写一堆 <div class="item">，结果语义丢失、SEO 友好性差、屏幕阅读器读不出内容层级。资讯列表每条新闻应是一个独立内容单元，<article> 就是为此设计的。
-
<article>用于可独立分发、复用的内容（如一篇新闻、一条微博） -
<section>适合包裹整个“头条列表”容器，表示页面中一个主题区块 - 避免嵌套三层以上
<div>：比如<div><div><div>标题</div></div></div>—— 这等于放弃 HTML 的表达力
标题必须用 <h1>–<h6>，且层级要真实反映重要性
资讯列表里，“今日头条”总标题用 <h2>（因为页面主标题通常是 <h1>），每条新闻标题用 <h3> 或 <h4>，不能全写 <h1> 或全用 <span> + CSS 模拟。
- 搜索引擎和辅助工具靠 heading 层级理解内容结构，乱用会导致信息权重错位
- 如果列表出现在首页，页面级
<h1>应该是站点名或频道名，不是“最新资讯” - 不要为了样式妥协语义：用 CSS 改
<h3>字体大小，比用<span>+ class 更干净
时间、来源、摘要这些元信息，优先用 <time>、<footer>、<p>
资讯类内容离不开时间、作者、来源等元数据，HTML 提供了专用标签，不用再靠 class 名硬猜。
立即学习“前端免费学习笔记（深入）”；
-
<time datetime="2024-05-20T09:30">5月20日 09:30</time>：机器可解析时间，对 RSS、聚合工具友好 - 作者/来源放
<footer>里（注意：这是<article>内部的<footer>，不是页面底部） - 摘要用
<p>即可，别用<div>包一层再加 class="desc" - 避免把时间写成
<span class="date">2024-05-20</span>—— 丢掉了语义，也增加了 JS 解析成本
真正卡住人的往往不是不会写标签，而是没想清楚“这条信息在网页里扮演什么角色”。写完检查一遍：每个 <article> 能否单独被 RSS 抓取？每个 <time> 是否有合法 datetime？标题层级是否从 <h2> 开始逐级下降？—— 这些细节，比加几个动画效果更能决定列表是否“可用”。
