首页
/
每日頭條
/
圖文
/
在html中設置頁面元素信息的标記
在html中設置頁面元素信息的标記
更新时间:2026-02-16 06:07:29

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
推荐阅读
地球有幾種毀滅的可能性
地球有幾種毀滅的可能性
相信大家都知道,我們人類賴以生存的地球,已經存在有四十六億年了。在這漫長的時間裡,我們的地球不停地在發生改變。這些改變有些來自地球本身,比如地殼運動,地質變化什麼的。這些地球自身的改變,在某種程度上給地球上生物的出現和進化,帶來了非常大的好...
2026-02-16
為什麼黃鼠狼是老鼠的真正的克星
為什麼黃鼠狼是老鼠的真正的克星
生活經驗告訴我們有毛的生物比秃噜毛的要可愛得多所以不要再嫌棄自己的胳膊毛和腿毛了一個優秀的攝影師要時刻考慮客戶的需求當然,就算這隻汪汪有意見,也沒啥用當代綠茶發言你損失的隻是金錢,但是那隻雞損失的是生命啊但是看在它被做的很好吃的份上,也算沒...
2026-02-16
紅樓夢裡的秦鐘怎麼死的
紅樓夢裡的秦鐘怎麼死的
秦鐘死後,智能兒的出路到底在哪裡?曹雪芹:不是堕落,就是回來了智能兒是紅樓夢中的小尼姑,卻愛上了秦可卿的弟弟秦鐘。在秦可卿的喪禮辦理期間,秦鐘與智能兒在饅頭庵私會纏綿,後秦鐘回去染了風寒,智能兒不顧庵中規矩,私自逃走去看望秦鐘,不曾想被秦鐘...
2026-02-16
微信支付分466分能開通嗎
微信支付分466分能開通嗎
微信虛拟信用這塊啥時候才能開啊……對互聯網信用體系認可度極高的小獅子不止一次抱怨過微信在虛拟信用這塊動作太慢,中午,同事傳來消息——微信“支付分”可強行開啟了!注:強行開啟手段有些偏,開啟過程一定要格外謹慎!北上廣深灰度測試中的“微信支付分...
2026-02-16
寫出四個含狐的成語
寫出四個含狐的成語
第一個字是狐狐假虎威、狐朋狗友、狐狸尾巴、狐死首丘、狐鼠之徒狐群狗黨、狐兔之悲、狐死兔泣、狐疑不決、狐埋狐搰狐媚猿攀、狐鳴魚書、狐不二雄、狐藉虎威、狐朋狗黨狐媚魇道、狐虎之威、狐裘蒙戎、狐裘蒙茸、狐奔鼠竄狐潛鼠伏、狐假鸱張、狐疑不定、狐綏鸨...
2026-02-16
Copyright 2023-2026 - www.tftnews.com All Rights Reserved