iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
1
自我挑戰組

從零開始的基礎網站開發系列 第 5

day4 - 多媒體的使用

  • 分享至 

  • xImage
  •  

正文開始:
一個網站若是少了圖片感覺就不像是完整的,在這裡先介紹如何在網頁使用圖片,後面講到CSS的時候將會有更多關於圖片的教學。

 <body>
    <img src="URL" alt="看不到圖片就會顯示我" title="滑鼠移到此圖時就會顯示我" />
 </body>

img內基本上會提供src和alt這兩個屬性,src告訴瀏覽器圖片在哪裡,而alt則是在圖片無法顯示時的一個替代方案,那怕圖片本身沒意義也是建議使用alt屬性,裡面空白不寫即可。

src和之前在超連結a標籤時提到的href屬性很像,不過兩者具有本質上的差別,src屬性會代表著該標籤,大概意思是如果src引用的是什麼那這標籤代表的就是什麼;而href標籤則是提供一個往外溝通的管道,而在瀏覽器的解讀方面來說遇到href屬性時html解析不會暫停,而遇到src屬性時html解析會停止到這個標籤解讀完。

再來要介紹一個大家很常用的標籤iframe,這標籤是用來鑲入別人網站用的,常見的地方有google Map、youtube影片,不過現在由於版權問題許多網站都禁止他人隨意使用iframe來使用他人網站,因此若要使用此標籤還請格外注意。

 <body>
    <iframe src="URL" width="" height=""></iframe>
 </body>

使用時在width和height屬性填入需要的寬度和長度即可

我們可以使用audio標籤來在網站鑲入一個播放器,每個瀏覽器對於音訊格式的支援不盡相同,使用前建議先行查詢。

 <body>
    <audio controls preload="" loop>
       <source src="URL1" />
       <source src="URL2" />
    </audio>
 </body>

controls屬性是用來顯示控制按鈕,如非需要顯示按鈕不輸入即可
loop屬性指定音訊撥放結束後自動在撥放一次
preload屬性提供了三個參數,分別為
none:在撥放前不載入任何資料
auto:瀏覽器在頁面載入同時也下載檔案
metadata:只下載基本資料
source標籤是用來給予多種來源格式用的,使用上再加上src屬性即可。

影片放置上也跟音訊類似,只是標籤換成是video而已

 <body>
    <video poster="URL" preload="" controls loop>
       <source src="URL1" type="video/mp4" />
       <source src="URL2" type="video/webn" />
    </video>
 </body>

video多了poster和type屬性,poster會添加一張圖片作為影片撥放前所顯示的圖片,而type屬性則是先告知瀏覽器所用的影片格式為何,以免下載完後才發現不相容。

現在我們學會了許多HTML的基礎,若我們想要在編寫時添加註解的話就載需要的地方"!--內容--!"即可,而我們要宣告所使用HTML版本則是使用doctype標籤

 <!doctype html><!--這代表的是html第五版--!>
 <html>
    <head>
    </head>
    <body>
    </body>
 </html>

今天的內容到此結束,明天將介紹網頁互動的基本--表單。


上一篇
day3 - 超連結。表格。清單
下一篇
day5 - 表單的介紹與meta網頁設定
系列文
從零開始的基礎網站開發29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言