用户想要一个完整的单文件 HTML 电影网站。我来仔细构建一下。

关键需求：

SEO 元标签：title、description、keywords、robots、baidu-spider

没有 canonical 链接

图片路径 /upload/vod/{数字}-{词}.webp

不允许外部资源

语义化 HTML

面包屑导航

模态框用于影片卡片点击

锚点链接 #id

H5 响应式

至少 6 个栏目/板块

评论区（仅展示，不可提交）

底部版权

FAQ + 新闻板块

FAQPage + WebSite 的 JSON-LD

没有注释、没有解释

先规划布局。要做得有特色，不是通用模板。

结构：

header 顶部导航（吸顶）

面包屑

hero 区域：主视觉轮播/精选，右侧放榜单

板块：

#hot-movie 全网热播电影

#tv-series 热播电视剧全集

#variety 综艺

#anime 动漫

#ranking 榜单

#news 资讯

#faq 常见问题

#comment 留言互动

侧边栏放在网格里

页脚

图片命名：定死一批唯一数字。

我来列一下：
轮播图：012-banner.webp、047-banner.webp、083-banner.webp
头像：005-avatar.webp、019-avatar.webp、034-avatar.webp、062-avatar.webp、071-avatar.webp、098-avatar.webp
影视类：
001-movie.webp、003-tv.webp、007-anime.webp、009-variety.webp、011-manga.webp、014-movie.webp、016-tv.webp、021-anime.webp、023-movie.webp、026-tv.webp、029-variety.webp、031-manga.webp、036-movie.webp、038-tv.webp、041-anime.webp、044-movie.webp、046-tv.webp、049-variety.webp、052-manga.webp、054-movie.webp、057-tv.webp、059-anime.webp、061-movie.webp、064-tv.webp、067-anime.webp、069-movie.webp、072-tv.webp、074-variety.webp、077-movie.webp、079-anime.webp、081-tv.webp、084-movie.webp、086-tv.webp、088-manga.webp、091-variety.webp、093-anime.webp、095-movie.webp、097-tv.webp、099-movie.webp

图片降级处理：onerror 替换成内联 SVG 数据 URI 占位图。其实数据 URI 也算……好吧，它是内联的，不算外部资源，但“降级处理”——用 onerror 设置一个占位背景就行。我用一个内联的 SVG data URI。

其实更简单的方式：onerror="this.classList.add('img-fallback');this.removeAttribute('src')"——但这样会变成空 src。更好的是用 data URI 的 SVG。这个可以。

我定义一个函数或者用内联 onerror 配合一个很小的 data URI。

就写：onerror="this.onerror=null;this.src='data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 420%22%3E%3Crect fill=%22%23161a26%22 width=%22300%22 height=%22420%22/%3E%3Ctext x=%22150%22 y=%22210%22 fill=%22%23555%22 font-size=%2224%22 text-anchor=%22middle%22%3E%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E4%B8%AD%3C/text%3E%3C/svg%3E"

这样写有点长。不过也能接受，但每个都要写一遍……太长了。换个做法，加个加载类，用 JS 在 DOMContentLoaded 的时候挂监听——其实内联 onerror 直接引用全局函数更简单：

onerror="imgFallback(this)"

然后在脚本里定义：

js
复制
下载
function imgFallback(el){el.onerror=null;el.src='data:image/svg+xml;charset=utf-8,'+encodeURIComponent('<svg ...></svg>')}

嗯，但“禁止出现提交功能”——JS 是没问题的。

其实在 head 里用脚本定义函数？按说应该放在 body 末尾。但 onerror 在解析过程中就可能触发。函数提升的话——如果脚本在下面，那可能页面解析时函数还没定义。所以还是把脚本放 head 里，或者用一个简单的内联属性字符串。

我打算把脚本放在 head 末尾，用 window.imgFallback = function(el){...} 这样定义好。

颜色方案：别搞成那种典型深色 Netflix 红。换个方向：深青黑 + 琥珀金？或者做一个偏浅色、有点杂志感的风格，用深石板色 + 青绿强调色。就这么定：

背景：#0d1117？太常见了。

不如这样：深海军蓝 #0b1020，配紫青渐变强调，用 #7c5cff（紫罗兰）+ #22d3ee（青色）。卡片用玻璃感。嗯，也还算常见。

那就换个路线：暖色暗色主题——背景用 #14100e / #1a1512，强调色 #ff8a3d（橙色）和 #ffd166。暖色暗色配琥珀色——有点电影放映机的感觉。这个可以，也更有辨识度。

背景用 #171310，卡片用 #211b17，描边用 #352b24，文字用 #f4ece5，次要文字用 #a89789，强调色用 #ff9a3c，局部用金色 #ffd166。

布局：

顶栏（很细）带个滚动公告条——不错的小细节

