iT邦幫忙

2025 iThome 鐵人賽

DAY 10
0
生成式 AI

30天製作生成式AI的互動網頁專案系列 第 10

Day-10 HTML網頁的基礎-4

  • 分享至 

  • xImage
  •  

HTML 基礎標籤介紹:
在 HTML 中,除了基本的標題、段落與圖片之外,還有一些常用的輔助標籤能讓內容更具結構與表現力。分隔線(hr) 可在頁面中畫出一條水平線,常用於將不同的主題或段落分開,使版面更清晰。文字格式化(Text Formatting) 則能強調內容,例如 b 或 strong 用於粗體,凸顯重點;i 或 em 用於斜體,表示語氣或特殊名詞;u 則讓文字帶有底線,增添視覺效果。接著,區塊元素(Div & Span) 在排版上非常重要,div 通常用來分組大區塊,方便佈局與搭配 CSS;span 則屬於行內元素,適合針對小段文字設定樣式。最後,標註內容(Quote & Code) 讓網頁能呈現引用與程式碼,blockquote 用於長段落引用,q 適合簡短引文,而 code 則用於顯示程式碼片段。這些標籤雖然簡單,但在實際網頁設計中非常常見,能讓內容更有層次與語意,也有助於可讀性與使用體驗喔。

分隔線(Horizontal Rule):用來在頁面中畫出一條水平線,常用於分隔不同內容區塊。

<hr>

文字格式(Text Formatting):粗體:b 或 strong,強調文字。斜體:i 或 em,表示重點或語氣。底線:u,讓文字帶有底線。

<p>這是 <b>粗體</b>、<i>斜體</i> 和 <u>底線</u>。</p>

區塊元素(Div & Span):div:常用於區塊分組,方便排版或搭配 CSS。span:行內元素,用來包住少量文字,通常搭配 CSS 做樣式控制。

<div style="background:lightblue">這是一個區塊</div>
<p>這是一段文字,其中 <span style="color:red">紅色字</span> 特別標示。</p>

標註內容(Quote & Code):引用文字:blockquote 用於段落引用,q 用於行內引用。程式碼:code 表示程式碼片段。

<blockquote>這是一段引用內容。</blockquote>
<p>小明說:<q>我正在學 HTML 我是初學者。</q></p>
<p>程式碼範例:<code>print("Hello")</code></p>

上一篇
Day-9 HTML網頁的基礎-3
系列文
30天製作生成式AI的互動網頁專案10
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言