HTML：新闻网页的结构标记语言

HTML 是构建网页内容的标准标记语言，本章系统介绍 HTML 文档结构、常用元素、融媒体标记及表单交互，帮助读者建立完整的网页内容组织能力。

2026-03-10 第 2 周

学习要点

掌握 HTML 文档的基本结构与文档类型声明的作用
熟练使用文本、图片、链接、列表等核心 HTML 元素标记新闻内容
运用 <audio> 与 <video> 元素在网页中嵌入融媒体内容
理解表单元素的构成，能够创建基础的读者交互界面

正文

HTML 文档结构

HTML（HyperText Markup Language，超文本标记语言）是一种通过"标签"（tag）为内容赋予结构和语义的标记语言。它不是编程语言——HTML 不包含逻辑运算或条件判断，而是一套描述"内容是什么"的标注体系。可以将其类比为报纸版面的编辑标注：编辑在稿件上用铅笔注明"此处为标题""此处为导语""此处配图"，印刷厂据此排版；浏览器则依据 HTML 标签，将文本、图片、音视频等内容呈现为可供读者浏览的网页。

每个 HTML 文档由固定的骨架组成。<!DOCTYPE html> 声明位于文档首行，告知浏览器当前文档遵循 HTML5 规范，是现代网页的通行约定。<html> 元素是整个文档的根容器，其 lang 属性指定语言，有助于屏幕阅读器和搜索引擎正确处理内容。<head> 区域包含不直接显示于页面的元数据，例如字符编码声明、页面标题和外部资源引用；<body> 区域则容纳全部可见内容。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 声明文档编码为 UTF-8，确保中文正常显示 -->
    <meta charset="UTF-8" />
    <!-- 控制移动端视口缩放，适配手机浏览 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 显示在浏览器标签页和搜索结果中的标题 -->
    <title>《南方日报》深度报道专题</title>
  </head>
  <body>
    <!-- 页面可见内容放置于此 -->
  </body>
</html>

HTML 标签通常成对出现，由开始标签 <tagname> 与结束标签 </tagname> 包裹内容；部分标签为自闭合标签（如 <meta />、<img />），自身不包裹文本内容。标签可嵌套，但不允许交叉嵌套，否则浏览器的解析行为将不可预期。

文本、图片与链接元素

文本元素构成新闻网页的信息主体。标题层级由 <h1> 至 <h6> 依次递减，对应报纸的主标题、副标题、小标题等层级关系；<p> 标签标记段落，是正文内容的基本容器；<strong> 表示语义上的重要内容（粗体），<em> 表示强调（斜体），二者均携带语义，优于纯样式标签 <b> 和 <i>。<blockquote> 用于引用，适合标注消息来源或专家观点。

图片由 <img> 标签嵌入。src 属性指定图片路径，alt 属性提供文字替代描述，当图片无法加载或读者使用辅助设备时，alt 文本将被读出或显示。新闻图片的 alt 属性应如同图片说明一样简洁准确地描述画面内容。

超链接由 <a> 标签实现，href 属性指定目标地址。将 target="_blank" 设为外部链接的属性值，可使链接在新标签页中打开，避免读者离开当前报道页面。

1
2
3
4
5
6
7
8
9
<!-- 新闻报道的标题与正文结构示例 -->
<h1>暴雨致珠三角多地交通中断</h1>
<p>据气象部门消息，6月15日凌晨起，</p>

<!-- 新闻配图，alt 属性描述图片内容 -->
<img src="flood-guangzhou.jpg" alt="广州天河区街道积水深达半米，车辆受阻" />

<!-- 相关报道链接，在新标签页打开 -->
<a href="https://www.nmc.cn/" target="_blank">查看中央气象台最新预警</a>

列表元素

HTML 提供两种基础列表结构：无序列表 <ul> 与有序列表 <ol>，列表项均以 <li> 标签标记。无序列表适用于并列关系的内容，例如事件关键词、报道要点或栏目导航；有序列表适用于具有先后顺序的内容，例如事件时间线或操作步骤。定义列表 <dl> 由术语 <dt> 与释义 <dd> 构成，适合词汇表或人物档案等格式。

在新闻报道中，列表元素常用于梳理复杂事件的多个维度。例如，灾情报道可用无序列表列举受灾地区，调查报道可用有序列表还原事件经过，政策解读可用定义列表标注关键术语与含义。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!-- 无序列表：报道涉及的主要地区 -->
<ul>
  <li>广州天河区</li>
  <li>佛山南海区</li>
  <li>东莞市区</li>
</ul>

<!-- 有序列表：事件时间线 -->
<ol>
  <li>凌晨2时：强降雨开始</li>
  <li>上午6时：多条地铁线路暂停运营</li>
  <li>上午10时：应急响应提升至一级</li>
</ol>

<!-- 定义列表：术语解释 -->
<dl>
  <dt>橙色预警</dt>
  <dd>3小时内累计降雨量将达50毫米以上的气象预警级别</dd>
</dl>

融媒体内容的标记

