HTML的链接与图像

最新推荐文章于 2024-11-14 00:00:11 发布

妧徽

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量122

点赞数 3

分类专栏：笔记整理文章标签： html 前端

本文链接：https://blog.csdn.net/woiyuan/article/details/138661520

版权

笔记整理专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML的链接与图像</title>
		<style>
			a{
				text-decoration:none/* 删除超链接文本的下划线 */ 
			}
		</style>
	</head>
	<body>
<!-- 		HTML链接
			1.HTML链接语法为[<a href="练习.html">链接文本</a>]。href属性规定链接的目标。
			2.target属性定义链接文档在何处显示（target详细使用在HTML表单7.中）
			3.name属性规定锚点的名称，可使其在各锚点中来回跳转。（为找到需跳转锚点时会默认回到页面顶部）
		HTML的图像
			1.定义图像的语法为<img src="ur1">，img是空标签只包含属性，src指图像的源属性的URL地址。
			2.alt属性用来为图像定义一串由用户定义的可替换的文本
			3.常用标签<img>,<map>(定义图像地图)，<area>(定义图像地图中的可点击区域) -->
		<h1>HTML链接</h1>
			<a href="盒子属性.html" target="_blank">这里是盒子模型的介绍</a>
			<!-- target的选项有_blank(响应在新窗口或选项卡)，_self(默认，在当前窗口显示)，
			_parent(响应在夫框架中)，_top(显示在整个body中)，framename(响应在命名的iframe) -->
			<a name="mao">这里设置了一个锚点</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><br><br>
			<br><br><br><br><br><br><br><br><br><br>
			<a href="#mao">跳转至设置锚点</a><!-- #定位页面内的锚点 -->
			<a href="盒子属性.html#mao">盒子模型中的锚点</a>
			<p>用图像进行链接</p>
			<a href="盒子属性.html">
			<img src="../img/女.webp" width="70px" height="30px"/></a>
		<h1>HTML的图像</h1>
			<img src="../img/logo.gif" alt="网络错误" width="40px" height="40px"/><!-- alt为可替换文本 -->
			<p>图像背景</p>
			<!-- <body background="img/绿.gif">
				<p>gif和jpg文件均可用作HTML背景，如果图像小于页面图像会重复进行</p>
			<body> -->
			<h2>图像的对齐方式</h2>
			<p>图像<img src="../img/女.webp" width="70px" align="bottom"/>在文本中</p>
			<p>图像<img src="../img/女.webp" width="70px" align="middle"/>在文本中</p>
			<p>图像<img src="../img/女.webp" width="70px" align="top"/>在文本中</p>
			<h2>浮动图像</h2>
			<p>图像<img src="../img/女.webp" width="70px" align="left"/>在文本左侧</p>
			<p>图像<img src="../img/女.webp" width="70px" align="right"/>在文本右侧</p>
			<h2>创建图像映射</h2>
			<a href="https://www.w3school.com.cn/tiy/t.asp?f=eg_html_areamap">详细操作</a>
			<br />
		<br />
		<a href="4.选择器和style属性.html" style="text-decoration:none">上一节</a>
		<a href="6.HTML列表.html" style="text-decoration:none">&nbsp;下一节</a>
	</body>
</html>