应使用而非包裹文章列表，因语义正确、支持独立索引、便于嵌入元信息与扩展交互，而将文章误作菜单项，破坏可访问性与seo。
直接用 <article></article> 包每篇内容，别套 <ul></ul> 或表格——语义错、SEO弱、后期加图/标签难扩展。
为什么不用 <ul></ul> 做文章列表
很多人看到“列表”就本能写 <ul><li>标题</li></ul>，但这是把文章当菜单项处理。实际后果很具体：
- 屏幕阅读器会读作“列表，共 5 项”，每篇标题后都带“列表项”，打断内容流
-
<li>里没法自然嵌<time></time>、封面图或分类标签，硬塞会导致结构松散 - 搜索引擎不认为
<li>是独立内容单元，单篇文章无法被单独索引 - 后续想用 JS 按日期过滤或加“已读”状态，
<article></article>天然支持itemprop和data-属性，<li>得额外补 wrapper
<article></article> 的最小可用结构怎么写
不需要复杂嵌套。每篇用一个 <article></article>，里面只放真正属于它的内容：
<article><header><h2><a href="post-1.html">闭包的三个常见误解</a></h2>
<p class="meta"><time datetime="2024-03-15">2024-03-15</time> • 阅读 4 分钟</p>
</header><p>很多人以为闭包 = 函数里返回函数……</p>
</article>
关键点：
-
<header></header>不是装饰，它让标题和元信息形成逻辑组，CSS 选中更准（比如article header h2） -
<time datetime="..."></time>的datetime属性必须是 ISO 格式（如2024-03-15），否则机器无法解析时间 - 摘要段落
<p></p>直接跟在<header></header>后，不要用<div> 包，避免多余层级 <li>所有 <code><article></article>放在<main></main>里，别塞进<section></section>或<div class="list"> <h3>CSS 只需三行就能撑起基础排版</h3> <p>新手常花几小时调 margin/padding，其实核心就三点：</p> <ul> <li>给 <code><article></article>加margin-bottom: 1.5rem控制篇间距，比用<br>或空<p></p>干净得多 -
article header h2 a设text-decoration: none和color: #333，避免默认下划线干扰阅读 -
.meta用font-size: 0.875rem; color: #666弱化显示，别让它抢标题视觉权重
别一开始就写媒体查询。先确保桌面端行宽不超过 65ch（用 max-width: 65ch 套在 <main></main> 上），手机端自然缩窄后文字才不会挤成一团。
移动端代码块截断怎么防
很多新手贴完代码发现手机上变成一条横线，复制还带多余空格。根子在三处没配齐：
-
<pre class="brush:php;toolbar:false;"></pre>必须设white-space: pre（不是pre-wrap），否则换行被浏览器吞掉 <code>加word-break: normal，否则长变量名（如userProfileInitializationHandler）会被强制折行，破坏可读性- 整块加
overflow-x: auto时，<pre class="brush:php;toolbar:false;"></pre>得配max-width: 100%，否则超出视口宽度后横向滚动条失效
最简生效组合：
pre {
white-space: pre;
max-width: 100%;
overflow-x: auto;
}
code {
word-break: normal;
}
记住：只要有一处漏掉，代码块在小屏上就会出问题。这不是样式“不够酷”，而是语义和行为没对齐。
