Web技术全景与AI辅助编程

梳理Web技术发展脉络与前端开发核心概念，介绍Cursor、Claude等AI编程工具的使用方法，探讨AI辅助编程在新闻数据可视化、交互报道等传播实践中的应用价值。

2026-03-03 第 1 周

学习要点

掌握Web技术从静态页面到动态应用的演进脉络及前端开发三层结构（HTML/CSS/JavaScript）的基本概念
理解浏览器渲染机制与前端工具链的组成，建立现代Web开发的整体认知框架
掌握Cursor与Claude等AI编程工具的基本使用方法，包括提示词编写与代码生成流程
理解AI辅助编程在数据新闻、交互报道、新闻网站搭建等传播场景中的应用逻辑

正文

Web技术发展历程

Web（World Wide Web，万维网）由英国计算机科学家蒂姆·伯纳斯-李（Tim Berners-Lee）于1989年在欧洲核子研究中心提出，其初衷是为科研人员提供一套跨机构的文档共享系统。Web的演进通常被划分为三个阶段，这一划分对理解当前前端开发的复杂性至关重要。

Web 1.0时代（1991—2004） 以静态文档为核心。页面内容由服务器预先生成，用户只能单向读取，如同翻阅一份印刷好的报纸。彼时的新闻网站仅是纸质报纸的电子化镜像，《人民日报》等媒体的早期网络版即属此类形态。

Web 2.0时代（2004—2010年代中期） 以用户生成内容与交互为特征。Ajax技术的普及使页面无需整体刷新便可局部更新数据，博客、论坛、社交媒体随之兴起。新闻生产从机构垄断转向"专业生产+用户参与"的混合模式，微博、微信公众号的崛起是这一阶段在中国传播生态中的集中体现。

Web 3.0时代（2010年代中期至今） 以移动化、智能化与富交互为标志。单页应用（Single Page Application, SPA）、响应式设计、WebAssembly等技术使Web应用的体验逼近原生App。《纽约时报》的"雪崩"（Snowfall）报道（2012）被视为这一时代新闻叙事革新的标志性案例——长篇文字、视频、动态地图与信息图表在单一页面内深度融合，重新定义了深度报道的叙事边界。

这一历史脉络表明，Web技术的每次范式跃迁都深刻重塑了新闻生产与传播的形态，理解技术演进是理解当代媒体生态变革的前提。

前端开发三层结构

前端开发（Front-End Development）指在浏览器端负责内容呈现与用户交互的开发工作，与之对应的后端开发（Back-End Development）负责服务器端的数据处理与存储逻辑。现代前端开发建立在三种核心技术的协作之上，三者的关系可类比新闻报道的三个维度：

HTML（HyperText Markup Language，超文本标记语言） 是Web页面的内容骨架，负责定义信息的语义结构。它相当于新闻稿的"文字内容本身"——标题是标题、段落是段落、图片是图片，各司其职。HTML使用标签（tag）对内容进行标注，例如 <h1> 表示一级标题，<p> 表示段落，<img> 表示图片。

CSS（Cascading Style Sheets，层叠样式表） 负责控制页面的视觉呈现，包括颜色、字体、布局与动画。它相当于新闻版面的"美术编辑"——决定标题用几号字、正文用什么颜色、图片放在左侧还是右侧。CSS的"层叠"（Cascading）特性意味着多条样式规则可以叠加作用于同一元素，优先级由选择器特异性（specificity）决定。

JavaScript（JS） 是Web页面的行为逻辑层，赋予页面响应用户操作的能力，例如点击按钮触发数据更新、滚动页面触发动画效果。它相当于新闻产品的"交互设计师"——定义用户与内容之间的互动规则。JavaScript是目前唯一被所有主流浏览器原生支持的脚本语言，也是数据新闻可视化工具链（如D3.js）的基础。

