如何給HTML標簽中的文本添加修飾線

本篇內容介紹了“如何給HTML標簽中的文本添加修飾線”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

十年的貢嘎網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網營銷的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整貢嘎建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“貢嘎網站設計”,“貢嘎網站推廣”以來，每個客戶項目都認真落實執(zhí)行。

text-decoration屬性介紹

text-decoration屬性是用來設置文本修飾線呢，text-decoration屬性一共有4個值。

text-decoration屬性值說明表

值 作用

none 去掉文本修飾線

underline 設置下劃線

overline 設置上劃線

line-through 設置刪除線

HTML標簽自帶修飾線

在開始實踐text-decoration屬性之前，筆者先給大家普及下HTML中的標簽自帶修飾線如：u標簽、s標簽，若有不全大家可以在下面評論中告訴筆者,畢竟筆者也是前端的一個小白,希望和大家相互交流，互幫互助，共同進步。

u標簽

下面讓我們進入u標簽的實踐，u標簽自帶的是文本下劃線。

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>設置文本修飾線</title>

</head>

<body>

<u>成功不是擊敗別人，而是改變自己</u>

</body>

</html>

結果圖

注意：u標簽也可以配合HTML中的其他標簽使用，舉例：將u標簽嵌套到h2標簽中使用。

<h2><u>成功不是擊敗別人，而是改變自己</u></h2>

s標簽

下面讓我們進入s標簽的實踐，s標簽自帶的是文本刪除線。

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>設置文本修飾線</title>

</head>

<body>

<s>成功不是擊敗別人，而是改變自己</s>

</body>

</html>

結果圖

注意：s標簽也可以嵌套，和u標簽一致，筆者就不過多的介紹了。

none去除修飾線

讓我們進入text-decoration屬性的none值實踐，實踐內容如：筆者將HTML頁面中的s標簽自帶的刪除線給去除掉。

代碼塊

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>設置文本修飾線</title>

<style>

s{

text-decoration:none;

}

</style>

</head>

<body>

<s>成功不是擊敗別人，而是改變自己</s>

</body>

</html>

結果圖

注意：u標簽、s標簽、包括text-decoration屬性值的所有的修飾線都可以去掉哦。

underline設置下劃線

讓我們進入text-decoration屬性的underline值實踐，實踐內容如：筆者將HTML頁面中的h3標簽中的文本設置一個下劃線。

代碼塊

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>設置文本修飾線</title>

<style>

h3{

text-decoration:underline;

}

</style>

</head>

<body>

<h3>成功不是擊敗別人，而是改變自己</h3>

</body>

</html>

結果圖

overline設置上劃線

讓我們進入text-decoration屬性的overline值實踐，實踐內容如：筆者將HTML頁面中的h3標簽中的文本設置一個上劃線。

代碼塊

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>設置文本修飾線</title>

<style>

h3{

text-decoration:overline;

}

</style>

</head>

<body>

<h3>成功不是擊敗別人，而是改變自己</h3>

</body>

</html>

結果圖

line-through設置刪除線

讓我們進入text-decoration屬性的line-through值實踐，實踐內容如：筆者將HTML頁面中的h3標簽中的文本設置一個刪除線。

代碼塊

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>設置文本修飾線</title>

<style>

h3{

text-decoration:line-through;

}

</style>

</head>

<body>

<h3>成功不是擊敗別人，而是改變自己</h3>

</body>

</html>
如何給HTML標簽中的文本添加修飾線

“如何給HTML標簽中的文本添加修飾線”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網站，小編將為大家輸出更多高質量的實用文章！

網站標題：如何給HTML標簽中的文本添加修飾線
當前鏈接：http://muchs.cn/article14/pgohge.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站收錄、企業(yè)建站、網站設計公司、服務器托管、動態(tài)網站、網站營銷

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網站建設