tft每日頭條

 > 圖文

 > 在html中設置頁面元素信息的标記

在html中設置頁面元素信息的标記

圖文 更新时间:2025-01-08 15:48:15

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
查看全部
上一页 下一页
310108是哪個區...
加速去甲醛的方法

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

關于
條款和條件 隱私政策 Cookie 設置
服務
登陸 注冊 聯系我們
tft每日頭條 美食 生活 職場 母嬰 時尚 科技 汽車
友情鏈接
zpostcode Recruit weather mreligion Yellowpages sport constellation shopping name game directory literature Word tour furnish Lottery tftnews lyrics News digital car dir Edu Finance
Copyright 2023-2025 - www.tftnews.com All Rights Reserved