三层结构并非彼此隔离，而是在浏览器渲染引擎中协同工作：浏览器解析HTML构建DOM树（Document Object Model，文档对象模型），解析CSS构建CSSOM树，两者合并为渲染树，最终绘制为用户可见的页面。JavaScript可在运行时动态修改DOM与CSSOM，实现页面的实时更新。

前端工具链

现代前端开发已形成一套成熟的工具生态，即"工具链"（Toolchain）。对于新闻传播专业的学习者而言，了解工具链的组成有助于准确理解AI编程工具的工作边界。

代码编辑器 是开发者编写代码的主要环境。Visual Studio Code（VS Code）是目前使用最广泛的开源代码编辑器，由微软开发，支持语法高亮、代码补全、调试与扩展插件。Cursor是在VS Code基础上深度集成大语言模型的AI编辑器，是本课程的主要开发环境。

浏览器开发者工具 是内嵌于Chrome、Firefox等浏览器中的调试套件，通过按下 F12 键即可唤出。其核心面板包括：Elements（实时查看与修改DOM结构）、Console（输出日志与执行JS命令）、Network（监控网络请求）、Sources（调试JS代码）。对于初学者，Console面板是最常用的错误排查入口。

包管理器与构建工具 在较复杂的项目中不可或缺。npm（Node Package Manager）是JavaScript生态中最主要的包管理器，允许开发者以一行命令安装第三方库（如数据可视化库ECharts）。Vite、Webpack等构建工具负责将开发者编写的模块化代码打包为浏览器可直接运行的文件。本课程初期阶段以纯HTML/CSS/JS文件为主，不依赖复杂构建配置。

版本控制系统 Git用于追踪代码变更历史，GitHub是基于Git的代码托管平台。在新闻编辑室的数据新闻团队中，Git是多人协作开发交互报道的标准工具。

AI编程工具：Cursor与Claude

AI编程工具是指集成了大语言模型（Large Language Model, LLM）能力、能够理解自然语言指令并生成、解释或修改代码的开发辅助软件。其底层原理是：将用户的自然语言描述（即"提示词"，Prompt）与当前代码上下文一并输入语言模型，由模型输出符合需求的代码片段或修改建议。

Cursor 是目前广受开发者认可的AI代码编辑器。其核心功能包括：

Inline Edit（行内编辑）：选中代码后按 Ctrl+K，直接用自然语言描述修改需求，Cursor在原位生成新代码供开发者接受或拒绝。
Chat（对话面板）：按 Ctrl+L 打开侧边对话窗口，可就当前项目中的任意问题与AI展开多轮对话，AI能感知整个代码库的上下文。
Composer（多文件生成）：按 Ctrl+I 打开Composer模式，支持一次性生成或修改跨越多个文件的复杂功能。

Claude（由Anthropic开发）是一款擅长长文本理解与代码生成的大语言模型，可通过网页界面（claude.ai）直接使用，也被Cursor内置为可选模型之一。Claude在处理需要解释说明的代码任务时表现突出，适合初学者在理解代码逻辑时作为"对话式教师"使用。

提示词工程（Prompt Engineering） 是影响AI输出质量的关键变量。一个高质量的编程提示词通常包含四个要素：①明确的输出格式（"生成一个HTML文件"）；②具体的功能描述（"包含一个新闻标题列表"）；③约束条件（"不使用任何JavaScript框架，仅用原生CSS"）；④示例数据（"标题包括……"）。模糊的提示词（如"帮我做个新闻页面"）往往生成不满足需求的结果，这与新闻采访中"提问越精准，信息越有效"的原则高度一致。

AI辅助编程在新闻传播领域的应用

AI辅助编程并非取代程序员，而是将"编程"这一原本需要数年系统训练才能掌握的技能，转化为具备领域知识的非技术专业人员可以参与的协作过程。对于新闻传播专业的学习者，其应用价值主要体现在以下几个方向：

