HTML入門-Day4:文本與列表標籤

更新於 發佈於 閱讀時間約 1 分鐘

文本標籤

HTML提供了多種文本標籤來結構化和格式化文本內容,以下是一些常見的文本標籤及其用途:

  1. <p> (段落標籤)
    用於定義段落,每個<p>標籤會自動在段落前後添加空白間距:
    <p>這是一個段落。</p>

  2. <br> (換行標籤)
    用於插入單個換行,適用於在文本中強制換行的情境:
    這是一行文字。<br>這是新的一行文字。

  3. <hr> (水平線標籤)
    用於插入水平線,常用來分隔內容:
    <p>第一段落。</p>
    <hr>
    <p>第二段落。</p>

  4. <pre> (預格式化文本標籤)
    顯示預格式化的文本,保留所有空格和換行:
    <pre>
    這是一段
    預格式化的
    文本。
    </pre>

  5. <blockquote> (引用標籤)
    用於表示長段的引用,通常會自帶縮排:
    <blockquote>
    這是一段引用文字,通常用來引用他人的長段話語或文章段落。
    </blockquote>

  6. <b> (粗體標籤)
    用於讓文字顯示為粗體,強調重要內容:
    <p>這是一段含有<b>粗體</b>文字的文本。</p>

  7. <i> (斜體標籤)
    用於讓文字顯示為斜體,常用於表達特殊語境或術語:
    <p>這是一段含有<i>斜體</i>文字的文本。</p>

列表標籤

列表標籤是用來組織和展示一組相關項目的最佳方式。HTML支持無序和有序兩種類型的列表。

  1. 無序列表 <ul> (Unordered List)
    使用圓點作為項目的符號:
    <ul>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
    </ul>

  2. 有序列表 <ol> (Ordered List)
    使用數字、字母或羅馬數字作為項目的符號:
    <ol>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
    </ol>

  3. 列表項 <li> (List Item)
    <li> 標籤用於定義列表中的每個項目,並可以嵌套在 <ul><ol> 中。

範例:嵌套列表

以下範例展示了無序列表和有序列表的嵌套使用:

<ul>
<li>水果</li>
<li>蔬菜
<ol>
<li>胡蘿蔔</li>
<li>菠菜</li>
</ol>
</li>
<li>穀物</li>
</ul>

留言
avatar-img
留言分享你的想法!
avatar-img
Michael楊
17會員
111內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
Michael楊的其他內容
2024/09/17
本章節介紹了HTML中的表格和表單元素。表格部分詳細說明了table、tr、td等標籤的用途,以及如何構建結構化數據。表單部分則涵蓋了form、input、button等標籤,解釋了如何創建用戶交互界面以收集和提交數據。章節通過實例代碼展示了這些元素的實際應用。
Thumbnail
2024/09/17
本章節介紹了HTML中的表格和表單元素。表格部分詳細說明了table、tr、td等標籤的用途,以及如何構建結構化數據。表單部分則涵蓋了form、input、button等標籤,解釋了如何創建用戶交互界面以收集和提交數據。章節通過實例代碼展示了這些元素的實際應用。
Thumbnail
2024/09/02
本章介紹如何使用Visual Studio Code來建立HTML開發環境,包括安裝及配置編輯器、建立HTML文件,以及使用Live Server進行本地預覽。通過這些步驟,讀者能夠快速上手HTML開發,並在瀏覽器中即時查看修改效果。
Thumbnail
2024/09/02
本章介紹如何使用Visual Studio Code來建立HTML開發環境,包括安裝及配置編輯器、建立HTML文件,以及使用Live Server進行本地預覽。通過這些步驟,讀者能夠快速上手HTML開發,並在瀏覽器中即時查看修改效果。
Thumbnail
2024/09/02
本章節介紹HTML的基本語法和文檔結構。內容包括HTML的定義、基本標籤(如<!DOCTYPE>、<html>、<head>、<body>等)、不同類型的HTML結構(標準HTML5、簡化結構、HTML4傳統結構、語意化結構),以及常見標籤的用途和HTML註解的使用。
Thumbnail
2024/09/02
本章節介紹HTML的基本語法和文檔結構。內容包括HTML的定義、基本標籤(如<!DOCTYPE>、<html>、<head>、<body>等)、不同類型的HTML結構(標準HTML5、簡化結構、HTML4傳統結構、語意化結構),以及常見標籤的用途和HTML註解的使用。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
註解 & Print & 變數型態
Thumbnail
註解 & Print & 變數型態
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News