企业官网建设流程全解析

做影剧网页这件事，说难不难，说简单也不简单。一个以“基于HTML的影剧网页制作”为核心的项目，很多人上来就想用框架、上脚手架，结果折腾半天，连一页静态内容都没排好。我自己做过不少这类页面，从最早的个人影单分享页，到给模拟项目做的影剧展示站，踩了不少坑，也积累了一些挺实用的经验。这篇文章就围绕这个项目，把从需求拆解、页面结构、样式设计，到数据渲染、部署上线的完整流程，用比较接地气的方式整理一遍。

先说清楚这项目是什么。它的核心是用HTML、CSS和JavaScript构建一个展示电影或剧集信息的网页，数据可以手动维护，也可以借助现成的开放接口。它能解决的问题很直接：把一堆影剧信息（海报、名称、评分、简介、链接）以美观且结构化的方式呈现给访客。适合谁来参考？想练习前端基础的学生、刚入门的开发者、临时要做内容展示页但不想上重框架的人，都能从这里拿走一套能直接落地的方案。

1. 需求与整体方案

1.1 原理解读：纯静态页面为什么仍有价值

在聊具体实现前，得先说清楚一个观点：纯HTML/CSS的静态页面，在今天依然有很高的价值。原因倒不复杂，这类页面加载快、部署简单、几乎不依赖服务器环境，放在任何一台能开浏览器的设备上打开文件就能看。对于影剧信息站这类“展示型、更新频率不高”的内容，静态方案反而是最优解。

试想一个只有几十部片子的作品收藏页，如果引入数据库、后台管理系统，等于拿大炮打蚊子。维护成本、服务器开销、安全风险全都会涨上去。而静态页面配合一份JSON数据文件，数据存在一个文件里，页面用JavaScript去读取，改数据相当于改文本，谁都能上手。

这个方案的天然短板是交互能力有限，比如实时搜索得靠前端脚本自己实现，评论功能基本做不了，但这些完全可以用第三方引入或本地脚本弥补。实际做项目时，我大多数情况是先用静态版跑通逻辑，后面真的需要复杂功能了再局部升级，而不是一开始就把架构搞复杂。

1.2 方案选型：从零手写到轻量工具的组合思路

做影剧网页的方案选择，市面上大体有几条路线，我逐个聊下适用场景。

第一条，纯手写。用记事本或常用编辑器直接敲，页面不多时最简单，代码完全可控。缺点是从零搭布局和写样式比较耗时。

第二条，借助轻量级前端框架。像Bootstrap这类CSS工具库，能快速获得网格系统和基础组件，适合一点设计功底都没有、但想把页面做得规整的情况。缺点是默认风格明显，做出来的页面容易“长得都一样”。

第三条，前端框架加代码生成。先用生成工具搭建骨架，再在骨架上替换内容，适合项目规模稍大、页面模块多的情况。但项目标题既然强调“基于HTML”，说明重点还是回归基础，把页面本身的语义结构和内容的表达做好。

我个人建议顺序是：先手写HTML结构，再套一个习惯用的样式框架（或者用CSS变量自己做），最后用原生JavaScript处理数据和事件。这个流程能让你清楚知道每一块代码的作用，后续出问题也好排查。

1.3 模拟项目“光影小站”的页面规划

为了把后面每个细节都讲清楚，我们拿一个模拟项目“光影小站”为例子来展开。这个项目虽然是个模拟场景，但它的页面组织方式完全可以直接套用到真实需求中。

“光影小站”定位于一个个人片单分享页，功能形态包含三块：影剧展示主页面、影剧详情面板和简单的搜索过滤。技术形式上，采用一个index.html作为入口，一个style.css统管样式，一个data.js存储影剧数据，再加一个main.js控制渲染和交互。文件路径采用相对路径，确保本地双击运行和远程部署都没有问题。

