網站水平分割線用法
作者：佚名 時間：2014-02-13 分享到：
網站水平分割線
雖然大多數文檔的主體都是文本，但加入一些起修飾作用的適當的水平分割線，圖像和其他多媒體元素，可以創建出更吸引人的文檔。我們得提醒你，這些特性不只是一些華而不實的東西，不僅僅是令文檔看上去更漂亮。多媒體元素使HTML和XHTML具有了活力，它提供的是另外一種有用的信息，而這些信息是其他媒體（如印刷制品）無法提供的。
水平分割線
水平分割線（horizontal rule）可以從視覺上將文檔分割成各個部分。這樣可以給讀者一個整潔、一致的視覺指示，告訴他們文檔一個部分已經結束，而別一個部分即將開始。水平分割線有效地將文本分割成小塊，并界定了文檔的頁首（header）和頁尾（footer)，另外還提供了對文檔內標題的強調。
<hr>標簽
<hr>標簽告訴瀏覽器要插入一個橫跨整個顯示窗口的水平分割線。在HTML中，該標簽沒有相應的結束標簽。而對于XHTML，則包括結束標所用的斜線(/)符合作為標簽自身在其屬性之后的最后個字符（<hr.../>），或者在其后立即包括一個結束標簽（<hr></hr>）。
如<br>標簽一樣，<hr>標簽也強制執行一個簡單的換行；但是與<br>不同的是，<hr>導致段落的對齊重新回到默認值設置<左對齊>。瀏覽器會立即在當前行的下面放置一條分割線，然后再從分割線下面的一行繼續文本流的輸出。
水平分割線的顯示取決于瀏覽器的判斷。通常情況下，它會橫跨整個文檔。圖形瀏覽器要嗵會以凹陷或凸起來的效果來顯示水平分割線，基于字符的瀏覽器則更有可能會使用長劃線或者下劃線來創建分割線。在水平分割線的上面或下面沒有其他空白。如果你希望把它和周圍的文本分離開，那么就必須明確地將分隔線放在一個新的段落中，后面再跟另外一個包含隨后文本的段落。
如果希望水平線下面的內容不以默認的左對齊方式來顯示，那么就有必要在分隔線標簽后面加上段落標簽。
size屬性
通常情況下，瀏覽器以2到3個像素的厚度和凹陷的3D效果來顯示水平分隔線，這樣分割線看盧來就好像鑲嵌在文檔中一樣。通過size屬性可以加粗分割線。必需的值是以像素為單位的分割線厚度（thickness）。可以看到此屬性的效果。html4和XHTML中憶經不再贊成使用size屬性，因為通過適當的樣式表便可以達到同樣的效果。
noshade屬性
你可能不喜歡3D效果的分隔線，而希望使用扁平的2D分隔線，那么只需要把noshade屬性加到<hr>標簽中就可以去掉3D效果。在HTML中并不要求為它賦值；而在XHTML中，則要用noshade="noshade"。
正常的3D效果和noshade的2D效果分隔線在外觀上有明顯的區別
<hr size=32>
<p>
<hr size=32 noshade>
HTML和XHTML中憶經不再贊成使用noshade屬性，因為通過適當的樣式表可以獲得同樣的效果。
width屬性
默認的分隔線會橫跨整個顯示窗口，可以通過width屬性縮短或者加長分隔線的長度，從而創建以特定的像素數為寬度的分隔線，或者是當前文本流寬度的一定百分比的分隔線，大多數瀏覽器會自動居中顯示非整屏寬度的分隔線，請參閱align屬性來了解左對齊或者右對齊的水平分隔線。
下面這些標例是由width指定寬度的水平分隔線
The following rules are 40 amd 320 pixels wide n matter the actual width of the browser window
<hr width=40>
<hr width=320>
whereas these next two rules will always extend across 10 and 75 percent of the window, regardless of its width;
<hr width="10">
<hr width="75">
請注意，width屬性的相對（百分數）值是放在雙引號里面的，而絕對（整數）卻不是這樣。實際上，在標準HTML中這個引號并不是絕對必要的（但是在XHTML中卻是必要的）。但是因為百分號通常可能意味著其后跟隨著編碼的字符，如果沒有把它包含在引號里面，那么就可能使瀏覽器感到困惑，并破壞一部分文檔的顯示。
一般來講，為分隔線寬度指定一個確定的像素數值并不是一個好主意。瀏覽器窗口的寬度千差萬別，在一個瀏覽器里很小的分隔線，在另外一個瀏覽器里面卻可能大得令人討厭。出于這方面原歷的考慮，我們建議將分隔線的寬度指定為顯示窗口寬度的百分比。這樣，當瀏覽器的寬度變公時，分隔線仍將保持同樣的相對大小。HTML4和XHTML中已經不再贊成使用width屬性，因為通過適當的樣式表便可以獲得同樣的效果。
align屬性
水平分隔線的align屬性可能會是下面三個值中的一個；left，center或者right。那些寬度小于當前文本流寬度的分隔線，會相對于窗口邊界進行定位。默認的對齊值是center(居中)。
各種各樣的分隔線對齊方式可以作為很好的部分分隔符。例如，下列源代碼顯示了把一個寬度為窗口寬度35%的分隔線分別進行左對齊、居中和右對齊，HTML4和XHTML中已經不再贊成使用align屬性，因為通過適當的樣式表便可以獲得同樣的效果。
color屬性
只被Internet Explorer支持的color屬性可以分為分隔線設置顏色。這個屬性值可以是顏色的名稱，也可以是定義特定顏色的十六進制數字。
默認情況下，分隔線的顏色與文檔背景的顏色相同，只是凹陷效果的邊緣部分比背景色略深或略淺。如果用color屬性或者樣式表來指定其他顏色，就會失去這種3D效果。
使用分隔線分割文檔
水平分隔線為讀者提供了一種方便的視覺導航工具。，要把<hr>有效地作為一個部分分隔來使用，首先要確定文檔一共有幾級標題，以及你希望文檔的每個部分有多長。然后再決定哪些標題具有正當的理由用分隔線將其分開。
水平分隔線還可以用來界定文檔篇前部分，例如把目錄和文檔的主體分開。還可以使用水平分隔線將文檔的主體和結尾的索引、參考文獻或圖像目錄等分隔開來。
有經驗的創作者還會利用水平分隔線來標記表單的開始和結束。這一點對于那些讀者要不停地上下滾動屏幕才能夠完全看到其所有內容的長表單來說，是尤其適用的。通過使用分隔線來一致地標記表單的開始和結束，就可以幫助讀者停留在表單內，同時也保證他們在填寫表單內容時不會疏忽或遺忘某個部分。
在頁首和頁尾使用分隔線
創建文檔系列的一種基本風格，就是具有一致的外觀和感覺，包括每個文檔都具有標準的頁首和頁尾。一般來講，頁首包含導航工具，可以版主讀者秀容易地跳到本文檔內的不同部分，或者文檔系列中其他相關的文檔中，而頁尾則包含有創作者和文檔的信息，以及意見反饋機制，例如webmaster的電子郵件地址等。
要保證這些頁首和頁尾不會破壞文檔的主要內容，可以考慮將分割線直接放在頁首的下面和頁尾的上面。通過例用分隔線可以一致地將頁首和頁尾分離出來，可以幫助讀者找到文檔的主體，并將注意力集中到文檔內容上。
