標題 <h1>
~<h6>
在 HTML 的內容裡,會使用 <h1>
~<h6>
的標籤代表標題元素 ( heading ),在不需要設定任何樣式的狀態下,文字會自動加粗並且根據 <h1>
~<h6>
的數字大小,從 <h1>
的最大文字尺寸到 <h6>
最小文字尺寸,這篇文章將會介紹標題元素的用法。
認識標題元素
HTML 的標題元素共又六個,分別是 <h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
),h 表示 heading,1~6 表示不同的重要程度,<h1>
是最重要的標題,一份 HTML 通常只會有一個 <h1>
,使用這些標題元素時,會按照 1 到 6 的順序使用。
- 標題元素屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,也因為是容器元素,裡頭可以放入其他的子元素。
- 標題元素的顯示類型為「block 塊級元素」,預設會強制換行。
例如下方的 HTML 開啟後,會呈現 <h1>
、<h2>
、<h3>
三個標題元素的預設樣貌。
<h1>主標題</h1>
<h2>大標題 1</h2>
<h3>小標題 1</h3>
<p>內容...</p>
<h3>小標題 2</h3>
<p>內容...</p>
標題元素支援屬性
標題元素支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),例如下方的 HTML,會將 <h1>
加入 title 和 id 屬性,<h2>
則會加入 class 屬性,如此一來就能更方便的套用對應的樣式。
<style>
#main{
color:#f00;
}
.bb{
color:#00f;
}
</style>
<h1 title="oxxo" id="main">主標題</h1>
<h2 class="bb">大標題</h2>
<h3 class="bb">小標題</h3>
標題元素預設樣式
下方列出標題元素各自的預設樣式:
h1 {
display: block;
font-size: 2em;
margin-before: 0.67em;
margin-after: 0.67em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-before: 0.83em;
margin-after: 0.83em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
h4 {
display: block;
margin-before: 1.33em;
margin-after: 1.33em;
margin-start: 0;
margin-end: 0;
font-weight: bold; }
h5 {
display: block;
font-size: .83em;
margin-before: 1.67em;
margin-after: 1.67em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
h6 {
display: block;
font-size: .67em;
margin-before: 2.33em;
margin-after: 2.33em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~