头部主区：logo + 导航 + 搜索框

面包屑

首屏网格：左侧大号轮播图（用 CSS 背景，静态图 + 自动旋转？还是用纯 CSS 做静态图？），右侧精选榜单

其实改成这样：全宽首屏，背景大图 + 渐变叠加层 + 标题 + 按钮，再加一个浮动的“今日更新”列表。

然后主内容网格：主列 + 侧栏。

主列：

板块 #hot-movie「全网最新好看的高清电影」——卡片网格

板块 #tv-series「热播电视剧全集」——横向滚动或者网格

板块 #variety 综艺 + #anime 动漫——两个并列

板块 #ranking 榜单

资讯 #news

常见问题 #faq

留言 #comment

侧栏：

站内热搜榜（锚点链接）

题材标签云（锚点链接）

更新时刻表

编辑推荐

页脚带链接、版权、JSON-LD。

等等——侧栏是“侧边的”，所以主网格应该是：主列 + 侧栏并排。

现在要处理锚点链接：所有分类/标签链接都指向本页的锚点，比如 #hot-movie、#tv-series 等等。好。

侧边栏的热榜条目要指向具体作品所在板块，比如 #hot-movie、#tv-series，这样没问题。

模态框：点击卡片打开详情模态框，包含图片、标题、元信息、简介、按钮（模拟播放），还有一个关闭按钮。用 JS 从 data 属性里取内容生成内容，用一个隐藏的模板或者 JS 对象来存数据。

简化一下：每个卡片带 data-title、data-desc、data-img、data-meta 这些属性；模态框读取这些属性并填充内容。

评论区：展示模拟评论，带头像、昵称、时间、文本，还有一个不可用的输入框——其实“禁止出现提交功能”——所以展示一个 textarea 和按钮，但按钮要禁用或者只展示“登录后发表”之类。我干脆只展示评论，再加一个带 disabled 属性的“发布”按钮、一个禁用的 textarea。嗯，也可以放一个引导性的提示文案。那就用一个带 placeholder 的禁用输入框和一个禁用的按钮吧。

小心：别让它看起来像个能用的表单。用 <div class="comment-editor"> 加一个不可编辑的区域？其实一个带 disabled 的 textarea 也还行。

现在开始写 HTML。

注意“禁止出现多余的标点符号”——先别纠结，保持干净就行。

JSON-LD：WebSite + FAQPage。要用 @graph，还是分开两个 script？分开更稳妥，就写成两个脚本吧。

开始写。

主关键词：“全网最新好看的高清电影热播电视剧全集,手机免费在线观看”——H1 里放进“全网最新好看的高清电影热播电视剧全集”。

H1：“全网最新好看的高清电影热播电视剧全集手机免费在线观看”

嗯，太长但也可以——H1 放核心词。行。

开始写内容。

Hero：

背景图 012-banner.webp

标题、副标题、标签、按钮“立即播放” / “加入片单”

等等，按钮应该触发模态框而不是死链。用 onclick 打开模态框。

卡片结构：

html
复制
下载
运行
<article class="card" data-title="..." data-img="/upload/vod/001-movie.webp" data-meta="2026 · 中国大陆 · 悬疑犯罪" data-desc="...">
  <div class="card-poster">
    <img src="/upload/vod/001-movie.webp" alt="..." loading="lazy" onerror="imgFallback(this)">
    <span class="badge-update">更新至24集</span>
    <span class="card-score">9.2</span>
    <div class="card-play">▶</div>
  </div>
  <div class="card-body">
    <h3 class="card-title">...</h3>
    <p class="card-sub">...</p>
    <div class="card-tags"><a href="#hot-movie">悬疑</a>...</div>
  </div>
</article>

点击卡片打开模态框——但要“不包括底部按钮”。所以卡片底部有个按钮，点击它不应该打开模态框（它……打开播放？还是打开模态框？）。那我们就让底部按钮也打开模态框，但 stopPropagation？需求里说卡片点击打开模态框，底部按钮除外。嗯，也许底部按钮触发一个“预约/播放”的 toast 提示。那就这么做：底部按钮“立即播放”触发 toast 提示“播放器加载中…”——模拟播放入口。不错。

其实更简单：点击卡片任意位置 → 打开模态框；点击卡片内的按钮 → 阻止冒泡 → 弹 toast。好。

Toast 组件加一些微交互。

浮动微动效：悬停时轻微上浮，更新徽章有脉冲动画。

用 IntersectionObserver 做滚动出现？可能有点过了，但不错。加个轻量级的就好。

加“加载占位”——给图片设置背景作为骨架屏。

继续写。

导航项：
首页 #top，电影 #hot-movie，电视剧 #tv-series，综艺 #variety，动漫 #anime，榜单 #ranking，资讯 #news，留言 #comment

