iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Modern Web

跟著 OXXO 一起學 HTML系列 第 40

( Day 16.2 ) HTML 標示聯絡方式 <address>

  • 分享至 

  • xImage
  •  

<address> 標示聯絡方式元素可以在不套用 CSS 樣式的狀態下,將 HTML 的文字變成斜體字,並在標籤語意上強調是「聯絡方式」,這篇教學會介紹 <address> 標示聯絡方式元素。

原文參考:標示聯絡方式 address

認識 <address>

HTML 的標示聯絡方式元素分別是由 <address> 標籤所構成的元素,該元素除了在標籤語意上強調「聯絡方式」,也會在不套用 CSS 樣式的狀態下,強制換行並套用斜體字。

  • <address> 屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,也因為是容器元素,裡頭可以放入其他的子元素。
  • <address> 的顯示類型為「block 塊級元素」,預設會強制換行。

例如下方的 HTML 開啟後,會在網頁中放入 <address> 標示聯絡資訊。

<p>
  床前明月光,疑是地上霜,舉頭望明月,低頭思故鄉。
</p>
<address>
  聯絡李白:1234567890
</address>

HTML 教學 - 標示聯絡方式  - 認識

<address> 支援屬性

<em><i> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),例如下方的 HTML,會將 <address> 加入背景色。

<p>
  床前明月光,疑是地上霜,舉頭望明月,低頭思故鄉。
</p>
<address style="background:#faa;">
  聯絡李白:1234567890
</address>

HTML 教學 - 標示聯絡方式  - 支援屬性

<address> 預設樣式 {end}

下方是 <address> 的預設樣式:

address {
  display: block;
  font-style: italic;
}

更多教學

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,我有個超過一千篇教學的 STEAM 教育學習網,有興趣可以參考下方連結呦~ ^_^


上一篇
( Day 16.1 ) HTML 標示注音 <ruby>、<rt> 和 <rp>
下一篇
( Day 16.3 ) HTML 標示鍵盤按鍵 <kbd>
系列文
跟著 OXXO 一起學 HTML90
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言