参考资料

1. HTML 删除字符效果和插入字符效果
2. HTML 图像
3. html元信息标签详细说明以及案例
4. HTML 合并单元格
5. HTML 颜色采用的是 RGB 颜色
6. HTML 强调
7. HTML 字体, 字体颜色 ，字体大小
8. HTML移除边框 Iframe

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. 避免仅为了装饰效果而使用这些标签，应保持语义正确性

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。