构建语义清晰的新闻页面：HTML5 article标签+CSS+JavaScript实现

你是不是在寻觅这么一个新闻页面构建的方案，该方案既能让手机妥善适配，又让平板适配得完美无瑕，还得让电脑适配得毫无问题，而且能被搜索引擎咻一下就迅速抓去，同时且要把所有读者都照顾得妥妥当当？实际上，经由借助 HTML5 标签以及 CSS 响应式技术加以适当采用，你完全能够凭借一套代码就把全部这些需求给搞定，把往昔为不一样设备单独维持页面的那件繁琐工作给告辞去。

用 HTML5 标签搭建新闻骨架

构建一则规范的新闻，首先得挑对容器。article标签是专为独自内容单元去量身打造的 ，它跟新闻那专供展示所用的框类似 ，将一次报道自始至终给包裹起来 ，搜索引擎以及屏幕阅读器一眼就能够辨认出这儿是核心内容。

在article当中，头部信息得由header来进行包裹。新闻标题要放置于h2里面，如此可使层级更为清晰。发布时间需用time标签，并且要加上datetime属性写上标准时间格式，就像2026 - 02 - 26一样，这样机器便能准确识别，而非仅仅看到“今天”这种模糊的字样。

对于正文部分而言，千万不要偷懒去使用一堆 div，而是应当运用 p 标签去把每一个段落组织起来。要是在文末出现了来源或者编辑信息，那么可以将其放置到 footer 里面。经过这样的一套组合之后，你的新闻结构就如同搭积木那样，每个部分都安放到各自对应的位置上，这不仅非常整洁而且还显得很专业。

用 CSS 打造舒适视觉体验

组建好架构后，得运用CSS以使页面呈现出美观态势。给article添加一个浅灰色的背景以及一圈淡色的边框，并且再设定一点内边距，如此一来新闻块之间便有了自然的间距，读者在读的时候视线就不会偏离。

标题得具备醒目性，将 h2 的字体加粗至 1.5rem，颜色采用深灰。发布时间应用相较不小但也不大的灰色字体，并且要在它前面借助伪元素添加上“发布于”三个字，别在 HTML 里生硬去写，其进行维护时会显得更便利些有便利之处使得更方便。

段落之间的间距，乃是阅读时舒适度的关键所在。将 p 标签的行高设定为 1.7，在下边距之处留出大概 1.2 厘米的空间，如此一来文字便不会挤成一团。当屏幕宽度小于 768 像素之时，借助媒体查询把文章块宽度调整为 100%，把字体略微加以缩小，并去掉左右内边距，那么在手机上观看就正合适。

用 JavaScript 增添智能交互

做好基础功能之后，能够运用 JS 添加些起锦上添花作用的小互动。好似新闻篇幅过长，能够默认仅展示摘要。要在 article 里预备一个涵盖全文的区块，初始状态是隐匿的，还需在底部放置一个写上“展开全文”的按钮。

给每一则新闻添加上一个自定义的属性，像是 data-expanded ，以此来记录当下情形究竟是处于收起状态还是展开状态。当点击按钮之时， JS 获取当前的 article ，变换这个属性对应的值 ，并且依据该值去显示或者隐藏整篇新闻所含区块。

若是想令体验更为顺畅，可以于点击之际借由 classList 去增添或者移除某一个类，借助 CSS 的 transition 达成高度方面的渐变过渡效果。要记得以 querySelectorAll 获取全部新闻项，对其进行遍历从而绑定相应事件，防止仅仅让首个新闻产生作用。

分离文件与引入外部资源

对于代码组织而言它也是相当关键的，万不可把所有的样式全都书写在 style 标签里面。需要去新建一个 CSS 文件，然后借助 link 将其引入到 head 当中去。而 JS 代码呢则是要放置到 body 的最底部，动用 script 标签的 src 属性去链接外部文件，因为如此这般才能够确保页面内容率先渲染出来。

再者一种更具高级特性的做法是，将新闻数据抽离成为 JSON 文件，于 JS 之中借助 fetch 获取数据，接着基于此动态生成 HTML 并插入到页面里，照如此这般，任何一天若要对新闻进行修改，仅仅直接修改 JSON 文件便可，根本无需去触动 HTML 结构，如此一来维护起来会显得格外清爽。

在CSS最前面的位置，要记得添加通配符选择器，用以设置box-sizing为border-box的值，以此让元素的宽高计算方式呈现统一状态，在布局时便不会由于内边距以及边框问题而出现错误情况。HTML根标签同样也要较好地设置lang属性，就像设置为zh-CN这种，这对于多语言支持以及屏幕阅读器而言都具备良善的友好性。

验证语义与无障碍标准

页面已然完成，最终需要开展一次体检。要对每一篇新闻的 article 进行检查，查看其中到底有没有 h2 标题，这是构建语义完整的根本所在。time 标签的 datetime 属性必须填入标准日期，绝不可偷懒填写“昨天”，也不能随意填个格式了事。

给每一个具备可交互特性的按钮，添加上称之为 aria-expanded 的属性，其初始设定为 false。在 JS 的环境内部，于切换展开状态之际，同步地去更新此属性所对应的数值状态，如此一来，那些使用读屏软件的盲人用户在浏览之时，便能够得以知晓当前确切处于收起或者展开哪一方的姿态。要是当页面之中包含有图片这种元素，对于那些仅仅作为装饰用途存在的图片，纵使将 alt 属性设定为空字符串，然而绝对不可以将这个属性予以省略。

开启 Chrome 开发者工具，运用 Lighthouse 去开展一回审核，着重留意那些呈现标红状态的问题。唯有将严重以及高优先级的提示均予以修复，你的新闻页面才大体上达成了工业级的标准。

有没有在自行制作页面之际，遭遇过由语义化或者兼容性所引发的那些棘手状况呢？欢迎于评论区域，将你的过往经历讲出来分享一下假如觉得这一份指南具备实用价值的话，可千万别忘记去点赞，并且把它分享给身旁从事前端工作的友人哦。