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

HTML span

HTML語法中,常見的3個標籤就是divpspan,而這三者是什麼又該怎麼用?

讓我用一篇文章幫你搞懂三者的用法與特色吧!

本篇內容包含:

  • HTML 的 div、p、span 是什麼?
  • div、p、span 的用法
  • div、p、span 的 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 的 div、p、span 是什麼?

div 區塊

div 區塊元素可以用來切割網頁上的大小區塊,方便對於某些區塊做調整,像是區塊背景顏色、邊框或陰影等等

至於區塊調整上會用到CSS,這個部分在HTML系列分享完會再分享CSS系列,這邊了解div區塊是用來切割網頁就好


p 段落

段落的英文是paragraph,因此我們將他改成縮寫p,也代表著一個段落,而一個段落中會有許多文字描述,都是可以包含在p段落裡的

p段落可以被包含在div裡面,這也是常見的網頁設計手法,但是p段落裡面不能包含div區塊,目前我是沒有看過這樣子的寫法,所以大家也盡量別這樣用


span 內嵌元素

span內嵌元素是用來選取特定內容做樣式調整,會出現在p段落或div區塊裡面

目的只是為了把特定文字內容做一些效果調整,同時也不影像其他文字的效果


div 與 span 比較影片 (英文版)




div、p、span 的用法

div 區塊用法

div 的用法非常簡單,一樣是標籤樣式,寫法就是「<div> </div>」,在標籤中放入你要的內容就可以囉!

還有div他會有自動換行的效果,所以如果寫 「<div>1</div> <div>2</div>」,這樣1和2會在不同行

程式碼範例

<!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>
    <div style="background-color: pink;width: 100px;height: 50px;">
        第一個區塊
    </div>

    <div style="background-color: yellow;width: 100px;height: 50px;">
        第二個區塊
    </div>

</body>
</html>
HTML div
div 區塊 範例程式碼

輸出結果

div輸出結果
div 區塊 輸出結果


p 段落用法

p 段落的用法也是需要有起始標籤與結束標籤「<p> </p>」,裡面放你要的文字內容,而p 段落也是有自動換行的效果

程式碼範例

<!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 style="background-color: pink;width: 100px;height: 50px;">
        第一個段落
    </p>

    <p style="background-color: yellow;width: 100px;height: 50px;">
        第二個段落
    </p>

</body>
</html>
HTML p
p 段落 範例程式碼

輸出結果

p輸出結果
p 段落 輸出結果


span 內嵌元素用法

span 內嵌元素的寫法為「<span> </span>」,只需要把你要的特定文字包起來,之後再對span標籤做樣式調整就可以了

程式碼範例

<!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>
        段落與span的教學,將<span style="color: red;">特定的字</span>改成其他紅色
    </p>

</body>
</html>
HTML span
span 範例程式碼

輸出結果

span輸出結果
span 輸出結果


div、p、span 的 Q&A

Q1 : div、p、span 三者可以一起使用嗎?

A1 :

可以。

很常會有div包p,p裡面再包span,而div與span的功能通常都是用來對特定區塊或文字進行樣式調整


Q2 : p 段落裡面能不能包div區塊?

A2 :

不行。

我自己是沒有看過這樣的情況,在寫網頁時也沒有用過這樣的寫法,所以這邊給的答案是否定

但是如果有看到有這樣的用法也歡迎隨時留言,我會立馬更正我的文章,謝謝!


總結

HTML 中最常用的3種標籤就是div、p、span,3者一起使用不僅可以對特定區塊調整樣式,還可以對於網頁的版面做切割

許多網頁都有很複雜的結構,但基本上脫離不了這三者,因此只要把這三個搞動並且弄熟,在複雜的架構都能實作出來

希望這篇文章有幫助到不懂什麼是div、p、span的人,謝謝大家!



Leave a Comment

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

Scroll to Top