1. 4.7 编辑
      1. 4.7.1 ins 元素
      2. 4.7.2 del 元素
      3. 4.7.3 insdel 元素的公共属性
      4. 4.7.4 编辑和段落
      5. 4.7.5 编辑和列表
      6. 4.7.6 编辑和表格

4.7 编辑

insdel 元素表示对文档的编辑。

4.7.1 ins 元素

元素/ins

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容.
短语内容.
可感知内容.
可以使用该元素的上下文:
预期为 短语内容 的地方。
内容模型:
透明的.
text/html 中的标签省略:
两个标签都不能省略。
内容属性:
全局属性
cite — 链接到引文的来源或有关编辑的更多信息
datetime — 更改的日期和(可选)时间
无障碍考虑因素:
对于作者.
对于实施者.
DOM 接口:
使用 HTMLModElement

ins 元素 表示 对文档的添加。

以下表示添加单个段落

<aside>
 <ins>
  <p> I like fruit. </p>
 </ins>
</aside>

以下也是如此,因为这里 aside 元素中的所有内容都算作 短语内容,因此只有一个 段落

<aside>
 <ins>
  Apples are <em>tasty</em>.
 </ins>
 <ins>
  So are pears.
 </ins>
</aside>

ins 元素不应跨越 隐式段落 边界。

以下示例表示添加了两个段落,其中第二个段落被插入了两个部分。因此,此示例中的第一个 ins 元素跨越了段落边界,这被认为是不好的形式。

<aside>
 <!-- don't do this -->
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

以下是一种更好的标记方式。它使用更多元素,但没有一个元素跨越隐式段落边界。

<aside>
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
 </ins>
 <ins datetime="2005-03-16 00:00Z">
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

4.7.2 del 元素

元素/del

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容.
短语内容.
可感知内容.
可以使用该元素的上下文:
预期为 短语内容 的地方。
内容模型:
透明的.
text/html 中的标签省略:
两个标签都不能省略。
内容属性:
全局属性
cite — 链接到引文的来源或有关编辑的更多信息
datetime — 更改的日期和(可选)时间
无障碍考虑因素:
对于作者.
对于实施者.
DOM 接口:
使用 HTMLModElement

del 元素 表示 从文档中删除。

del 元素不应跨越 隐式段落 边界。

以下显示了一个“待办事项”列表,其中已完成的项目已用完成日期和时间划掉。

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

4.7.3 insdel 元素的公共属性

cite 属性可用于指定解释更改的文档的 URL。当该文档很长时,例如会议记录,作者鼓励在其中包含一个指向讨论更改的该文档特定部分的 片段

如果存在 cite 属性,则它必须是 可能被空格包围的有效 URL,用于解释更改。为了获得相应的引文链接,必须相对于元素的 节点文档 解析 属性的值。用户代理可能允许用户遵循此类引文链接,但它们主要用于私有使用(例如,由服务器端脚本收集有关站点编辑的统计信息),而不是用于读者。

datetime 属性可用于指定更改的时间和日期。

如果存在,datetime 属性的值必须是 带有可选时间的有效日期字符串

用户代理必须根据 解析日期或时间字符串 算法解析 datetime 属性。如果它没有返回 日期全局日期和时间,则修改没有关联的时间戳(该值不符合要求;它不是 带有可选时间的有效日期字符串)。否则,将修改标记为在给定的 日期全局日期和时间 进行。如果给定值为 全局日期和时间,则用户代理应使用关联的时区偏移信息来确定以哪个时区显示给定的日期时间。

此值可能会显示给用户,但它主要用于私有使用。

insdel 元素必须实现 HTMLModElement 接口

HTMLModElement

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
[Exposed=Window]
interface HTMLModElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString cite;
  [CEReactions] attribute DOMString dateTime;
};

cite IDL 属性必须 反映 元素的 cite 内容属性。 dateTime IDL 属性必须 反映 元素的 datetime 内容属性。

4.7.4 编辑和段落

本节非规范性。

由于 insdel 元素不会影响 段落,因此在某些情况下,段落是 隐式 的(没有显式 p 元素),insdel 元素可以跨越整个段落或其他非 短语内容 元素以及另一个段落的一部分。例如

<section>
 <ins>
  <p>
   This is a paragraph that was inserted.
  </p>
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 </ins>
 This is a second sentence, which was there all along.
</section>

通过仅将某些段落包装在 p 元素中,人们甚至可以使一个段落的结尾、整个第二个段落和第三个段落的开头被同一个 insdel 元素覆盖(尽管这非常令人困惑,并且不被视为良好的做法)

<section>
 This is the first paragraph. <ins>This sentence was
 inserted.
 <p>This second paragraph was inserted.</p>
 This sentence was inserted too.</ins> This is the
 third paragraph in this example.
 <!-- (don't do this) -->
</section>

但是,由于 隐式段落 的定义方式,无法使用同一个 insdel 元素来标记一个段落的结尾和下一个段落的开头。相反,您必须使用一个(或两个) p 元素和两个 insdel 元素,例如

<section>
 <p>This is the first paragraph. <del>This sentence was
 deleted.</del></p>
 <p><del>This sentence was deleted too.</del> That
 sentence needed a separate &lt;del&gt; element.</p>
</section>

部分原因是由于上述混乱,强烈建议作者始终用 p 元素标记所有段落,而不是使用跨越 隐式段落 边界的 insdel 元素。

4.7.5 编辑和列表

本节非规范性。

olul 元素的内容模型不允许 insdel 元素作为子元素。列表始终表示所有项目,包括原本应标记为已删除的项目。

要表示项目已插入或删除,可以将insdel元素包裹在li元素的内容周围。要表示项目已被另一个项目替换,一个li元素可以包含一个或多个del元素,后跟一个或多个ins元素。

在以下示例中,一个最初为空的列表随着时间的推移添加和删除了项目。示例中已强调的部分显示了列表的“当前”状态。列表项编号不考虑编辑,虽然。

<h1>Stop-ship bugs</h1>
<ol>
 <li><ins datetime="2008-02-12T15:20Z">Bug 225:
 Rain detector doesn't work in snow</ins></li>
 <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
 Water buffer overflows in April</ins></del></li>
 <li><ins datetime="2008-02-16T13:50Z">Bug 230:
 Water heater doesn't use renewable fuels</ins></li>
 <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
 Carbon dioxide emissions detected after startup</ins></del></li>
</ol>

在以下示例中,一个最初只包含水果的列表被一个只包含颜色的列表替换。

<h1>List of <del>fruits</del><ins>colors</ins></h1>
<ul>
 <li><del>Lime</del><ins>Green</ins></li>
 <li><del>Apple</del></li>
 <li>Orange</li>
 <li><del>Pear</del></li>
 <li><ins>Teal</ins></li>
 <li><del>Lemon</del><ins>Yellow</ins></li>
 <li>Olive</li>
 <li><ins>Purple</ins></li>
</ul>

4.7.6 编辑和表格

本节非规范性。

构成表格模型的元素具有复杂的内容模型要求,不允许使用insdel元素,因此指示对表格的编辑可能很困难。

要表示已添加或删除整行或整列,可以将该行或列中每个单元格的整个内容分别包装在insdel元素中。

这里,添加了表格的一行

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> Verdict
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
  <tr> <td> Portal              <td> Valve            <td> 10/10
  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
</table>

这里,删除了一列(它被删除的时间也给出了,以及指向解释原因的页面的链接)

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
</table>

一般来说,没有好的方法来表示更复杂的编辑(例如,单元格被删除,所有后续单元格向上或向左移动)。