【前端作业系列】HTML基础点 ， 训练超链接＜a＞和锚链接（2022年6月16日作业）

最新推荐文章于 2024-06-15 12:24:06 发布
最新推荐文章于 2024-06-15 12:24:06 发布
阅读量539 收藏 4
点赞数
分类专栏： 前端作业系列 文章标签： 前端 html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59012240/article/details/126318485
版权

一、效果1展示

点击对应的古诗名，会跳转到对应的古诗部分

 

 

 

 

 

HTML代码展示


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现古诗跳转</title>
		<style>
			p{
				font-size: 18px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p id="gsjs">古诗鉴赏</p>
		<p>单击学习<a href="#libai">《静夜思》</a></p>
		<p>单击学习<a href="#chunxiao">《春晓》</a></p>
		<p>单击学习	<a href="#kezhi">《客至》</a></p>
		<p>单击学习<a href="#xrjj">《夏日绝句》</a></p>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<p id="libai">《静夜思》</p>
		<p>[唐]李白</p>
		<p>床前明月光,</p>
		<p>疑是地上霜。</p>
		<p>举头望明月,</p>
		<p>低头思地乡。</p>
		<img src="libai.png" alt="李白" width="150px"><br>
		<a href="#gsjs"">我要回顶部</a>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		
		<p id="chunxiao">《春晓》</p>
		<p>[唐]孟浩然</p>
		<p>春眠不觉晓,</p>
		<p>处处闻啼鸟。</p>
		<p>夜来风雨声,</p>
		<p>花落知多少。</p>
		<img src="mhr.png" alt="孟浩然" width="150px"><br>
		<a href="#gsjs"">我要回顶部</a>
		
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<p id="kezhi">《客至》</p>
		<p>[唐]杜甫</p>
		<p>舍南舍北皆春水，但见群鸥日日来。</p>
		<p>花径不曾缘客扫，蓬门今始为君开。</p>
		<p>盘餐市远无兼味，樽酒家贫只旧酷。</p>
		<p>肯与邻翁相对饮，隔篱呼取尽余杯。</p>
		<img src="tf.png" alt="杜甫" width="150px"><br>
		<a href="#gsjs"">我要回顶部</a>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br>
		
		<p id="xrjj">《夏日绝句》</p>
		<p>[宋]李清照</p>
		<p>生当作人杰,</p>
		<p>死亦为鬼雄。</p>
		<p>至今思项羽,</p>
		<p>不肯过江东。</p>
		<img src="lqz.png" alt="李清照" width="150px"><br>
		
		<a href="#gsjs"">我要回顶部</a>
		
		
	</body>
</html>

二、效果2展示

点击对应的部分会跳到相应的小吃，锻炼锚链接

 

HTML代码展示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三大国民小吃相对势力分布</title>
	<base href="#" target="_blank">
</head>

<body>
<img src="./map.jpg" alt="" width="500"  usemap="#Map"/>

<map name="Map">
 
  <area shape="poly" coords="145,99,63,190,91,221,159,201,201,155" href="https://baijiahao.baidu.com/s?id=1695203809518004961&wfr=spider&for=pc">

  
  <area shape="poly" coords="204,156,260,167,291,157,302,150,307,137,330,128,346,125,356,123,351,111,333,109,333,96,345,88,354,82,361,71,359,62,367,58,380,74,386,77,392,87,386,97,376,111,371,123,373,137,375,151,370,157,358,164,343,169,327,161,312,176,307,180,291,188,277,198,276,210,278,218,264,230,262,238,255,240,247,230,233,234,228,240,221,234,214,229,207,242,215,250,216,257,214,269,206,271,201,275,193,278,182,282,171,277,155,280,147,276,125,266,107,255,88,242,91,232,100,226,110,223,129,213,147,213,159,211,167,209,174,200" href="./lzlm.html">
  <area shape="poly" coords="379,54,385,55,390,61,405,88,422,106,429,115,449,109,446,118,438,136,430,144,423,156,415,164,390,174,377,182,369,189,365,186,368,181,361,178,357,178,348,186,339,191,342,195,344,200,350,203,361,198,368,204,369,209,360,212,357,216,354,228,358,234,364,245,363,249,356,251,352,255,345,258,336,261,328,259,323,252,306,240,298,234,285,234,283,238,270,246,269,252,266,259,265,262,262,269,259,277,252,288,255,297,260,304,242,312,233,317,224,311,209,299,220,282,221,273,221,264,222,253,230,244,245,236,254,239,270,232,281,213,289,190,311,191,320,175,327,170,334,168,347,168,357,168,375,154,377,138,376,122,384,100,389,91,390,86,382,68,371,59,370,56,370,53,375,50" href="https://baijiahao.baidu.com/s?id=1695203809518004961&wfr=spider&for=pc">
  <area shape="poly" coords="269,259,284,249,292,241,299,236,318,250,330,263,357,258,370,251,373,256,369,271,357,280,344,295,327,309,312,314,297,318,296,328,299,337,292,338,282,338,289,330,290,325,283,322,279,321,268,316,265,304,262,295,262,287,261,279,267,267,268,264" href="https://baike.baidu.com/item/%E6%B2%99%E5%8E%BF%E5%B0%8F%E5%90%83/3311528?fr=aladdin">
</map>
	
	
</body>
</html>

三、效果3展示

HTML代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 980px;
				height: 350px;
				background-color: #fff;
				box-shadow:1px 1px 5px 1px  #888 ;
			}
			
		</style>
	</head>
	<body>
		<div>
			<a href="https://baike.baidu.com/item/%E9%81%87%E8%A7%81%C2%B7%E7%92%80%E7%92%A8%E7%9A%84%E4%BD%A0/24256183?fr=aladdin" target="_blank"><img src="./img/1.png" alt=""></a>
			<a href="https://baike.baidu.com/item/%E7%8B%AE%E5%AD%90%E5%B1%B1%E4%B8%8B%E7%9A%84%E6%95%85%E4%BA%8B" target="_blank"><img src="./img/2.png" alt=""></a>
			<a href="https://v.qq.com/x/cover/mzc00200eykcej6/z0043i6hetz.html?n_version=2021&ptag=10523" target="_blank"><img src="./img/3.png" alt=""></a>
			<a href="https://v.qq.com/x/cover/mzc00200xahwmw1/a0043q8zbrw.html?n_version=2021" target="_blank"><img src="./img/4.png" alt=""></a>
		</div>
	</body>
