HTML5新闻制作教程：结构+排版+交互实现-Golang学习网

文章不知道大家是否熟悉？今天我将给大家介绍《HTML5新闻制作教程：article结构+CSS排版+JS交互实现》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

如果您希望构建一个语义清晰、结构规范且具备基础交互能力的新闻页面，则需围绕 HTML5 的 article 标签组织内容主体，并通过 CSS 实现视觉排版，再用 JavaScript 添加动态行为。以下是实现该目标的具体路径：

一、使用 article 标签构建语义化新闻结构

article 标签用于标识独立、可分发、可复用的内容单元，如单条新闻报道，其天然支持 SEO 优化与屏幕阅读器识别，是新闻类页面最适配的语义容器。

元素，作为单条新闻的根容器。

2、在

内嵌套

，用于包裹新闻标题、作者、发布时间等元信息。

3、在

中使用

定义新闻主标题，用标签标注 datetime 属性，确保时间格式为 ISO 8601（如 2025-12-20）。
4、在
主体中使用
标签分段组织正文，避免将全部文字塞入单一段落。
5、在
底部添加
，用于放置来源标注、编辑署名或相关链接。
二、用 CSS 控制新闻区块的视觉层级与响应式布局
CSS 负责将语义结构转化为可读性强、设备适配的视觉呈现，重点在于隔离 article 区块、控制字体节奏、设置断点及留白。
1、为 article 设置统一外边距（margin）、内边距（padding）和浅灰背景（background-color: #f9f9f9），并添加 1px 淡灰边框（border: 1px solid #eee）以形成视觉锚点。
2、将 h2 字体设为加粗、字号 1.5rem，行高 1.4，颜色 #222，顶部留出 0.5rem 上边距以区分 header 与其他内容。
3、为 time 添加 font-size: 0.9rem 和 color: #666，并在其前插入伪元素显示“发布于”文字。
4、对所有 p 设置 line-height: 1.7 与 margin-bottom: 1.2rem，确保段间呼吸感。
5、在媒体查询中加入 @media (max-width: 768px)，将 article 宽度设为 100%，字体缩小至 1rem，移除左右 padding 并增强上下 padding 以适配小屏阅读。
三、用 JavaScript 为新闻页添加基础交互功能
JavaScript 不应破坏页面初始可访问性，仅用于增强体验，例如展开摘要、切换夜间模式或加载更多新闻。
1、为每篇 article 添加 data-status="collapsed" 属性，作为折叠状态标记。
2、在 article 的 footer 中插入一个