HTML链接和图片

最新推荐文章于 2023-12-08 16:23:35 发布

m0_47823557

最新推荐文章于 2023-12-08 16:23:35 发布

阅读量544

点赞数

本文链接：https://blog.csdn.net/m0_47823557/article/details/119214559

版权

本文介绍了HTML中链接的各种用法，包括普通链接、新窗口打开、页面内部链接和电子邮件链接。此外，还展示了如何通过CSS实现图片浮动效果，创建图像映射，以及利用HTML5的canvas标签进行图形绘制。最后提到了figure和figcaption标签在组织内容和添加图像说明中的应用。

摘要由CSDN通过智能技术生成

一、链接

1、将图像作为链接：

<body>
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="链接" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="链接" width="32" height="32"></a></p>
</body>

运行结果为：

2、在新的浏览器窗口打开链接：

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

3、链接到同一个页面的不同位置：

<p>
<a href="#C4">查看章节 4</a>
</p>

4、创建电子邮件链接：

<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

注意：单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。

二、图片

1、图片浮动到图片的左边或者右边：

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 
一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 
一个带图片的段落，图片浮动在这个文本的右边。
</p>

2、创建图像映射:

<p>点击太阳或其他行星，注意变化：</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

运行结果：（右边为点击后）

3、<canvas>标签

通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。

例如：

需求:在画布四个角与中间位置画五个100*80的矩形，实心矩形要求颜色不同

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<style type="text/css">
	body{
		text-align: center;
	}
	canvas{
		background-color: #ccc;
	}
</style> 
<title></title> 
</head>
<body>
<h1>Canvas矩形</h1>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
<script type="text/javascript">
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext('2d');
	/*1、第一个左上角红色实心矩形*/
	ctx.fillStyle="#f00";
	ctx.fillRect(0,0,100,80);
	/*2、第二个右上角绿色实心矩形*/
	ctx.fillStyle="#0f0";
	ctx.fillRect(400,0,100,80);
	/*3、第三个右下角蓝色实心矩形*/
	ctx.fillStyle="#00f";
	ctx.fillRect(400,320,100,80);
	/*4、第一个左下角黑色实心矩形*/
	ctx.fillStyle="#000";
	ctx.fillRect(0,320,100,80);
	/*5、中间白色实心矩形*/
	ctx.fillStyle="#fff";
	ctx.fillRect(200,160,100,80);
</script>
</html>

结果：

4、<figure>标签

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure>
  <img loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

5、<figure>标签

<figcaption> 标签为 <figure> 元素定义标题。

<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

<figure>
  <img loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>