龙空技术网

「转行测试开发-HTML」(九)继续说下图像标签的路径、注释

蛋蛋杂谈 345

前言:

目前咱们对“pythoncss标签定位h2”可能比较注重,大家都想要学习一些“pythoncss标签定位h2”的相关资讯。那么小编同时在网上搜集了一些关于“pythoncss标签定位h2””的相关知识,希望各位老铁们能喜欢,姐妹们快快来学习一下吧!

上一节我们说了相对路径、绝对路径,今天我们说下内部链接的使用。什么是内部链接呢?内部链接就是网站内部页面之间的相互链接,直接链接内部页面名称即可,比如: <a href="index.html">首页名称</a>

我们写一个例子:

效果如下:

点击内部链接后,显示内部链接内容

这里默认是当前页面打开,如果加上 target = "_blank"就是新打开一个页面

内部链接不需要加上http或者https的前缀。

如果开发时还不知道要跳转到哪个链接,输入一个 "#"后即可,相当于一个空链接,但同时又占了一个位置。看下示例:

我们点击空链接后,虽然页面没动,但是可以看下链接地址变了

接着我们看下下载链接,如果href里面地址是一个文件或者是压缩包,会下载这个文件。我们来试下

但是点击后发现文件没有下载,这是怎么回事呢?

先换个文件类型试试,比如 .exe或者zip 试了之后发现都不行,难道又是浏览器的问题?那换谷歌浏览器吧

果然,谷歌浏览器就可以了

可以看到zip文件下载成功了,估计还是跟火狐浏览器的安全性有关系。我们再试下刚才的xmind文件是否可以下载成功吧

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_九</title>

</head>

<body>

<h3>下载一个文件</h3>

<a href="E:\猎聘\测试用例\20201207需求.zip">文件下载</a>

<br/>

<a href="E:\猎聘\测试用例\PC端谁看过我功能下线.xmind">试下之前的用例是否可以</a>

</body>

</html>

原来是可以的,说明就是浏览器的问题,那接下来我们就默认使用谷歌浏览器来操作和演示了。在网页中的各种网页元素,都可以添加超链接,比如音乐、视频、文本、图像、表格等。我们再给图片加一张超链接

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_九</title>

</head>

<body>

<h2>图片超链接</h2>

<a href="HTML5.jpeg">图片超链接</a>

<h3>下载一个文件</h3>

<a href="E:\猎聘\测试用例\20201207需求.zip">文件下载</a>

<br/>

<a href="E:\猎聘\测试用例\PC端谁看过我功能下线.xmind">试下之前的用例是否可以</a>

</body>

</html>

再看另外一种效果:

点击图片后跳转到链接

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_九</title>

</head>

<body>

<h2>图片超链接</h2>

<a href=";><img src="HTML5.jpeg"></a>

<h3>下载一个文件</h3>

<a href="E:\猎聘\测试用例\20201207需求.zip">文件下载</a>

<br/>

<a href="E:\猎聘\测试用例\PC端谁看过我功能下线.xmind">试下之前的用例是否可以</a>

</body>

</html>

代码如上

然后我们说下锚点链接: 点击锚点链接,可以快速定位到某个位置。

在链接文本的 href属性中,设置属性值为 "#名字"的形式,如<a href = "#你好">你是一个好人</a>找到目标位置标签,里面添加一个id属性,等于刚才id的名字,如<h2 id = "你好">我是一个标题</h2>

我们来举个例子试下:

点击标题三,跳转到标签三或者段落三

看下代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_九</title>

</head>

<body>

<h1>标题一</h1>

<h2>标题二</h2><br>

<a href = "#life">标题三(有锚点)</a><br>

<h4>标题四</h4>

<p>段落一</p>

1.今天天气特别好<br>

1.今天天气特别好<br>

1.今天天气特别好<br>

1.今天天气特别好<br>

1.今天天气特别好<br>

1.今天天气特别好<br>

1.今天天气特别好<br>

1.今天天气特别好<br>

1.今天天气特别好<br>

<p>段落二</p>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

<h5>锚点要跳转到的标签</h5>

<p>段落三</p>

3.生活有点甜,锚点会来这一段,相信我<br>

3.生活有点甜,锚点会来这一段,相信我<br>

3.生活有点甜,锚点会来这一段,相信我<br>

3.生活有点甜,锚点会来这一段,相信我<br>

3.生活有点甜,锚点会来这一段,相信我<br>

3.生活有点甜,锚点会来这一段,相信我<br>

3.生活有点甜,锚点会来这一段,相信我<br>

3.生活有点甜,锚点会来这一段,相信我<br>

3.生活有点甜,锚点会来这一段,相信我<br>

<p id="life">段落四</p>

4.你懂个p

</body>

</html>

好的,今天先到这里

标签: #pythoncss标签定位h2 #css怎么添加图片路径