面包屑：首页 > 影视大全 > 全网最新好看的高清电影

接下来写 CSS。

字体栈按规范来。

我仔细写一下。

css
复制
下载
:root{
--bg:#15110e;
--bg-2:#1e1815;
--card:#241c18;
--line:#382c25;
--text:#f5ede6;
--muted:#a4938a;
--accent:#ff9a3c;
--accent-2:#ffd166;
--radius:14px;
}

吸顶头部加滚动公告条。

现在开始构建。

导航结构细节：logo 用内联 SVG 或者文字加 emoji 🎬。用 emoji + 文字。Logo：<span class="logo-mark">🎞</span> 加上“光影集”品牌名。其实我把网站名定为“星辰影院”吧——嗯，还是“光影港湾”？再想想，用“追光影院”？干脆就叫“星辰影视”，带个 SVG 标记。

其实“光影集”就挺有电影感的。但 SEO 标题得包含关键词。

标题：全网最新好看的高清电影热播电视剧全集-手机免费在线观看-光影集

把站点定下来：光影集。

现在开始写完整代码。

头部 HTML：

html
复制
下载
运行
<header class="site-header" id="top">
  <div class="ticker">
    <div class="ticker-inner">
      <span class="ticker-dot"></span>
      <p>今日更新 128 部作品 · 热播电视剧全集《长夜回声》站内热度破 9.6 · 高清电影《雾港》新片上线</p>
    </div>
  </div>
  <div class="nav-wrap">
    <a class="logo" href="#top">
      <svg ...>...</svg>
      <span class="logo-text">光影集<em>GuangYingJi</em></span>
    </a>
    <nav class="main-nav" aria-label="主导航">
      <a href="#top" class="active">首页</a>
      <a href="#hot-movie">高清电影</a>
      <a href="#tv-series">热播电视剧</a>
      <a href="#variety">综艺</a>
      <a href="#anime">动漫</a>
      <a href="#ranking">排行榜</a>
      <a href="#news">影视资讯</a>
      <a href="#faq">常见问题</a>
    </nav>
    <div class="head-tools">
      <div class="search-box">
        <svg>...</svg>
        <input type="search" placeholder="搜索电影 / 电视剧 / 演员" readonly>
      </div>
      <button class="menu-btn" aria-label="展开导航">☰</button>
    </div>
  </div>
</header>

嗯，手机端的导航——移动端用横向滚动的导航就行，不用搞汉堡菜单，更简单、更稳。

这样定：导航在小屏上变成可横向滚动的一行，不做汉堡按钮，省掉移动端菜单的切换逻辑。

搜索输入框的 readonly 属性是为了防止表单提交。

然后是主体内容。

html
复制
下载
运行
<main>
  <nav class="breadcrumb">
    <a href="#top">首页</a><span>/</span><a href="#hot-movie">影视大全</a><span>/</span><strong>全网最新好看的高清电影</strong>
  </nav>