数据新闻可视化 是最直接的应用场景。记者可以将清洗好的CSV数据和可视化需求以自然语言描述给AI，由AI生成基于ECharts或D3.js的图表代码，记者负责数据核实与叙事设计，AI负责技术实现。这一分工使得不具备编程背景的记者也能参与交互式数据报道的生产。

新闻专题页面搭建 是另一重要场景。重大事件报道往往需要快速搭建专题聚合页，AI可以根据记者提供的内容结构和视觉参考，在短时间内生成响应式HTML页面的基础框架，大幅压缩技术实现周期。

信息提取与结构化处理 借助AI对非结构化文本的理解能力，记者可以编写简短的Python或JavaScript脚本（由AI辅助生成），批量提取新闻数据库中的关键信息字段，用于后续的数据分析与可视化。

工具原型开发 方面，新闻机构的产品团队可利用AI快速生成内容管理系统的原型界面、读者互动小工具（如新闻测验、数据计算器）等，验证产品方向后再投入正式开发资源。

值得注意的是，AI生成的代码并非总是正确或安全的，开发者需要具备基本的代码阅读能力以识别错误，并理解代码的功能边界。本课程的核心目标之一，正是培养这种"读懂代码、指挥AI"的能力，而非从零手写代码的传统编程能力。

实践示例

场景：某媒体实习记者需要为一篇关于城市空气质量的数据报道制作一个简单的新闻专题页，页面需包含报道标题、一段导语和一组城市AQI数据列表。

目标：使用Cursor的AI对话功能，通过自然语言提示词生成一个结构完整、样式基本美观的HTML单页文件，无需手动编写任何代码。

实现步骤：

步骤一：打开Cursor并创建新文件

启动Cursor编辑器，选择"新建文件"，将文件命名为 air-quality.html 并保存到本地文件夹。此时文件为空白状态。

步骤二：打开Chat面板，输入提示词

按 Ctrl+L 打开右侧Chat面板，输入以下提示词：

请生成一个完整的HTML单页文件，要求：
1. 页面标题为"2024年重点城市空气质量报告"
2. 包含一段100字左右的导语，说明监测背景
3. 用表格展示以下城市AQI数据：
   北京 156（轻度污染）、上海 87（良）、广州 62（良）、成都 143（轻度污染）、杭州 48（优）
4. 使用内联CSS美化页面，配色采用蓝白色调，无需引用外部资源
5. 不使用任何JavaScript框架

步骤三：将AI生成的代码插入文件

Cursor的Chat面板将输出完整的HTML代码。点击代码块右上角的"Apply"按钮（或复制后粘贴到编辑器），代码将自动填充到 air-quality.html 文件中。典型生成结果如下：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2024年重点城市空气质量报告</title>
  <style>
    /* 全局基础样式：使用无衬线字体，浅灰背景 */
    body {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: #f0f4f8;
      color: #333;
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }
    /* 报道主标题样式 */
    h1 {
      color: #1a5276;
      border-bottom: 3px solid #2980b9;
      padding-bottom: 10px;
    }
    /* 导语段落样式 */
    .intro {
      background-color: #eaf4fb;
      padding: 15px;
      border-left: 4px solid #2980b9;
      line-height: 1.8;
    }
    /* 数据表格样式 */
    table {
      width: 100%;
      border-collapse: collapse; /* 合并单元格边框 */
      margin-top: 20px;
    }
    th {
      background-color: #2980b9;
      color: white;
      padding: 10px;
      text-align: left;
    }
    td {
      padding: 10px;
      border-bottom: 1px solid #d6eaf8;
    }
    /* 奇偶行交替背景，提升可读性 */
    tr:nth-child(even) {
      background-color: #eaf4fb;
    }
  </style>
