Html元素(DAY3)

在上一篇文章介绍了有关文字的元素和段落元素，而这一篇会介绍网页中我们常常会看到的图片、影片、音乐、超连结，以及如何把Youtube的影片或google的地图嵌入我们的网页中，这边就来开始认识这些常见的元素吧!

认识图片、影片、音乐、超连结元素

插入图片
<img src="图片档位置或网址" alt="图片文字描述" width="宽" height="高">
(alt用途是若图片无法正常显示将会用alt中设定的文字替代呈现)
插入影片
<video src="影片档位置或网址" width="宽" height="高"></video>
插入音乐
<audio src="音乐档位置或网址"></audio>
插入连结或图片连结
<a href="连结"><img src="图片网址" width="宽" height="高"></a>

<body>
    <img src="doraemon.jpg" alt="图片文字描述" width="400" height="400">
    <video src="IMG_4736.MOV" width="400" height="400" controls></video><br />
    <audio src="绿钢琴  07.mp3" controls></audio><br />
    <a href="https://www.google.com.tw"><img src="图片1.png" width="250" height="100"></a>
</body>

在这个范例中插入了一个从自己电脑中上传的图档，当然你也可以使用网路上的图片连结，那在自己电脑中的图档位置要如何给定放入src路径属性中呢，接下来下面会告诉大家!在上面的范例中我还插入了影片和音乐，发现有一个controls属性，那是什麽呢?它是控制面板，可以让使用者自己操作，例如:拨放暂停、音量调整，当然也有非常非常多的属性，像是autoplay自动拨放、loop重复拨放等。最後还插入了一个图片连结，只要按下图片就可以导引至设定好的连结。

相对路径

以html文件档为基准点

希望这样以图解的方式表达有比较清楚!

src= "doraemon.jpg"
图档和html文件在同一层资料夹
src= "../doraemon.jpg
图档在html文件的上一层资料夹
src= "资料夹3/doraemon.jpg"
图档在html文件的下一层资料夹
上面所说的是相对路径，那也有另外一个叫做绝对路径，像是网址或是给予完整的档案路径。