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

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
推荐阅读
野狼disco 為什麼這麼火(野狼disco為什麼很火)
野狼disco 為什麼這麼火(野狼disco為什麼很火)
  有這麼一首歌,最近在各大 短視頻平台 很火   聽第一遍時感覺很土   聽第二遍時就要搖頭   聽第三遍時就要畫龍、畫彩虹   聽第四遍時,感覺這是歌手 面對失落時,的反抗   聽第五遍時 感覺到歌手 在鼓勵人們 重新振奮   聽第六遍時 可能會讓你流淚、這可真是、土到極緻便是潮、嗨到深處亦悲傷      這首歌畫面感 确實很強。完整的故事,迪斯科的搖擺...
2025-12-12
貝加爾湖畔音樂介紹(怎樣評價貝加爾湖畔這首歌)
貝加爾湖畔音樂介紹(怎樣評價貝加爾湖畔這首歌)
  初聽不識曲中意,再聽已是曲中人。或許是因為一段曾以為會很長久很長久的感情忽然終止,聽一些對舊事和感情回憶的歌曲都能讓我不受控制的把自己帶入。如果年少的自己不那麼計較,多一些體諒,或許的或許,會有不一樣的結局呢,或許的或許,不會錯過呢,青蔥的我,單純的你。以前還沒分手的時候,我隻是覺得這首歌的旋律好聽,還以為是寫貝加爾湖的甯靜美麗呢。現在才懂,那是對美好的...
2025-12-12
香港雙胞胎組合aoa(24小時AOA
香港雙胞胎組合aoa(24小時AOA
  AOA出席2018平昌冬季殘奧會成功舉辦祈願慶祝活動               5日據消息,OHMY GIRL正在以4月份回歸為目标準備新專中。OH MY GIRL憑借着1月份發布的歌曲《秘密庭院》被大家稱為“妖精豆”,備受喜愛。本次OHMY GIRL将時隔3個月發布新專,減少空白期,愉快地與粉絲們進行溝通。據悉新專中OH MYGIRL将以全新的概念展...
2025-12-12
剛做了人工流産應該注意哪些事項(女性做完人工流産手術後)
剛做了人工流産應該注意哪些事項(女性做完人工流産手術後)
  女性做完人工流産手術後   要注意哪些事項?   1、保持外陰的清潔,嚴禁同房。人工流産術後若過早同房,易造成急性子宮内膜炎、盆腔炎,還可繼發不孕。因此,人工流産術後一月内嚴禁房事。      2、注意休息,加強營養。人工流産術後應卧床休息2—3天,再下床活動,逐漸增加活動時間。   3、觀察出血情況。人工流産術後陰道流血超過一周以上,甚至伴有下腹痛、發...
2025-12-12
為什麼小人得志後會更小人(小人得志時最睿智的做法)
為什麼小人得志後會更小人(小人得志時最睿智的做法)
  世界上有兩種人,君子和小人。   君子清如水,心地善良,所作所為都是拿得出手的。而小人心懷詭計,喜歡制造麻煩,隻要涉及自己利益的事就會不擇手段。   不過,雖然我們都能說出君子和小人的區别,但是所謂“知人知面不知心”,總會有小人出現在自己的生活裡,避之不及。這時候如何應對也值得思索。   有一句話說得好“你被瘋狗咬了,難道會咬回去嗎?”如何應對小人是一門...
2025-12-12
Copyright 2023-2025 - www.tftnews.com All Rights Reserved