前言
Hello,大家好,我是AbnerMing,经过第一天的授课,大家是否对网页制作有了一个初步的了解呢,网页制作呢,其实并不难,大家一定不要有压力,对于这门编程语言,应该来说是标签语言,它是所有的编程语言里最最简单的,一定要放宽心,只要亦步亦趋,跟上课程,就一定能够学有所成。
第二天的内容呢稍微有点多,这里我分了上中下三部分,其实写教程也蛮累的,因为不仅要对文字的斟酌,还要对授课过程中的代码,都要自己亲自去实现,所以,每一篇文章下来,都要花费很长的时间,既要有过程,也要保证知识点的通顺,能够让初学者一目了然,这个是难的,希望大家能够包容,多点理解,少些指责。
今天呢,进入《零基础10天学会网页制作》第二天的学习,首先呢,我们针对第一天的作业做一个讲解。
作业呢,是实现下面的新闻列表:
对于这个新闻列表,我们首先来分析一下,它可以分为上中下三部分,上部分的标题,我们可以使用h标签,中间部分的图片,我们可以使用img标签,下面的来源和时间,我们可以使用p标签,不难发现,这个作业的练习,就是针对第一天学的几个标签的综合练习。
首页,我们看代码实现:
图片呢,我放在和网页文件的同级目录中:
对于以上的代码,我们再次回顾一下,尽量,我在授课的时候,穿插一些对以往知识点的回顾,这样的做的目的,就是不断加深大家的印象,以此,让知识点更加的牢固。
上面的代码,充分展现了网页的一个整体结构,用来声明文档类型为html,以便于以网页的形式进行展现,<!DOCTYPE html>用来声明文档类型为html,以便于以网页的形式进行展现,<html></html>是文档的开始和结尾,所有的内容都是包含在里面的,<head></head>标签里,主要放置一些头部的引用,如网页的title,网页的作者,网页的描述,还有css,javascript的引用等等,<body></body>标签里,就是网页的主题内容,所有的网页展示,都是在里面所实现,比我今天的作业。
还有一个需要注意的,第一天的课程里,已经讲过了,这里我再强调一下,那就是,绝大多数的标签,都是成对出现的,当然了也有一部分是单标签,后续会讲到,成对出现的,就是有开始,有结束,结束的标签里,一定不要忘记斜杠“/”,还有所有的标签,虽然大小写不分,但4.0之后,还是建议以小写为主,这里的,我也建议大家,以后都写小写。
作业的代码已经写完了,我们看下效果:
这个作业呢,简单吧,所以啊,网页制作啊,并不难,大家千万不要有任何的压力。
作业讲过之后,我们简单地回顾一下昨天的内容,其实对于昨天的讲述,除了后面的四个小节,其余的大家都可以作为了解。两个知识点需要掌握,1、网页的整体结构,2,h、p、img标签的使用。
第二天的内容,我们继续来研究html中的标签
1、图片的路径选择及属性的使用
2、a标签及属性的使用
3、表格标签,table,tr,td
4、文本格式化的使用
5、总结及回顾
1、图片的路径选择及属性的使用
在昨天的讲述及作业中,我们在写图片的时候,基本上都把图片放在的本地的同级目录,那么如果不在同级目录,我们该如何拿到这个图片地址呢?,
我们先看同级目录,图片和网页都在一起:
代码里图片地址书写,src里直接书写文件全名:
效果:
上级目录
我们新建文件夹,名字为上级目录,文件里放上一个图片,在上级目录文件夹里新建一个目录为网页文件夹,网页目录文件夹里存放展示图片的html。
那么针对这个“路径上级.html”l文件,对于图片的路径,我们还能直接书写图片的全名吗?显然是不能的,因为不在同一个目录下。
关于这个路径的选择,就好比一套房子,自己房间里的东西,我们可以自己直接拿来去用,但是客厅里的东西,我们如果说要拿来使用,是不是得先打开门,走到客厅里,然后再去拿我们需要的东西。
而当前这个“路径上级.html”l文件,就好比在卧室里,而图片呢就好比在客厅里,我们如果想拿来使用的话,需要走到客厅去拿,怎么去拿?大家记住了,使用“../”,写法如下:
效果:
下级目录
这一次呢,我们新建一个目录为“下级目录”文件夹,目录里,新建一个“路径下级.html”,再新建一个文件夹为“image”,image文件夹里存放一张图片。
存放图片
那么在“路径下级.html”这个文件里,我们对这张如何书写地址呢?
书写如下:
效果如下:
对于路径的选择,这个我们一定要掌握,很多刚入门的朋友,对这个路径总是很难掌握,不知道为什么要这样去写,所以大家下去一定多练习练习,因为在实际开发中,不仅图片,其它文件,如css,javascript,等等很多文件的引入,或者是页面的跳转,都会牵扯到路径,这里我做一个总结:
同级别目录,路径的选择,我们可以直接书写文件全名,也可以“./”,后面跟文件全名,效果是一样的,一般同级的话,这个“./”可以省略,大家看清楚,这是一个点一个斜杠。
上级目录,也就是父级目录,文件全名前我们添加“../”,也就是两个点一个斜杠,这里延伸一下,那么多个父级呢?也就是有多个目录呢?大家记住,每多一个目录,就要多一个“../”,比如两个,那么就是“../../”,三个就是“../../../”,依次类推。
下级目录,也就是子目录,这个就要全路径,有几个文件夹,我们就写几个文件夹的名字,比如上面的下级目录练习当中,只有一个“image”文件夹,那么书写就是“image/image.png”。
当然了,除了上面的几个路径选择外,还有一个根目录的选择,直接用“/”来表示,所谓的根目录,就是第一个目录,比如下图,那么根目录,就是C盘。
比如,我们在根目录下方一张图片,image.png:
代码里我们就可以这样去书写,直接斜杠+文件全名:
效果:
同样的,因为所有的文件都在根目录下,我们也可以举一反三,比如上述中的同级目录文件夹下有一个image图片:
我们要在根目录文件夹下的网页里,怎么才能拿到这个路径呢?
有两种方式,第一种通过根目录,其实就是全路径了,这个应该明白吧。
第二种方式,先找到父级目录,在父级目录里找:
通过“../”,我们到了父级目录
发现根目录文件夹和同级目录文件夹是同级别,那么书写如下:
文件的路径寻找呢,这个可能刚接触的朋友稍微有点懵,不过,多练习几遍也就懂了,无非就是文件地址的一个寻找。