首页
/
每日頭條
/
圖文
/
在html中設置頁面元素信息的标記
在html中設置頁面元素信息的标記
更新时间:2026-03-09 14:29: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
推荐阅读
清明節有說話禁忌嗎
清明節有說話禁忌嗎
前天去參加一位本家大爺的葬禮,我們這裡都是在櫃書上完禮後,在右胳膊(逝者男則左女則右)上記上白布,就可以去靈堂磕頭祭拜。但幫忙的人告訴我,祭拜時不要磕頭,可以鞠躬,我感覺不合常規,轉念一想,可能我這位大爺在世時信教。我來到靈堂祭拜,在行鞠躬...
2026-03-09
适合朋友圈發自己的說說
适合朋友圈發自己的說說
适合朋友圈發自己的說說?一、其實,許多事從一開始就已料到了結局,往後所有的折騰,都不過隻是為了拖延散場的時間,下面我們就來聊聊關于适合朋友圈發自己的說說?接下來我們就一起去了解一下吧!适合朋友圈發自己的說說一、其實,許多事從一開始就已料到了...
2026-03-09
什麼帳篷戶外露營安全最好
什麼帳篷戶外露營安全最好
#露營帳篷##露營#現在露營這麼火,帳篷種類繁多,很多露營小白都很苦惱到底選什麼類型的的帳篷,在這裡為大家總結好了8種帳篷類型,讓你選好帳篷避雷不采坑,八種類型總有一款适合你!一.金字塔帳篷金字塔帳篷顔值聚堆是帳篷裡的天花闆,很适合曬圈...
2026-03-09
高溫天氣下戴口罩這些細節要講究
高溫天氣下戴口罩這些細節要講究
高溫天氣下戴口罩這些細節要講究?本市社會面近日仍有陽性感染者報告,專家提醒廣大市民:夏日炎炎,請市民朋友堅持做好個人防護即便氣溫走高,戴口罩開始覺得悶熱難受,也請市民務必堅持科學佩戴,不容一絲松懈和僥幸心理,我來為大家科普一下關于高溫天氣下...
2026-03-09
蘋果iphone13價格再創新低
蘋果iphone13價格再創新低
蘋果iphone13價格再創新低?前段時間蘋果開啟了暑期教育返校季優惠活動,這也是很多學生或者教師用戶們很期待的蘋果暑期優惠,現在小編就來說說關于蘋果iphone13價格再創新低?下面内容希望能幫助到你,我們來一起看看吧!蘋果iphone1...
2026-03-09
Copyright 2023-2026 - www.tftnews.com All Rights Reserved