本文摘自PHP中文网,作者寻∝梦,侵删。
本篇文章主要讲述的就是关于HTML中的添加图片的代码解释分析,还有关于HTML图片的正确使用路径,让我们一起来看看这篇文章吧首先我们先认识一下html中添加图片的代码:
html中添加图片的就是<img>标签,是一个单标签,是可以从任何地方拉来图片添加的,但是你得正确的确定添加图片的路径,不然就显示不出来图片,这就是我们今天要说的两个知识点。
我们先认识一下img标签的正确用法,这样才能确定怎么添加图片。
一般添加图片的语法如下:
1 |
|
如上,src属性是img中必备的属性,不然img就相当于没用处了,没地方放图片,那这个标签还要干嘛,所以,我们要知道html img标签的用法,这两个就是连在一起的,我们必须要一起使用才行。(想看更多的HTML知识,欢迎来到PHP中文网HTML编程课程)
还有我们本地制作HTML添加图片一般都是把图片放在自己的本地文件夹中,与html文件放在一起,一般都是一个文档,有一个html,还有一个文件夹叫img的是专门用于放图片的文件夹,我们一般都是把自己要上传的图片放到img文件夹中。然后我们就可以这么用img标签链接本地的图片了:
1 |
|
如上就是一般我们用img标签的用法,链接本地的图片1.jpg,把图片放到网页上。
现在我们来说说正确的使用路径吧:
上面说了,我们一般都是把图片放在本地的文件夹中,这样我们就可直接链接图片了,这样的办法是很好的,如何还向把图片美化的更好,建议使用层叠样式表css来实现,但是我们现在说的都是纯html标签和属性来实现的,所以先不说css样式了。
我们想象看,一般都是用<img src="img/1.jpg">,1.jpg这个是本地图片的名字,当然你可以随便的更改,这个都是可以的。这是我们最大众的用法。
来看看别的图片怎么连接,比如我们想连接别的文件夹下的图片,我们该怎么办呢?
让我们来看看情况使用的语法吧:
1 |
|
这样就出来了,如上图,我们就连接到了e盘“wenjian”的文件夹下的“tupian”文件夹下的1.jpg图片了。
这也是一种常见的用法,有些图片别的文档也需要时,这样做是最好的,把图片放到一个容易找到的位置。这样就能一直用下去了。
还有一种就是链接网上的图片:
想要网上的图片的网址,就在网站图片上面右击复制图片网址。这样就可以把图片的网址复制了。
然后我们使用img标签来把图片放到我们自己的网页上去。如下图:
1 |
|
这样就是可以调用图片放在自己的网页上来显示了,就是有点麻烦而已。大家可以多试试这几种方法
本篇关于图片标签的代码和正确使用路径的正确方式都说完(想学更多标签知识,就来PHP中文网,这里有所有你想要学的编程课程,绝对是你学习编程的不二之远),有问题的可以在下方提问。
【小编推荐】
html5 embed标签的loop属性是怎么用的?embed标签的属性总结!
html5draggable属性是如何做到页面拖动效果的?方法总结在这里!
以上就是HTML中添加图片的代码是什么?html如何正确的添加图片路径?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html图片怎么等比例缩放?html img图片缩放方法总结(附实例)
html5 aside标签有什么用?html5 aside标签的使用总结(附实例)
更多相关阅读请进入《img》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者