融媒体时代的新闻报道已超越纯文字形态，音频采访、视频直播、多媒体专题成为常态。HTML5 引入的 <audio> 与 <video> 元素无需依赖第三方插件，即可在浏览器中原生播放音视频内容。

<audio> 标签通过 src 属性指定音频文件地址，controls 属性使浏览器渲染默认播放控件（播放、暂停、音量调节）；<video> 标签类似，另有 width、height 属性控制尺寸，poster 属性指定视频封面图（类似电视节目的片头截图）。为兼容不同浏览器对音视频格式的支持差异，可在标签内嵌套多个 <source> 子标签，提供多种格式的同一内容，浏览器将自动选择第一个可播放的格式。标签对之间的文本内容仅在浏览器不支持该元素时显示，起降级提示作用。

<figure> 与 <figcaption> 元素常与媒体元素配合使用：<figure> 作为媒体内容的语义容器，<figcaption> 提供说明文字，相当于图片或视频的图注。

 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
<!-- 音频采访片段 -->
<figure>
  <audio controls>
    <!-- 提供 MP3 和 OGG 两种格式以兼容不同浏览器 -->
    <source src="interview-expert.mp3" type="audio/mpeg" />
    <source src="interview-expert.ogg" type="audio/ogg" />
    您的浏览器不支持音频播放，请升级浏览器。
  </audio>
  <figcaption>专访：中国气象科学研究院研究员李华（时长3分22秒）</figcaption>
</figure>

<!-- 现场视频 -->
<figure>
  <video
    width="800"
    height="450"
    controls
    poster="flood-video-cover.jpg"  <!-- 视频封面图 -->
  >
    <source src="flood-scene.mp4" type="video/mp4" />
    <source src="flood-scene.webm" type="video/webm" />
    您的浏览器不支持视频播放。
  </video>
  <figcaption>广州天河区珠江新城地下停车场积水实拍（来源：市应急管理局）</figcaption>
</figure>

表单与交互元素

表单是网页与读者之间的信息交换接口。在新闻传播实践中，读者调查、线索征集、订阅注册、评论提交等功能均依赖表单实现。<form> 标签定义表单区域，action 属性指定数据提交的服务器地址，method 属性指定提交方式（GET 将数据附于 URL，POST 将数据置于请求体中，涉及隐私的内容应选用 POST）。

<input> 是最核心的表单控件，通过 type 属性切换形态：text 为单行文本框，email 内置邮箱格式验证，radio 为单选按钮，checkbox 为复选框，submit 渲染提交按钮。<textarea> 适用于多行文本输入（如读者留言）；<select> 与 <option> 构成下拉选择菜单。每个控件应通过 <label> 标签关联文字说明，for 属性值与对应控件的 id 值相同，点击标签文字即可激活对应控件，提升可用性与无障碍访问能力。

 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
<!-- 读者新闻线索征集表单 -->
<form action="/submit-tip" method="POST">

  <!-- 姓名字段 -->
  <label for="name">您的姓名：</label>
  <input type="text" id="name" name="name" placeholder="请输入真实姓名" required />

  <!-- 联系邮箱，浏览器自动验证格式 -->
  <label for="email">联系邮箱：</label>
  <input type="email" id="email" name="email" placeholder="[email protected]" required />

  <!-- 线索类型单选 -->
  <p>线索类型：</p>
  <input type="radio" id="social" name="tip-type" value="social" />
  <label for="social">社会民生</label>

  <input type="radio" id="environment" name="tip-type" value="environment" />
  <label for="environment">环境污染</label>

  <!-- 线索详情多行文本 -->
  <label for="detail">线索详情：</label>
  <textarea id="detail" name="detail" rows="5" placeholder="请尽量提供时间、地点、人物等具体信息"></textarea>

  <!-- 提交按钮 -->
  <button type="submit">提交线索</button>

</form>

实践示例

场景：某高校新闻学院学生媒体策划一期关于"校园食堂满意度"的专题报道，需制作一个包含标题、正文、配图、嵌入采访音频和读者调查表单的新闻专题页面。

目标：构建一个完整的 HTML 新闻专题页面，涵盖文档骨架、多层级文本标记、图片、有序列表呈现的调查发现、嵌入式音频采访，以及读者满意度调查表单。

实现步骤：

第一步：搭建文档骨架

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面标题将显示在浏览器标签页 -->
    <title>校园食堂满意度调查报道 — 新传学生媒体</title>
  </head>
  <body>
    <!-- 以下各步骤的内容依次放入此处 -->
  </body>
</html>

第二步：标记报道标题与导语

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!-- 主标题，每页通常只有一个 h1 -->
<h1>七成同学对食堂菜价表示不满——本报历时两周深度调查</h1>

<!-- 元数据：作者与发布日期 -->
<p>记者：张晓雯 | 摄影：李明辉 | 发布时间：2026年3月10日</p>

<!-- 导语段落 -->
<p>
  本报于2026年2月24日至3月9日，对全校1200名同学进行问卷调查，
  并深入走访食堂管理方、供应商及后勤处负责人，
  就菜品质量、价格水平、环境卫生等维度进行综合评估。
</p>

第三步：插入新闻配图

