HTML-图片与超链接标签

最新推荐文章于 2024-09-12 21:42:15 发布

原创最新推荐文章于 2024-09-12 21:42:15 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了HTML中用于展示图像的<img>标签及其属性，包括相对路径和绝对路径的使用。此外，还详细讲解了超链接<a>标签，包括如何创建内部链接、外部链接以及电子邮件链接，以及如何定义页面内的锚点进行跳转。

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

图像标签

语法：

<img src="" alt="".../>

img属性

属性	值	描述
src（必写）	URL	显示图像的URL
alt	文字	图像替代文本
height	数值和百分比	图像的高
width	数值和百分比	图像的宽

HTML路径分为：相对路径和绝对路径

相对路径：要从父级开始写，直到找到这个文件。例如：在E盘时：

<img src="E:/HTML/图像与超链接/img/html.jpg" />

相对路径：图像相对于网页的路径。

*当图片在img文档里面，文档与文件在同一级的时候可以表现为（）：

<img src="img/1.jpg" alt="图像与超链接" width="15%" height="15%"/>

*图片与文件在同一个文档的时候可以表现为（也就是直接写图片名字就好）：

<img src="1.jpg" alt="图像与超链接" width="15%" height="15%"/>

*图片在文件父级的时候可以表现为：

<img src="../1.jpg" alt="图像与超链接" width="15%" height="15%"/>

超链接标签

语法：

<a href="">内容</a>

属性


href	链接地址
target	链接的目标窗口 _self _blank _top _parent
title	链接提示文字
name	链接命名

代码练习：

<a href="https://huke88.com/course/2018.html" target="_blank">

定义锚（同一页面）：

 <a href="#锚名1">目录1</a>
 <a href="#锚名2">目录2</a>
 <a href="..." name="锚名1">内容</a>
 <a href="..." name="锚名2">内容</a>

代码练习：

<a href="#PS">零基础学习PS (CC2017)软件</a>

<a name="PS"></a><img src="img/1.jpg" alt="零基础学习PS (CC2017)软件" width="15%" height="15%"/>
	<a href="https://huke88.com/course/2018.html" target="_blank">
      <h2>零基础学习PS (CC2017)软件</h2></a>
		<h3>课时1-软件入门介绍</h3>
			<p>本课程从最基本的概念开始讲起，步步深入，为后面的案例课程打下基础。</p>

定义锚（不同页面）：

<a href="网页名称#锚名">...</a>

电子邮件链接：

<a href="mailto:邮件地址">发送邮件</a>

超链接标签

定义锚（同一页面）：

定义锚（不同页面）：