HTML图片标签 超链接标签

标签: 前端  html

图片标签(行内元素)
img
	src图片路径
		相对路径:从当前文件触发查找另一个文件所经过的路径
		绝对路径:从跟盘符出发查找文件的路径
		url路径
	1.本地资源一般使用相对路径,放在img文件夹里面
	2.在图片不失真的情况下,改变高的同时也会改变宽
	3.图片是不会自动换行的
<h3>图片标签学习</h3>
		<hr />
		<!--本地资源 -->
		<img src="img/1.jpg" width="200px"/>
		
		<!-- 网络资源,这里url太长没贴出来 -->
		<img src="url" width="200px"/>
		<!-- 图片标题 鼠标放在图片上的时候会出现title的内容,alt文字-->
		<img src="img/2.jpg" title="这是一条可爱的狗" width="200px" alt="这是一条边牧"/>

在这里插入图片描述

超链接标签 herf
提供点击位访问方式 放在两个a之间
访问方式可以是文字,也可以是图片

		target:指明要跳转网页资源的位置
		self 在当前页面刷新显示
		blank 新的标签页显示
		top 顶层
		parent 父级页面
<a href="05_HTML-图片标签学习.html"target="_blank">图片标签学习</a>
<a href="04_HTML_列表标签.html"target="_blank"><img src="img/3.gif" ></a>

在这里插入图片描述

锚点学习

使用方法,在希望跳转的地方格式:<a name="锚点名"></a>
然后在目录处,<li><a href="#f锚点名">入口名</a></li>

特别的,回到顶部<a href="#">回到顶部</a>

<h4>锚点学习</h4>
		<hr >
		<dl>
			<li><a href="#first">第一章</a></li>
			<li><a href="#second">第二章</a></li>
			<li><a href="#third">第三章</a></li>
		</dl>
<a name="first"></a>
		<p>第一章</p>
		<p>今年老板没有涨薪,考虑要不要跳槽</p>
		<p>今年老板没有涨薪,考虑要不要跳槽</p>
		<p>今年老板没有涨薪,考虑要不要跳槽</p>
		<a name="second"></a>
		<p>第二章</p>
		<p>熊剪指甲变成了能</p>
		<p>熊剪指甲变成了能</p>
		<p>熊剪指甲变成了能</p>
		<a name="third"></a>
		<p>第三章</p>
		<p>张三开始宣扬面向对象开发的好处,被尊为这个世界的java鼻祖</p>
		<p>张三开始宣扬面向对象开发的好处,被尊为这个世界的java鼻祖</p>
		<p>张三开始宣扬面向对象开发的好处,被尊为这个世界的java鼻祖</p>
		<p>张三开始宣扬面向对象开发的好处,被尊为这个世界的java鼻祖</p>
		<p>张三开始宣扬面向对象开发的好处,被尊为这个世界的java鼻祖</p>
		<a href="#">回到顶部</a>
		

在这里插入图片描述

版权声明:本文为WA_MC原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/WA_MC/article/details/106788944