在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大小不同。
參考:
沒有留言:
張貼留言