一、图像标签
标签:<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&