前面已經介紹過了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!!