Heim > Artikel > Web-Frontend > Fügen Sie dem Text in HTML-Tags dekorative Linien hinzu
Fügen Sie dem Text in HTML-Tags dekorative Linien hinzu
- angryTomnach vorne
- 2019-11-28 17:26:292412Durchsuche
Einführung in das Textdekorationsattribut
text-decorationDas Attribut wird zum Festlegen von Textdekorationslinien verwendet. text-decorationDas Attribut hat insgesamt 4 Werte.
Text-Dekoration-Attributwert-Beschreibungstabelle
(empfohlenes Lernen: HTML-Video-Tutorial)
| 值 | 作用 |
|---|---|
| none | 去掉文本修饰线 |
| underline | 设置下划线 |
| overline | 设置上划线 |
| line-through | 设置删除线 |
HTML-Tags haben ihre eigenen Modifikationszeilen
Bevor der Autor mit dem Üben des Textdekorationsattributs beginnt, wird er zunächst die Tags in HTML bekannt machen, die über eigene Modifikationszeilen verfügen, z als: u-Tag, s-Tag, wenn es etwas Unvollständiges gibt, kannst du es mir in den Kommentaren unten sagen. Schließlich bin ich auch ein Neuling im Frontend, ich hoffe, mit allen zu kommunizieren, einander zu helfen und Fortschritte zu machen zusammen.
u-Tag
Lassen Sie uns mit der Anwendung des u-Tags beginnen. Der u-Tag ist mit Textunterstreichungen ausgestattet.
<!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>
Ergebnisbild
Hinweis: Das u-Tag kann auch mit anderen Tags in HTML verwendet werden, zum Beispiel: Betten Sie das -Tag Verwenden Sie es im u-Tag. h1
<h1><u>成功不是击败别人，而是改变自己</u></h1>
s-Tag
Beginnen wir mit der Praxis des-Tags. Der s-Tag ist durchgestrichen. 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>Ergebnisdiagramm
-Tag kann auch verschachtelt werden, was mit dem s-Tag übereinstimmt, also werde ich es nicht tun. Ich stelle es nicht zu sehr vor. u
keine geänderte Zeilen entfernen
Lassen Sie uns die-Wertpraxis des text-decoration-Attributs eingeben. Der Übungsinhalt lautet wie folgt: Der Autor wird die ändern none-Seite >Die mit dem Tag versehene Durchstreichung wurde entfernt. HTMLsCodeblock
<!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>
Ergebnisbild
Hinweis:
-Tag, einschließlich u-Attributwert Alle dekorativen Linien können entfernt werden. stext-decoration
Geben Sie die
-Wertpraxis des-Attributs ein. Der Übungsinhalt lautet wie folgt: Der Autor wird das auf der Seite text-decoration Der Text im Etikett ist unterstrichen. underlineHTMLCodeblockh2
<!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>Ergebnisdiagramm
Overline-Einstellung Overline
Lass uns eintreten Die -Wertübung des
-Attributs. Der Übungsinhalt lautet wie folgt: Der Autor setzt eine Überstreichung auf den Text im-Tag auf der text-decoration-Seite. overlineHTMLCodeblockh2
<!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>Ergebnisdiagramm
Durchgestrichene Einstellung durchgestrichen
Let Wir geben die -Wertübung des
-Attributs ein. Der Übungsinhalt lautet wie folgt: Der Autor setzt eine Durchstreichung für den Text im h2-Tag auf der-Seite. text-decorationline-throughCodeblockHTML
<!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>Ergebnisbild
Dieser Artikel stammt von der chinesischen PHP-Website, Spalte 
HTML-Tutorial
Das obige ist der detaillierte Inhalt vonFügen Sie dem Text in HTML-Tags dekorative Linien hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!