如何給HTML標籤中的文字設定修飾線

text-decoration屬性介紹

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

text-decoration屬性值說明表

值	作用
none	去掉文字修飾線
underline	設定下劃線
overline	設定上劃線
line-through	設定刪除線

HTML標籤自帶修飾線

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

u標籤

下面讓我們進入u標籤的實踐，u標籤自帶的是文字下劃線。
程式碼塊

<!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>

結果圖

注意：u標籤也可以配合HTML中的其他標籤使用，舉例：將u標籤巢狀到h1標籤中使用。
程式碼塊

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

s標籤

下面讓我們進入s標籤的實踐，s標籤自帶的是文字刪除線。
程式碼塊

<!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>

結果圖

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

none去除修飾線

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

<!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>

結果圖

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

underline設定下劃線

讓我們進入text-decoration屬性的underline值實踐，實踐內容如：筆者將HTML頁面中的h2標籤中的文字設定一個下劃線。
程式碼塊

<!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>

結果圖

overline設定上劃線

讓我們進入text-decoration屬性的overline值實踐，實踐內容如：筆者將HTML頁面中的h2標籤中的文字設定一個上劃線。
程式碼塊

<!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>

結果圖

line-through設定刪除線

讓我們進入text-decoration屬性的line-through值實踐，實踐內容如：筆者將HTML頁面中的h2標籤中的文字設定一個刪除線。
程式碼塊

<!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標籤中的文字設定修飾線

text-decoration屬性介紹 text-decoration屬性是用來設定文字修飾線呢，text-decoration屬性一共有4個值。 text-decoration屬性值說明表值作用 none 去掉文字修飾線 underline 設定下劃線 overline 設定上

Js與標籤屬性關於在JS中設定標籤屬性 js和jquery通過this獲取html標籤中的屬性值

關於在JS中設定標籤屬性 2017-10-09 23:04 by 清風221, 12790 閱讀, 0 評論, 收藏, 編輯 Attribute 該屬性主要是用來在標籤行內樣式，新增、刪除、獲取屬性。且適用於自定義屬性。

為什麼給html標籤定義了id，就可以在js中（瀏覽器環境）直接通過id引用這個dom元素？

問題只要標籤有id這個屬性，不使用getElementById方法，也可以直接用id獲取dom元素。解惑經過一波搜尋及查資料，原因大概是：如果dom元素的id名稱不和js內

如何設定HTML頁面中文字的字型

字型屬性介紹 CSS中的字型屬性是幹什麼的呢？字型字型肯定和字型有關咯，就是設定HTML頁面中文字的字型， CSS中常用的字型屬性有幾種呢，筆者給大家梳理了下，比較常用的一共有5種，今天我們就看看這5種能給文字的字型帶來什麼效果呢。 CSS 字型屬性定義文字的字體系列、大小、加粗、風格（如斜體）。在CSS

html標籤中的一些小細節

有序列表: type的作用:可以根據type做選擇前期的符號為數字還是 a A字母還是I符號 reversed ="reversed" 倒著排序 start=“” 做判斷從第幾個開始排序無序列表 type值disc 為預設黑點

解決html標籤中有多個空格

設計圖如下：想著用如下程式碼： <div>引數產地功效</div> 雖然中間加了很多空格，但是實際效果就一個空格，想著有沒有空格標籤呢，最後發現只能用標籤符：“ ”  代表空格的轉意字元，如果有多

js給html標籤賦值

使用標籤為文字設定單獨樣式

這一小節講解<span>標籤，我們對<em>、<strong>、<span>這三個標籤進行一下總結： 1. <em>和<stron

使用jquery給input 標籤中新增屬性

現： 1.<input type="text" id=-"cert" /> 想要變成： 2.<input type="text" id="cert" readOnly="readOnly"> 在js中新增標籤 1轉換

AngularJS之如何傳遞可以識別HTML標籤的文字引數

使用$sce.trustAsHtml方法： HTML: <body ng-app="myApp" ng-controller="myCtl"> <div ng-bind-html="content"> </div> &l

webView載入url、html或者直接載入帶有html標籤的文字內容

webview的簡使用，首先是 webview.loadUrl()載入一個url地址，然後是 loadData() 或 loadDataWithBaseURL()載入一段HTML程式碼片段 web_view.getSettings().setDefaultTextE

html標籤中onclick()的引數是el表示式時的問題

當在html標籤中onclick()函式的引數是el表示式時，要把el表示式用單引號‘’引起來。因為如果你不加引號，那麼等於你的函式引數傳入是一個變數，但是這個變數又沒有定義如下例項所示：HTML：<a onclick="doCollect('${courseDto.

html標籤中lang屬性及xml:lang屬性的作用

zh-CN 中文 (簡體, 中國大陸) 對應 cmn-Hans-CN 普通話 (簡體, 中國大陸) zh-SG 中文 (簡體, 新加坡) 對應 cmn-Hans-SG 普通話 (簡體, 新加坡) zh-HK 中文 (繁體, 香港) 對應 cmn-Hant-HK 普通話 (繁體

關於JavaScript函式中的方法名與html標籤中的id名重複問題

今天開始學了JavaScript，最基本的函式的內嵌，寫了一個form， <form id="aaa" name="calcForm" action="#" method="post" onSubmit="calc()"> 被除數：<input type="

獲取extjs 元件中的html 標籤中的id

Ext.get("test").dom.value Extjs中一些元件的html配置（如Panel) html: '<div id="test"></div>'，怎麼樣獲取這個id為"test"的div，謝謝。<script type="te

html標籤中dl dd這個標籤的作用

ul ol li dl dt dd都是DIV+CSS做網頁長用的東西,相當於一棵樹的樹技,下面就瞭解一下這些東西的全體用法,本人用dd,dt,dd用得很少,懂得結合使用對做架構是很有好處的哦! DI

html標籤中id和name的區別

細說HTML元素的ID和Name屬性的區別可以說幾乎每個做過Web開發的人都問過，到底元素的ID和Name有什麼區別阿？為什麼有了ID還要有Name呢?! 而同樣我們也可以得到最classical的答案：ID就像是一個人的身份證號碼，而Name就像是他的名字，ID顯然是唯一的，而Name是可以重複的。上週我也

js獲取富文字中的第一張圖片url正則公式及去除字串裡面的html標籤的正則公式

js獲取富文字中的第一張圖片url正則公式及去除字串裡面的html標籤後臺發來一個富文字字串裡面可能包含了0、1、2、3…個圖片標籤（img）,我們的任務是獲取這個字串裡面第一張圖片的url，如果沒有圖片則返回空 var imgUrlFun = function(str){

angular~ 文字中支援html標籤

如何讓文字中的html便籤顯示？ template.filter('filterHtml',function($sce){ return function(html){ return $sce.trustAsHtml(html); }; }); <div c

去除富文字中的html標籤及vue、react、微信小程式中的過濾器

在獲取富文字後，又只要顯示部分內容，需要去除富文字標籤，然後再擷取其中一部分內容；然後就是過濾器，在微信小程式中使用還是挺多次的，在vue及react中也遇到過 1.富文字去除html標籤去除html標籤及空格 let richText = ' <p style

如何給HTML標籤中的文字設定修飾線

text-decoration屬性介紹

text-decoration屬性值說明表

HTML標籤自帶修飾線

u標籤

s標籤

none去除修飾線

underline設定下劃線

overline設定上劃線

line-through設定刪除線

相關推薦