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

更新於 2024/03/05閱讀時間約 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>

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

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

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
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
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
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之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。