iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
自我挑戰組

HTML跨平台網頁設計系列 第 5

超連結、圖片、音效與影片

  • 分享至 

  • xImage
  •  

路徑的表示方法
絕對路徑:要設定的網頁或檔案位在網路上,只要直接指定網址即可
相對路徑:要設定的網頁或檔案在本地,與目前網頁有相對關係
超連結
超連結要用a設定

<a href="連結資源位置"target="連結開啟方式">顯示文字或圖片</a>

href後面常用:網址、頁內、站內網頁、檔案、電子郵件、FTP
target後面可以用底線+blank/parent/self/top/檔案名稱

<h2>認識我們</h2>
<ul>
<li><a href="http://www.e-happy.com.tw" target="_blank>文淵工作室</a></li>
</ul>

頁內超連結:在HTML中可以用id表示特別的內容,且不會重複,使用者可以用這個找到特定位置
例如要在h2 的元素下加入id編碼則輸入

<h2 id="ch01">Ch01</h2>

如此其他同業的代碼不可使用ch01。
圖片
可支援 GIF/JPG/PNG
插入圖片使用img

<img href="圖片檔案位置" width="寬度" height="高度“ alt="說明文字">

使用figure標示圖片figcaption圖片說明
音效
目前可支援的音效檔案有mp3/wav/ogg 
可用autoplay/controls/loop/muted/preload控制
音效檔來原則用src和type表示

<audio controls autoplay>
<source src="media/music.mp3" type="audio/mpeg">
</audio>

影片
video元素有:mp4/webm/ogg
加入影片的程式碼很像audio

<video width="640" height="480" controls autoplay>
<source src="media/movie.mp4" type="video/mp4>
</video>

上一篇
HTML結構與文字段落
下一篇
表格與表單
系列文
HTML跨平台網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言