Html入门(2)-图片插入

最新推荐文章于 2024-08-13 01:30:21 发布

shenqueying

最新推荐文章于 2024-08-13 01:30:21 发布

阅读量2.5k

点赞数 2

分类专栏： HTML学习

本文链接：https://blog.csdn.net/shenqueying/article/details/80304421

版权

HTML学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、<img/>标签简介

<img> 标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性：src 和 alt。

注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>图片插入</title> 
</head>
<body>
<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
</body>
</html>

2、常用属性

(1)alt属性：规定图像的替代文本。也就是当图片显示出问题时，就显示alt属性中的文本。

(2)src属性：规定图像的URL，也就是图像在哪个地方。

(3)width,height分别表示图像的宽度跟高度。

3、src的表示

学习图片插入最主要的是要学习路径的表示：

如何表示上级目录

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。

大体思路就是，先找他们相同的目录。如果html文件第一个上级目录就跟源文件或者源文件所在目录相同，说明在同一个目录下，可以直接输入要插入文件的文件名。如果html第一个上级目录跟插入文件的第二或者更高目录相同，那就从插入文件相同目录的下级目录开始写。如果html文件的上两级目录跟源文件或源文件所在目录相同，那么说明源文件比html文件高一级，那么高一级加一个../，其他的跟上面一样。以此类推。

我们用例子来表示。这个例子转载自别的地方，是超链接的，跟插入图片的效果相同。

(1)高一级的情况。

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../index.html">index.html</a>

(2)高两级的情况。

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html //html文件的上面三级跟index相同，所以高两级

假设index.html路径是：c:\Inetpub\wwwroot\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href="../../../index.html">index.html</a>

(3)高一级且源文件在子目录下的情况。

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../wowstory/index.html">index.html</a>

(4)同级且源文件在子目录下的情况。

假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html

在info.html加入index.html超链接的代码应该这样写：

<a href = "html/index.html">index.html</a>

(5)假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写：

<a href = "html/tutorials/index.html">index.html</a>