HTML <hr>水平線標籤

admin發表於2018-09-12
HTML

<hr/>可以繪製一條水平線。

它是一個自閉和標籤，在HTML5規範中，可以省略斜槓<hr>。

hr的英文全稱是horizon（水平線）。

程式碼例項: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
p {
  width:380px;
}
</style>
</head>
<body>
  <h3>螞蟻部落一</h3>
  <p>只有努力奮鬥才會有美好的未來</p>
  <p>本站的url地址是www.softwhy.com</p>
  <hr />
  <h3>螞蟻部落二</h3>
  <p>本站位於青島市南區</p>
  <p>歡迎大家提供有益的建議與意見</p>
</body>
</html>

以上程式碼簡單演示了<hr>元素的效果。

預設情況下，<hr>貌似帶有陰影效果，所以出現這種現象是因為預設條件下，<hr>的高度是兩個畫素，這兩個畫素是由上邊框和下邊框組合而成的，之所以會出現陰影效果，是因為上邊框和下邊框的顏色是不同的，上邊框是黑色，下邊框為灰色，所以只要隨便將一個邊框設定為none，那麼就不會出現陰影效果。

程式碼修改如下： 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
p {
  width:380px;
}
hr{border-bottom:none;}
</style>
</head>
<body>
  <h3>螞蟻部落一</h3>
  <p>只有努力奮鬥才會有美好的未來</p>
  <p>本站的url地址是www.softwhy.com</p>
  <hr />
  <h3>螞蟻部落二</h3>
  <p>本站位於青島市南區</p>
  <p>歡迎大家提供有益的建議與意見</p>
</body>
</html>

對比一下第一個例子的hr顯示效果，應該會明顯發現兩者區別。

相關文章