Shiny

一分鐘學前端(3):調整文字大小

October 07, 2019 #HTML#一分鐘學前端

上一篇文章 加入了圖片,結果圖片很大,文字很小,看起來頗不協調,所以接下來要把文字加大,完整程式碼如下:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>HTML</h1>
    <img src="https://shinychang.net/static/4b01f6f30d7488a25755a71ca7d06b03/0f7c5/CleanShot%202019-10-05%20at%2019.09.52%402x.jpg" />
  </body>
</html>

可以看到只是把 HTML 四個文字放在 <h1></h1> 的裡面,前者就是開始標籤,後者是結束標籤,就可以把文字變大了

<h1>HTML</h1>

下載 HTML,然後在下載的資料夾裡面點兩下打開,就可以看到下圖的內容

CleanShot 2019 10 07 at 16 42 47 2x

除了 h1 之外其實還有很多可以調整文字大小的標籤:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • small

其中 h1 ~ h6 是代表標題(header)一到標題六,提供了各種不同大小的文字,而 small 是讓文字比目前大小在小一點點,所以可以組合成:

<h1>HT<small>ML</small></h1>

Shiny

Experienced JavaScript / Node.js engineer & team lead.
Twitter Facebook Medium LinkedIn GitHub Email