HTML如何制作新闻详情页_html新闻文章详情页面布局【快速上手】

新闻详情页不必强制使用<article>，但强烈建议：它标识独立可复用内容，提升SEO与无障碍访问；<time>的datetime属性须为ISO 8601格式（如2026-04-13T12:26:00+08:00），否则搜索引擎判无效。

新闻详情页必须用 <article> 吗？

不用强制，但强烈建议。浏览器和爬虫会把 <article> 当作独立、可复用的内容单元，对 SEO 和无障碍访问（如屏幕阅读器）有直接帮助。如果只用 <div> 包裹，语义丢失，后续加结构化数据（如 JSON-LD）或做 AMP 适配时会多绕两步。

常见错误是把整页塞进一个 <article> —— 实际上它只应包裹单篇新闻的正文区域，标题、作者、发布时间、图片、段落、引用等都放里面；页头、导航、相关推荐这些属于页面级容器，该用 <header>、<nav>、<aside> 分开。

<time> 标签怎么填才不被搜索引擎判为无效时间？

<time> 的 datetime 属性必须是机器可解析的格式，比如 2026-04-13T12:26:00+08:00，不能写成“2026年4月13日”或“今天”。否则 Google Search Console 可能报 datePublished missing 或 invalid。

• 发布时间用 <time datetime="2026-04-13T12:26:00+08:00">2026年4月13日</time>
• 更新时间加 itemprop="dateModified"（若用 Schema.org）
• 避免空格、中文标点、省略年份——04-13 或 4月13日 都无效

图片懒加载和响应式怎么一起写才不出错？

直接在 <img> 上同时用 loading="lazy" 和 srcset 是安全的，但要注意三件事：

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

• src 必须存在，它是降级兜底地址，不能只靠 srcset
• width 和 height 属性要写，否则触发 CLS（累积布局偏移），尤其在新闻页首图位置
• 不要给 <img> 外层再套 <picture> 除非真需要 art direction（比如横屏竖屏换图），多数新闻图用 srcset + sizes 足够

示例：<img src="news-800.jpg" srcset="news-400.jpg 400w, news-800.jpg 800w, news-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 800px" width="800" height="450" loading="lazy" alt="荣耀机器人参加亦庄马拉松">

段落首行缩进用 text-indent 还是 padding？

必须用 text-indent。用 padding-left 会导致整段左移，破坏对齐，且和 margin 冲突容易引发意外空白。新闻正文对排版精度敏感，这点不能妥协。

注意两个细节：

• text-indent 值推荐用 2em，不是固定像素——字体放大时缩进也等比放大
• 第一段通常不缩进（中文排版惯例），可用 p:first-of-type { text-indent: 0; } 控制
• 遇到 <blockquote> 或 <pre> 等特殊块级元素，要单独重置 text-indent: 0，否则会继承缩进造成错位

真正难处理的是图文混排时的浮动图+文字环绕——这时候 text-indent 依然生效，但视觉上可能被图片遮挡，得靠 clear 或 Flex/Grid 重新组织流式关系，而不是调缩进值硬凑。