整个页面采用上下布局，顶部是站点标题和导航，中部是主展示区（做成卡片墙样式），底部是版权信息。单个影剧卡片包含海报、片名、评分、简介摘要和“查看详情”按钮。交互方面，点击卡片中的按钮，通过JavaScript弹出详情层，显示完整简介和演职员信息。搜索框位于顶部，输入关键词实时过滤卡片列表。

这样规划有几个好处：一是页面结构一目了然；二是展示内容有纵深，不是干巴巴的信息铺陈；三是每个页面模块职责单一，方便后续扩展“想看”“已看”一类的状态标记。

2. 核心页面实现

2.1 用语义化标签构建内容骨架

影剧网页的HTML结构，我建议优先采用语义化标签。所谓语义化，就是每个标签的名字能表达内容的含义。header表示页头，main表示主体内容，article表示一篇独立内容，section表示一个内容分区，footer表示页尾。这样做的好处不只是给开发者看的，搜索引擎爬虫和辅助阅读工具也得靠这些标签理解页面结构。

拿“光影小站”的主结构举例：

<header class="site-header"> <div class="logo">光影小站</div> <nav class="main-nav"> <a href="#recommend" class="active">本周推荐</a> <a href="#library">全部片单</a> <a href="#about">关于本站</a> </nav> </header> <main> <section id="recommend"> <h2>本周推荐</h2> <!-- 轮播结构 --> </section> <section id="library"> <h2>全部片单</h2> <div class="search-box"> <input type="search" id="searchInput" placeholder="输入片名或演员"> </div> <div class="movie-grid" id="movieGrid"></div> </section> </main> <footer id="about"> <p>本站仅用于个人学习与记录，所有影剧信息以官方发布为准。</p> </footer>

为了真实项目中经常会被忽略的细节：搜索结果为空时页面状态、键盘可操作性、图片缺失时的备用表现，这些在前期写结构时就要考虑好。比如card里的海报图片，需要设置onerror备用显示方案，否则图片挂掉后整个卡片塌陷。

2.2 影剧列表页的卡片式布局

列表页核心是影剧卡片。每一张卡片是一块独立的信息载体，卡片内部又可以切成几个层级：海报区、文本区、操作区。

标准结构如下：

<article class="movie-card">.movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }

auto-fill让浏览器自动计算列数，minmax(240px, 1fr)保证最小列宽240px，多出来的空间由各列均分。这套写法的好处是：不用写设备断点，手机、平板、桌面自然适配。对于卡片高度不统一的问题，我用flex-direction: column配合固定高度，让简介区域弹性占满剩余空间，保证同一行的卡片底部对齐。

2.3 详情层的弹出逻辑

详情展示一般不单独开一个新页面，而是用弹层的方式在当前页呈现。这里有两种实现：原生dialog标签和自定义弹层。原生dialog标签的好处是有成熟的焦点管理、Esc关闭事件，但浏览器兼容有些局限。自定义弹层兼容性更好、样式灵活，自由度更高。

我采用自定义弹层的方案：

<div class="modal-overlay" id="modalOverlay" hidden> <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle"> <button class="modal-close" id="modalClose" aria-label="关闭">×</button> <div class="modal-content" id="modalContent"></div> </div> </div>

hidden属性是HTML5原生特性，为元素加上display: none效果，不需要额外写类控制显隐。点击详情按钮时，JavaScript从数据文件中取出对应id的影剧信息，填充到modalContent里，再移除hidden属性；点击关闭按钮或遮罩层区域，重新加上hidden。

这里有个需要特别注意的点：点击弹层内部内容时不要误触关闭。处理办法是在遮罩层上做事件判断，如果点击目标不是遮罩层自身而是内部元素，就忽略这次点击。

3. 视觉样式与体验优化

3.1 颜色变量与主题化设计

影剧网站天生适合暗色主题，深底亮字让海报更突出，观影氛围也更强。但我并不建议把颜色值写死在CSS里，聪明的做法是用CSS变量做主题锚点。

在:root伪类里定义一套基础色板：

