iT邦幫忙

2023 iThome 鐵人賽

DAY 10
0
Modern Web

跟著 OXXO 一起學 HTML系列 第 19

( Day 10.1 ) HTML 標題 <h1>~<h6>

  • 分享至 

  • xImage
  •  

在 HTML 的內容裡,會使用 <h1><h6> 的標籤代表標題元素 ( heading ),在不需要設定任何樣式的狀態下,文字會自動加粗並且根據 <h1><h6> 的數字大小,從 <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 元素屬性」),例如下方的 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>

HTML 教學 - 標題元素 ~ - 支援屬性

標題元素預設樣式

下方列出標題元素各自的預設樣式:

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;
}

更多教學

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,我有個超過一千篇教學的 STEAM 教育學習網,有興趣可以參考下方連結呦~ ^_^


上一篇
( Day 9.4 ) HTML 重設根目錄 <base>
下一篇
( Day 10.2 ) HTML 段落 <p>
系列文
跟著 OXXO 一起學 HTML90
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言