HTML5——如何在网页中加入图片和超链接。

最新推荐文章于 2023-06-07 22:24:04 发布

_Meditation_

最新推荐文章于 2023-06-07 22:24:04 发布

阅读量2.1w

点赞数 22

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_44850537/article/details/90109992

版权

HTML 专栏收录该内容

5 篇文章 7 订阅

订阅专栏

声明：此页内容极度简单，觉得low的话我可以不看

寻找图片，把图片的位置记好，并且重命名，方便寻找。
写出基本框架，引用< img >标签。
找出你需要跳转的网页，记好网址使用< a >< /a > 作为标签。

我把图片放到了D:\HTML，重命名为image。
在这里插入图片描述
先写出基础框架：

<!DOCTYPE html>
<html>
	  <meta charset="UTF-8">
	<hcad>
		<title>第一个程序</title>
	</hcad>
	<body>
		<h1>插入一张图片</h1>
	</body>
</html>

再往里面插入标签：

< img src = “D:\HTML\image.jpeg” >

总代码：

<!DOCTYPE html>
<html>
	  <meta charset="UTF-8">
	<hcad>
		<title>第一个程序</title>
	</hcad>
	<body>
		<h1>插入一张图片</h1>
		<img src = "D:\HTML\image.jpeg" >
	</body>
</html>

这个时候显示出的图片就是这个：
在这里插入图片描述
再接下来就可以插入超链接：
也是直接往里面插入标签：

< a href = “https://mp.csdn.net/” >点我< /a >

总代码：

<!DOCTYPE html>
<html>
	  <meta charset="UTF-8">
	<hcad>
		<title>第一个程序</title>
	</hcad>
	<body>
		<h1>插入一张图片</h1>
		<img src = "D:\HTML\image.jpeg" >
		<a href = "https://mp.csdn.net/">******点我******</a>
	</body>
</html>

最后的结果图：
在这里插入图片描述

等等还没完，这个时候我们可能会觉得图片太大不好看，而且是直接进入网页，而不能重新生成网页而有点苦恼，别担心，很简单

改变图片宽度：

width = “256px” height = “256px”
这里的256px的数字是可以自己调节的。

最后总代码：

<!DOCTYPE html>
<html>
	  <meta charset="UTF-8">
	<hcad>
		<title>第一个程序</title>
	</hcad>
	<body>
		<h1>插入一张图片</h1>
		<img src = "D:\HTML\image.jpeg" width = "256px" height = "256px">
		<a href = "https://mp.csdn.net/">******点我******</a>
	</body>
</html>

新建网页标签：

target = “_blank”
自动新建窗口跳转到你说复制到的链接网页
、

总代码：

<!DOCTYPE html>
<html>
	  <meta charset="UTF-8">
	<hcad>
		<title>第一个程序</title>
	</hcad>
	<body>
		<h1>插入一张图片</h1>
		<img src = "D:\HTML\image.jpeg" width = "256px" height = "256px">
		<a href = "https://mp.csdn.net/"  target = "_blank">******点我******</a>
	</body>
</html>

最后生成页面：
在这里插入图片描述

END

_Meditation_

关注

22
点赞
踩
75

收藏

觉得还不错? 一键收藏
7
评论
HTML5——如何在网页中加入图片和超链接。

声明：此页内容极度简单，觉得low的话我可以不看寻找图片，把图片的位置记好，并且重命名，方便寻找。写出基本框架，引用< img >标签。找出你需要跳转的网页，记好网址使用< a >< /a > 作为标签。我把图片放到了D:\HTML，重命名为image。先写出基础框架：<!DOCTYPE html><html> ...
复制链接

扫一扫

专栏目录