我已加入 1_bit 博主的免费前端 站起来 学习计划,专栏链接:https://blog.csdn.net/a757291228/category_11609526.html
前端自学HTML笔记二
超链接
超链接需要用到a标签
一、外部资源链接
代码如下:
其中a标签的href属性定义了链接的网址,href属性值即为跳转页面的网址或路径;当href的值为空时,点击超链接不会跳转页面;当href属性指向外部链接,如图中为百度链接。
运行结果:
点击页面中的第一个超链接,不会跳转;点击第二个超链接会在当前页面跳转到百度页面。
二、内部资源超链接
将href属性值修改为本机文件(可以是图片、视频、其他网页文件等)的地址,如下:
<body>
<a href="祢豆子.jpg">这是图片超链接<a>
</body>
保存代码,刷新浏览器,页面展示为:
点击超链接,跳转到图片-- 祢豆子(图片这里就不放出来了)
此时可以看到浏览器的路径也变成了图片的路径;之所以属性值中可以直接写文件名,是因为该图片文件和当前网页文件是位于同一个文件夹中的,那么若我们要放问的文件和当前网页文件不在同一个文件夹中应该怎么表示呢?让我们来试试吧!
我们尝试访问html_study文件夹中的一个html文件,输入代码:
<body>
<a href="../test.html">这是内部超链接<a>
</body>
保存代码,刷新浏览器,页面展示同上
当点击超链接是会跳转至相应文件所在位置
这里"../test.html"
表示的即是相对路径,"../"
表示的是上级路径,"./"
表示的是当前路径下,"/"
表示根目录。
三、其他属性
除了href属性,a标签还有name属性、title属性、target属性;其中name属性是给该链接命名,title属性是给该链接加提示文字,target属性是指定该链接打开窗口的方式
修改代码如下:
<body>
<a href