html学习-05（链接及图像）-优快云博客

本文详细介绍了HTML中的基本元素及属性应用，包括背景设定、超链接、图片展示、邮件链接等，并展示了不同图像对齐方式的效果及浮动属性的使用。

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

background：背景；

<a>：文字链接、图片链接、邮件链接等；

<img>：width、height、align等属性。

<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body background="../images/demo_005_backgroud.jpg">
		<a href="./demo_004.html">上一次网页</a>
		<br />
		<p><a href="https:www.baidu.com">百度</a>点击可进行百度</p>
		<a href="https:www.baidu.com"><img src="../images/demo_005_baidu.png"></a>
		<p >在新链接中打开百度<a name="baidu" href="https:www.baidu.com" target="_blank">百度一下，你就知道</a></p>
		<br />
		<p>邮件链接：<a href="mailto:jiehuangmail@vip.qq.com">点此向我发送链接</a><br /><em>PS</em>：如邮件地址中有空格用20%代替</p>
		<img src="../images/demo_005_img.jpg" width="180px" height="180px" alt="这是个图片">
		<br />
		<h2>未设置对齐方式的图像（bottom 为默认对齐方式）：</h2>
		<p>图像<img src="../images/demo_005_arrange.gif" alt="这是个图片" width="50px"
		height="50pxs">在文本中</p>
		<h2>已设置对齐方式的图像：</h2>
		<p>图像<img src="../images/demo_005_arrange.gif" alt="这是个图片" align="bottom" width="50px"
		height="50pxs">在文本中（bottom）</p>
		<p>图像<img src="../images/demo_005_arrange.gif" alt="这是个图片" align="middle" width="50px"
		height="50pxs">在文本中（middle）</p>
		<p>图像<img src="../images/demo_005_arrange.gif" alt="这是个图片" align="top" width="50px"
		height="50pxs">在文本中（top）</p>
		<h1>浮动：</h1>
		<p>图像<img src="../images/demo_005_arrange.gif" alt="这是个图片" align="left" width="50px"
		height="50pxs">在文本左侧，align值为left</p>
		<p>图像<img src="../images/demo_005_arrange.gif" alt="这是个图片" align="right" width="50px"
		height="50pxs">在文本右侧，align值为right</p>
		<p>area标签与map标签配合使用，暂时不写图像映射，后期再写。</p>
		<p>锚的使用：<a href="#baidu">点击此处</a></p>
	</body>
</html>