a标签去下划线菜鸟教程_HTML下划线标签示例教程

最新推荐文章于 2021-12-20 10:01:52 发布

cunjiu9486

最新推荐文章于 2021-12-20 10:01:52 发布

阅读量3.3k

点赞数

文章标签： html css python vue html5 ViewUI

原文链接：https://www.poftut.com/html-underline-tag-tutorial-with-examples/

版权

a标签去下划线菜鸟教程

HTML provides different styling options for the text. Underlining the HTML text is one of them. Simply underlining will draw a straight line under the text without occupying the line below. In this tutorial, we will learn the how-to underline the HTML text with tag, CSS code, CSS class, and set the underlining properties and alternatives.

HTML为文本提供了不同的样式选项。强调HTML文本就是其中之一。简单的下划线将在文本下方绘制一条直线，而不会占用下面的线。在本教程中，我们将学习如何使用标签，CSS代码，CSS类在HTML文本下划线，并设置下划线属性和替代方法。

带标记的下划线文本 (Underline Text with Tag)

HTML provides the tag in order to underline the given text in HTML. is the start tag for underlining and is used to set the end of the underline. Underline tags can be used for different text types like hyperlinks, bold text, etc without a problem. In the following example, we will underline a single word or complete sentence or a hyperlink. The or underline HTML tag is supported by all major browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, or Opera.

HTML提供标记，以便在HTML中给定的文本加下划线。 是下划线的开始标记，用于设置下划线的结束。下划线标签可用于各种文本类型，例如超链接，粗体文本等，而不会出现问题。在以下示例中，我们将在单个单词或完整句子或超链接下划线。所有主要浏览器(例如Google Chrome，Mozilla Firefox，Microsoft Edge，Safari或Opera)都支持或下划线HTML标签。

<html>
<body>

  <h1>HTML Text Underline Example</h1>

  <p>I like <u>poftut.com</u></p>

  <p><u>I like poftut.com</u></p>

  <p>I like <u><a href="https://www.poftut.com">poftut.com</a></u></p>

  <p><u><a href="https://www.poftut.com">I like poftut.com</a></u></p>

</body>
</html>

带CSS文本修饰属性的下划线文本 (Underline Text with CSS text-decoration Attribute)

CSS provides the text-decoration attribute in order to underline different HTML elements. We can use the text-decoration attribute in order to underline HTML text. The text-decoration style attribute can be used with different HTML tags or elements. In the following example we have used the tag to select the text and underline it.

CSS提供了text-decoration属性，以便在不同HTML元素下划线。我们可以使用text-decoration属性为HTML文本加下划线。文本装饰样式属性可以与不同HTML标签或元素一起使用。在下面的示例中，我们使用了标记来选择文本并在其下划线。

<html>
<body>

  <h1>HTML Text Underline Example</h1>

  <p>I like <span style="text-decoration:underline">poftut.com</span></p>

  <p><span style="text-decoration:underline">I like poftut.com</span></p>

  <p>I like <span style="text-decoration:underline"><a href="https://www.poftut.com">poftut.com</a></span></p>

  <p><span style="text-decoration:underline"><a href="https://www.poftut.com">I like poftut.com</a></span></p>

</body>
</html>

Underline Text with CSS text-decoration Attribute

设置文字下划线颜色和样式(Set Text Underline Color and Style)

In some cases just underlining the HTML text may not enough. We can also color or change the style of the underline. CSS attribute text-decoration can be used to style and color the underlines with the tag or without it. Below we will provide the HTML text underline color as red, green and the style as wavy, dashed, dotted, and double.

在某些情况下，仅对HTML文本加下划线可能还不够。我们还可以为下划线上色或更改其样式。 CSS属性text-decoration可用于带有标记或不带有标记的下划线样式和颜色。在下面，我们将提供HTML文本下划线颜色为红色，绿色，以及样式为波浪形，虚线，点划线和双精度。

wavy style will create the not a straight line where the line will be wavy like waves.

wavy将创建一条非直线，直线将像波浪一样呈波浪形。

dashed style will create dashed underline.

dashed样式将创建虚线下划线。

dotted style is similar to the dashed but the points will be smaller.

dotted样式与虚线类似，但点数较小。

double style will put two underlines where default is single underline.

double样式将放置两个下划线，其中默认为单个下划线。

The red color and dashed underline can be used for expressing spelling, syntax or general errors. Also dotted

红色和带下划线的下划线可用于表示拼写，语法或常规错误。也dotted

<html>
<body>

  <h1>HTML Text Underline Example</h1>

  <p>I like <u style="text-decoration: red underline">poftut.com</u></p>

  <p><u style="text-decoration: red wavy underline">I like poftut.com as wavy</u></p>

  <p><u style="text-decoration: green wavy underline">I like poftut.com as wavy</u></p>
  
  <p>I like <u style="text-decoration: red dashed underline">poftut.com as dashed</u></p>
  
  <p><u style="text-decoration: red dotted underline">I like poftut.com as wavy</u></p>
  
  <p><u style="text-decoration: red double underline">I like poftut.com as wavy</u></p>

</body>
</html>

将CSS类用于HTML文本下划线 (Use CSS Class For HTML Text Underline)

Writing every underline CSS code, again and again, is not good work. A CSS class can be created for different underline use cases and this class can be used for HTML text underline with other HTML tags. In the following example we will create different CSS classes like underline-red, underline-green to create text underline easily.

一次又一次地写下划线CSS代码并不是一件好事。可以为不同的下划线用例创建CSS类，并且该类可用于带有其他HTML标记HTML文本下划线。在下面的示例中，我们将创建不同CSS类(例如，下划线红色，下划线绿色)以轻松创建文本下划线。

<html>
<head>
  <style>
    .underline-red { text-decoration: red underline;}
    .underline-green { text-decoration: green underline;}
  </style>
</head>
<body>

  <h1>HTML Text Underline Example</h1>

  <p class="underline-red">I like poftut.com</p>
  
  <p class="underline-green">I like poftut.com</p>

</body>
</html>

翻译自: https://www.poftut.com/html-underline-tag-tutorial-with-examples/

a标签去下划线菜鸟教程

cunjiu9486

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
a标签去下划线菜鸟教程_HTML下划线标签示例教程

a标签去下划线菜鸟教程HTML provides different styling options for the text. Underlining the HTML text is one of them. Simply underlining will draw a straight line under the text without occupying the line below...
复制链接

扫一扫