HTML——＞超链接

最新推荐文章于 2024-03-23 23:48:47 发布

省级干饭王

最新推荐文章于 2024-03-23 23:48:47 发布

阅读量252

点赞数

分类专栏： html 笔记

本文链接：https://blog.csdn.net/qq_55016379/article/details/116478224

版权

笔记同时被 2 个专栏收录

94 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

超链接

超链接简介

定义：超链接，英文名为hyperlink。每一个网站由非常多的网页组成，而网页之间通常都是通过超链接来相互关联的。超链接给我们提供了独立页面之间方便跳转的方式

a标签

在HTML中，我们可以使用a标签来实现超链接

语法结构：

<a herf="链接地址">文本或图片</a>

herf表示想要跳转的那个网页的路径，可以是相对路径，也可以是绝对路径

文本超链接：将文本设为超链接
图片超链接：将图片设为超链接

代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<!--图片-->
		<a href="http://www.lvyestudy.com" target="_blank"><img src="../图片/1466292480.jpeg"/></a><br/>
		<!--文字-->
		<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
	</body>
</html>

超链接

绿叶学习网

target属性

默认情况下，**超连接都是在当前浏览器窗口打开新页面的。**在HTML中，我们可以使用target属性来定义超链接打开窗口的方式

语法结构：

<a herf="链接地址" traget="打开方式"></a>

target属性取值

属性值	说明
_self	在原来窗口打开链接(默认值)
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开链接

不过在一般情况下，我们只会用到**_bank**这一个属性值

内部链接

内部链接的访问方式，和网页访问内部图片的方式一样

都是通过**/和…/**来实现的

锚点链接

在HTML中，锚点链接其实是内部链接的一种，它的连接地址(也就是href)指向的是当前页面的某个部分。

当点击某个超链接时，它就会跳到当前页面的某个部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锚点链接</title>
	</head>
	<body>
		<div>
			<a href="#article">推荐文章</a><br/>
			<a href="#music">推荐音乐</a><br/>
			<a href="#movie">推荐电影</a><br/>
		</div>
		<div id="artucle">
			<h3>推荐文章</h3>
			<ul>
				<li>朱自清-荷塘月色</li>
				<li>余光中-乡愁</li> 
				<li>鲁迅-啊Q正传</li>
			</ul>
		</div>
		<div id="music">
			<h3>推荐音乐</h3>
			<ul>
				<li>林俊杰-被风吹过ed夏天</li>
				<li>曲婉婷-我的歌声里</li>
				<li>许嵩-灰色的头像</li>
			</ul>
		</div>
		<div id="movie">
			<h3>推荐电影</h3>
			<ul>
				<li>蜘蛛侠系列</li>
				<li>钢铁侠系列</li>
				<li>复仇者联盟</li>
			</ul>
		</div>
	</body>
</html>

锚点链接

推荐电影

蜘蛛侠系列
钢铁侠系列
复仇者联盟

参数：

目标元素的id
a标签的href属性指向该id

id属性：元素的名称，这个id名是随便起的(一般是英文)。在统一页面中，id是唯一的，一个页面中不能出现相同的id。

在给herf属性赋值时，需要在id前加上**“#”**用来表示一个锚点链接

省级干饭王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——＞超链接

超链接超链接简介定义：超链接，英文名为hyperlink。每一个网站由非常多的网页组成，而网页之间通常都是通过超链接来相互关联的。超链接给我们提供了独立页面之间方便跳转的方式a标签在HTML中，我们可以使用a标签来实现超链接语法结构：<a herf="链接地址">文本或图片</a>herf表示想要跳转的那个网页的路径，可以是相对路径，也可以是绝对路径文本超链接：将文本设为超链接图片超链接：将图片设为超链接代码实例<!DOCTYPE html>
复制链接

扫一扫

专栏目录