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

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
推荐阅读
國慶假期幾号上班上海
國慶假期幾号上班上海
國慶假期幾号上班上海?東方網記者柏可林9月29日報道:國慶節可以登記結婚嗎?房産過戶在節假日期間能辦理嗎?銀行還開門受理業務嗎?出入境辦證窗口開放嗎?……,我來為大家科普一下關于國慶假期幾号上班上海?下面希望有你要的答案,我們一起來看看吧!...
2026-04-09
鼓舞人心在演講中的重要性
鼓舞人心在演講中的重要性
演講與你我息息相關。新生入學的自我介紹、小組内的發言、婚禮上的祝詞、作報告……任何公衆場合的公開講話都是演講。而大多數人,因為害怕露怯、焦慮,甯願不公開演講,從而錯失宣傳自己的機會;如果有機會走進世界上所有人的心,那麼我們一定能發現無數美好...
2026-04-09
白晶晶和至尊寶之間發生了什麼
白晶晶和至尊寶之間發生了什麼
看《大話西遊》,有人說,白晶晶那麼愛至尊寶,為什麼輸給了紫霞?個人覺得,這裡有兩個因素:1、白晶晶的愛是一種索求的愛,而紫霞的愛是無怨無悔的。2、至尊寶對白晶晶的愛,是一種執念,而對紫霞的愛,是一種惺惺相惜和虧欠。一、為什麼說白晶晶的愛是一...
2026-04-09
歡樂鬥地主基礎版
歡樂鬥地主基礎版
歡樂鬥地主作為騰訊QQ遊戲大廳最火的棋牌類遊戲,于2014年正式上線移動端,支持經典及癞子兩種普通玩法和挑戰賽玩法。遊戲現已在iOS/Android雙平台公測。2015年,《歡樂鬥地主》在原有基礎玩法之上,進行大幅更新,上線尋寶體系、角色體...
2026-04-09
挂職鍛煉後提拔要面試嗎
挂職鍛煉後提拔要面試嗎
高山人/2021.7.8在我的印象裡,通常挂職鍛煉的幹部,是已經有了提拔意向,隻是在某些方面還需要充實鍛煉一下。故而,相比于留在本單位要提拔得更快些。其實挂職也有“上挂”與“下挂”之分。上挂即指到上級部門或單位挂職鍛煉,下挂則是指到基層單位...
2026-04-09
Copyright 2023-2026 - www.tftnews.com All Rights Reserved