HTML里图片与超链接用法示例

virtualxiaoman

已于 2023-09-30 20:07:27 修改

阅读量232

点赞数 1

CC 4.0 BY-SA版权

文章标签： html 前端

于 2023-09-29 23:16:54 首次发布

本文链接：https://blog.youkuaiyun.com/virtualxiaoman/article/details/133421054

该篇文章介绍了HTML文件中包含的几个链接，指向原神、BlueArchive网站以及角色图片，展示了如何在网页中展示游戏启动和角色内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>启动？启动！</title>
</head>
<body style="background-color: #CCFFCC"><!--亦可使用 <body bgcolor="pink"> 等 -->
    <div id="link">
		<p>点击英文查看图片哦~</p>
		<a href="#kivotos">kivotos</a>
		<a href="#arona">Arona</a>
		<a href="#shiroko">Shiroko</a><br/>
		<br/>
	</div>
	<div id="start">
		<h2><a href="https://ys.mihoyo.com/cloud/?utm_source=default#/">原神，启动！</a></h2>
		<a href="genshin impact/start!.html"><img src="img/genshin impart.png" width="579" height="324" alt="原神启动" title="启动!"></a>
		<h2><a href="https://bluearchive-cn.com/" target="_blank">Blue Archive，启动！</a></h2>
		<a href="blue archive/Shiroko.html"><img src="img/blue archive.png"></a>
	</div>
	<div id="kivotos">
		<p>kivotos~~</p>
		<img src="img/kivotos.png">
	</div>
	<div id="arona">
		<p>arona~~</p>
		<img src="img/Arona.jpeg">
	</div>
	<div id="shiroko">
		<p>shiroko~~</p>
		<img src="img/Shiroko.jpeg">
	</div>
</body>
</html>

start!.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超超胡桃🥵</title>
	</head>
	<body>
		<p>🥵===3<img src="../img/tao.png"></p>
		<img src="../img/Hu_Tao_Card.webp">
	</body>
</html>

Shiroko.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我要玩布鲁阿凯五</title>
	</head>
	<body>
		<img src="../img/Shiroko.jpeg">
	</body>
</html>

文件目录结构如下：

部分输出如下：

代码内使用图片如下：