整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「胖达分享」网页中的图片和html文档的路径

喽大家好,我是胖达。本期视频来看看路径相关的内容。我们知道在网页中存在很多的图片,如果把这些图片和html文档放在一起,这样不光不美观,管理起来也非常不方便。通常会新建一个专门用来管理图像资源的文件夹,当需要查找图像的时候就会选择使用路径的方式来指定图像文件的位置。

路径的类型又分为两种,第一种是相对路径,第二种是绝对路径。今天先来了解一下相对路径。相对路径是相对于当前文件的位置来表示资源,也就是图片位置的路径表达方式。简单来说就是图片相对于当前html文档的位置。这里把相对路径的分类给大家列出来了,一个一个往下看。

·首先是同级路径。同级路径不需要在html里面写任何符号,只需要将文件名写到html属性里就可以了。在代码里看一下,这里有一个image,点jpg的图片和html文档处于同一级,所以在html的属性里直接写image,点jpg保存一下看看效果。

可以看到现在图片是正常展示的,同级路径下只需要在html属性里完整填写图像文件的名称就可以了。

·再来看第二个下级路径。当图像文件位于html文件下一集时,需要在html属性里完整填写同级文件夹的名称,然后斜杠写出对应图片文件的名称。

→首先打开资源文件夹,在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。

→打开vscode,新建一个gtml文档,这里新增一个image标签。

→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了,打开以后会发现里面有一个image,点jpg的图片。把这个路径写一下,在src属性里面写入位于当前html文件同级的images文件夹的名称,使用符号斜杠找到image,点gpg,看一下效果。此时图片也完整显示出来了。

→如果在amager四文件夹里还有一个amager四文件夹,下级路径又该怎么写?在amager文件夹里再新建一个文件夹,打开vscod,在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹,在这里面又放了一张图片。

这张图片应该怎样让它展示出来?一起来看一下。

→首先找到同级的images文件夹,使用符号斜杠,此时vscode会提供给两个选项,一个是imagers文件夹,另一个是imager.gpg。选择imagers,imagers文件夹里面的imager.gpg的文件了,保存一下看看效果。

在浏览器中这两张图片都完美的展现出来了。

最后来看一下相对路径里面的。上级路径使用的符号是点点杠。上级路径又应该怎么理解?也就是图像文件是位于当前这个 hd ml文件的上一集。

在练习文件夹里新增一个名为 hd ml的文件夹,打开vs code,选择刚刚新增的文件夹,选择新建文件,这里需要新增一个 hd ml文档。在当前 hd ml文档中,如果想要调用上一级的 image 点 j p g 的图片应该怎么做?在 sr c 属性里面使用点点杠。

这里 vs code提供了上一集路径中存在的文件,选择 image 点 j p g,在浏览器中看下效果,此时图片也是正常显示的。如果hd ml文件藏得更深一些,把当前的文件复制一份,新增一个hd ml文件夹,将复制的文档粘贴一下,打开刚刚复制的文档,修改sr c属性里面的值,使用点点杠。

此时是没有找到 amage 点 j p g 的文件,这个时候就需要重复刚刚的操作,点点杠就能找到需要到的 amage 点 jbg 的文件了,保存一下看看效果。这里可以看到图片还是正常显示出来了。

本期视频主要了解了相对路径的三种分类,一个是同级路径,一个是下级路径,还有一个是上级路径。希望小伙伴们下来可以好好练习一下,这对于后期的内容非常重要。下期再来聊聊绝对路径。本期的内容到此结束,感谢观看,下期再见。

天的主题是网页编程中的水平线。

同学们好,今天我来分享一些免费的少儿编程知识。只要每天坚持学习一行代码,你也可以成为编程高手!今天我们要学习如何在HTML中插入一条水平线,使用的是HR标签。HR是一个自闭合标签,虽然它没有标准的属性,但我们可以通过CSS来控制它的外观。

先来看看我们的实例效果。在页面上,两行文字被一条直线分开。这条直线就是HR标签,效果已经展示出来了。现在我们来看看实现的代码。HR标签的写法非常简单,但在最开始的时候,它有四个属性,现在已经不被标准支持了。尽管如此,我们仍然可以使用它。

今天的实例中,我们已经将这些标签加入到了代码中。如果你感兴趣,可以查看下方的代码。按下空格键可以看到过时的属性不会被智能提示,但这并不影响代码的正确性。将注释取消后保存,然后回到浏览器刷新,可以看到属性仍然有效。线条的高度为3,宽度为400,并且居中显示。取消阴影后,线条将变为纯色。

这只是一个演示,你可以参考一下。从这个示例中,我们可以看到,HR标签的宽度是根据页面宽度自动调整的。当它的宽度达到整个浏览器时,它会自动换行。既然属性已经过时了,那么我们如何通过HTML来控制外观呢?CSS是我们今天要学习的内容。

先取消注释的代码,让HTML失效,然后保存。回到浏览器刷新,就可以看到线条变成了蓝色。

今天的分享就到这里,希望各位同学可以试着写三遍,不需要看视频也可以掌握这个技巧。如果你需要案例和相关文档,可以向我咨询。

我们下期再见,想学习编程的同学记得关注哦。

TML即超文本标记语言是一种用于创建网页的标准标记语言。对于初学者来说一般可以使用工具来生成html,如:DW,HB等,这些都是所见即所得的工具,在设计视图将需要展现的文字、段落、图片等内容通过软件排好版,在代码视图将由软件自动生成对应的HTML代码,这些代码由客户电脑上的浏览来解析执行。

HTML语言是一种优美的语言,几乎所有的标记都是成对出现的,配合CSS样式和JS脚本来控制页面显示的样式及效果。有一定开发经验的高手往往可以直接用代码视图来编写网页,不管是软件生成html还是手写HTML代码最终显示的效果都是一致的。如下图是由DW设计的网页,下方代码对应的就是HTML代码,视图效果和代码是一一对应的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">