首页
/
每日頭條
/
圖文
/
在html中設置頁面元素信息的标記
在html中設置頁面元素信息的标記
更新时间:2026-09-05 17:39:25

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
推荐阅读
卡地亞手表可以7天無理由退貨嗎(消費維權速報新表一次未戴卻被拒絕退貨)
卡地亞手表可以7天無理由退貨嗎(消費維權速報新表一次未戴卻被拒絕退貨)
  近日,消費者張女士向澎湃質量觀投訴平台(http://tousu.thepaper.cn)反映,2023年4月2日,她在卡地亞上海港彙恒隆精品店購買了一塊藍氣球腕表,花費45400元。次日,由于個人原因,張女士向銷售提出退貨退款。   張女士表示,自己沒有佩戴過該腕表,但退貨檢驗時,銷售告知表殼有劃痕,不符合退貨标準。當時她肉眼無法判斷是否有明顯劃痕,于...
2026-09-05
有話說随遇而安(小議随遇而安)
有話說随遇而安(小議随遇而安)
  #情感點評大賞#   文/王民官      《幽窗小記》中有這樣一副對聯:“寵辱不驚,閑看庭前花開花落。去留無意,漫随天外雲卷雲舒。”這句話的意思是說,為人做事能視寵辱如花開花落般平常,才能不驚;視職位去留如雲卷雲舒般變幻,才能無意。   看起來,人生雖然存滿了荊棘與挫折,教訓與失敗,但拿這句話一對照,就瞬時感覺天空飄來五個字:那都不叫事。“是事兒也就煩...
2026-09-05
巨龍咆哮卡組(巨龍咆哮龍牧歸來)
巨龍咆哮卡組(巨龍咆哮龍牧歸來)
  新版本中,牧師大部分都以恩佐斯環牧和克蘇恩牧的形态征戰天梯,而最近歐服玩家用一套微調過的龍牧卡組成功登頂歐服第一,讓我們一起來看看吧~      【卡組詳情】      【卡牌選擇】   這套牌在傳統龍牧的基礎上增加了2張古神新卡,禁忌畸變和變幻之影。   禁忌畸變:很多人覺得這張卡随機性太大,但是相對的在龍牧卡組中這張牌能帶來更多的變化。當你手中卡着一...
2026-09-05
迪士尼收購福克斯不再制作電影(二十世紀福克斯)
迪士尼收購福克斯不再制作電影(二十世紀福克斯)
  參考消息網1月19日報道美媒稱,迪士尼公司一名發言人說,該公司重新命名了2019年收購的二十世紀福克斯影業公司,去掉了“福克斯”,将其更名為“二十世紀影業公司”。   據美國《華爾街日報》網站1月17日報道,迪士尼還把二十世紀福克斯下屬的子公司、傳統上以出品低預算的藝術電影著稱的“福克斯探照燈電影公司”更名為“探照燈電影公司”。   報道稱,這一變化在兩...
2026-09-05
故宮中的養心殿是用來幹什麼的(故宮最精美的養心殿将閉門精修)
故宮中的養心殿是用來幹什麼的(故宮最精美的養心殿将閉門精修)
  故宮博物院院長單霁翔說:“養心殿是故宮最精美、工藝難度最高的建築,因為有了修複壽康宮、慈甯宮的經驗,這才敢啟動養心殿的修繕。”      圖為養心殿中慈禧垂簾聽政的地方。 文彙報首席記者 江勝信攝   ■文彙報首席記者 江勝信   故宮城牆暗藏險情,養心殿出現多處隐患,古建修繕人才卻青黃不接,怎麼辦?故宮文物總數超過180萬件套,因前殿後宮不可能大規模改...
2026-09-05
Copyright 2023-2026 - www.tftnews.com All Rights Reserved