在html中創建水平線最簡單的方式是使用
標簽，它默認渲染為灰色實線分隔內容。1. 基本用法：直接插入
即可在兩段文字間添加水平線。2. hr標簽曾有size、width、color、align、noshade等屬性控制樣式，但現在已被css取代。3. 推薦做法是用內聯樣式或css類定義
的border、height、background-color、width、margin等樣式實現個性化。4. 替代方案可用
配合css模擬水平線，提升結構語義與樣式控制靈活性。如今水平線設計多依賴css統一管理樣式，而非裸用
1. 基本用法：直接插入
標簽。
在HTML中創建水平線最簡單的方式就是使用
標簽。它原本是用來分隔頁面內容的，現在依然很實用。不過別看它簡單，這個標簽也有一些值得注意的屬性和用法。
1. 基本用法：直接插入
想在網頁中加一條水平線？只要寫上一句
就行。瀏覽器會自動渲染成一條橫貫頁面的線，默認樣式通常是灰色的實線。
<p>上面的內容</p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p> <hr /> <p>下面的內容</p>
這樣就能把兩段文字用一條線隔開，視覺上更清晰。
2. hr標簽的常見屬性（雖然現在基本不用了）
早期的HTML版本里，
有一些可以直接設置樣式的屬性，比如：
- size：控制線條厚度，比如size=”5″會讓線變粗；
- width：設定寬度，可以是像素或百分比，如width=”50%”；
- color：改變顏色，例如color=”red“；
- align：控制對齊方式，比如align=”center”；
- noshade：去掉陰影效果，讓線條看起來更扁平。
但這些屬性現在都不推薦用了，因為它們屬于舊版HTML的“表現性”標簽，已經被CSS取代。
3. 推薦做法：用CSS自定義水平線樣式
既然不建議用那些老屬性，那應該怎么改呢？答案是：用CSS來控制
的外觀。
你可以這樣寫：
<hr style="border: none; height: 2px; background-color: #333; width: 80%; margin: auto;">
這段代碼畫出的是一條黑色、2像素高、占寬80%并居中的線。你可以根據需要調整顏色、粗細、寬度、邊距等。
如果你希望全站統一風格，也可以在CSS文件里定義一個類：
.my-line { border: none; height: 1px; background-color: #ccc; margin: 20px 0; }
然后HTML里寫：
<hr class="my-line">
這樣維護起來也方便，改樣式只需要動CSS，不需要一個個改HTML。
4. 替代方案：用div模擬水平線
其實現在很多人也不用
了，而是用
加上CSS來實現同樣的效果。好處是可以更靈活地控制結構語義。
例如：
<div style="height: 1px; background: #999; margin: 1em 0;"></div>
這種寫法在現代前端開發中很常見，特別是使用框架時，會更傾向于用通用標簽配合類名來控制樣式。
基本上就這些。
確實很簡單，但要真正用好，還是得靠CSS來定制外觀。現在也少有人直接裸寫
了，多數都會配合樣式表一起用。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