1
2
3
4
5
6
7
8
9
<!-- 使用 figure 为图片提供语义容器和图注 -->
<figure>
  <img
    src="canteen-survey.jpg"
    alt="调查员在学生食堂一楼向同学发放问卷"
    width="720"
  />
  <figcaption>图：调查员于用餐高峰期在食堂一楼开展问卷调查（摄：李明辉）</figcaption>
</figure>

第四步：用有序列表呈现调查核心发现

1
2
3
4
5
6
7
<h2>调查主要发现</h2>
<ol>
  <li><strong>菜价满意度最低</strong>：73.2% 的受访者认为菜价偏高，较去年同期上升11个百分点。</li>
  <li><strong>菜品多样性获认可</strong>：61.5% 的受访者对菜品种类表示满意或基本满意。</li>
  <li><strong>卫生状况有所改善</strong>：投诉量同比下降34%，获后勤处数据佐证。</li>
  <li><strong>高峰期排队问题突出</strong>：午餐高峰等待时间平均达18分钟，超六成同学认为需优化。</li>
</ol>

第五步：嵌入专家采访音频

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<h2>深度访谈</h2>
<figure>
  <audio controls>
    <source src="interview-logistics.mp3" type="audio/mpeg" />
    <source src="interview-logistics.ogg" type="audio/ogg" />
    您的浏览器不支持音频播放。
  </audio>
  <figcaption>
    专访：后勤处处长王建国就食堂运营成本上涨的回应（时长4分07秒）
  </figcaption>
</figure>

第六步：添加读者满意度调查表单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h2>参与本报读者调查</h2>
<form action="/canteen-survey-submit" method="POST">

  <label for="reader-id">学号（选填）：</label>
  <input type="text" id="reader-id" name="student-id" placeholder="如不愿透露可留空" />

  <p>您对食堂整体满意度的评价：</p>
  <input type="radio" id="satisfied" name="rating" value="satisfied" />
  <label for="satisfied">满意</label>

  <input type="radio" id="neutral" name="rating" value="neutral" />
  <label for="neutral">一般</label>

  <input type="radio" id="dissatisfied" name="rating" value="dissatisfied" />
  <label for="dissatisfied">不满意</label>

  <br />
  <label for="suggestion">您的改进建议：</label>
  <textarea id="suggestion" name="suggestion" rows="4" placeholder="请写下您的具体建议"></textarea>

  <button type="submit">提交评价</button>
</form>

效果说明：完成上述六个步骤后，在浏览器中打开该 HTML 文件，将呈现一个结构完整的新闻专题页面：顶部为多层级标题和导语，其下依次排列新闻配图（含图注）、有序列表呈现的调查发现、可在线播放的采访音频，以及供读者填写的满意度调查表单。整个页面尚未添加 CSS 样式，视觉效果较为朴素，但信息层级清晰、语义完整，已具备正式新闻页面的内容骨架。

练习

基础练习：参照本章代码示例，新建一个 HTML 文件，制作一则简短的校园新闻稿页面，要求包含：一个主标题（<h1>）、至少两个正文段落（<p>）、一张配图（<img>，可使用任意本地图片或网络图片地址）、一个指向人民日报官网的外部链接（在新标签页打开）。
进阶练习：在基础练习的页面中，增加以下内容：（1）使用无序列表 <ul> 列出该新闻涉及的3至5个关键词；（2）使用 <blockquote> 标签引用一段新闻当事人的话，并在其下方用 <cite> 标注来源；（3）使用 <video> 标签嵌入一段视频（可使用 MP4 格式的示例文件），并为其添加封面图和 <figcaption> 图注。
综合练习：选取一个当前热点新闻事件，独立设计并编写一个融媒体新闻专题页面的 HTML 结构（无需真实媒体文件，可使用占位路径如 src="video.mp4"）。要求页面包含：主标题与副标题、导语、事件时间线（有序列表）、至少一处图片、一处音频或视频、一个针对读者的相关主题调查表单（含不少于3种不同类型的表单控件）。完成后，思考并以注释形式写明：你所选用的各 HTML 元素，在新闻表达中分别承担了怎样的叙事或信息功能。

本章小结

HTML 文档结构：每个 HTML 文件由 <!DOCTYPE html>、<html>、<head>、<body> 构成固定骨架，<head> 存储元数据，<body> 承载可见内容。
语义化标签：使用 <h1>–<h6>、<p>、<strong>、<blockquote> 等标签时，应优先考虑内容的语义含义，而非视觉样式，这是现代 HTML 写作的核心原则。
媒体元素嵌入：<img> 嵌入图片时必须提供 alt 描述；<audio> 与 <video> 通过多个 <source> 子标签实现跨浏览器兼容，<figure> 与 <figcaption> 为媒体内容提供语义容器。
列表结构：<ul> 用于并列内容，<ol> 用于有序内容，<dl> 用于术语释义，三种列表结构覆盖新闻报道中绝大多数的条目化呈现需求。
表单交互：<form> 是读者与新闻平台交互的核心结构，<input>、<textarea>、<select> 等控件配合 <label> 使用，可构建读者调查、线索征集等功能的前端界面。