資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 中新增水平線？
在本文中，我們將向您展示如何使用 HTML 將水平線新增到您的網頁。水平線，也稱為水平規則，是一種在網頁上分隔內容的方式，可以用於視覺吸引力或指示內容的變化。
有多種方法可以在 HTML 中將水平線新增到您的網頁，但最常見的方法是使用 <hr> 標籤。<hr> 標籤是一個自閉合標籤，用於在網頁上建立水平線。這種方法簡單直接，程式碼量最少。但是，它在自定義方面提供的靈活性不大。使用 <hr> 標籤建立的水平線將具有預設的外觀，並且可能與您的網頁設計不協調。
在 HTML 中新增水平線的另一種方法是使用 CSS。透過使用 CSS，您可以自定義水平線的外觀以匹配您的網頁設計。您可以更改水平線的顏色、寬度、高度和其他屬性，使其與您的網頁無縫融合。
我們將在本文後面的部分詳細討論這兩種方法，並提供示例和程式碼片段。
方法
在 HTML 中新增水平線主要有兩種方法：
使用 <hr> 標籤
使用 CSS
方法 1：使用 <hr> 標籤
在 HTML 中新增水平線的第一個方法是使用 <hr> 標籤。這種方法快速易於實現，非常適合您需要簡單的水平線來分隔網頁上內容的情況。此外，<hr> 標籤受所有主要 Web 瀏覽器支援，因此您可以確保它會在您的網頁上正確呈現。但是，<hr> 標籤的預設外觀並不總是與您的網頁設計相匹配。
如果您需要更多地控制水平線的外觀，可以使用 CSS 自定義 <hr> 標籤或使用第二種方法使用 CSS。使用 CSS，您可以更改水平線的顏色、寬度、高度和許多其他屬性，使其更符合您的網頁設計。
示例
以下是使用 <hr> 標籤新增水平線的示例：
步驟 1 - 建立一個 html 檔案 (index.html)。
步驟 2 - 在您希望水平線出現的位置新增 <hr> 標籤。
<body> <h1>Welcome to Tutorials Point</h1> <hr> <p>This is some text that will appear below the horizontal line.</p> </body>
步驟 3 - 儲存檔案，然後在 Web 瀏覽器中開啟它進行檢視。
<!DOCTYPE html> <html> <body> <h1>Welcome to Tutorials Point</h1> <hr> <p>This is some text that will appear below the horizontal line.</p> </body> </html>
方法 2：使用 CSS
在 HTML 中新增水平線的第二種方法是使用 CSS。使用 CSS 建立水平線可以讓您更好地控制線條的外觀。您可以更改顏色和粗細，甚至可以為線條新增背景顏色或影像。此外，您還可以使用 CSS 動畫和過渡為線條建立有趣的視覺效果。
透過使用 CSS，您可以建立一條引人注目的線條，為您的網頁增添獨特的風格。使用 CSS，您還可以建立具有不同樣式的多條線條，並將它們應用於網頁的不同部分，這對於在頁面上不同元素之間建立視覺分隔很有用。
示例
以下是使用 CSS 新增水平線的示例：
步驟 1 - 建立一個 html 檔案 (index.html)。
步驟 2 - 在您希望水平線出現的位置新增一個 <div> 標籤。
<body> <h1>Welcome to Tutorials Point</h1> <div class="horizontal-line"></div> <p>This is some text that will appear below the horizontal line.</p> </body>
步驟 3 - 在您的 CSS 檔案 (style.css) 中，使用 border-bottom 屬性建立水平線。
border-bottom: 2px solid black;
步驟 4 - 將類應用於 <div> 標籤。
.horizontal-line {
border-bottom: 2px solid black;
}
步驟 5 - 儲存檔案，然後在 Web 瀏覽器中開啟它進行檢視。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.horizontal-line {
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1>Welcome to Tutorials Point</h1>
<div class="horizontal-line"></div>
<p>This is some text that will appear below the horizontal line.</p>
</body>
</html>
結論
在本文中，我們向您展示了兩種使用 HTML 將水平線新增到網頁的方法。第一種方法是使用 <hr> 標籤，這是一種簡單易用的方法，可以將水平線新增到您的網頁。第二種方法是使用 CSS，它允許您自定義水平線的外觀以匹配網頁的設計。這兩種方法都是有效的，可以根據專案的具體需求使用。
4K+ 閱讀量
