HTML 程式札記 : <h1>、<p> 文本

閱讀時間約 2 分鐘

本文將介紹 HTML 中的標題、段落、文本格式化、引用和註釋,這些文本標籤有助於建立一個結構良好的網站。

標題:組織你的內容

標題(Headings)在HTML文檔中起著劃分內容、展現結構的重要作用。HTML提供了六級標題,從<h1><h6>,重要性依序遞減。

<h1>這是主標題</h1>
<h2>這是次級標題</h2>
<!-- 更多次級標題 -->

段落:文本的基本單位

段落(Paragraphs)是HTML中基本的文本單位。使用<p>標籤來定義一個段落,段落之間會自動產生垂直間距,這是瀏覽器的默認樣式

<p>這是一個段落。</p>
<p>這是另一個段落。</p>

文本格式化:增強閱讀體驗

HTML提供了多種標籤來格式化文本,使其更具可讀性。<strong>標籤用於將文本變為粗體,表示重要性。<em>標籤用於將文本變為斜體,表示強調。<u>標籤用於給文本添加下劃線。<del>標籤用於添加刪除線,常用於顯示已被刪除或更改的內容。

<strong>這段文本被加粗。</strong>
<em>這段文本被強調。</em>
<u>這段文本下面有劃線。</u>
<del>這段文本被刪除。</del>

引用:引入外部內容

引用是 HTML 中引入並標記外部來源內容的方式。<blockquote>用於長引用,如段落。<q>用於短引用,如句子或短語。

<blockquote>
正如馬克·吐溫曾經說過的:“人生就是關於勇敢面對挑戰的旅程。” 這段話深刻地揭示了生活的本質,
並鼓勵我們在面對困難時保持積極和堅強。
</blockquote>
<p>就像莎士比亞在他的劇作中所表達的:<q>全世界是一個舞台。</q></p>

注釋:解釋與記錄

注釋用於在 HTML 程式碼中添加說明,不會顯示在網頁上。注釋內容會被<!---->包圍。注釋對於理解程式碼結構非常有用。

<!-- 這是一個注釋 -->
<p>這個段落包含注釋。</p>

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 [email protected]
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床,因此要看檔案副檔名是否為常見的圖片名稱。 有些網站會限制外網直接連結,所以篩選圖片要注意。
網頁輸入欄位動態改變範例 Html Dynamic DropDown Example
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床,因此要看檔案副檔名是否為常見的圖片名稱。 有些網站會限制外網直接連結,所以篩選圖片要注意。
網頁輸入欄位動態改變範例 Html Dynamic DropDown Example
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。