第 4 章 · 网页结构阅读

概

HTML 是什么？

HTML是描述网页内容和结构的标记语言。例如，<h1>采购须知</h1>把“采购须知”标为标题；<p>请在30日内付款。</p>把这句话标为段落。提取材料时，要留下正文，排除“订阅”“下一篇”等网页功能文字。

标签（Tag）

多数标签有开始和结束，例如<div>正文</div>。两者之间是元素内容。有些元素没有结束标签，例如图片<img>和换行<br>。

标签与文字分别保留什么

<p>Payment is due within 30 days.</p>中，前后的p标签标明段落，英文是正文。提取纯文字后可去掉标签，但要保留“30 days.”，并保留原来的段落边界，避免与下一条交货条款粘在一起。

属性（Attribute）

写在开始标签内，格式为 属性名="属性值"。常见属性：class（样式类名，可重复）、id（唯一标识）、href（链接地址）。

嵌套：标签套标签

嵌套指一层内容包含另一层。例如，正文区域内有段落，段落内还有链接。DOM是浏览器组织网页内容的对象模型，常用树状层级表示。提取工具也按类似的层级查找内容。

<body>                          ← 根节点的子节点之一
  <div class="article">          ← body 的子节点
    <h1>文章标题</h1>            ← div 的子节点（兄弟：h1 与 p）
    <p>第一段正文。</p>
  </div>
</body>

提取时要保留什么

在笔译中，标题、正文和脚注需要分别识别。HTML标签与属性能帮助定位这些内容，但标签名不保证内容正确。例如，广告也可能使用div，不能提取全部div就算取得正文。

技

常见标签与 CSS 选择器

1. 文档骨架：html · head · body

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题（浏览器标签页显示）</title>
</head>
<body>
  <!-- 用户可见的全部内容都在这里 -->
</body>
</html>

<head> — 网页信息（标题、编码、样式引用），一般不包含正文
<body> — 页面可见内容，语料正文几乎都在 body 内
 — 注释，浏览器忽略，不影响显示

2. 内容与结构：div · p · h1

标签	用途	语料场景
<div>	通用容器，本身无语义，靠 class 区分用途	NYT 用 `div.article-paragraph` 包裹每个段落
<p>	段落	普通新闻页的正文段落；dual 页多用 div 而非 p
<h1>–<h6>	标题，h1 层级最高	NYT 双语页：中文 h1 + 英文 h1.en-title
<span>	行内容器，不换行	常用于标记局部文字或脚注；外层标签可以去掉，有用文字仍需保留
<a href="url">	超链接	正文中的链接文字通常属于内容，例如“付款条款”，不应随标签一起删除

3. class 与 id：给元素「命名」

<div class="article-paragraph">英文段落</div>
<div class="article-paragraph">中文段落</div>
<h1 class="en-title">English Title</h1>
<header id="main-header">...</header>

class="article-paragraph" — 同一页面可有多个相同 class 的元素（所有正文段落）
class="en-title" — 额外 class，用于区分英文标题与普通 h1
id="main-header" — 通常全页唯一，用于定位页眉等区域（语料提取时往往排除）

4. CSS 选择器：定位元素的「地址」

CSS原本用于设置网页样式；选择器是指定哪些元素要被选中的表达式。例如，.article-paragraph选出带这个类名的元素。按选择器提取段落时，选得准不准，要对照页面正文检查。

选择器	含义	示例
div	所有 <div> 元素	选中页面全部 div（通常太多）
.article-paragraph	class 为 article-paragraph 的元素	NYT 正文段落
#main-header	id 为 main-header 的元素	页眉区域（通常排除）
h1.en-title	带 en-title class 的 h1	NYT 英文标题
header h1:not(.en-title)	header 内不带 en-title 的 h1	NYT 中文标题

景

NYT 双语页结构阅读

简化网页片段如下。实际网页可能变化，提取时需重新核对标题、正文和英中段落的排列方式。

<!-- NYT 双语页简化结构示意 -->
<article class="dual-language">

  <header>
    <h1>人工智能时代，中国人还需要学英语吗？</h1>
    <h1 class="en-title">In the Age of A.I., Some in China Wonder if Learning English Is Worth the Trouble</h1>
    <div class="byline">
      <address>By TIFFANY MAY, BERRY WANG</address>
    </div>
  </header>

  <!-- 正文：article-paragraph 按「英、中、英、中……」交替 -->
  <div class="article-body">

    <div class="article-paragraph">
      Some parents and teachers found Mr. Tang’s suggestion refreshing.
    </div>
    <div class="article-paragraph">
      一些家长和老师认为汤家凤的建议令人耳目一新。
    </div>

    <div class="article-paragraph">
      But for others, making English less of a priority would be a step backward.
    </div>
    <div class="article-paragraph">
      但对另一些人来说，降低英语的优先地位无异于倒退。
    </div>

    <div class="article-paragraph">
      As youth unemployment grows and artificial intelligence upends many industries, people are questioning which skills will still be useful to students when they graduate.
    </div>
    <div class="article-paragraph">
      随着青年失业率上升以及人工智能颠覆许多行业，人们开始质疑，学生毕业时，究竟哪些技能仍然有用。
    </div>

  </div>
</article>

本例英文和中文交替排列，可暂按相邻位置组成候选段落对，即尚未核对内容的原文段落与译文段落。

可选：查看网页结构

若想查看真实网页，可在浏览器中右键选择“检查”，在Elements面板中点选元素，观察对应区域。这是浏览器提供的开发者工具。

笔译练习：译例应保留哪些内容

用途：把采购须知整理成可供合同翻译参考的双语译例。

页面内容	文字
标题	采购须知
英文正文	Payment is due within 30 days.
中文正文	款项应在30日内支付。
订阅按钮	立即订阅

请判断：哪些文字应作为译例内容？哪些可以帮助回查来源？哪些与翻译参考无关？

参考答案

英文、中文正文应作为一组原译文保留；标题可作为来源信息。“立即订阅”是网页功能文字，不属于条款或译文，应排除。