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

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
推荐阅读
中通快遞哪年業務量突破200億
中通快遞哪年業務量突破200億
澎湃新聞記者邵冰燕随着價格競争放緩,擴大市場份額成中通快遞業務發展的重要方向。2022年6月25日,上海,中通快遞。IC資料圖8月18日,中通快遞(開曼)有限公司(中通快遞,ZTO.N,2057.HK)公布其截至2022年6月30日第二季度...
2025-12-05
海爾營銷渠道戰略
海爾營銷渠道戰略
"海爾"無疑是當今我國企業界的一顆耀眼的明星,它的成功是由許多因素造成的,但其正确而超前營銷戰略則具有決定性作用。海爾從創建之初到今天,營銷戰略在三個方面發生了根本變化,而且這種變化代表了市場經濟走向成熟時企業營銷戰略的發展方向。另外,海爾...
2025-12-05
祛濕氣的花茶推薦
祛濕氣的花茶推薦
秋意漸濃但餘熱未消這時節最容易因幹燥引發上火上火雖是小事但也會讓我們很煩惱..所以記得多吃點祛火花草茶哦。不過人有四把火,喝花草茶降火,不同的火應該喝不一樣的花草茶,這個就很少有人知道了。胃火典型症狀:痘痘長、牙龈腫、口角爛胃火,即是胃熱....
2025-12-05
怎麼理解舍得的含義
怎麼理解舍得的含義
本圖片來源于網絡南建龍不愧是當過副院長的文化人,他的一句話道出了《小舍得》這部劇的真谛。不過,很多觀衆都在想,如果南建龍能夠給南俪一個完整的家,南俪還會如此焦慮嗎?由演員宋佳、佟大為、蔣欣、李佳航、張國立、單禹豪、劉楚恬、武澤錦熙聯合參演的...
2025-12-05
清園用石硫合劑怎麼樣
清園用石硫合劑怎麼樣
所謂清園,相信各位果友都不陌生,指的就是當果樹進入冬眠期到萌芽期的這段時間内,把果園裡的病葉病枝清除掉、老樹皮刮除掉,還有噴施殺菌劑和殺蟲劑來消滅越冬的害蟲以及防止病害的發生。清園可在冬季進行也可在春季進行,有部分果農認為冬季清園和春季清園...
2025-12-05
Copyright 2023-2025 - www.tftnews.com All Rights Reserved