参考资料

1. HTML/UBB互转有哪些
2. cache-control 浏览器缓存行为
3. HTML 常用1600 万种不同颜色颜色代码表
4. HTML 常用颜色
5. HTML 用于联系信息的
6. HTML 内联 元素
7. HTML 表格的嵌套
8. HTML id 属性在 JavaScript 中的使用

HTML 删除字符效果和插入字符效果

<del> 标签 - 删除字符效果

功能：表示文档中已删除的文本内容

基本用法：

<del>已删除的文本</del>

属性：

• cite：指定解释删除原因的文档URL

• datetime：指定删除的日期和时间（ISO格式）

示例：

<p>原价：<del>¥100</del> 现价：¥80</p>

<ins> 标签 - 插入字符效果

功能：表示文档中新增的文本内容

基本用法：

<ins>新增的文本</ins>

属性：

• cite：指定解释插入原因的文档URL

• datetime：指定插入的日期和时间（ISO格式）

示例：

<p>会议时间：<del>10:00</del> <ins>11:00</ins></p>

CSS 扩展样式

默认样式：

• <del>：通常显示为带删除线的文本

• <ins>：通常显示为带下划线的文本

自定义样式：

del {
  text-decoration: line-through;
  color: #999;
}

ins {
  text-decoration: underline;
  color: green;
  background-color: #f8f8f8;
}

/* 组合使用示例 */
del.old-price {
  font-size: 0.9em;
}

ins.new-price {
  font-weight: bold;
  color: #d00;
}

高级应用：

/* 为插入内容添加图标 */
ins::after {
  content: " (新增)";
  font-size: 0.8em;
  color: blue;
}

/* 响应式设计中的不同表现 */
@media (max-width: 600px) {
  del, ins {
    display: block;
    margin: 5px 0;
  }
}

语义化使用建议

1. 同时使用<del>和<ins>可以清晰展示文档修改历史

2. 结合datetime属性记录修改时间

3. 使用cite属性链接到修改说明文档

4. 避免仅为了装饰效果而使用这些标签，应保持语义正确性