iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

從0開始成為網頁設計的旅程系列 第 5

【DAY 05】HTML 標籤的基本元素(二)

  • 分享至 

  • xImage
  •  

前言

忘記一天要發一篇,被自己笨死~~雖然中斷了但我還是把它完成吧。

今天一樣繼續HTML語法吧

超連結

連結為一個網頁不可少的東西,沒有連結就那都不能去。

完整的超連結語法是<a href="要連結的網址">。

而在<a href="要連結的網址">的標籤中,可插入"target="_blank",

變成<a href="要連結的網址" target="_blank">,可將連結的畫面內容,開在新的瀏覽視窗中。

當然,target可以設定其他的功能,但是其他比較不那麼常用到。

圖片

圖片在網頁擔任很重要的工作,只有文字對於網頁來說相當的無趣,那麼完整的語法是甚麼呢?

完整插入圖片語法為<img src="圖片網址">

https://ithelp.ithome.com.tw/upload/images/20210919/20137420C4e29LIWm8.png

https://ithelp.ithome.com.tw/upload/images/20210919/20137420kuI7EqnuTn.png

是不是相當的簡單呢

空元素

上面教學了加入圖片的用法,那就讓大家必須知道甚麼是空元素。

簡單來說有些元素沒有內容,我們稱為「空元素(empty elements)」。

以上面圖片為例:
<img src="圖片網址">

當使用加入圖片的語法時,有時候裡面並不會輸入文字,所以就不需要加入結束的標籤,這樣就可以

直接將圖片呈現在網頁上做使用

(因為圖片元素是直接把圖檔嵌在 HTML 網頁上)

兩種強調: 斜體&粗體

在 HTML 我們一般會用兩種方法來強調需要強調的內容,讓使用者能更清楚的看到重點。

Emphasis (斜體): <em>123</em>
https://ithelp.ithome.com.tw/upload/images/20210919/20137420DDK2xQJARu.png
https://ithelp.ithome.com.tw/upload/images/20210919/20137420npdyQi43Eb.png

Strong (粗體): <strong>123</strong>

https://ithelp.ithome.com.tw/upload/images/20210919/20137420zTJvJ0XXKm.png
https://ithelp.ithome.com.tw/upload/images/20210919/20137420dxXWHg1QVu.png

那麼今天就到這拉,明天來教學甚麼事<div>&<span>


上一篇
【DAY 04】HTML 標籤的基本元素
系列文
從0開始成為網頁設計的旅程5
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言