哪些HTML標籤是自閉合的?


自閉合HTML標籤是指不需要額外的閉合標籤的標籤。它們在開始標籤中用後面的斜槓結束自身。這些標籤用於插入空內容或獨立內容。例如,`
`元素用於換行,``用於插入圖片,``用於表單輸入欄位。自閉合標籤可以防止瀏覽器查詢閉合標籤,從而使程式碼更簡潔,渲染速度更快。記住在最後的尖括號之前新增斜槓(標籤``)。正確使用自閉合標籤對於保持HTML程式碼的完整性以及確保與各種瀏覽器和裝置的相容性至關重要。

使用的方法

  • 換行 `
    `

  • 水平線 `


    `

  • 表單輸入欄位 ``

  • 表格列樣式 ``

  • 相對URL的基準URL ``

  • 元資料 ``

  • 外部連結 ``

  • 影像地圖區域 ``

換行

在HTML中,自閉合標籤`
`用於在文字段落或其他資訊之間插入換行符。插入後,它要求下一行文字為空行。垂直分隔元件或在行之間新增空間是常用的格式化技術。

示例

<p>This is the first line.<br>This is the second line.</p>

水平線

HTML`


`標籤表示水平線。它在網頁上新增一條水平線或分隔符。它用於清晰地區分頁面上的部分或元素,並視覺上分割內容。

示例

<p>This is some content above the horizontal rule.</p> 
<hr>
<p>This is some content below the horizontal rule.</p>

表單輸入欄位

HTML表單輸入欄位,由``標籤表示,在建立互動式Web表單方面起著至關重要的作用,使使用者可以更輕鬆地輸入資料,例如文字、數字或選項。它們支援多種輸入型別,例如文字、複選框和單選按鈕,並附帶屬性定義,例如“type”。因此,可以根據精確的資料捕獲和增強的使用者互動來定製表單。例如,單選按鈕只提供一個選項,複選框允許多個選擇,文字輸入收集姓名或訊息。這種適應性提高了使用者體驗,促進了資料收集,並促進了動態網站參與,從而建立更具吸引力和使用者友好的數字環境。開發人員巧妙地運用這些技術來活躍線上環境,吸引積極的使用者參與和無縫的網路互動。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Form Input Fields Example</title>
</head>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>

      <br>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" required>

      <br>

      <label for="age">Age:</label>
      <input type="number" id="age" name="age" min="18" max="99" required>

      <br>

      <input type="submit" value="Submit">
   </form>
</body>
</html>

表格列樣式

要格式化HTML中的表格列,請使用``標籤。它使您可以更輕鬆地自定義特定列的外觀,使您可以將CSS樣式應用於表格的特定列。此標籤透過增強視覺效果來改進表格的整體設計。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Table Column Styling</title>
   <style>   
      col:first-child {
         background-color: lightblue;
      }
        
      col:nth-child(2) {
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <table>
      <colgroup>
         <col>
         <col>
      </colgroup>
      <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
      <tr>
         <td>Column 1 Data</td>
         <td>Column 2 Data</td>
      </tr>
   </table>
</body>
</html>

相對URL的基準URL

HTML``標籤用於指定文件中相對URL的基準URL。它有助於定義所有引用資源和相對連結解析到的預設URL。設定基準URL將有助於保持文件URL的簡短和簡潔,使程式碼更易於閱讀和管理。在管理同一網站上的多個目錄或多個頁面中的資源時,此標籤非常有用。當遇到相對URL時,瀏覽器會將其與基準URL組合以確定絕對URL,以確保網頁內正確導航和資源載入。

元資料

HTML使用``元資料標籤提供有關文件的資訊,包括作者、字元編碼和頁面描述。它有助於瀏覽器、搜尋引擎和其他工具準確理解和顯示網頁,從而提高可訪問性和搜尋引擎最佳化效能。

外部連結

為了向其網站新增外部檔案,例如樣式表或圖示,Web設計人員必須使用HTML``標籤。此連結增強了網站的外觀和功能。該標籤透過指示檔案的路徑來建立主內容和連結資源之間的關鍵連線,最佳化Web設計並改善整體使用者體驗。這種方法可以有效地管理資源,因為多個網頁可以引用相同的外部檔案,從而在整個網站中保持一致性。最終,正確使用``標籤透過減少載入時間和提高整體網站效能來促進無縫的使用者體驗。

影像地圖區域

HTML中的``標籤允許設計者指定影像內的可點選區域,從而建立影像地圖。這些區域可以是矩形、圓形或多邊形,每個區域可以包含不同的超連結或觸發特定的網頁行為。透過使用此強大功能,可以實現網頁上的互動式和動態功能,例如可點選的地圖熱點或導航符號。當用戶點選這些定義的區域時,他們會被帶到不同的URL或執行特定的操作,從而增強使用者體驗並建立更具參與性和互動性的環境。影像地圖對於建立互動式資訊圖表、虛擬遊覽和高階導航系統特別有用。

結論

總之,自閉合HTML元素對於構建有效且組織良好的網頁至關重要。開發人員和使用者都受益於`
`、``和``等標籤的使用,這些標籤可以確保更簡潔的程式碼和更快的渲染速度。``標籤還透過為所有相對連結和資源提供單個基準URL,簡化了頁面內相對URL的管理。正確理解和使用自閉合標籤可以提高程式碼的可讀性、可維護性以及與各種裝置和瀏覽器的相容性。採用這些最佳實踐可以建立使用者友好、高效的網站,從而改善整體線上體驗。

更新於:2023年8月22日

2K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告