</html>
前端小媛
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超链接的练习题
难瘦不难过的专栏
07-03 899
无标题文档 #box{  width:538px;  font-size:"宋体";  } #title{  line-height:32px;  font-size:15px;} #title-a{  color:red;   } #title_span{  color:#00C;  text-decoration:underline; } #content{
超链接，锚点，跳转练习.html
05-27
属于课后练习，做个html网页，在网页里加入锚点，超链接，跳转等课上学习的内容。（网页里的内容纯属于练习所用，无作其他用于）
HTML案例 • 【第2章 图片和超链接练习；锚链接练习；预格式化标签练习】
冯上
11-27 436
Day2学习进度 练习一 <图片属性> <!DOCTYPE html> <html leng="zh-cn"> <head> <meta charset="UTF-8"> <meta name="keywords" content="d"> <meta name="description" content="3"> <title>图片标签</title> <
2024年大一网页期末作业（纯html+css实现）
最新发布
网页设计与制作 | HTML+CSS+JS
06-15 832
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
实训篇-Html-超链接练习
gy77
01-07 960
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超链接练习</title> </head> <body> <!-- href:超链接要访问的url地址 地址既可以是网络地址， 也可以是...
web超链接及练习
weixin_44932552的博客
09-24 1337
第一个百度的地址是可以访问的，是访问过的，是紫色的，第二个百度的链接是蓝色的，是可以访问的。 2. a标签中的target属性可以用来指定打开链接的位置，可选值为： _self:表示当前窗口中打开链接，是默认值； _blank:表示在新的窗口打开链接； 可以设置为一个内联框架的name属性值，链接在指定的内联框架中打开 3.href=’#’： 创建超链接时，如果地址不确定，可以使用一个#...
2022年大一下网页期末作业【二十四节气】纯html、css制作
08-10
- **基本元素**：学会使用`<p>`段落、`<h1>`至`<h6>`标题、`<img>`图像、`<a>`链接等基本标签来构建网页内容。 - **列表与表格**：学习使用`<ul>`无序列表、`<ol>`有序列表和`<table>`表格来组织数据。 ### 三、DIV...
AJ作业-最新_AJ的html网页前端作业_
10-01
5. 链接：<a>标签用于创建超链接，可以链接到其他网页或者页面内的特定位置。 6. 图像：<img>标签用于插入图像，需要指定src属性指向图像的URL，并可设置alt属性提供替代文本。 7. 列表：无序列表(<ul>)、有序列表...
Web前端基础：HTML5超链接标签.pptx
05-06
HTML5 是Web前端开发的基础，其中超链接标签`<a>`是构建网页交互性的重要元素。超链接允许用户从一个页面跳转到另一个页面，无论是同一网站内的不同页面，还是互联网上的其他任何位置。本篇将详细介绍HTML5中的...
web前端期末大作业 html+css+javascript火影忍者网页设计实例 动漫网站制作
08-10
- **基本标签的应用**: 如`<img>`用于显示图像，`<nav>`定义导航链接的容器，`<ul>`和`<li>`用于创建无序列表，`<a>`标签用于创建超链接等。 #### 2. **CSS布局与美化** - **DIV+CSS布局**: 使用`<div>`标签结合...
a-simple-web.rar_html网页作业_web作业_布置作业HTml
09-20
5. 链接（Links）：`<a>`标签创建超链接，href属性定义链接的目标地址。 6. 图像（Images）：`<img>`标签插入图像，src属性指定图像的URL，alt属性提供替代文本。 7. 列表（Lists）：`<ul>`定义无序列表，`<ol>`...
网页入门D2-HTML语法与基础标签练习
m0_53156691的博客
01-15 452
HTML语法与基础标签 练习总结 写在前面：利用所学的HTML的语法和常用的HTML元素。实现在网页上显示图片、显示不同类型的文本以及实现页面跳转。 属性 值 描述 class classname 规定元素的类名 id id 规定元素的唯一值 style style_definition 规定元素的行内样式 title text 规定元素的额外信息 嵌套：把一个元素放入另一个元素中称为元素的嵌套，嵌套是构建HTML页面的方式。 < br >标签用于换行 常见
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
热门推荐
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
Day01-作业（HTML&CSS）
chuanchengdabing的博客
07-30 1630
1.能够说出HTML的作用； 2.掌握文本、图片、音频、视频、超链接标签基本使用； 3.理解HTML中表单提交方式GET、POST区别； 4.能够基于表单、表单项标签制作简单的HTML表单； 5.能够说出CSS的作用； 6.能够说出CSS的引入方式及常见的三种选择器； 7.能够说出JS的作用； 8.能够掌握JS基础书写语法； 9.能够掌握JS声明变量的语法；
html_5_小作业1_超链接练习
dc12499574的博客
04-13 7908
文章目录要求效果代码demo.htmloldman.htmlys.html 要求 1、目录实现 2、图片插入 3、实现内部链接的跳转 4、实现外部链接的跳转 效果 源码以及素材提取 链接：https://pan.baidu.com/s/17OgWsDffszyjwdW84WOXFA 提取码：0383 代码 demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
HTML之超链接
qq_53977993的博客
10-08 6036
本章主要是讲述HTML超链接之a标签和锚点功能，包括音视频标签，感兴趣的话可以多看看。
HTML学习（五）——超链接
codemonkeysama的博客
03-31 1261
超链接的基本格式 ... 1. scheme指的是http,ftp,file,mailto,news,gopher,telnet七种 2. host指的是IP地址或计算机名称 3. post指的是服务器端口 4. path指的是文件路径 5. filename指的是文件名 例如：
HTML创建超链接
小菜鸟的博客
08-26 8324
创建超链接 什么是超链接 超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当
html5基础第四篇，超链接标签。
前进的蜗牛的博客
09-22 1559
超链接 1.a 必选属性href。超链接显示内容的路径，与图片src的路径语法格式相同.https://mp.csdn.net/postedit/82811876.超链接点击显示内容的情:如果支持,直接显示 如果不支持,变为下载.超链接支持的显示内容html文件,txt文档,图片文件,超链接不支持的类型压缩文件,PHP文件,浏览量不支持的音频,视频文件,PHP文件比较特殊,经过服务器之后,是可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值