3.1 元素 <p>
區塊元素 在 HTML 中用來建立網頁的結構和組織內容。它們幫助將內容分成邏輯塊和區段。這些元素會在新行開始並佔用整個可用的寬度。我們來詳細看看三個常用的標籤：<p>、<div> 和 <span>。
標籤 <p>
標籤 <p> 用於創建文本段落。它是區塊元素：這意味著每個段落從新行開始，並在上下有縮排。
使用範例：
HTML
<p>
這是第一個文本段落。段落用於將文本分成邏輯塊，增強其可讀性。
</p>
<p>這是第二個文本段落。每個段落從新行開始。</p>
屬性：
- 區塊元素：位於新行且佔用整個可用寬度。
- 自動縮排：通常瀏覽器會在段落前後添加縮排。
- 嵌套：標籤
<p>無法包含其他區塊元素。
使用 CSS 進行樣式化：
CSS
p {
color: #333;
font-size: 16px;
line-height: 1.5;
margin-bottom: 15px;
}
3.2 元素 <div>
標籤 <div> 是一個通用的區塊容器，用於對其他元素進行分組並應用樣式。它沒有內建樣式，僅用於結構化內容。
使用範例：
HTML
<div class="container">
<h2>區塊標題</h2>
<p>在 div 區塊內的某段文本。</p>
</div>
屬性：
- 區塊元素：位於新行且佔用整個可用寬度。
- 通用性：可以包含任何其他元素，包括區塊和行內元素。
- 樣式和腳本：常用於應用 CSS 樣式和 JavaScript 腳本。
使用 CSS 進行樣式化：
CSS
.container {
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
}
3.3 元素 <span>
標籤 <span> 是行內元素，用於突出顯示區塊元素內部的部分文本或其他內容。它沒有內建樣式，並用於將 CSS 樣式和 JavaScript 腳本應用於特定的文本部分。
使用範例：
HTML
<p>這段文本包含一個 <span class="highlight">字</span>，與其他文本不同。</p>
屬性：
- 行內元素：不創建新行且僅佔用必要的寬度。
- 靈活性：用於將樣式應用於文本或其他元素的特定部分。
- 通常與 CSS 和 JavaScript 結合使用：可精準地樣式化或操作文本部分。
使用 CSS 進行樣式化：
CSS
.highlight {
color: red;
font-weight: bold;
}
3.4 比較 <div> 和 <span>
<div>:
- 區塊元素
- 從新行開始
- 可包含其他區塊和行內元素
- 用於分組和結構化內容
<span>:
- 行內元素
- 不打破文本流
- 用於樣式化文本的獨立部分
- 常用於高亮和與 JavaScript 一起工作
<div> 和 <span> 的組合使用範例：
CSS
.article {
border: 1px solid #ddd;
padding: 10px;
}
.keyword {
color: blue;
font-style: italic;
}
HTML
<div class="article">
<h2>文章標題</h2>
<p>
這是一段包含關鍵 <span class="keyword">字</span> 的文本，被突出顯示以引起注意。
</p>
</div>
標籤 <p>、<div> 和 <span> 是 HTML 的基本構件，能夠創造結構化、樣式化和互動的網頁。理解它們的特點並正確使用能幫助創建便捷且功能強大的介面。
GO TO FULL VERSION