網頁

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大小不同。


參考:

沒有留言:

張貼留言