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>

13會員
111內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
留言0
查看全部
發表第一個留言支持創作者!
Michael楊 的其他內容
本章介紹如何使用Visual Studio Code來建立HTML開發環境,包括安裝及配置編輯器、建立HTML文件,以及使用Live Server進行本地預覽。通過這些步驟,讀者能夠快速上手HTML開發,並在瀏覽器中即時查看修改效果。
本章節介紹HTML的基本語法和文檔結構。內容包括HTML的定義、基本標籤(如<!DOCTYPE>、<html>、<head>、<body>等)、不同類型的HTML結構(標準HTML5、簡化結構、HTML4傳統結構、語意化結構),以及常見標籤的用途和HTML註解的使用。
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
在本章節中,我們介紹了 CSS 偽元素的基本概念和常見用法,通過一些示例,我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外,我們還探討了一些高級用法,如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
在這一章中,我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑,而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果,並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
本章介紹如何使用Visual Studio Code來建立HTML開發環境,包括安裝及配置編輯器、建立HTML文件,以及使用Live Server進行本地預覽。通過這些步驟,讀者能夠快速上手HTML開發,並在瀏覽器中即時查看修改效果。
本章節介紹HTML的基本語法和文檔結構。內容包括HTML的定義、基本標籤(如<!DOCTYPE>、<html>、<head>、<body>等)、不同類型的HTML結構(標準HTML5、簡化結構、HTML4傳統結構、語意化結構),以及常見標籤的用途和HTML註解的使用。
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
在本章節中,我們介紹了 CSS 偽元素的基本概念和常見用法,通過一些示例,我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外,我們還探討了一些高級用法,如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
在這一章中,我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑,而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果,並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
一般在使用 TypeScript 的時候,大家都有遇過定義列舉資料的情境吧。 不過不管是 enum 和 literal 的方式其實都有些小缺點,以下推薦一個個人認為體驗更好的方式。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
一般在使用 TypeScript 的時候,大家都有遇過定義列舉資料的情境吧。 不過不管是 enum 和 literal 的方式其實都有些小缺點,以下推薦一個個人認為體驗更好的方式。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。