</head>
<body>
  <h1>2024年重点城市空气质量报告</h1>

  <!-- 报道导语区块 -->
  <p class="intro">
    生态环境部持续推进全国重点城市空气质量实时监测工作。2024年度数据显示，
    长三角、珠三角地区整体空气质量优于北方城市，
    京津冀及川渝地区在冬季供暖季仍面临较大颗粒物污染压力。
    本报告基于全年均值数据，旨在为读者提供直观的城市横向比较参考。
  </p>

  <!-- AQI数据表格 -->
  <table>
    <thead>
      <tr>
        <th>城市</th>
        <th>AQI指数</th>
        <th>空气质量等级</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>北京</td>
        <td>156</td>
        <td>轻度污染</td>  <!-- AQI 151-200为轻度污染 -->
      </tr>
      <tr>
        <td>上海</td>
        <td>87</td>
        <td>良</td>
      </tr>
      <tr>
        <td>广州</td>
        <td>62</td>
        <td>良</td>
      </tr>
      <tr>
        <td>成都</td>
        <td>143</td>
        <td>轻度污染</td>
      </tr>
      <tr>
        <td>杭州</td>
        <td>48</td>
        <td>优</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

步骤四：在浏览器中预览

在文件夹中找到 air-quality.html，双击用浏览器打开；或在Cursor中右键选择"Open with Live Server"（需安装Live Server插件）进行实时预览。

步骤五：迭代修改

若希望为不同污染等级的行标注颜色（如轻度污染行显示为浅橙色），可回到Chat面板继续提问：

请修改表格样式，让AQI等级为"轻度污染"的行背景色改为 #fdebd0（浅橙色），
"优"等级的行背景色改为 #d5f5e3（浅绿色）

AI将输出针对性的CSS修改代码，通过"Apply"直接更新文件。

效果说明：最终页面呈现为一个蓝白配色的新闻专题页，包含醒目的蓝色主标题、带有左侧蓝色边框的引言段落，以及一个表头为深蓝色、奇偶行交替浅蓝色的数据表格。整个制作过程无需记忆任何HTML或CSS语法，核心技能是准确描述需求的提示词编写能力。

练习

基础练习：参照实践示例，使用Cursor为一篇你感兴趣的新闻专题（如"2024年全国高校招生数据"或"近五年网络舆情事件盘点"）生成一个包含标题、导语和数据表格的HTML页面。要求配色与主题内容相符，并截图保存最终预览效果。
进阶练习：在基础练习生成的页面基础上，通过追加提示词完成以下两处修改：①在页面底部添加一个"数据来源"注脚区域，包含来源机构名称和数据获取日期；②将表格中数值最高的一行用粗体标注。记录你使用的提示词，并对比修改前后的代码差异，理解AI修改了哪些具体的HTML/CSS内容。
综合练习：阅读一篇近期的数据新闻报道（可参考"财新数据"、"澎湃美数课"或《纽约时报》The Upshot栏目），分析该报道中的交互元素和数据可视化形式，撰写一份不少于300字的分析短文，回答以下问题：①该报道使用了哪些前端技术手段（参考本章三层结构）？②哪些部分可以借助AI辅助编程实现？③哪些部分仍然依赖记者的专业判断和新闻素养，无法被AI替代？

本章小结

Web技术演进：Web经历了从Web 1.0静态文档、Web 2.0用户交互到Web 3.0富交互应用的三阶段演进，每次跃迁均深刻重塑新闻生产与传播形态。
前端三层结构：HTML负责内容语义（骨架）、CSS负责视觉呈现（样式）、JavaScript负责交互逻辑（行为），三者协同构成浏览器端页面的完整表达体系。
前端工具链：现代前端开发围绕代码编辑器、浏览器开发者工具、包管理器和版本控制系统构成工具生态，Cursor是本课程核心的AI增强开发环境。
AI编程工具使用：Cursor的Chat、Inline Edit与Composer功能可将自然语言需求转化为可运行代码；提示词的精准程度直接决定AI输出质量，是本课程需持续训练的核心技能。
传播领域应用价值：AI辅助编程在数据可视化、专题页搭建、信息结构化处理等场景中显著降低了新闻从业者的技术门槛，但新闻判断与叙事设计能力仍是不可替代的专业核心。