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

最新推荐文章于 2024-05-05 13:05:33 发布

i_donot_care

最新推荐文章于 2024-05-05 13:05:33 发布

阅读量101

点赞数

分类专栏：自学文章标签： html

本文链接：https://blog.csdn.net/i_donot_care/article/details/118344957

版权

自学专栏收录该内容

16 篇文章 0 订阅

订阅专栏

图片标签

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

i_donot_care

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习积累（三）多媒体与语义化标签-多媒体

图片标签1.img标签用来在网页中插入图片，=“”是图片的存储名录和完整文件名。<img src="images/gugong.jpg">
复制链接

扫一扫