HTML <hr> 水平線標籤

admin發表於2018-09-12
HTML

<hr>可以繪製一條水平線，hr 是 horizon（水平線）的縮寫。

自閉和標籤，HTML5 規範中，無需採用斜槓閉合，直接寫成 <hr> 即可。

程式碼例項：

[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> 的功能，自閉和標籤，HTML5 中可以省略斜槓。

預設，<hr> 具有一定陰影效果，因為 <hr> 高度是2px，這兩個畫素是由上邊框和下邊框組合而成，且上邊框和下邊框的顏色不同，上邊框是黑色，下邊框為灰色，所以只要隨便將一個邊框設定為 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> 視覺效果，應該會明顯發現兩者區別。

相關文章