HTML标签练习(二)

一、图像标签

标签:<img src="" alt="">

标签属性:src:图片的路径

                  alt:代替文本(当图片失效的时候,才显示alt内容)

                  title:当鼠标悬停的时候,title起作用

标签特点:

        1.单标签

        2.标签需要展示对应的效果,需要借助标签的属性进行设置

1、src属性和alt属性

练习代码:

<html>
    <head>
        <title>这里是浏览器窗口标题</title>
    </head>
    <body>
        <img src="./tupia.jpeg" alt="这里是图片失败提醒">
    </body>
</html>

显示结果:

2、src属性和title属性

练习代码:

<html>
    <head>
        <title>这里是浏览器窗口标题</title>
    </head>
    <body>
        <img src="./tupian.jpeg" alt="这里是图片失败提醒" title="这里是鼠标悬停提醒">
    </body>
</html>

 显示结果:

二、音频标签

标签:<audio src="" controls>

标签属性:src:音频的路径

                  controls:显示播放的控件

                  autoplay:自动播放(部分浏览器不支持)

                  loop:循环播放

练习代码:

<!DOCTYPE html>
<html>
    <head>
        <title>这里是浏览器窗口标题</title>
    </head>
    <body>
    <audio src="./王菲-如愿.mp3" controls></audio>
    </body>
</html>

 显示结果:

 

三、视频标签

标签:<video src="" controls>

标签属性:src:视频的路径

                  controls:显示播放的控件

                  autoplay:自动播放(谷歌浏览器中需配合muted实现静音播放)

                  loop:循环播放

练习代码:

<!DOCTYPE html>
<html>
    <head>
        <title>这里是浏览器窗口标题</title>
    </head>
    <body>
    <video src="./1637920107070479.mp4" controls></video>
    </body>
</html>

 

 显示结果:

四、超链接标签

标签名:<a></a>

标签属性:href:链接的URL地址

                  target:打开链接文件的方式

                                target常用的两个属性值 :

                                      _self:在当前窗口直接打开(不设置时默认在当前窗口直接打开)

                                      _blank:新建窗口打开

1.默认当前窗口打开链接

练习代码:

<html>
    <head>
        <title>这里是浏览器窗口标题</title>
    </head>
    <body>
        <a href="https://www.baidu.com/">跳转至百度</a>
    </body>
</html>

显示结果 :

点击后,跳转至百度

2.新建窗口打开链接

练习代码:

<html>
    <head>
        <title>这里是浏览器窗口标题</title>
    </head>
    <body>
        <a href="https://www.baidu.com/" target="_blank">跳转至百度</a>
    </body>
</html>

显示结果:

3、锚点链接:

在同一页面使用锚链接

        打锚点:跳转标记<a name="标记名称"></a>

        进行跳转连接:<a href="#锚点名称">开始跳转</a>  

练习代码:

<html>
    <head>
        <title>这里是浏览器窗口标题</title>
    </head>
    <body>
        <a name="top">页面顶部</a&
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值