首页
/
每日頭條
/
圖文
/
在html中設置頁面元素信息的标記
在html中設置頁面元素信息的标記
更新时间:2025-12-26 23:54:37

text-decoration屬性介紹#

  • text-decoration屬性是用來設置文本修飾線呢,text-decoration屬性一共有4個值。

text-decoration屬性值說明表#

值作用none去掉文本修飾線underline設置下劃線overline設置上劃線line-through設置删除線

HTML标簽自帶修飾線#

  • 在開始實踐text-decoration屬性之前,筆者先給大家普及下HTML中的标簽自帶修飾線如:u标簽、s标簽,若有不全大家可以在下面評論中告訴筆者,畢竟筆者也是前端的一個小白,希望和大家相互交流,互幫互助,共同進步。

u标簽#

  • 下面讓我們進入u标簽的實踐,u标簽自帶的是文本下劃線。
  • 代碼塊

Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設置文本修飾線</title> </head> <body> <u>成功不是擊敗别人,而是改變自己</u> </body> </html>

  • 結果圖

在html中設置頁面元素信息的标記(如何給HTML标簽中的文本設置修飾線)1

  • 注意:u标簽也可以配合HTML中的其他标簽使用,舉例:将u标簽嵌套到h1标簽中使用。
  • 代碼塊

Copy<h1><u>成功不是擊敗别人,而是改變自己</u></h1>


s标簽#

  • 下面讓我們進入s标簽的實踐,s标簽自帶的是文本删除線。
  • 代碼塊

Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設置文本修飾線</title> </head> <body> <s>成功不是擊敗别人,而是改變自己</s> </body> </html>

  • 結果圖

在html中設置頁面元素信息的标記(如何給HTML标簽中的文本設置修飾線)2

  • 注意:s标簽也可以嵌套,和u标簽一緻,筆者就不過多的介紹了。

none去除修飾線#

  • 讓我們進入text-decoration屬性的none值實踐,實踐内容如:筆者将HTML頁面中的s标簽自帶的删除線給去除掉。
  • 代碼塊

Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設置文本修飾線</title> <style> s{ text-decoration: none; } </style> </head> <body> <s>成功不是擊敗别人,而是改變自己</s> </body> </html>

  • 結果圖

在html中設置頁面元素信息的标記(如何給HTML标簽中的文本設置修飾線)3

  • 注意:u标簽、s标簽、包括text-decoration屬性值的所有的修飾線都可以去掉哦。

underline設置下劃線#

  • 讓我們進入text-decoration屬性的underline值實踐,實踐内容如:筆者将HTML頁面中的h2标簽中的文本設置一個下劃線。
  • 代碼塊

Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設置文本修飾線</title> <style> h2{ text-decoration: underline; } </style> </head> <body> <h2>成功不是擊敗别人,而是改變自己</h2> </body> </html>

  • 結果圖

在html中設置頁面元素信息的标記(如何給HTML标簽中的文本設置修飾線)4


overline設置上劃線#

  • 讓我們進入text-decoration屬性的overline值實踐,實踐内容如:筆者将HTML頁面中的h2标簽中的文本設置一個上劃線。
  • 代碼塊

Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設置文本修飾線</title> <style> h2{ text-decoration: overline; } </style> </head> <body> <h2>成功不是擊敗别人,而是改變自己</h2> </body> </html>

  • 結果圖

在html中設置頁面元素信息的标記(如何給HTML标簽中的文本設置修飾線)5


line-through設置删除線#

  • 讓我們進入text-decoration屬性的line-through值實踐,實踐内容如:筆者将HTML頁面中的h2标簽中的文本設置一個删除線。
  • 代碼塊

Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設置文本修飾線</title> <style> h2{ text-decoration: line-through; } </style> </head> <body> <h2>成功不是擊敗别人,而是改變自己</h2> </body> </html>

  • 結果圖

在html中設置頁面元素信息的标記(如何給HTML标簽中的文本設置修飾線)6

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
河南各個縣名字難讀(能全部讀對名字的人)
河南各個縣名字難讀(能全部讀對名字的人)
  每一座城市,都有屬于它自身的特色。它們或者并不是那麼出名,但總有一些風土人情或自然風光令人向往。   但是,想去某個地方旅行,你可别首先就被該地的名字給難倒了。今天,小南就來跟大家聊聊河南境内,外地人非常容易讀錯名字的6座縣城。   一、武陟(zhì)縣  武陟位于河南省西北部,是焦作市的下轄縣。武陟縣曆史悠久,據資料記載,隋開皇十六年(即公元596年)...
2025-12-26
賤名怎麼起(诨名趣話)
賤名怎麼起(诨名趣話)
  诨名趣話原創 許文明      1   人民公社化時,隊為基礎,一個生産隊就是一個大家庭。那時,凡能頂得上勞力、半勞力的男女社員,年頭到年尾在一起勞動,朝聚暮散,同頂一片藍天,同享大自然的溫涼。社會體制把人們的命運熔鑄在了一起。   生産隊,這個特殊的團體,就像一個話劇團,一個歌劇團,一個雜技團,更像一個綜合的曲藝團。而每一個人民公社社員,幾乎全部都是演...
2025-12-26
家庭應該準備多少現金流(我該如何獲得自由)
家庭應該準備多少現金流(我該如何獲得自由)
     人人都有故事   這是有故事的人發表的第1139個作品   作者:小土豆也能發芽   配圖:網絡(除注明外)   一2018年11月末,我被家裡趕出來,開始了一個人租房的日子。房子租在單位對面,每天上下班隻需要步行幾百米。日子過得不錯,每天笑呵呵的。但快樂隻持續到今年年初,我媽給我打電話,說家裡的珍珠鳥死了。   我家有三隻珍珠鳥,剛開始我隻養了一...
2025-12-26
一分鐘了解衛生巾(關于衛生巾的一切)
一分鐘了解衛生巾(關于衛生巾的一切)
     寫在前面   衛生巾再次在網絡上引起熱議,這已經是今年第二次大規模讨論。對女性來說,這是一個平常不過卻又值得嚴肅讨論的話題。事關女性健康,對于衛生巾,不僅是每一位女性,女性身邊的他,更應該了解這一切。   近日,#散裝衛生巾#的話題不斷發酵,詞條被閱讀了13.7億次以上。      三無衛生巾、女性月經貧困、女性月經健康等各種問題都得到了廣泛讨論。...
2025-12-26
北轅南轍電視劇鄭業成路透(鄭業成再迎新劇一念永恒)
北轅南轍電視劇鄭業成路透(鄭業成再迎新劇一念永恒)
  《北轍南轅》後,鄭業成再迎新劇《一念永恒》,搭檔孫怡、劉海寬   最近,《北轍南轅》正在熱播。值得關注的是,該劇雖然熱度很高,但口碑卻很一般,目前評分隻有4.7分。不過,這也絲毫沒能阻止觀衆對這部劇的喜愛,上線11天,在熱度榜上也從未跌出過TOP3,俨然掀起了追劇熱潮。         大咖相繼客串讓這部劇“彩蛋”不斷,宋丹丹、黃渤、張一山、朱一龍等大咖...
2025-12-26
Copyright 2023-2025 - www.tftnews.com All Rights Reserved