iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列 第 11

Day11實作範例 &物件與腳本標籤

  • 分享至 

  • xImage
  •  

實作範例

今天將藉由這個範例來複習昨天學習到的影音標籤的相關知識。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影片</title>
</head>
<body>
    <p>這是我在旗津拍的海景~</p>
    <video width="450" controls poster="art.jpg">
        <source src="sea.mp4">
    </video>
</body>
</html>

網頁呈現畫面:(http://127.0.0.1:5500/video.html)

物件標籤 <object>

功用與昨天最後介紹的<embed>標籤相似,可以插入影音、圖片檔案和網頁。
以下介紹其屬性:

  • data 設定檔案路徑
  • classid 設定插入元件的編號

腳本標籤 <script>

功用是插入腳本程式 ( 如JavaScript和VBScript程式 ) 。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腳本標籤</title>
</head>
<body>
    <script type="text/javascript">
        alert('網路連線不穩');
    </script>
    
</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20240915/20169120tmUiRXe779.png

接下來要介紹如何插入CSS語法

<head>標籤內加入<style>標籤就可以撰寫CSS語法。

最後介紹重要的標籤

內嵌框架標籤 <iframe>

功用是在網頁上插入其他網頁,甚至可以應用在網頁版型切割、模組化程式設計。
以下介紹其屬性:

  • src 設定檔案路徑
  • name 設定iframe名稱,可供超連結使用。
  • Frameborder設定框線

上一篇
Day10 影音格式與標籤
下一篇
Day12 表單標籤(上)
系列文
新手踏入網頁前端的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言