HTML-2.3 超链接-外部链接,内部链接,书签链接

发布于:2025-05-16 ⋅ 阅读:(17) ⋅ 点赞:(0)

本系列可作为前端学习系列的笔记,代码的运行环境是在HBuilder中,小编会将代码复制下来,大家复制下来就可以练习了,方便大家学习。小编作为新晋码农一枚,会定期整理一些写的比较好的代码,作为自己的学习笔记,会试着做一下批注和补充,如转载或者参考他人文献会标明出处,非商用,如有侵权会删改!欢迎大家斧正和讨论!

系列文章目录 

HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号

HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大

HTML-2.2 列表--无序列表、有序列表、定义列表

HTML-2.3 超链接-外部链接,内部链接,书签链接

HTML-2.4 滚动字幕marquee

HTML-3.1 表格table

 HTML-3.2 表格的跨行跨列(课表制作实例)

 HTML中应用CSS样式的三种常见方法 

HTML-3.3 表格布局(学校官网简易布局实例)

HTML-3.4 表单form

HTML-实战之 百度百科(影视剧介绍) 


目录

系列文章目录 

一、简单分析

1、外部链接

2、内部链接

3、书签链接

二、第二部分

总结


一、简单分析

1、外部链接

<h1>1.外部链接</h1>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com" target="_blank " title="我是用来提示的">
	<img src="../img/百度.png" width="100px"></a><br>
		<a href="http://www.sohu.com" >搜狐</a>
	<a href="http://www.sohu.com" >
		<img src="../img/搜狐.png" width="40px"></a><br>

 注:图片自己找,然后存到指定位置

我这里是存在了上一层的同级img文件夹下

代码运行

2、内部链接

<h1>2.内部链接</h1>
		<a href="1-1.html">文本</a>
		<a href="../个人主题网站/index.html">返回首页</a>
	

代码运行

3、书签链接

<!-- 3.书签链接 a name 先起名字后叫他 a href="#name" -->
		<h1>3.书签链接</h1>
		<h2>庆余年</h2>
		<a name="up"></a>
		<h3>目录</h3>
		<!-- <a href="#1"><a>点击跳转到相应位置 -->
		<!-- <a name="up"></a>点击跳转到此 -->
		<a href="#1">第一章</a>
		<a href="#2">第二章</a>
		<a href="#3">第三章</a>
		<a name="1"></a>
		<h3>第一章</h3>
		<p>从前有个小男孩,他穿越了<br><br></p>
		<a href="#up">返回顶部</a>

		
		<aname="2"></a>
		<h3>第二章</h3>
		<p>小男孩来京城了<br><br></p>
		<a href="#up">返回顶部</a>
	
		<a name="3"></a>
		<h3>第三章</h3>
		<p>小男孩遇见鸡腿姑娘<br><br></p>
		<a href="#up">返回顶部</a>

代码运行

二、第二部分

第二部分正文

HTML代码块如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接-外部链接,内部链接,书签链接</title>
	</head>
	<body>
		<!-- 1.外部链接 a 属性href name target titlie -->
		<h1>1.外部链接</h1>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com" target="_blank " title="我是用来提示的">
	<img src="../img/百度.png" width="100px"></a><br>
		<a href="http://www.sohu.com" >搜狐</a>
	<a href="http://www.sohu.com" >
		<img src="../img/搜狐.png" width="40px"></a><br>
		<!-- 2.内部链接,连接本网站的其他页面 -->
		
		<h1>2.内部链接</h1>
		<a href="1-1.html">文本</a>
		<a href="../个人主题网站/index.html">返回首页</a>
		<!-- 3.书签链接 a name 先起名字后叫他 a href="#name" -->
		<h1>3.书签链接</h1>
		<h2>庆余年</h2>
		<a name="up"></a>
		<h3>目录</h3>
		<!-- <a href="#1"><a>点击跳转到相应位置 -->
		<!-- <a name="up"></a>点击跳转到此 -->
		<a href="#1">第一章</a>
		<a href="#2">第二章</a>
		<a href="#3">第三章</a>
		<a name="1"></a>
		<h3>第一章</h3>
		<p>从前有个小男孩,他穿越了<br><br></p>
		<a href="#up">返回顶部</a>

		
		<aname="2"></a>
		<h3>第二章</h3>
		<p>小男孩来京城了<br><br></p>
		<a href="#up">返回顶部</a>
	
		<a name="3"></a>
		<h3>第三章</h3>
		<p>小男孩遇见鸡腿姑娘<br><br></p>
		<a href="#up">返回顶部</a>
		
	</body>
</html>

代码运行


总结

以上就是今天要讲的内容,本文简单记录了超链接-外部链接,内部链接,书签链接,仅作为一份简单的笔记使用,大家根据注释理解


网站公告

今日签到

点亮在社区的每一天
去签到