HTML-Day2-图片标签、音频标签、视频标签

HTML 02

1.学习使用图片标签

图片标签，输入img，得到<img>标签，在<img str=" ">的<" ">`内输入图片网址，保存后在默认浏览器中打开，可以在网页中看到；第二种方法，先保存到电脑中的某个文件夹，例如存到html文件夹中，右键点击<>01-3.html,选“在文件资源管理器中显示”，跳转至新建文件夹html中。

<img src="./ 周杰伦.jpg">

即，可以通过：

1. 超链接的方式获取图片的绝对地址

2. 通过相对位置，实现图片展示。
   而alt=""表示当图片不能正常加载时（例如没联网时），会显示”图片加载失败“这么一个提示。

3. title属性：当鼠标移动到某处，显示title后的内容。

4. 绝对路径：如图片的第一种方式

5. 相对路径：图片的第二种方式

 <h4>图片第一种方式</h4>
    <img src="http://img.mp.itc.cn/upload/20170628/15a9ab5f580a4e64809eabbf8f2d34fb_th.jpg" title="鼠标来咯"  height="1100">

    <h4>图片的第二种方式</h4>
    <img src="./周杰伦.jpg" > 

    <h5>alt功能</h5>
    <img src="./././zhoujielun" alt="图片加载失败">

    <h4>图片的第三个属性title</h4>
    <img src="./././01-1.html" alt="图片加载失败" title="鼠标经过" >

    <h4>图片的第一种相对路径</h4>
    <img src="./周杰伦.jpg" alt="">

    <h4>图片的第二种相对路径</h4>
    <img src="../01/周杰伦.jpg" alt="">

    <h4>图片的第三种相对路径</h4>
    <img src="../image/周杰伦.jpg" alt="">

注意：以下部分：
1.在图片标签中，补充单标签 width=" " height=" "（width和height最好只写一个），因为只写一个时，它会进行图片的一个自适应，而当同时定义width和height时会出现图片的变形。

 <h4>图片的第二种方式</h4>
    <img src="./周杰伦.jpg"  width="300" height="400"> 

补充：

img src="../"
img src="../../"    相当于定位至桌面

2.学习使用音乐标签audio 视频标签video

 <audio src="../音乐/BTS - Butterfly.mp3"  controls></audio>

    <video src=""></video>