搜尋

首頁  >  文章  >  web前端  >  HTML 中的 Span 標籤

HTML 中的 Span 標籤

WBOY
WBOY原創
2024-09-04 16:25:35621瀏覽

HTML 中的 Span 標籤被視為內嵌元素。它與 div 標籤類似，但 div 標籤專門用於區塊級元素，而 span 用於內聯元素。它主要在使用者想要將內聯元素分組到其程式碼結構中時使用。 HTML 中的 Span 標籤用於透過使用元素 class 或 id 屬性為特定內容賦予樣式。使用 HTML 文件中的 span 標籤本身無法進行視覺變更。它用作 HTML 文件中的內聯標記。在程式碼中使用 span 標籤有助於減少程式碼和 HTML 屬性。

語法與範例

定義span標籤的語法如下：

文法：

<span class=""> Contents </span>
  • 如上所示，語法文字包含在開頭 內和結束標籤 被視為跨度屬性。
  • 這主要用於對內聯元素進行分組。它有助於最大限度地減少 HTML 文件中的程式碼。
  • 它的運作方式與 div 標籤類似，但主要區別是 div 用作區塊級元素，而 span 標籤用作 HTML 中的內聯標籤。
  • span 標籤本身無法提供視覺變化。
  • 它適用於 、、、、、 等標籤。還有更多。
  • 此標籤無法建立換行符，但它為使用者提供了將事物與其他元素分開的機會。因此，可以僅對選定的文字進行更改，而不是對整個程式碼進行更改。
  • 它只佔用所需的寬度，而不是佔據容器中的整個可用寬度。 span 標籤的最佳範例是屬性和圖像。它使用容器來儲存一些顯示跨度標籤使用的文字。
  • 在編碼中不需要一些特定的屬性；借助一些常見的CSS和類，我們可以定義一個span標籤。
  • 我們可以突出顯示某些特定文本，為文字套用背景顏色，並使用 HTML 的 span 標籤為文字添加背景圖像。
  • 也可以使用 span 標籤來變更文字的字體。它將幫助負責更改字體大小、顏色、背景顏色、字體樣式等

範例：

<!DOCTYPE html>
<html>
<head>
<title>Span tag in HTML </title>
<style>
.demo {
color: blue;
font-size: 200%;
position: relative;
top: 5px;
}
</style>
</head>
<body>
<p><span class="demo">О</span>Pride make us artificial and Humility make us real.</p>
<p>True fact about life </p>
</body>
</html>

輸出：

HTML 中的 Span 標籤

  • Span標籤沒有任何特定的屬性；和其他標籤一樣，它也支援全域屬性和事件屬性。

HTML 中 Span 標籤的屬性

以下是使用 應用樣式的一些屬性。如下：

  • CSS font-style: 用於將樣式套用於給定文字。文字應為普通、斜體、首字母、繼承等
  • CSS font-family：用於將給定清單中的不同字體類型套用至特定文字。
  • CSS font-size：將字體大小設為文字很有幫助。
  • CSS font-weight：此屬性用於設定字體為粗體或粗體。
  • CSS 文字轉換：它將使文字大寫。
  • CSS text-decoration：此屬性用於以文字裝飾線、文字裝飾顏色等形式對文字進行裝飾
  • CSS 顏色：span 標籤的此屬性用於為文字內容和文字裝飾著色。
  • CSS背景顏色：這是一個有用的屬性，用來設定元素的背景顏色。
  • CSS text-shadow:此屬性允許使用者為文字新增陰影。
  • CSS text-align-last：它將有助於文字對齊。
  • CSS 字間距：span 標籤中的此屬性用於管理單字之間的間距。
  • CSS空白：這個屬性幫助我們處理指定元素內的空白。
  • CSS line-height：它提供了 HTML 程式碼中的行高。
  • CSS 斷字：這個屬性幫助我們定義實際的換行位置。
  • CSS text-overflow：這是span標籤最有用的屬性，它幫助我們識別未顯示的溢出內容，這些內容應該向使用者發出訊號。

HTML 中的 Span 標籤範例

html中span標籤的範例如下：

範例#1

代碼：

<!DOCTYPE html>
<html>
<head>
<title>HTML Span Tag</title>
</head>
<style>
.imgdemo {
padding-left:25px;
background:url(./Content/data/2.jpg) no-repeat top left;
display: inline-block;
height: 150px;
width: 150px;
}
</style>
<body>
<!-- span tags with inline style/css  -->
<h2>Span tag with text color</h2>
<span style="color:brown;">
Do those things which makes your soul happy </span>
<br>
<h2> Span tag with background color</h2>
<span style="background-color:lightblue;">
Everybody have natural beauty. Try look at your picture when you are a baby. Your     eyes, eyebrows, lips, body. When you are smiling, crying, staring, etc. That it, you got     it.</span>
<br>
<h2> Span tag with background image</h2>
<br>
<span class="imgdemo" style="color: azure; font-size: 16px; font-display: block;">
Image as background</span>
</body>
</html>

輸出：

HTML 中的 Span 標籤

範例#2

代碼：

<!--Example 2-->
<!DOCTYPE html>
<html>
<head>
<title>HTML Span Tag</title>
</head>
<body>
<h2> Span tag Examples</h2>
<p>Good, Better, Best Never let it rest.
<span style="color:crimson;"> "Till your good is better and your better is best" </span></p>
<p>Everyday you have a choice -<span style="font-family: cursive; font-weight: 200; font-   size: 18px;">
STAY THE SAME OR CHANGE    </span>
</p>
<p>Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them."<span style="background-color: aqua ; color:darkblue;">
"Opportunities don't happen, you create them" </span></p>
</body>
</html>

輸出：

HTML 中的 Span 標籤

Example #3

Code:

<!DOCTYPE html>
<html>
<style>
.spandemo {
background:url(./Content/data/3.jpg) no-repeat top left;
display: inline-block;
padding-top: 20px;
width: 1800px;
height: 500px;
}
</style>
<body>
<h2> Span tag for image</h2> <br>
<span class="spandemo" style="color: aliceblue; font-weight: bold;">
<p> Nature always wears<br> Color of SPIRIT. </p> <br>
Heaven is under our feet <br>as well as over our heads <br>
<p> Deep in their roots,<br>all flowers Keep the light </p>
<p> My soul steers me<br> into nature's silence</p>
</span>
</body>
</html>

Output:

HTML 中的 Span 標籤

Conclusion

From all the above information, we came to know that the tag in HTML is used to give styling to inline elements. One can group this styling attribute and specifies them inline. Span tag mainly used to arrange structural sections and proper layout sections on our webpage with the help of inline CSS.

以上是HTML 中的 Span 標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html define for require break signal using class Attribute Property Event this overflow background transform word
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML 中的預標記下一篇：HTML 中的預標記

相關文章

看更多