在html中設置頁面元素信息的标記-tft每日頭條

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