iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

基礎中的基礎系列系列 第 5

基礎中的基礎系列之插入圖片,連結

  • 分享至 

  • xImage
  •  

前面已經介紹過了emmet的安裝與使用,今天要正式進入html的語法:

首先大家都知道html可以使用<p>,<h1>,<h2>...來加入文字,但今天我心血來潮突然想加入一張圖片行不行?其實是可以的!語法也相當簡單:

<img src="x" alt="y" title="z">
//x放入你想放的圖片連結
//y放入替代文字(替代文字的意思就是在圖片失效的時候所要呈現的文字,如果圖片可以正常顯示,則 img alt 就不會有任何的功能。)
//z放入解釋文字(當滑鼠在照片上停留後顯示)

介紹完圖片後來介紹一下連結的使用:
連結的語法也相當簡單:

<a href="要連結的 URL 放這裡" target="連結目標" title="連結替代文字">要顯示的連結文字或圖片放這裡</a>
//target比較複雜,我會再找時間為大家介紹

聰明的你看到這裡一定會想:我有沒有辦法可以按圖片然後有超連結的效果?其實是有的!
方法就是:

<a href="要連結的 URL 放這裡" target="連結目標" title="連結替代文字"><img src="x" alt="y" title="z"></a>

(用a連結裡面包著img標籤),是不是很簡單?
還是不太熟悉?沒關係!這裡有範例https://codepen.io/ytiimefp/pen/vYGrxZm!!


上一篇
基礎中的基礎之編輯神器emmet
下一篇
基礎中的基礎系列之Html-列表
系列文
基礎中的基礎系列30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言