html怎么添加删除线

HTML怎么加删除线

在HTML中，我们可以使用<del>标签来给文本添加删除线，这个标签通常用于表示已经删除或者不再有效的文本，下面是一个示例：

<p>这是一段普通的文本。<del>这是一段被删除的文本。</del></p>

在这个例子中，"这是一段被删除的文本。"将会显示为带有删除线的文本。

1. <del>标签的基本用法

<del>标签是HTML5新增的语义标签，用于表示已经被移除或者无效的文本，它通常用于表示用户输入错误、编辑过程中的更改，或者已经过期的信息。

<del>标签可以包含任何有效的HTML元素，包括文本、图片、链接等。

<del><a href="http://example.com">这是一个链接</a></del>

在这个例子中，"这是一个链接"将会显示为带有删除线的链接。

2. <del>标签的属性

<del>标签有一些属性，可以用来改变删除线的样式，这些属性包括：

datetime：这个属性用来指定删除操作的时间和日期，它的值应该是一个符合ISO 8601格式的日期字符串。

<del datetime="2022-01-01">这是一段被删除的文本。</del>

在这个例子中，"这是一段被删除的文本。"将会显示为带有删除线，并且显示删除操作的日期是2022年1月1日。

cite：这个属性用来指定删除操作的来源，它的值应该是一个URL，指向一个页面或者资源，描述了为什么这段文本被删除。

<del cite="http://example.com/deleted-text">这是一段被删除的文本。</del>

在这个例子中，"这是一段被删除的文本。"将会显示为带有删除线，并且显示删除操作的来源是"http://example.com/deleted-text"。

3. <ins>标签与删除线的关系

除了<del>标签，HTML还提供了一个<ins>标签，用于表示插入到文档中的新文本，这两个标签经常一起使用，以表示对文档的修改历史。

<p>这是一段普通的文本。<del>这是一段被删除的文本。</del><ins>这是一段被插入的新文本。</ins></p>

在这个例子中，"这是一段被删除的文本。"将会显示为带有删除线的文本，而"这是一段被插入的新文本。"将会显示为正常的文本。

4. CSS样式与删除线的关系

虽然HTML提供了<del>标签来添加删除线，但是默认的样式可能并不能满足我们的需求，这时，我们可以使用CSS来改变删除线的样式，我们可以改变删除线的颜色、粗细等。

del {
    color: red; /* 改变颜色 */
    text-decoration: line-through; /* 添加下划线 */
}

在这个例子中，所有的<del>标签都会显示为红色的带下划线的文本。

5. 兼容性问题

虽然<del>标签是HTML5新增的语义标签，但是它在所有现代浏览器中都得到了很好的支持，对于一些旧版本的浏览器，可能需要使用一些额外的CSS样式来确保正确的显示效果，我们可以使用CSS的::before和::after伪元素来创建自定义的删除线效果。

del::before, del::after {
    content: ""; /* 创建一个空的内容 */
    position: absolute; /* 绝对定位 */
    width: 100%; /* 宽度为100% */
    height: 1px; /* 高度为1px */
    background: currentColor; /* 使用当前颜色作为背景 */
}
del::before {
    top: 50%; /* 顶部位置 */
}
del::after {
    bottom: 0; /* 底部位置 */
}

在这个例子中，我们使用了CSS的伪元素和一些基本的样式属性来创建一个简单的自定义删除线效果，这个效果在所有现代浏览器中都应该得到很好的支持。