HTML - <span> 標籤

HTML <span> 標籤是一個用於對文字進行短語化的內聯容器。我們可以使用 CSS 輕鬆地為 span 標籤設定樣式，並且可以使用類或 ID 屬性透過 JavaScript 輕鬆地操作它。

它應該僅在沒有其他語義元素適合時使用。<span> 標籤與 <div> 標籤不同，<div> 標籤是塊級元素，而 <span> 是內聯元素。它用於對內聯元素進行分組和應用樣式。

語法

<span>.....</span>

屬性

HTML span 標籤支援 HTML 的全域性和事件屬性。

HTML span 標籤示例

下面的示例將說明 span 標籤的使用方法。在哪裡、何時以及如何使用 span 標籤來標記文字的一部分。

建立 span 元素

在下面的程式中，我們使用 HTML <span> 標籤建立了多個 span，以標記 HTML 中的部分文字或內容。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML span tag</title>
</head>

<body>
   <h3>Tutorialspoint</h3>
   <!-- Creating span Element -->
   <p>Easy Simply Learning on <span>Tutorialspoint.</span></p>
</body>

</html>

設定 span 元素的樣式

以下是 HTML <span> 標籤的另一個示例。在這裡，我們建立了多個輸入欄位以獲取使用者輸入，並使用 <span> 標籤為每個輸入欄位標記部分文字或內容。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML span tag</title>
    <style>
        span {
            color: green;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <h3>Tutorialspoint</h3>
    <!-- Creating span Element -->
    <p>Easy Simply Learning on <span>Tutorialspoint.</span></p>
</body>

</html>

解析 span 元素

讓我們看下面的例子，我們將執行一個指令碼用於解析 <span> 標籤中使用的內容。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML span Tag</title>
   <style>
      #txt {
         font-size: 30px;
      }
   </style>
</head>

<body>
   <!-- Create span Element-->
   <p>Simply Easy Learning<span id='txt'>Tutorialspoint</span></p>
   <button onclick="Show()">Show</button>
   <script>
      function Show() {
         let demo = document.getElementById('txt');
         alert(demo.innerHTML);
      }
   </script>
</body>

</html>

支援的瀏覽器

標籤
span	是	是	是	是	是

html_tags_reference.htm

列印頁面