前端学习积累(三)多媒体与语义化标签-多媒体

图片标签

1.img标签用来在网页中插入图片,=“”是图片的存储名录和完整文件名。

<img src="images/gugong.jpg">
<!-- img是image的缩写,src是source(来源)的缩写 -->

2.img标签的alt属性

alt属性是“alternet替代品”的缩写,是对图像的文本描述,不是强制性的

<img src="images/gugong.jpg" alt="故宫角楼">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>北京景点</h1>
    <p>
        <img src="images/gugong.jpg" alt="故宫角楼">
    </p>
    <p>
        <img src="images/1.jpg" alt="还是故宫">
    </p>
</body>
</html>

作用1:如果由于某种原因无法加载图像,浏览器会在页面显示alt属性中的备用文本(例如网络不好或图片不小心被服务器删除时,此时网页上就会直接显示alt这个文字);

作用2:供视力不方便的朋友使用的网页朗读器,也会朗读alt中的文本

3.img标签的width、height属性

width、height属性分别设置宽度和高度,单位是像素,但不需要写单位,如果省略其中一个属性,则表示按原始比例缩放图片

<img src="images/gugong.jpg" alt="故宫角楼" width="300">

4.5.相对路径与绝对路径(重点)

1)相对路径

描述从网页出发,如何找到图片,eg“前面路口左转,直走100米后右转就到了”

随着网页和图片的位置关系不同,插入图片的代码随之改变

如果需要退回层级,使用“../”这样的写法,回退两级则“../../”

2)绝对路径

描述图片精确地址,eg“北京市海淀区西三环北甲路3号院中关村国防科技园2号楼”

<img src="https://www.123.com/staic/img/index/logo-recommendend.png">

不管网页在哪里,绝对路径不需要改变

超级链接

超级链接是将网页和网页连接到一起的方法,是互联网成“网”的愿意

1)<a>标签

使用<a>标签制作超级链接,a是ancher(锚)的首字母,href:hypertext reference 超文本引用

<a href="2.html">去第二个网页<a>

需创建两个html文档,文档名称不能为中文(此刻是为了便于我们学习,所以title为中文)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习超级链接</title>
</head>
<body>
    <p>
        <a href="lvyou.html">去看我的旅游分享</a>
    </p>
    
</body>
</html>

a标签的title属性:用于设置鼠标的悬停文本

 <a href="2.html" title="很好看哦~">去第二个网页</a>

2)href属性支持绝对路径和相对路径,用来设置链接指向的页面的url

<a href="web/2.html">去第二个网页</a>
<a href="../web/2.html">去第二个网页</a>
<a href="http://www.123.com">去123</a>

3)如何在新窗口中打开网页

将a标签中的target属性设置为blank,即可在新标签页打开网页,target规定在何处打开网页

 <a href="2.html" target="blank">去第二个网页</a>

4)如何给图片设置超级链接

只需要用a标签包裹img标签

<a href="2.html" target="blank">
            <img src="images/xxx.png" >
</a>

5)页面内锚点 

较长的页面,可以适当的给h系列标签添加id属性,它将成为页面的锚点

<h1 id="wuxi">无锡美景</h1>

当网址后面添加 # 号键时,页面将自动滚动到锚点的位置

其他页面的超级链接也可以链接到指定锚点

<a href="#锚名">是设置锚点链接的语法,即跳转到具体锚位置

 <a href="lvyou.html#wuxi">看无锡美景</a>

6)下载链接 

指向exe、zip、rar等文件格式的链接,将自动成为下载链接

<a href="1.zip">下载</a>

7)邮件、电话链接

有mailto:前缀的链接是邮件链接,系统将自动打开相关邮件

<a href="mailto:1186467591@qq.com">给小陶发邮件</a>

有tel:前缀的链接是电话链接,系统将自动打开拨号盘

音频和视频

    1.音频  

            (1)<audio></audio>标签

            <audio  src="音频地址" controls(显示播放组件)  autoplay(自动播放)  loop(循环播放)  width=""   height="">     抱歉,您的浏览器不支持。。。,请升级浏览器。(当播放器不能正常显示时,会用这段文字代替</audio>

           (2)常用音频格式:mp3   ogg

    2.视频

            (1)视频:<video></video>标签

               同上

            (2)常用视频格式:mp4   ogv   webm

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值