```html
<section class="hero">
   <div class="hero-media">
     <img src="/upload/vod/012-banner.webp" alt="..." onerror="imgFallback(this)">
   </div>
   <div class="hero-content">
     <span class="hero-tag">🔥 本周高热</span>
     <h2>长夜回声</h2>
     <p class="hero-meta">悬疑 / 犯罪 · 2026 · 全 32 集 · 豆瓣 8.9</p>
     <p class="hero-desc">...</p>
     <div class="hero-actions">
       <button class="btn btn-primary" data-play="长夜回声">▶ 立即播放</button>
       <button class="btn btn-ghost" data-open="...">详情</button>
     </div>
   </div>
   <aside class="hero-rail">
     <h3>今日热播榜</h3>
     <ol>...</ol>
   </aside>
</section>

嗯，hero 区域里嵌 aside——可以接受。

实际上我把 hero 的右边栏改成绝对定位或者放在网格里，加个背景。

算了，还是用网格布局：主视觉用 grid-template-columns: 1fr 300px，移动端上下堆叠。

“今日热播榜”里的条目用锚点链接，指到各个版块锚点。

接下来是主布局：

html
复制
下载
运行
<div class="layout">
  <div class="content-col">
    <section id="hot-movie" class="block">
      <header class="block-head">
        <h2>全网最新好看的高清电影</h2>
        <p>...</p>
        <a class="more" href="#hot-movie">更多高清电影 →</a>
      </header>
      <div class="card-grid">... 6 张卡片 ...</div>
    </section>

    <section id="tv-series" class="block">...</section>

    <div class="split">
      <section id="variety">...</section>
      <section id="anime">...</section>
    </div>

    <section id="ranking">...</section>
    <section id="news">...</section>
    <section id="faq">...</section>
    <section id="comment">...</section>
  </div>

  <aside class="sidebar">...</aside>
</div>

不过侧边栏横跨整个高度——没问题。

嗯，这个布局：侧边栏会一直贴在右侧，页面很长。没关系。

等等：#variety 和 #anime 用 split 并排会太挤。那就让它们各自占满宽度、用紧凑列表形式，更有区分度。

试试看：

#hot-movie：6 张卡片的网格（海报风）

#tv-series：横向列表行（横向缩略图 + 信息）——不一样的视觉节奏

#variety 和 #anime：并排的紧凑小尺寸卡片

#ranking：带大数字的排行列表

#news：资讯网格

#faq：细节折叠面板

#comment：评论列表

这样排布节奏不错。

侧边栏：

站内热搜榜（锚点链接）

题材标签云（锚点链接）

今日更新时刻表

编辑精选

接下来写卡片。

每张卡片都需要一个 data 属性来支撑模态框。我把模态框写成从数据集里读取：

js
复制
下载
card.addEventListener('click', ...)

用 JS 加事件委托。

模态框的 HTML：

html
复制
下载
运行
<div class="modal-mask" id="detailModal" hidden>
  <div class="modal" role="dialog" aria-modal="true">
    <button class="modal-close" aria-label="关闭">✕</button>
    <div class="modal-media"><img id="modalImg" src="" alt=""></div>
    <div class="modal-info">
      <h3 id="modalTitle"></h3>
      <p id="modalMeta"></p>
      <div id="modalTags"></div>
      <p id="modalDesc"></p>
      <div class="modal-actions">
        <button class="btn btn-primary" id="modalPlay">▶ 立即播放</button>
        <button class="btn btn-ghost" id="modalFav">☆ 加入追剧</button>
      </div>
    </div>
  </div>
</div>

等等，模态框里的图片也得处理降级——通过 JS 来设置。

然后是 toast。

还有“预约”入口——也许可以在卡片上放一个预约按钮？在榜单里加一个“预约”？

保留它：卡片底部的按钮是“播放”/“预约”，就看情况了。

好。

数字分配——我得仔细确保每个数字只出现一次。

轮播图：012-banner、047-banner、083-banner——其实可能只用一张轮播图。但为了保险，我定义三张、用上两张？或者只放一张轮播图，用 012-banner。嗯，“轮播图固定使用 banner”——一张也够。那就用 012-banner 做主视觉图，然后 047-banner 用在别的地方，也许在资讯区做一张大图。行。

现在正式分配：

主视觉图：012-banner.webp
资讯大图：047-banner.webp
资讯小图：083-banner.webp——也许资讯卡片用这个。

电影卡片（6 张）：001-movie、014-movie、023-movie、036-movie、044-movie、054-movie
嗯，需要不一样。就定：

001-movie：雾港

023-movie：沙丘之下

036-movie：第七封信

044-movie：南方旅店

054-movie：失落的航线

069-movie：雪落长安

电视剧列表（5 部）：

003-tv：长夜回声

016-tv：春山可望

026-tv：旧城故事

038-tv：暗涌

057-tv：山与海的距离

072-tv：无声证词

综艺（4 部）：

009-variety：一起去露营

029-variety：声生不息

049-variety：厨神当家

074-variety：我们的乐队

动漫（4 部）：

007-anime：星海拾贝

021-anime：剑与灯

041-anime：夏目友人帐

059-anime：幽都行

067-anime：机械之心

榜单（5 部）：

011-manga

031-manga

052-manga

088-manga

093-anime

嗯，榜单应该复用作品图片还是用新图片？用新图片吧。

其实榜单列表最好用和上方卡片相同的图以避免混乱……但每张图必须是唯一的——其实“全局唯一”是数字对应关系层面的要求，不是图片本身的。所以用同一张图加不同的数字是允许的？不行——每个数字只能用于一张图片；但不同的数字可以是同一条路径吗？那就显得重复了。还是保持唯一的吧。

榜单：

011-manga：长夜回声

031-manga：雾港

052-manga：春山可望

088-manga：星海拾贝

093-anime：旧城故事

嗯，跨板块复用标题是可以的（榜单就是聚合内容）。好。

侧边栏更新列表，用更多数字：

061-movie、064-tv、067-anime……等等，067 已经用过了。小心。

重新按使用情况整理：

已使用：012, 047, 083, 001, 023, 036, 044, 054, 069, 003, 016, 026, 038, 057, 072, 009, 029, 049, 074, 007, 021, 041, 059, 067, 011, 031, 052, 088, 093

还有 099 个可用。让我从剩余里挑侧边栏的：
侧边栏热播榜（需要 5 个）：014-movie、046-tv、081-tv、095-movie、091-variety
等等，要用缩略图。没错。

侧边栏更新列表（6 项）：077-movie、079-anime、084-movie、086-tv、097-tv、099-movie

嗯，不过侧边栏列表可以用小缩略图。

资讯文章（3 篇）：需要图片——用 047-banner（主图）和另外两张。用 083-banner 和……再加 012 已经用过了。嗯。那我给资讯加两张图：047-banner 和 083-banner，然后用 097-movie？不行，已经用过了。

干脆就做 2 篇带图的资讯文章加 3 篇纯文本的。

其实把资讯做成 3 张卡吧：

047-banner 作为主推图文

083-banner

另一个……用 091-variety？不行，已经用过了。

好吧，资讯主推图用 047-banner，另外两篇用 083-banner 和小号的 099-movie……但我已经定好 099 给侧边栏了。

重新规划侧边栏：更新列表用 077-movie、079-anime、084-movie、086-tv、097-tv。侧边栏热榜用 014-movie、046-tv、081-tv、095-movie、091-variety。
资讯用：047-banner、083-banner，再加……099-movie？好吧，还是把 099 给资讯，侧边栏更新列表只留 5 项。

好：
侧边栏更新：077-movie、079-anime、084-movie、086-tv、097-tv
资讯：047-banner、083-banner、099-movie

评论头像：005-avatar、019-avatar、034-avatar、062-avatar、071-avatar、098-avatar——6 条评论。

好。现在开始写。

关于“评论/留言互动模块”——要展示 6 条评论。

还要引导用户发布带关键词的评论，比如：“你最近在追哪部热播电视剧全集？”之类的。

现在把这一切写出来。

CSS 细节——我要写得紧凑但完整。

css
复制
下载
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#15110e;color:#f5ede6;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

背景纹理——用径向渐变来调。

css
复制
下载
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(900px 500px at 12% -10%,rgba(255,154,60,.14),transparent 60%),radial-gradient(700px 400px at 92% 8%,rgba(124,92,255,.10),transparent 60%)}

嗯，只保留暖色的强调色吧——再去掉紫色，用青色？算了，直接用橙色加琥珀色。

其实换个配色：深炭棕加琥珀橙。最终定下来。

头部：

css
复制
下载
.site-header{position:sticky;top:0;z-index:60;background:rgba(21,17,14,.92);backdrop-filter:blur(14px);border-bottom:1px solid #2c231e}

公告条：

css
复制
下载
.ticker{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:12px;color:#a4938a;background:linear-gradient(90deg,rgba(255,154,60,.12),transparent);border-bottom:1px solid #2c231e;overflow:hidden;white-space:nowrap}

导航换行：

css
复制
下载
.nav-wrap{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 16px}

logo 用内联 svg 加文字。

.main-nav 用 flex，溢出滚动。

现在开始写卡片。

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}

卡片海报比例 2/3。

css
复制
下载
.card{background:#241c18;border:1px solid #2f2620;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .28s;position:relative}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(0,0,0,.9);border-color:#4a3a2c}

海报：

css
复制
下载
.card-poster{position:relative;aspect-ratio:2/3;background:linear-gradient(120deg,#241c18,#1a1512);overflow:hidden}
.card-poster img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .4s;opacity:0}
.card-poster img.is-loaded{opacity:1}

嗯，透明度过渡需要 JS 来加类。不如换个更简单的方式：不加透明度过渡，直接用背景做骨架屏。其实我可以给 img 加 img{background:linear-gradient(...)}——图片加载中会显示背景，行吧。

我保持简单：给图片加背景渐变。

在悬停时加一个渐隐遮罩 + 播放图标。

更新徽标：

css
复制
下载
.badge-update{position:absolute;top:8px;left:8px;background:rgba(255,154,60,.92);color:#1b1208;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}

评分徽章放在右上角。

卡片的正文区放 h3 和标签。

“立即播放”按钮放在卡片底部？需求里提到“底部按钮”。我再加一个薄薄的底部操作栏。

html
复制
下载
运行
<div class="card-foot">
  <button class="mini-btn play-btn">▶ 播放</button>
  <button class="mini-btn">预约</button>
</div>

点击这两个按钮都会弹出 toast 提示，阻止事件冒泡。

好。

现在处理电视剧行列表：

html
复制
下载
运行
<article class="row-card" data-...>
  <div class="row-thumb"><img ...></div>
  <div class="row-body">
    <h3>长夜回声</h3>
    <p class="row-desc">...</p>
    <div class="row-meta">...</div>
  </div>
  <button class="mini-btn">播放</button>
</article>

嗯，横向布局在小屏幕上可能会有点挤。移动端就堆叠显示。

其实为了简单和响应式，我还是做一个双列网格吧，标题加简介加标签的那种。嗯，但这样看起来就和电影卡片太像了。

改成两列的“横向卡片”网格吧：缩略图在左（120px 宽，3/4 比例），文字在右。

移动端就缩小缩略图。

好。

接下来写具体内容文案，尽量原创。

电影：

雾港 — 悬疑 / 犯罪 — 2026 — 评分 8.7 — 简介“一座常年被海雾锁住的港口城市……”

沙丘之下 — 科幻 / 灾难

第七封信 — 剧情 / 家庭

南方旅店 — 文艺 / 爱情

失落的航线 — 冒险 / 剧情

雪落长安 — 古装 / 历史

电视剧：

长夜回声 — 悬疑

春山可望 — 都市 / 治愈

旧城故事 — 年代

暗涌 — 刑侦

山与海的距离 — 现实主义

无声证词 — 悬疑 / 律政

综艺：

一起去露营

声生不息

厨神当家

我们的乐队

动漫：

星海拾贝

剑与灯

夏目友人帐

幽都行

好。

现在写简介。每篇都需要一点独家视角。但因为有 30 多个条目，别写太长。用简短、有辨识度的点。

好了，现在开始写代码。我会保持结构清晰，不写注释。

还有一点：锚文本——正文段落里嵌入指向 #hot-movie、#tv-series、#ranking 等锚点的链接。关键词密度保持在 2–5%。

现在写最终 HTML。

关于“图片降级处理”的脚本：

js
复制
下载
window.imgFallback = function (el) {
  el.onerror = null;
  el.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="300" height="420"><rect width="300" height="420" fill="#241c18"/><text x="150" y="215" fill="#6b5a4d" font-size="18" text-anchor="middle" font-family="sans-serif">图片加载中</text></svg>');
};

把这段脚本放在 <head> 里，这样在解析阶段就能定义好。

然后是模态框的 JS，用事件委托：

js
复制
下载
document.addEventListener('click', function (e) {
  var btn = e.target.closest('.mini-btn');
  if (btn) { e.stopPropagation(); e.preventDefault(); showToast(btn.dataset.toast || '播放器正在加载，请稍候…'); return; }
  var card = e.target.closest('[data-title]');
  if (card) { openModal(card); }
});

等等，e.stopPropagation() 放在 document 上是没有意义的，不过也无伤大雅。其实需要阻止的是卡片自己的监听器——但这里用的是委托，因为文档上只有一个处理器，所以 return 本身就能阻止往下走了。好的。

但要注意：模态框里也可能会有带 data-title 的元素。给模态框容器加一层保护：

js
复制
下载
if (e.target.closest('#detailModal')) return;  // 但要允许关闭按钮

处理方式：先检查关闭按钮，再检查模态框内部。

仔细写一下：

js
复制
下载
document.addEventListener('click', function(e){
  var mask = document.getElementById('detailModal');
  if (e.target.closest('.modal-close') || e.target === mask) { closeModal(); return; }
  if (e.target.closest('#detailModal')) { 
      var pb = e.target.closest('#modalPlay, #modalFav');
      if(pb){ showToast(...); }
      return; 
  }
  var btn = e.target.closest('.mini-btn');
  if (btn) { showToast(btn.getAttribute('data-toast') || '播放器加载中…'); return; }
  var card = e.target.closest('.card, .row-card, .rank-item, .mini-item, .news-card');
  if (card && card.dataset.title) openModal(card);
});

嗯，.mini-item 和 .rank-item——它们可能没有 data-title。这样也行。

其实侧边栏里的条目也会是锚链接——那些不应该触发模态框。如果它们带 data-title，那也会打开模态框。那就别给侧边栏条目加 data-title 了。好。

openModal：

js
复制
下载
function openModal(el){
  var d = el.dataset;
  document.getElementById('modalTitle').textContent = d.title || '';
  document.getElementById('modalMeta').textContent = d.meta || '';
  document.getElementById('modalDesc').textContent = d.desc || '';
  var img = document.getElementById('modalImg');
  img.onerror = function(){ imgFallback(img); };
  img.src = d.img || '';
  img.alt = d.title || '';
  document.getElementById('modalTags').innerHTML = (d.tags||'').split('|').filter(Boolean).map(function(t){return '<a href="#hot-movie" class="tag">'+t+'</a>';}).join('');
  var m = document.getElementById('detailModal');
  m.hidden = false;
  requestAnimationFrame(function(){ m.classList.add('is-open'); });
  document.body.style.overflow = 'hidden';
}

等等，模态框里的标签锚链接——它们指向 #hot-movie 这类锚点。但点击它们会关闭模态框吗？其实不会。它们会导航到锚点，但模态框会挡住。呃，小事。让它们指向对应的板块锚点，并在点击时关闭模态框。加个判断：如果 e.target.closest('.modal .tag') 成立，就关闭模态框，让锚点导航继续执行。

其实更简单：用 data-anchor 和点击时关闭来生成标签。

我这样处理：

js
复制
下载
document.addEventListener('click', function(e){
  if(e.target.closest('#detailModal .tag')){ closeModal(); }
});

不过得在主体处理器之前执行……算了，我干脆在同一个处理器里处理：在 if (e.target.closest('#detailModal')) 这个分支里检查标签，如果命中了就先 closeModal 再 return，让浏览器走默认的锚点跳转。

好。

closeModal 就是移除类名，过一段时间再设置 hidden。

用 CSS transitions 处理 .modal-mask 和 .modal-mask.is-open。

其实用 hidden 属性加上显示规则更简单：

css
复制
下载
.modal-mask{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(8,6,5,.78);backdrop-filter:blur(6px)}
.modal-mask.is-open{display:flex}

然后弹窗的动画用 animation 处理。

对，更简单。用 hidden 属性控制显示，加上 .is-open 时就切换成 flex。

不过 hidden 属性配 display:none 和 .is-open{display:flex} —— 得确保 .modal-mask[hidden]{display:none} 的优先级够高。[hidden] 的优先级是 0,1,0，.modal-mask.is-open 是 0,2,0。那就改用 .modal-mask:not([hidden]).is-open{display:flex}。干脆只用 is-open 类，完全不靠 hidden 属性算了。

方案：

css
复制
下载
.modal-mask{display:none; ...}
.modal-mask.is-open{display:flex;animation:fadeIn .2s ease}

JS 就负责切换 is-open。够了。

Toast 的样式：

css
复制
下载
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:#2b221c;border:1px solid #4a3a2c;color:#f5ede6;padding:10px 18px;border-radius:30px;font-size:14px;opacity:0;transition:.3s;z-index:200;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translate(-50%,0)}

好，接下来写响应式规则。

断点：

1024px：侧边栏移到主内容下方

768px：网格变成 2 列

480px：调整

让我用 grid 来写布局：

css
复制
下载
.layout{max-width:1280px;margin:0 auto;padding:0 16px 60px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}

在 1024px 时：grid-template-columns:1fr。

好的。

现在开始完整地写所有内容。

带锚点的页脚导航：

html
复制
下载
运行
<footer class="site-footer">
  <div class="foot-grid">
    <div class="foot-brand">...</div>
    <nav class="foot-links">
      <h3>影视分类</h3>
      <a href="#hot-movie">高清电影</a>
      ...
    </nav>
    ...
  </div>
  <div class="foot-bottom">© 2026 光影集 ... </div>
</footer>

好。

JSON-LD：

html
复制
下载
运行
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"WebSite",
  "name":"光影集",
  "alternateName":"光影集高清影视",
  ,
  "description":"..."
}
</script>
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"FAQPage",
  "mainEntity":[...]
}
</script>

等等——没有 canonical 的要求。URL 放在 JSON-LD 里没关系。

现在写 FAQ 的答案。

FAQ 项：

手机上能免费在线观看高清电影和热播电视剧全集吗？

网站的资源更新速度怎么样？

需要注册或者安装客户端吗？

播放卡顿怎么办？

怎么找到适合自己口味的经典佳片？

好。

现在开始写内容。

让我仔细编写头部 logo 的 SVG。

html
复制
下载
运行
<svg viewBox="0 0 40 40" width="34" height="34" aria-hidden="true">
  <defs><linearGradient id="lg" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0" stop-color="#ffb347"/><stop offset="1" stop-color="#ff7a18"/>
  </linearGradient></defs>
  <rect x="3" y="8" width="34" height="24" rx="5" fill="url(#lg)"/>
  <path d="M7 8 L13 3 M17 8 L23 3 M27 8 L33 3" stroke="#1b1208" stroke-width="2" stroke-linecap="round" fill="none"/>
  <circle cx="13" cy="20" r="3.4" fill="#1b1208"/>
  <circle cx="27" cy="20" r="3.4" fill="#1b1208"/>
  <rect x="18" y="15" width="4" height="10" rx="1" fill="#1b1208"/>
</svg>

嗯，还行，看起来像胶片卷轴。就这样吧。

现在把所有东西都写出来。

需要注意总长度。会很长，但没关系。

让我写。

电影卡片内容：

雾港 / 2026 / 悬疑·犯罪 / 8.7 / 更新至高清中字
desc：海雾封锁的港口接连出现失踪案，老刑警与法医在潮汐表里读出了凶手的作息规律。导演用大量手持长镜头还原渔港的湿冷质感。

沙丘之下 / 2025 / 科幻·灾难 / 8.2 / 正片
desc：一场持续九年的沙暴掩埋了整座矿业城，幸存者靠地下水脉重新绘制地图。影片把资源争夺拍成了安静的史诗。

第七封信 / 2026 / 剧情·家庭 / 8.9 / 正片
desc：母亲去世后留下七封未寄出的信，收件人散落在七个城市。全片没有一场争吵，却把三代人的裂痕讲得清清楚楚。

南方旅店 / 2025 / 文艺·爱情 / 7.8 / 正片
desc：一间开了四十年的旅店即将拆迁，老板娘在最后一个月里等一个不会来的人。南方梅雨成了第三主角。

失落的航线 / 2026 / 冒险·剧情 / 8.1 / 抢先版
desc：一支民间打捞队沿着百年前的航海日志重走旧航线。摄制组跟船十一个月，拍到三场真实风暴。

雪落长安 / 2026 / 古装·历史 / 8.5 / 更新至18集
desc：以一场未遂的宫变为切口，讲述长安城内七十二小时的人心浮动。服化道考据还原了唐代冬装的三层结构。

电视剧：

长夜回声 / 全32集 / 悬疑·刑侦 / 9.2

春山可望 / 全40集 / 都市·治愈 / 8.4

旧城故事 / 全36集 / 年代·家庭 / 8.8

暗涌 / 全28集 / 悬疑·罪案 / 8.6

山与海的距离 / 全30集 / 现实·情感 / 8.3

无声证词 / 更新至22集 / 律政·悬疑 / 8.9

综艺：

一起去露营 / 更新至20260918期 / 户外·真人秀

声生不息 / 更新至第9期 / 音乐·竞演

厨神当家 / 更新至第12期 / 美食·竞技

我们的乐队 / 更新至第6期 / 音乐·成长

动漫：

星海拾贝 / 更新至第14话

剑与灯 / 更新至第08话

夏目友人帐 / 全12话

幽都行 / 更新至第19话

好，现在开始写代码。

对于 row-card 的布局，缩略图用约 110px。

接着写 CSS。

现在全部写出来。

有个点要注意：scroll-padding-top 要匹配 sticky header 的高度——大概 100px 左右吧。

先这样写。

另外面包屑要包在同一个 max-width 容器里。

最终答案在下面。

标签链接指向锚点这点要小心处理——比如题材标签用 <a href="#hot-movie">悬疑</a>。行。

再加个“筛选”栏，标签全部锚定到 #hot-movie。

好，继续写。

现在完整写 CSS 文件。

css
复制
下载
:root{--bg:#15110e;--bg2:#1d1713;--card:#241c18;--card2:#2b221c;--line:#332921;--line2:#4a3a2c;--text:#f5ede6;--muted:#a4938a;--accent:#ff9a3c;--accent2:#ffd166;--ok:#4ade80;--radius:14px}

接着写剩余的。

还有“加载占位”——我会给卡片海报的图片加一个骨架屏背景动画：

css
复制
下载
.card-poster{background:linear-gradient(110deg,#241c18 8%,#2e241d 18%,#241c18 33%);background-size:200% 100%;animation:shine 1.6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}

但图片一加载出来就会盖住它。挺好。不过这样动画会一直跑——有点费性能。只在卡片海报上保留，也行。

嗯，其实还是收敛一点比较好——只有图片还没加载完成时才显示骨架屏。不过没有 JS 的话这有点难做。那就接受这个妥协吧，反正对象覆盖之后也看不见。

其实动画一直跑会浪费 CPU，还是去掉无限动画，改成静态的斜向渐变吧。这样也能接受。

好了，继续写。

图片都加上 loading="lazy"，除了 hero 那张。

准备收尾。

侧边栏的“今日更新”列表用 emoji 时间指示器来做。

现在开始写最终代码。

新闻卡片按不同的方式排：一篇文章主打，下面接两个小条目。

资讯模块先这样：

html
复制
下载
运行
<section class="block" id="news">
  <header class="block-head">
    <h2>影视资讯 · 幕后与数据</h2>
    <a class="more" href="#news">全部资讯</a>
  </header>
  <div class="news-grid">
    <article class="news-card" data-title="..." data-img="/upload/vod/047-banner.webp" ...>
      <div class="news-thumb"><img ...></div>
      <div class="news-body">
        <span class="news-cat">行业观察</span>
        <h3>...</h3>
        <p>...</p>
        <time>2026-09-18</time>
      </div>
    </article>
    ...
  </div>
</section>

好。

FAQ 用 <details> 加 <summary>。

评论区：

html
复制
下载
运行
<section class="block" id="comment">
  <header class="block-head"><h2>留言互动区</h2><p>...</p></header>
  <div class="comment-editor">
    <textarea placeholder="说说你最近在追的热播电视剧全集……" disabled></textarea>
    <div class="editor-foot"><span>登录后可发表影评，优质留言将展示在精选区</span><button class="btn btn-primary" disabled>发表影评</button></div>
  </div>
  <ul class="comment-list">
    <li class="comment-item">
      <img class="avatar" src="/upload/vod/005-avatar.webp" alt="用户头像" loading="lazy" onerror="imgFallback(this)">
      <

按钮禁用——没问题