首页
/
每日頭條
/
圖文
/
在html中設置頁面元素信息的标記
在html中設置頁面元素信息的标記
更新时间:2025-12-02 06:08:53

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
推荐阅读
與清明有關的小故事幼兒
與清明有關的小故事幼兒
與清明有關的小故事幼兒?純屬亂編,寫着玩清明時節雨紛紛,路上行人欲斷魂,下面我們就來說一說關于與清明有關的小故事幼兒?我們一起去了解并探讨一下這個問題吧!與清明有關的小故事幼兒純屬亂編,寫着玩!清明時節雨紛紛,路上行人欲斷魂。往年的清明都伴...
2025-12-02
吃什麼變堿性體質最快
吃什麼變堿性體質最快
強堿:牛乳、胡瓜、紅蘿蔔,柑子、蘿蔔、蕃茄、菠菜、葡萄、葡萄幹、黑胡麻、昆布、芋、無花果、茶葉、海帶、柑橘類、柿子、黃瓜、胡蘿蔔、核桃。弱堿:馬鈴薯、高麗菜、養樂多、南瓜、蓮荔、蘋果、香蕉、鳳梨、櫻桃。菜燕、梨、桃蘿蔔幹、紅蘿蔔、大豆、蕃茄...
2025-12-02
如何确定悶騷男是否喜歡你
如何确定悶騷男是否喜歡你
男人心思深沉,嘴巴很重,可以用“悶騷”來形容,别看他一棍子打不出一個屁來,其實心裡可藏了很多想法。“他是暗戀我,還是隻把我當朋友?”當女人稍微感覺到男人對自己好一些,都會自作多情地冒出這個念頭和疑問。女人都自信于自己的魅力,也不希望自己隻是...
2025-12-02
成都一已婚男子出軌同事
成都一已婚男子出軌同事
妻子與他人有染被丈夫識破,丈夫反而逼妻子将男子約到家中,毆打并勒索5萬元錢。日前,甘南縣公安局以涉嫌敲詐勒索罪将犯罪嫌疑人刑事拘留。網絡配圖,圖文無關我們把當事人雙方化名為謝光庫和王二拿。謝光庫和王二拿家住甘南縣東陽鎮,兩家是鄰居又是遠親,...
2025-12-02
華為發布新p40怎麼樣
華為發布新p40怎麼樣
華為P系列的發布日期及地點,似乎已經成為了華為的一個傳統。2019年的3月26日,華為在巴黎發布了P30系列,将手機拍照倍率延伸到了50倍。而在一年後的今天,華為同樣選擇在巴黎發布P40系列。唯一不同的地方在于,今年華為這場全球發布會是在線...
2025-12-02
Copyright 2023-2025 - www.tftnews.com All Rights Reserved