【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML br

你知道在寫網頁時,直接換行或是按空格出來的結果是不會變的嗎?

而到底該怎麼讓自己的文章段落在自己想要斷行的地方就斷行、該怎麼讓自己的文字間加上多個空格呢?

今天來說說html中的斷行分隔線空格吧!

本篇內容包含:

  • HTML br、hr、& nbsp 是什麼?
  • br、hr、& nbsp 的用法
  • br、hr、& nbsp 的 Q&A

前端入門系列 – HTML篇

本系列會介紹與教學關於HTML最基礎的知識語法,歡迎分享與留言討論!

HTML系列#1: 【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML系列#2: 【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML系列#3: 【HTML系列#3】div、p、span 介紹與教學,區塊、段落一篇搞懂!

HTML系列#4: 【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML系列#5: 【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

HTML系列#6: 【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML系列#7: 【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML系列#8: 【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML系列#9: 【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

HTML br、hr、& nbsp 是什麼?

br 斷行、分行

br 這個標籤是用意是讓文字能夠在自己想要的地方可以斷行,不必要等到一行文字寫滿才讓系統自動斷行


hr 分隔線

hr 標籤是分隔線,可以搭配CSS設定調整分隔線的樣式,用的好不僅可以美化頁面,還可以讓閱讀時的體驗大幅提升


& nbsp 空格

& nbsp 在html語法中是空格的意思,因為在一般p段落打上1個以上的空格,在網頁上一樣只會顯示1個空格,因此& nbsp可以用來輸入多個空格


範例影片 (英文版)




br、hr、& nbsp 的用法

br 斷行、分行用法

br 這個標籤和之前介紹的標籤寫法不太一樣,之前的標籤都會有起始標籤與結束標籤,但是br標籤只需要起始標籤就可以了

他的寫法就是「 <br> 」或「 <br/> 」,個人比較習慣用前者<br>,因為這樣code看起來比較不雜亂

我們先來看一下沒有使用br標籤的程式碼與結果

br測試程式碼
沒有使用 br 標籤
br測試輸出結果
輸出結果

可以看到雖然在編輯器裡用了Enter斷行,但是結果一樣是在同一行,而怎麼使用br標籤呢?讓我們看以下範例


範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    我是第一行<br>
    我是第二行<br>
    我是第三行<br>
    
</body>
</html>
HTML br
br 範例程式碼

輸出結果

br輸出結果
成攻使用br 標籤斷行


hr 分隔線用法

hr 標籤也是一樣只需要起始標籤,它的寫法是「 <hr> 」或「 <hr/>

同時hr標籤也可以透過CSS調整許多樣式,像是分隔線的寬度長度顏色對其位置等等

範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    第一條線<hr>
    第二條線<hr>
    第三條線<hr>
    
</body>
</html>
HTML hr
hr 範例程式碼

輸出結果

hr輸出結果
hr 輸出結果


& nbsp 空格用法

& nbsp 空格則不需要任何標籤的 < 或 >,它真正的寫法是「 & n b s p ; 」然後去掉空格,而上方介紹會打「& nbsp」是怕會被網頁吃掉

有些時候需要空格來幫助我們排版,但因為在編寫程式時無法直些用空白鍵輸入空格,這時& nbsp就派上用場了

先來測試一下沒有使用& nbsp,使用空白鍵試試看

nbsp測試程式碼
使用空白鍵輸入空格
空格測試輸出結果
輸出結果只顯示1個空格

可以看到雖然我在編輯器輸入好幾個空格,但最後結果還是只顯示1個空格,讓我們看看使用& nbsp會怎樣


範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <p>這是我第一個網頁,現在我要&nbsp;&nbsp;&nbsp;&nbsp;測試空格</p>
    
</body>
</html>
HTML nbsp
& nbsp 範例程式碼

輸出結果

空格輸出結果
成攻使用 & nbsp 輸入空格


br、hr、& nbsp 的 Q&A

Q1 : br 標籤可以用很多個嗎?

A1 :

可以。你只需要在你要斷行的地方加上<br>,然後看要放幾個都可以,像是<br><br><br>,這樣就會斷行3次



Q2 : hr 標籤可以用很多個嗎?每個都可以設定不同樣式嗎?

A2 :

hr 也可以用很多個,一樣要幾個就打幾個就好,而樣式每個標籤都可以設定不一樣的效果,所以分隔線每條都可以有自己想要的樣子

像是3條分隔線就可以3調都不同顏色等等



Q3 : 空格可以使用很多個嗎?空格能不能調整樣式?

A3 :

空格也可以使用很多個,一樣加上多個空格語法即可,而樣式的部分,空格就無法用CSS調整樣式了



總結

html 中有許多都是只有起始標籤的標籤樣式,它們很多都是用來做一些細部的調整

而這3種是平常最常見的3種,如果有想知道更多的標籤也歡迎底下留言告訴我,我再找時間分享

希望這篇文章有幫助到還不懂 br、hr 和 & nbsp 空格的讀者,謝謝大家!



Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top