HTML 習作|常用於文本的元素:<p>、<h1>、<span>、Text Formatting

閱讀時間約 6 分鐘
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
另外,可以一邊閱讀 w3schools HTML tags 來加深對標籤的知識。

(一) HTML <p> element

The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
一個 <p> 段落總是從新的一行開始,瀏覽器會自動在段落前後添加一些空白邊距( a margin ),如下圖呈現:
注意:本篇的圖示為了方便辨認標籤的型態,我在元素上加了 border。
<p> 標籤具有 block 屬性,可以在 <p> 標籤中包進其它元素
如下圖橘色的區塊,<p> 標籤帶有 margin 外邊距。
這是因為瀏覽器 Chrome 預設會對每個標籤做 屬性預設值(瀏覽器預設樣式)。
例如:「預設行高、文字大小、列表樣式、標籤邊界及留白區域等等,且用不同瀏覽器開起來的效果也不盡相同( Safari、IE、Firefox 呈現方式不相同 )。」
橘色間距為 <p> 標籤預帶的 magin 外邊距,也就是瀏覽器預設樣式

(二) HTML <h1>~<h6> element

HTML headings are titles or subtitles that you want to display on a webpage.
HTML headings 是在網頁上顯示的標題或副標題,瀏覽器會自動在標題前後添加一些空白( margin邊距 ),<h1>~<h6> 為 block 屬性的 HTML 標籤。
標題在網頁內容中很重要,搜索引擎使用標題來索引網頁的結構和內容,用戶經常通過標題瀏覽頁面,因此使用標題來顯示文檔結構很重要。
<h1> 標題用於主標題,其次是 <h2> 標題,然後是不太重要的 <h3>,依此類推,測試了一下寫入 <h7> 標題,但是沒有更小。
<h1>~<h6> 標籤,越大的文字數字越小
可以發現 <h1>~<h6> 元素也帶有瀏覽器預設樣式,前後都有 margin,如下圖:
橘色外邊距 margin
另外需要注意,僅將 HTML <h1>~<h6> 用於標題,不要使用它們來讓其他文本變大或加粗,如要使其他文本變大或加粗,可使用 CSS font-size 或 CSS font weight 來定義文字樣式。

(三) HTML <span> element

A <span> element which is used to color a part of a text.
在 <p> 標籤中加入 <span> 標籤
<span> 標籤是一個內聯容器 ( 行內元素 inline element ),用於標記文本的一部分,或文檔的一部分,<span> 標籤不具語意。

<span> 標籤可通過 CSS 設置樣式,或者使用 class 或 id 屬性通過 JavaScript 進行操作,<span> 標籤與 <div> 元素非常相似,但 <div> 是塊級元素 ( block element ) 而 <span> 是內聯元素。

(四) HTML Formatting Elements

HTML contains several elements for defining text with a special meaning.
Formatting elements were designed to display special types of text.
HTML Formatting Elements,是為文本、文字定義特殊含義的 HTML 標籤:
HTML Formatting Elements 圖表一覽
需要注意的是,相較於 <p> 標籤或 <h1> 標籤的 block 屬性,上述為文本定義特殊意義的 Formatting Elements 皆為 inline 屬性:<b>、<strong>、<i>、<em>、<mark>、<small>、<del>、<ins>、<sub>、<sup>。

🚩 可以參考 屬性整理 一覽
  • <b> 粗體文本
  • <strong> 重要文本
  • <i> 斜體文本
  • <em> 強調文本
  • <mark> 標記的文本
  • <small> 較小的文本
  • <del> 刪除的文本
  • <ins> 插入的文本
  • <sub> 下標文本
  • <sup> 上標文本
在 w3schools 裡的提示和注意事項:

根據 HTML5 規範,當沒有其他標籤更合適時,<b> 標籤應該作為最後的手段使用,規範規定標題應該用 <h1> 到 <h6> 標籤表示,強調文本應該用 <em> 標籤表示,重要文本應該用 <strong> 標籤表示,標記/突出顯示的文本應該是用 <mark> 標記表示。可使用 CSS 設置粗體文本:“font-weight: bold;”。

總結

