明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html如何給文本文字添加刪除線？2種方法添加刪除線（案例）

發(fā)表時間：2023-08-31 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]相信大家在各大商場網(wǎng)站瀏覽時，總是會看到某個產(chǎn)品的原價標記是多少，再在原價上添加一個明顯的刪除線，表明現(xiàn)在做促銷，現(xiàn)價又改成了多少，給用戶一個直觀的差距感，吸引用戶購買！那么這樣的刪除線效果是如何添加到文本文字上的？本章就給大家介紹html給文本文字添加刪除線的兩種方法。有一定的參考價值，有需要的...
相信大家在各大商場網(wǎng)站瀏覽時，總是會看到某個產(chǎn)品的原價標記是多少，再在原價上添加一個明顯的刪除線，表明現(xiàn)在做促銷，現(xiàn)價又改成了多少，給用戶一個直觀的差距感，吸引用戶購買！那么這樣的刪除線效果是如何添加到文本文字上的？本章就給大家介紹html給文本文字添加刪除線的兩種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

首先我們來看看在html頁面上給文本文字添加刪除線效果的兩種方法分別是什么：

html <strike> 標簽元素實現(xiàn)文本文字添加刪除線效果；

html <del> 標簽元素實現(xiàn)文本文字添加刪除線效果；

下面我們具體來介紹這兩種方法是如何實現(xiàn)文本文字添加刪除線效果的，通過簡單的例子來介紹。

html <strike> 標簽

<strike> 標簽可定義加刪除線文本定義。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html <strike> 標簽</title>
	</head>
	<body>
		<p><strike>這是測試代碼，被刪除了</strike></p>
	</body>
</html>

效果圖：

1.jpg

如例子中所示，只要在<strike> 標簽中添加好文本文字，就可實現(xiàn)想要的效果。<strike> 標簽可以縮寫為<s> 標簽，實現(xiàn)的效果不變。

Netscape 和 Internet Explorer 都支持這兩種寫法。

注意：<strike> 標簽（<s> 標簽）在 HTML 4 和 XHTML 中已經(jīng)不再贊成使用了，意思就是不再使用了；早晚有一天將會消失。

一般都會建議不使用<strike> 標簽，而改為使用 <del> 標簽實現(xiàn)刪除線效果，下面我們就來介紹html <del> 標簽。

html <del> 標簽

<del> 標簽定義文檔中已被刪除的文本。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html <del> 標簽</title>
	</head>
	<body>
		<p>原價：<del>20</del>，現(xiàn)在促銷價：10</p>
	</body>
</html>

效果圖：

2.jpg

如例子中所示，<del> 標簽的使用和<strike> 標簽一樣都很簡單、方便。并且所有主流瀏覽器都支持 <del> 標簽。

注意：請與 <ins> 標簽配合使用，來描述文檔中的更新和修正。

總結(jié)：以上就是本篇文的全部內(nèi)容，其實除了用上述的兩種方法添加刪除線，還可以使用css來實現(xiàn)刪除線，同時設置刪除線樣式。后續(xù)文章【css如何添加刪除線？css text-decoration屬性設置刪除線（代碼實例）】中將會介紹如何使用css設置刪除線樣式。希望能對大家的學習有所幫助，更多相關(guān)教程請訪問 HTML視頻教程！

相關(guān)推薦：php公益培訓視頻教程

以上就是html如何給文本文字添加刪除線？兩種方法添加刪除線（實例）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。