網頁

▼

2019/7/10

HTML 標題元素Heading element <h1>簡介

在HTML網頁內容的標題可使用標題元素(Heading elements)<h1>來呈現。

標題元素有六種等級，由高至低為<h1>，<h2>，<h3>，<h4>，<h5>，<h6>。

在welcome.html使用六種標題元素如下。

welcome.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <h1>您好，歡迎光臨</h1>
  
  <h2>H2的效果</h2>
  
  <h3>H3的效果</h3>
  
  <h4>H4的效果</h4>
  
  <h5>H5的效果</h5>
  
  <h6>H6的效果</h6>
  
  <p>普通段落文字</p>

</body>
</html>

用Chrome瀏覽器可以看到由大至小的標題文字，最下面則是段落標籤(Paragraph element)<p>呈現的一般大小的文字。




透過Chrome的開發人員工具，可以看到<h1>預設CSS效果是Block element；字體大小為2em（預設1em = 16px，2 x 16 = 32px），粗體(bold)效果；上下各有0.67em（16px x 2 x 0.67 = 21.44px）的邊界(margin)。


h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
Default <h1> tag css display.

其餘<h2>到<h6>的Heading elements也有同樣的特性，只是字型與margin大小不同。


參考：

沒有留言:

張貼留言