vocus logo

方格子 vocus

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
Michael楊
32會員
138內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
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
如果你也是那種在職場上追求極致效率,對生活品質有堅持,且渴望一段成熟、穩定、不拖泥帶水關係的專業人士,那麼 Ping! 會是你目前市面上最值得嘗試的選擇。 成熟的大人,不需要在低效的社交中消磨熱情。讓 Ping!,為你的情感生活進行「降噪」,把精力和時間,留給那個真正能與你靈魂共鳴、頻率一致的人。
Thumbnail
如果你也是那種在職場上追求極致效率,對生活品質有堅持,且渴望一段成熟、穩定、不拖泥帶水關係的專業人士,那麼 Ping! 會是你目前市面上最值得嘗試的選擇。 成熟的大人,不需要在低效的社交中消磨熱情。讓 Ping!,為你的情感生活進行「降噪」,把精力和時間,留給那個真正能與你靈魂共鳴、頻率一致的人。
Thumbnail
厭倦只看外貌的交友方式嗎?Ping!主打真實、安全的深度交友體驗,透過真人驗證與多樣化的個人化問答,幫助使用者在認識彼此之前,先理解價值觀、關係期待與交友目標。即使是慢熟的 I 人,也能透過提問找到適合的人選,避免聊到一半才發現方向不同。適合想被理解、重視心理連結與安心互動的你。
Thumbnail
厭倦只看外貌的交友方式嗎?Ping!主打真實、安全的深度交友體驗,透過真人驗證與多樣化的個人化問答,幫助使用者在認識彼此之前,先理解價值觀、關係期待與交友目標。即使是慢熟的 I 人,也能透過提問找到適合的人選,避免聊到一半才發現方向不同。適合想被理解、重視心理連結與安心互動的你。
Thumbnail
Ping!主打真人驗證機制,透過AI人臉比對確保用戶真實性,讓人放心。獨特的照片主題功能、個性化標籤和趣味文字問答,讓用戶更深入展現自我,為開啟話題提供契機,甚至有機會找到擁有相似冷門興趣的同好。Ping!注重高品質的交友關係,透過共同點建立雙方的連結,為現代人提供一個舒適、真實且有意義的交友環境。
Thumbnail
Ping!主打真人驗證機制,透過AI人臉比對確保用戶真實性,讓人放心。獨特的照片主題功能、個性化標籤和趣味文字問答,讓用戶更深入展現自我,為開啟話題提供契機,甚至有機會找到擁有相似冷門興趣的同好。Ping!注重高品質的交友關係,透過共同點建立雙方的連結,為現代人提供一個舒適、真實且有意義的交友環境。
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 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News