:root { --bg-primary: #14181d; --bg-secondary: #1c2833; --text-primary: #e8e8e8; --text-secondary: #9ca3af; --accent: #e5b83b; --card-bg: #1f2a36; --radius: 12px; --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }

定义完变量后，整个页面中凡是涉及颜色、圆角、阴影的地方，都引用var(--xxx)。这样做的好处首先是统一，改一个值全站联动；其次是方便做主题切换，比如加上一个“日间模式”按钮，在body上加一个data-theme="light"属性，用属性选择器覆盖变量值，几行代码就能实现暗色、亮色的切换。

3.2 海报图处理与懒加载策略

影剧页面的视觉大头是海报图。如果一页展示几十部片子，图片请求量会不小。图片优化有两个方面要同时做：一是压缩图片体积，二是使用懒加载。

图片压缩这个环节，很多人容易忽略。一张2MB的高清海报和一张200KB的精修海报，肉眼差距微乎其微，但加载速度天差地别。对于web展示，我一般把海报控制在500KB以内，用常见图片处理工具压缩成webp格式，画质损失都能接受。

懒加载实现有两种方式，第一种是纯HTML属性：

<img src="images/posters/001.jpg" loading="lazy" alt="海报">

loading="lazy"是浏览器原生能力，告诉浏览器这张图进入视口前不要加载。第二种是用IntersectionObserver自己写观察逻辑，好处是可以在图片真正进入视口前加一个淡入效果，提升观感。我倾向于两种结合使用：属性打底，脚本做增强。

还有一个经常踩的坑：图片占位问题。懒加载图片在加载完成前高度为0，会导致页面布局抖动、卡片跳动。解决办法是在CSS里给图片容器设置一个固定的纵横比：

.card-poster { aspect-ratio: 2 / 3; overflow: hidden; background: var(--bg-secondary); }

aspect-ratio属性是这类场景的救星，它能锁定容器宽高比，海报再也不会塌陷。

3.3 让页面观感更舒适的自适应细节

除了网格布局，字体大小和间距也得照顾各种屏幕。iOS和Android系统字体大小不一致，所以我一般加这行全局设置：

html { font-size: max(16px, 1vw); } body { line-height: 1.75; letter-spacing: 0.02em; }

字号随视口宽度轻微浮动，16px作为下限，防止小屏设备字太小。行高1.75对正文阅读非常友好，不要用默认的1.2，那样文字会挤成一团。

间距方面，我从一个简单原则：临近的元素间距小，分隔的元素间距大。比如卡片标题和元信息之间间距12px，卡片和卡片之间间距24px，区块和区块之间间距48px。这个节奏感能让页面呼吸顺畅，不会显得拥挤。

另外一个影响观感的细节是滚动条。暗色主题如果配一个白色的滚动条会很突兀，可以用CSS简单美化：

::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: #36404a; border-radius: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); }

这段样式只对WebKit内核浏览器生效，Firefox可以用scrollbar-width和scrollbar-color，但目前WebKit是主流，优先照顾它。

4. 数据组织与交互实现

4.1 用JSON文件管理影剧数据的思路

做影剧页面必定要面对一个问题：几十上百部影片的信息存在哪里？答案是用一份独立的JavaScript文件，里面定义一个全局数组。

data.js的内容结构大概这样：

const movieDatabase = [ { id: "001", title: "光影之城", originalTitle: "City of Light and Shadow", year: 2021, genres: ["剧情", "悬疑"], rating: 8.7, duration: "128分钟", director: "张一鸣", actors: ["陈默", "林晓", "周涛"], synopsis: "一座城市，三段人生，在光影之间寻找归属。", poster: "images/posters/001.jpg" }, ... ];

有几点值得说道。id用字符串而不是数字，因为字符串前导零也可以，不会有格式问题。rating用数字类型，方便后续排序。genres和actors用数组，为搜索和分类扩展留余地。poster路径用相对路径，部署到子目录只需整体迁移。

数据管理的另一个细节：多种排序策略不必在数据层面实现，而是在渲染层实现。这意味着movieDatabase保持原始录入顺序，渲染前再根据用户选择的排序字段动态排序。这种数据与展示分离的思路能避免数据层被各种业务需求污染。

4.2 动态渲染列表的模板拼接方式

拿到数据之后，要把数组渲染成页面上那些卡片。最朴素的渲染方式是用模板字符串拼接，外层循环产生一个个卡片HTML，一次性赋值给网格的innerHTML。

function renderMovies(movies) { const grid = document.getElementById("movieGrid"); if (!movies.length) { grid.innerHTML = '<p class="empty-tip">没有找到符合条件的影剧，换个关键词试试吧。</p>'; return; } const cards = movies.map(movie => ` <article class="movie-card">document.getElementById("movieGrid").addEventListener("click", function (event) { const target = event.target.closest(".btn-detail"); if (target) { const movieId = target.dataset.movieId; openModal(movieId); } });

Element.closest方法能向上查找最近的匹配祖先元素，这样即使点击的是按钮内部的文本节点也能正确命中。

4.3 搜索、过滤与排序的联动实现

搜索和过滤是影剧页面里用户用得最多的交互功能。与其做成多个独立的功能模块，不如把它们合成一个统一的状态处理机制。

这里有一个相对实用的思路：用当前的关键词和一个分类标签共同决定显示哪些内容。

let currentKeyword = ""; let currentGenre = "全部"; let currentSort = "recommended"; function filterAndRender() { let result = movieDatabase.filter(movie => { const matchesKeyword = !currentKeyword || movie.title.toLowerCase().includes(currentKeyword.toLowerCase()) || movie.actors.some(actor => actor.toLowerCase().includes(currentKeyword.toLowerCase())); const matchesGenre = currentGenre === "全部" || movie.genres.includes(currentGenre); return matchesKeyword && matchesGenre; }); if (currentSort === "rating") { result.sort((a, b) => b.rating - a.rating); } else if (currentSort === "year") { result.sort((a, b) => b.year - a.year); } renderMovies(result); }

搜索这里有个体验细节：输入过程中每个字符的跳变都会触发一次过滤，性能没有问题，但是过滤太灵敏反而让用户看不清中间态。常规的做法是加一个短暂的防抖延迟：

const searchInput = document.getElementById("searchInput"); searchInput.addEventListener("input", debounce(function (event) { currentKeyword = event.target.value.trim(); filterAndRender(); }, 300)); function debounce(fn, wait) { let timer = null; return function (...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), wait); }; }

用户停止输入300毫秒后才真正执行过滤，既省了无谓的计算，又避免界面频繁跳动。

搜索还有一个常见的坑：大小写问题。中文没有大小写之分，但英文片名有，处理方式统一用小写比对，数据在匹配时也统一转小写，避免“City”和“city”匹配不上。

4.4 弹层内的内容组装与关闭机制

弹层内容的组装思路与卡片渲染类似，不过它展示的信息更密集。除了基本信息外，还要显示导演、演员列表，有时还要加上一句影评或推荐语。

组装弹层内容的函数：

function openModal(movieId) { const movie = movieDatabase.find(item => item.id === movieId); if (!movie) return; const modalContent = document.getElementById("modalContent"); modalContent.innerHTML = ` <div class="modal-layout"> <img class="modal-poster" src="${movie.poster}" alt="${movie.title}海报"> <div class="modal-info"> <h3 id="modalTitle">${movie.title}</h3> <p class="modal-rating">评分：${movie.rating}</p> <p>${movie.year} / ${movie.genres.join(" / ")} / ${movie.duration}</p> <p>导演：${movie.director}</p> <p>主演：${movie.actors.join(" / ")}</p> <p class="modal-synopsis">${movie.synopsis}</p> </div> </div> `; document.getElementById("modalOverlay").hidden = false; document.body.classList.add("no-scroll"); } function closeModal() { document.getElementById("modalOverlay").hidden = true; document.body.classList.remove("no-scroll"); }

body.no-scroll的含义是锁定背景滚动：

body.no-scroll { overflow: hidden; }

弹层打开时禁止背后页面滚动，关闭后恢复，这个细节能显著提升使用体验。如果不做，弹层滚动到边界时会带动背景页面一起滚动，非常影响体验。

关闭弹层的触发点有几个：点击关闭按钮、点击遮罩层空白区域、按Esc键。三个触发点都要能调用closeModal：

document.getElementById("modalClose").addEventListener("click", closeModal); document.getElementById("modalOverlay").addEventListener("click", function (event) { if (event.target === this) closeModal(); }); document.addEventListener("keydown", function (event) { if (event.key === "Escape") closeModal(); });

这些逻辑写清楚后，弹层的交互才算完整闭环。

5. 数据安全与内容合规细节

5.1 避免脚本注入式漏洞

影剧网页虽然以展示为主，但只要接入了用户输入或者外部数据源，就得把脚本注入这个问题放在心上。举个例子，如果数据文件里某部影片的简介文本被恶意修改，插入了一段<script>标签或<img onerror="...">，直接用innerHTML渲染就会执行这段恶意代码。

我之前在测试时，故意把简介改成这样：

synopsis: "好看的电影<img src=x onerror=alert(1)>"

渲染出来的页面果然弹窗了。要防止这个问题，最简单有效的办法是在渲染前对文本内容做转义处理：

function escapeHtml(text) { return text .replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;") .replace(/"/g, "&quot;") .replace(/'/g, "&#039;"); }

在模板拼接时，对title、synopsis、director、actors这些可能包含特殊字符的字段统一套用escapeHtml。poster这个字段属于属性值，同样要转义，否则可以构造出关闭引号后加入非法属性。

这个转义动作虽然让代码多了一点冗余，但对任何要公开部署的页面来说都是必要的防线。内容安全这个底线，无论多强调都不过分。

5.2 影视内容版权与展示边界

影剧网站建设中还有一个常被忽视但很重要的问题：版权边界。很多人在自己电脑上做的demo页面，放几张海报截图，觉得没什么。可一旦要公开部署到公网，就要重新审视内容的合规性。

基本原则是这样：海报图、剧照、片名字体这些资料，版权通常归属于出品方或发行方，直接搬运用于公开传播存在法律风险。个人学习用途、内部分享用途一般问题不大，但标题里没有明确说明“仅供学习”，说明它可能是面向一般场景的项目。

比较稳的做法是只做文字信息展示，封面图用自己绘制的占位图或公有领域图片。或者明确在页面底部声明“本站点仅用于技术学习演示，影剧信息及图片版权归权利人所有，如有异议请联系删除”。声明不能完全阻断侵权风险，但能体现平台方的合规意识，也是行业里的通行做法。

具体到字号、色彩、布局，这些原创的表达形式不受版权约束，可以自由发挥。

6. 测试与上线部署

6.1 本地预览的几种方式和注意事项

开发完成后，第一步是在本地预览。这里有个知识点：直接在资源管理器里双击index.html，和使用本地服务器预览，两种方式有本质区别。

直接打开文件时，浏览器地址栏是file://协议，JavaScript读取同目录下的data.js没有问题，因为它是通过script标签加载的，但如果你改用fetch方式读取json文件，file://协议下的fetch会被浏览器拦截，报跨域错误。这是一个非常典型的问题。

所以我建议在本地开发时启动一个简单的静态服务器，可以用一行Python命令：

python -m http.server 8080

或者用Node生态里常见的静态服务器工具。启动后在浏览器访问http://localhost:8080，整个页面的资源加载方式就和线上环境完全一致，不会出现本地正常、线上报错的诡异情况。

本地预览时要重点检查的是这几个方面：图片路径是否全部能访问、弹层交互是否正常、搜索是否能匹配到数据、窄屏下布局是否不塌、控制台是否报错。整套流程跑一遍，确认无异常再进入部署环节。

6.2 部署到静态托管平台的完整流程

影剧网页是纯静态页面，部署没有任何门槛，选择很多。我拿一个比较常见的操作流程举例：

第一步，准备部署目录。把index.html、css、js、images等文件整理到一个文件夹中，确认没有多余的开发文件混在里面。

第二步，创建代码仓库，把整个项目目录上传，这一步包含了版本管理和远程存储两个功能。

第三步，在托管平台新建项目，关联仓库地址，配置构建命令和发布目录。由于这个项目是纯静态，不需要构建，发布目录直接指向项目根目录即可。

第四步，触发部署。平台会自动拉取代码，发布到CDN节点。部署完成后得到一个二级域名，用这个域名加自己的自定义域名都可以访问。

静态托管对页面数量没有限制，但有一些隐含要求需要注意：站内链接不能写带盘符的绝对路径，否则部署后全部失效；资源引用全部使用相对路径或域名无关的绝对路径；首页文件名必须约定为index.html，很多平台会将其作为默认入口。

6.3 部署后的效果自测清单

上线并不代表万事大吉，部署后第一件事是做效果自测。我每次上线都会按这份清单走一遍，这部分能帮你把很多潜在问题提前拦截掉：

• 首页是否可以正常打开，标题描述是否正确显示
• 网络请求里有没有404资源
• 页面在手机宽度下浏览，卡片是否正常排列
• 弹层能否打开、关闭、Esc响应
• 搜索关键词能否正确过滤，无结果时提示是否友好
• 图片是否全部加载，有没有变形、压扁

这里有一个实用技巧：把浏览器窗口拉到不同宽度，开着开发者工具的设备模式，逐台设备过一遍。有些问题只有在特定的视口宽度下才暴露，比如过长的英文单词会把卡片撑破，中文没有这个问题，但英文片名经常会踩到。

另一个实测很重要的点是缓存。静态站点部署更新后，浏览器可能缓存旧文件，用户打开还是旧页面。解决方案是给CSS和JS文件引用加上版本参数：

<link rel="stylesheet" href="css/style.css?v=1.0.2"> <script src="js/main.js?v=1.0.2"></script>

每次更新内容时顺手改一下版本号，能有效避免页面样式和数据不同步的问题。

7. 常见问题定位与排查思路

7.1 图片不显示的六个高频原因

做影剧网页，图片问题排在所有问题的第一位。排查图片不显示，按这个顺序查基本都能解决：

第一，路径是否正确。相对路径是从当前文件所在的目录出发寻路，不是从网站根目录出发。index.html在根目录，images也在根目录下，那写“images/posters/01.jpg”是对了；如果页面在子目录里，路径起点就要相应调整。

第二，文件名大小写是否一致。Linux服务器上文件名严格区分大小写，本地Windows不区分，容易导致本地正常、上传后图片丢失。

第三，文件是否真的上传成功。FTP或网页上传中途断线，文件只有几KB，图片自然无法渲染。

第四，图片格式是否被浏览器支持。老旧的图片格式或损坏的文件头会导致解析失败。

第五，是否被懒加载影响。滚动不到的位置图片不会主动加载，这不是错误；但如果在弹层里用懒加载，可能弹层出现后图片还在加载中，造成闪烁。

第六，是否有跨域限制。从外部图床引用的图片，如果图床不允许跨域，浏览器会拦截渲染。检查控制台报错是最快的定位方法。

7.2 样式错乱的原因与定位技巧

样式错乱大多数情况下不是CSS本身的语法问题，而是“你以为你改的样式生效了，但它被覆盖了”。

优先级从高到低排列：行内样式、ID选择器、类选择器和属性选择器、标签选择器、继承值。这还不是全部，!important声明可以提升任何一条规则到最高。排查时可以打开开发者工具，选中出问题的元素，右侧“样式”面板会列出所有套用的规则，并标明来源和优先级。

除了优先级，还有另一个常见原因：没闭合标签。一个未闭合的div会导致浏览器自行纠正DOM结构，排版完全错乱。排查方法是使用编辑器的格式化功能或在线HTML验证器，快速找出标签配对问题。

CSS出现了你没有写过的样式，比如按钮突然有了默认外边距，很可能来自浏览器的默认样式表。解决这类问题最直接的方式是在项目开始时加一段基础样式重置代码，把默认内外边距清零，设置盒模型为border-box，给所有元素一个统一的字体和颜色基调。

7.3 点击事件无响应的排查清单

点击按钮没反应，是前端开发中特别常见的问题。排查步骤记录一下：

第一，打开控制台看有没有报错。如果脚本加载阶段就抛错，后边的绑定代码都不会执行，这是最常见的无响应原因。

第二，确认元素是否真的被绑定上了。在Elements面板选中按钮元素，下方“事件侦听器”标签页能看到绑了哪些事件，没有的话就说明绑定代码没执行到。

第三，检查事件绑定的时机。如果脚本放在head里，在DOM尚未解析完成时就执行了document.getElementById，拿到的是null，绑定自然失败。解决办法是把script标签放到body末尾，或者用DOMContentLoaded包一层。

第四，检查是否有遮挡层盖在按钮上。一个透明元素覆盖住按钮，点击根本到不了按钮。用开发者工具点击该位置，选中最上层元素，一眼就能看出来。

第五，对动态渲染出的元素使用事件委托。这个前面已经提到，这里再强调一句：动态生成的元素在渲染前绑事件永远无效，事件监听一定要注册在静态存在的父容器上。

7.4 移动端常见的兼容性问题

影剧页面在手机上打开，很多问题只在真机或模拟器上才会暴露。

第一个是点击延迟。移动端浏览器对点击事件有约300毫秒的延迟判断，判断你是不是想双击缩放。当前大多数浏览器已经去掉了这个延迟，但某些WebView里仍然存在。如果发现点击有延迟感，可以检查是否用了click事件绑定以外的交互方案，一般说来click本身的延迟现在已基本可控。

第二个是100vh问题。在移动浏览器中，100vh不等于视口高度，因为地址栏会占据一部分空间。如果页面用100vh做全屏背景，底部会被地址栏遮住或露出白边。解决办法是用新的视口单位dvh，或者使用JavaScript动态计算视口高度。

第三个是字体大小问题。iOS上如果字号小于16px，在聚焦输入框时会自动放大页面，影响体验。保持全局最小字号16px就能规避。

第四个是触控区域的尺寸。按钮太小，手指很难点到。行业建议触控目标最小44×44像素。在设计详情按钮和关闭按钮时，要留足点击区域，四周内边距补足。

8. 从做项目到沉淀方法的总结

做“基于HTML的影剧网页制作”这个项目，整个过程下来我最大的体会是：不要小看这些基础技术组合。HTML负责信息结构，CSS负责视觉表现，JavaScript负责数据交互，三者各司其职，合在一起就能完成一个相当完整的产品原型。

这几点经验如果让我浓缩成三句话，我会这么说：第一，先画清数据结构再写页面，数据字段设计好了，页面只是数据的投影；第二，样式遵循变量化管理，主题统一，后续二开成本低；第三，交互事件尽量委托到静态容器，动态渲染删了又建，事件依然有效。

关于影剧这个垂直方向，后续还可以在哪些方向演进，我简单聊一下自己的想法。可以增加“即将上映”板块，引入一个外部开放数据接口，让内容自动更新；可以增加收藏夹功能，用浏览器本地存储保存用户的想看片单；可以增加精选片单的分享页，一套数据多个视图展示，形态完全不同。每一步都是在现有代码上的局部增强，而不是推翻重来。

最后想给看这篇文章的朋友留一个建议：不要急着套框架，先用原生代码把页面做出来，你会清楚地看到数据是怎么流动的、事件是怎么触发的、样式是怎么渲染的。这些底层理解在以后学任何框架时都会派上用场，框架可以快速换，底子永远是你自己的。