透過本次習作,能加深瞭解這些常用的 tag ,不同的 HTML element 會帶有不同的屬性或瀏覽器預設樣式,瞭解這些基礎概念幫助自己在未來練習切版時,更懂得結構原理。
Practice make perfect, 我是正在自我習作中的 Draw,我們下篇見 🙇🏻
為什麼會看到廣告
5會員
10內容數
從零開始,記錄網頁設計的學習過程。
留言0
查看全部
發表第一個留言支持創作者!
學習如何學習 的其他內容
display 是一種 CSS 屬性,指定「 是否 / 如何 」顯示元素,而每一個 HTML element 都有預設的 display value,然而在預設的情況下,新手如我在剛接觸時常踩入深不見底的盲區, 一起來釐清學會辨識吧!
display 是一種 CSS 屬性,指定「 是否 / 如何 」顯示元素,而每一個 HTML element 都有預設的 display value,然而在預設的情況下,新手如我在剛接觸時常踩入深不見底的盲區, 一起來釐清學會辨識吧!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
在當今這個數位化的時代,網頁無處不在,我們每天都在使用互聯網瀏覽網頁,查找資訊、分享內容、購物等等。然而,網頁的背後是什麼?為什麼網頁能夠呈現出如此多元化的內容?
HTML(超文字標記語言)作為網頁設計的基礎語言,不僅影響了網頁的美學設計,同時也對網頁的功能性和互動性產生了重要影響。本文將探討HTML如何在網頁設計中影響美學與功能性,並進一步探討其如何與其他技術相結合,共同提升網頁設計的品質和效果。 首先,HTML在網頁設計中對美學方面的影響主要體現在網頁的
在當今數位化的時代,網頁設計已不僅僅是簡單地展示內容,更成為了吸引用戶和提升用戶體驗的重要手段。在這樣的背景下,HTML(超文字標記語言)作為網頁設計的基礎語言之一,對於網頁設計的靈活性和創意性有著深遠的影響。
Thumbnail
HTML 語意化標籤,不僅可以使網頁結構更加清晰、易於理解,也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
Thumbnail
在網頁設計中,圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片,包括基本語法、屬性設定等,幫助你更好的在網頁中使用圖片。
HTML DOM 是什麼? 根據HTML標籤建立的物件結構 每個HTML標籤在Javascript中都有對應的標籤物件 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM HTML DOM (Document Object Model) 操作Document 物件: Docum
用Emmet這個套件,可以用標籤與快速鍵,建立一個完整的HTML。可以有效率的寫程式。
Thumbnail
說是開發過程的筆記,應該是撞牆心血錄,因為各式各樣的原因,所以為前後端串接困擾了很久⋯⋯
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床,因此要看檔案副檔名是否為常見的圖片名稱。 有些網站會限制外網直接連結,所以篩選圖片要注意。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
在當今這個數位化的時代,網頁無處不在,我們每天都在使用互聯網瀏覽網頁,查找資訊、分享內容、購物等等。然而,網頁的背後是什麼?為什麼網頁能夠呈現出如此多元化的內容?
HTML(超文字標記語言)作為網頁設計的基礎語言,不僅影響了網頁的美學設計,同時也對網頁的功能性和互動性產生了重要影響。本文將探討HTML如何在網頁設計中影響美學與功能性,並進一步探討其如何與其他技術相結合,共同提升網頁設計的品質和效果。 首先,HTML在網頁設計中對美學方面的影響主要體現在網頁的
在當今數位化的時代,網頁設計已不僅僅是簡單地展示內容,更成為了吸引用戶和提升用戶體驗的重要手段。在這樣的背景下,HTML(超文字標記語言)作為網頁設計的基礎語言之一,對於網頁設計的靈活性和創意性有著深遠的影響。
Thumbnail
HTML 語意化標籤,不僅可以使網頁結構更加清晰、易於理解,也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
Thumbnail
在網頁設計中,圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片,包括基本語法、屬性設定等,幫助你更好的在網頁中使用圖片。
HTML DOM 是什麼? 根據HTML標籤建立的物件結構 每個HTML標籤在Javascript中都有對應的標籤物件 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM HTML DOM (Document Object Model) 操作Document 物件: Docum
用Emmet這個套件,可以用標籤與快速鍵,建立一個完整的HTML。可以有效率的寫程式。
Thumbnail
說是開發過程的筆記,應該是撞牆心血錄,因為各式各樣的原因,所以為前後端串接困擾了很久⋯⋯
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床,因此要看檔案副檔名是否為常見的圖片名稱。 有些網站會限制外網直接連結,所以篩選圖片要注意。