00:00
来,下面呢,我们快速的把HTM,咱们一起来学一学。好,我们先找到,找到我们的目录,呃,其实呢,我们写HTML也可以用ID来写啊,这个地方呢,我还是用记事本给大家去写。我们新建一个,比如说我写个叫零幺.html。注意了。你这个文件的后缀是点XT,我新建的是一个记事本文件,所以大家一定要把这个点TXT,请你把它取消掉。啊,这个在哪里呢。文件夹选项是不是在查看,然后有个叫隐藏已知文件的扩展名嘛。把这个勾把它去掉。啊,这样你后面那个扩展名就出现了。咱把这TXT把它去掉。这样它就变成一个网页文件了。当然这个网页文件里面什么都没写好,我可以点击a plus把它打开。然后呢,我们一个HTML页面,它是由一对标签组成的,叫HTML。
01:01
然后呢,这个HTML这个称之为叫开始标签,下面这个多了一个斜杠,这个称之为叫结束标签。好,我们把它写一下。HTML。HTML页面中由。一对。标签组成。HTML以及斜杠HTML。那么这个HTML。称之为。啊,称之为开始标签。那下面多了一个斜杠的,我们称之为叫结束标签。称之为。结束标签。我们一个网页,我们可以由一对HTML标签组成。再来。这一个XM这一对标签里面呢,我们有两对标签,一个叫head。还有一个叫body。就是这样。啊,有一个对叫head,一对叫body,那么在head当中呢,表示我们当前HTML文件的头。
02:05
那么这个里面的内容呢,它不会在我们的网页主体部分显示,我们网页上大家所看到的内容呢,全部都是写在body里面的。比如说咱们先来看这个body里面。比如说我在这边写一个Hollywood。那我通过右键。打开方式,我用浏览器把它打开。大家可以看一下,它会在页面上展示hello word。那么我们黑的里面。有哪些标签呢?比如说我们这个当中有个叫title。啊title指的是网页的标题,网页的标题。这叫title,来,咱们先来写个英文的啊。我这边我先写个hello,我们看一下行。我先写个哈,刷新一下。你注意看这个地方。能看到吗?这边会出现一个hello,这叫标题。
03:01
这叫title好。表示网页的标题。那我把它改成中文。啊。这是我的第一个网页。好,我们刷新一下,当前我这边显示的是正常的,因为我当前这个地方的编码是UTF杠八。那如果说我可能是GPK,稍等一下啊。稍等一下啊,我来找一下。GBK。GEBK能找到吗?没关系啊。我这么来设置。我们这里面还有个MAT标签,我这边可以写个叫恰等于GBK。好,叫met标签,在我们T当中一个叫met标签。那我们再来刷新一下,你看一下它是不是就乱码了。啊,这时候它就是乱码了,因为我们当前页面的内容部分,你看它使用的是UTF杠八进行编码,但是这句话的意思是告诉我们浏览器请你使用GBK来进行展示。
04:07
那是不是编码格式不一致咯?不一致,它就出现乱码了,所以我在这边假设我也写一个叫你好HTML。那你看一下它也是会出现乱码的。是吧,同学们,它也会出现乱码,就这样子。所以这个恰赛的咱们还是改成一致的叫UTF杠八。那我们再刷新一下,你看它就变成正常了。我们可以在MAT标签中设置编码方式。再来。大家帮我,下面我们把焦点全部转移到body这个当中,呃,刚才我写了两行。老师,我这个地方不是换行的吗。他这好像没有换行哎。他只有一个空格。我这边我换了好多行。
05:00
我再刷新一下,它还是只有一个空格。这个是我们的源代码。这边是我们的显示效果,如果我们想要在显示效果上面显示换行。我们得加个BR标签。我们得加一个BR标签。好,我写在这。BR标签表示。换行。老师,不对啊,我们前面讲的标签不都是有开始标签和结束标签吗?那你看一下这个B2标签。他是不是。这个斜杠写在这儿。哎,这种是叫什么?这种叫开始标签和结束标签是同一个标签。当我开始标签和结束标签是同一个标签的时候,这个斜杠写在后面,表示单标签。BR标签是一个单标签。单标签的概念指的是啊,单标签指的是开始标签和结束标签是同一个。
06:06
那么,因此。斜杠啊。斜杠。放在单词后面。好吧,同学们,这个斜杠你放在这个单词后面表示这是个单表签。它只有一个标签表示在这边换行,那我们试试呗,刷新一下,你看它就变成这样了。这个叫换行再来。下面我们再来看一下,还有一个标签叫什么呢?叫段落标签、P标签。这里是一个段落。那我把它拷贝一份,根据C。这里是一个段落,咱们有两个段落。啊,这里是第二个段落吧。我们刷新一下,你既然是一段一段的,它是不是自动就会换行啊。它不仅自动换行。而且这个里面你看一下。这两段之间是不是空隙比上面这两行的空隙要大呀?
07:03
啊,段与段之间空的比较大。跨行之后,它空的空隙比较小。这个叫P标间,叫段落。表示段落标签。OK。再来。我们还有什么标签呢?比如说我们一个网页上不能光有文字啊,我们得还有图片啊,我们有个叫image标签。Image。Imagine就表示图片。好。表示图片标签。那现在我就刷一下,你发现它没有任何的效果。因为你这边光说这是一个图片,但是显示什么图片呢?哦,我们要通过一个属性。SC。这个叫标签内部的这个属性。Src,我们可以去引用。那行吧,我们来找一张图片。
08:01
呃,我这个图片呢,我这边已经放了一个了。啊,放了个图片CTRLC。好,我们把它放到这儿,这是我们的网页。我在网页这个地方,我新建一个文件夹,这个叫images。然后我把这个图片呢,把它放到这个里面去。好了,那大家帮我看一看。当前这个网页和这个文件夹是不是在同一个目录里面的?所以你看我来写这个路径。这个地方我写的是images。这个images指的是当前的文件夹。再斜杠。里面有个叫girl.jpg,我们把它写出来。个点JPG就是这样的。所以我们再来刷新一下我们的网页。哎,这时候就能出现一个图片了。当然这个图片我们也可以去设置一下它的大小。
09:01
这是575乘736,我们把它缩小十倍,变成57乘以73。所以我在这边写,WHY?57。高度。73。那我们再来刷新一下。这样这个图片就变得比较小了是吧?啊,我分别缩小十倍嘛,这样它就不会太过于变形嘛,是吧?行,这是一个image。然后呢,它里面其实还有一个叫alert属性。Alert可以用于做提示的。这里是一张图片。那我们刷新一下,我把鼠标放在这。他会给我一个提示,叫这里是一张图片看不见是吧。看不见啊。那怎么办呢,哼哼。不是刷的问题啊,大家这个屏幕这个共享是不是看不到啊。嗯。那算了吧,不过没关系啊,这个咱们先不说。
10:00
看不见就算啊。这个应该是视频录制,这个好像这个是哪边我没设置好啊。好,没关系啊。或者这么说吧,我这边来给大家看啊。这个alert它还有一个效果是什么呢?当我们图片显示失败的时候,它会显示这个文字。所以我故意把这个图片写错了,我试试啊,我写的个号123,明显这图片没有吗。刷一下。看到了吗?这里是一张图片,是不是进来看到了,哎,就是这样的。啊,也行好。这个叫alert啊,当然了。高度宽度,高度aler这三个属性其实大家不需要掌握,但是这个SS属性必须得掌握。OK。这叫image标签。那么其中我们写一下SC属性。表示。啊,图片。文件的路径。YS和,它表示图片的尺寸或者叫大小。
11:02
Alert表示图片的提示。啊,它表示图片的提示就这样的。那么其实我们这里面还隐藏了一个小的一个小问题,就是关于路径的问题,我们路径有两种,我暂时先给大家先提一提啊,暂时咱们先不展开讲。到后面我们讲到服务阶段编程的时候,咱们再展开说啊,这边我们有一个有一个关于路径的问题。路径的问题有两个,第一个是叫相对路径,第二个是绝对路径。相对路径是什么?我当前这不是一个网页吗?这是零幺.htl那我们想在这个网页里面想去引用一张图片。我这边所写的这个路径啊,它指的是。它指的是图片和咱们当前网页的相对位置。你看这个图片是不是在images里面的,然后images和我是不是在同一个目录里面的,因此我就从images这个文件夹开始写起。
12:03
这叫相对路径。什么叫绝对路径?D盘某某某,稍等一下。好到这边来。Can you see。到这边来。Can you。然后叫个是吧,我记得叫个点JPG是吧。你看我是不是从盘符开始写的。这叫绝对路径,我们刷新一下它是不是也能展示出来啊,这叫绝对路径,那当我们等我们后面学到服务计算编程的时候,我们这边写的可不是盘符了。我们写的是HTTP协议开头的。表示这个图片我们得去访问一定的资源。啊,暂时大家先稍微有一个印象,有一个概念哦,什么叫相对,什么叫绝对哦相对它指的就是相对于当前这个文件,我们某一个资源,它的位置是不是啊,这叫相对。绝,绝对就指的是和我当前的文件没啥关系,我写的这个路径,我不你当前的文件,不管你这个HTML你放在什么地方,我这个路径都是不变的,因为我是从盘符开始写的。
13:07
这绝对路径是吧,同学们。暂时先有个概念啊,暂时先有个概念,因为关于这个路径的问题啊,后面我们还要再详细的说。这是图片。再来。呃,我们一个网页上。有文字。有图片,我们这个文字啊,其实也是可以去设置它的大小的。比如说我们有标题,所以呢,咱们一起来看一下标题是啥。标题。嗯,标题我们有叫H1。标题我这边写个叫标题一。那我们来看一下,刷新一下这个标题,你看这个字是加粗的,而且字体是比较大的。那我们除了有H1,我们还有H2 h3 H4 H5H6。
14:00
好,所以呢,我就把这个H2改一下啊,H3H4H5H6,当然大家也可以用用用用用sub line去去进行编辑啊,Sub里面会自动的,这个给你自动生成啊H1到H6。我们只要通过负循环啊。呃,不管了,咱们反正暂时先使用这个工具啊,H1到H6咱们来试一下刷新,你看一下标题是不是从大到小啊。这张有没有H7呢?不好意思,没有。故意写一下H7。啊,刷新一下没有是不是啊,它不能识别吗?这个字是不是和上面字是一样的呀,是一样的啊,所以它没有H7,有人说老师没有,他怎么也不报错呢。我们的HTML语言。HTML语言是解释型语言。啊,它是它不是编译型。咱们的Java是不是编译型的语言,Java里面一丁点错误都不都不能有,你只要有一丁点的错误,编译失败。
15:04
编译失败我就不能运行是吧?同学们,HTL是解释型的语言,而且它这种解释型的标记语言,我们的浏览器会从第一行开始去解释。第一行,第二行,第三行,第四行,一直解释到他不能解释为止。啊,只要他能解释,他就尽量的给你显示出它的内容,那你说老师这边不是解释不出来吗?没关系啊。解释不出来,他就他就不解释嘛。他就直接显示标题就是普通的文字嘛,他就当你这个标签没写嘛。能听懂吗?那假设我写错了,这个斜杠剪切我写后面去了,这明显是错的一塌糊涂吗?H6,这斜杠写的不对,写这去了,甚至后面还有abcd,那这是写的啥玩意儿是吧?那保存一下。我们再来刷新一下,你看一下H6是不是还是正常的,而且后面一个也变成H6了,为什么后面一个也变成H6呢?这是H6的开始。
16:01
他就往下解释解释解释解释,他找不到H6的结束。他就认为后面的全部都是H6。能听懂吗?这叫解释型的语言。好了,那当然咱们写的时候最好还是写的正规一些。HTML语言是解释型的啊,它不是编译型的,然后浏览器。浏览器是允许啊,是容错的。他是能够允许你有一些错误在里面,他也能给你尽量的去展示。浏览器也是容错的。就是这样的好。所以这个H7我删掉了啊,它不存在。再来,这是我们的标题,我们还有什么属性呢?稍等一下啊,我写在这。H1,一直到H6。这个指的是叫标题标签。
17:00
稍等一下啊。就是。第四个。这是第五个。这是第六个。这是第七个imagine。再来。这是第八个路径的问题。这是第九个。下面我们再来看一下,我们看一下列表。列表。列表的这个标签啊,有两个。一个叫ul啊,还有一个叫OL,咱们先简单一点,先看一下OLOL指的是有序列表。它指的是有序列表。我们一起来看一下。所以我就在这儿。我写一个叫OL。Oil。斜杠,一个开始一个结束是吧,同学们,那么我们的列表里面有一项一项叫列表项。叫列表项Li。以外。叫list item,这个叫list。
18:02
Item。叫列表项,那么我们举的是两个单词的首字母。AI。比如说我们写一下,我们这边写一个叫武,叫武叫武林高手是吧。武林高手排行榜。好,就这样子。那咱们可以多写几个Li,一个Li就是一项。比如说第一个,第一个比如说是是是慕容复是吧,慕容好像也不行是吧,乔峰。扫地是吧?扫地上还可以是吧,好第二个比如说是叫叫萧远山是吧。就乔峰他爹是吧?好,第三个比如说是叫慕容博是吧。续族其实还可以是吧,续族这个他的功力是三个三个人的功力是吧,这还可以。然后比如说我们再写个叫阿紫吧,好。那咱们一起来看一下它的显示效果,我们刷新一下。
19:03
你会发现,哎,这边就出现12345是吧,同学们啊,这边就有了。这是我们的,叫有序列表。叫有序列表。再来。你这个有序列表这个O当中啊,我们可以写一个叫type。比如说我写个A。你再来看一下,下面刷一下。是不是就变成abcd啊,我把上面的内容暂时先注释掉行不行,同学们。要不然这个太多了啊,把它注释一下注释。这么写。然后到这边杠杠大于号啊,这叫注释。然后我们刷新一下啊。Abcd就是这样的,再来刚刚它这个,呃,刚刚这个字比较小,是因为这个玩意儿我写错没改过来是吧,同学们我现在把它改对行不行,同学们我把它改对啊好。这个叫有序列表。
20:00
我们这边还可以写个start。比如我写个三。表示从三开始,那是不是就是CDEFG啊。刷一下,你看CDEFG。就是这样的。那我们这个type选项值稍等一下啊。OL它表示的是有序列表,其中它有两个属性是大的。表示从。某某某开始。Type它表示的是啊,显示的样式,显示的类型,那显示类型有哪几个呢?大写的A,小写的A,大写的I,小写的I,还有数字一。有这么几种。啊,就是这样的,所以说你看我这边写的是一个大写的A,那它就是abcd。如果我写个大写的I。那是不是就是12345,它就这么去去去去显示啊,这个表示一嘛,好像是两个I表示二,三个I表示三,然后四表示一个V,左边有一个有个I是吧,同学们。
21:02
啊,就这样子。是不是这样的,这个应该叫什么罗马数字是吧。啊,这个V表示五嘛,V的右边有一一个表示六是吧,就这样子。哎,那试吧,试一下吧,小写答案也是可以的啊,刷新一下。是不是?那没问题吧,好,这个具体他怎么去表示,咱就别研究这个了啊。所以说我们的选项值,我们的选项值有这么几种。好不好,大写的A,小写的A,大写的I,小写I,以及数字一默认值数字一。这是OL,它表示的是有序列表,哎,按顺序嘛,是有顺序的。啊,再来我们还有无序列表。无序列表啊,比如说我们写个叫武林,叫武林大会。人员名单是吧。那我们写个叫yo。
22:01
Ul表示的是无序列表,OL表示的是有序列表,因为这玩意儿我平时不大记得住啊,我之前在学习的时候我记不住,那我怎么记呢?反正这个U它不就是这个叫这个叫on吗?On不是表示否定吗?是吧,反正我就这么去记啊,有一个U就表示否定,那就表示无嘛,无序列表。那这里面列表项也是list I啊,叫list item。好,有一个。CTRLC。牛逼,牛逼牛逼。好,就这样子。比如说这个武林大会是吧,比如说乔峰是吧,乔峰然后带着这个阿朱是吧。然后这个马夫人好像也去了。还有那个白石镜是吧,好。这个叫无序列表。好,那我们刷新一下。你看它就会出现无序列表。它无序列表默认就是点嘛,他用的是一个点。那老师这边有没有type呢?我们可以试一下,叫第四个。刷新。
23:01
看第四个就是这个,那说明它就是默认值,再试一个叫square。方块是吧,刷新是不是就变成方块了。咱们还可以再试一个叫cycle。第四个表示圆饼,C狗是不是表示圆圈啊,刷新一下就变成圆圈。那请问一下这边有没有大的呀?肯定没有嘛,你想都想的出来,你start是从几开始,这哪里有顺顺序啊。是吧,所以他估计是没有start是吧,那行。我们写一下。这个叫ul,它表示的是无序列表。好,其中它有个type,我们有DIS4个,它其实是default啊,默认值,然后呢,还有cycle。然后呢,我们还有一个叫square。不用去死记硬背。我们也帮助文档。有帮助呢,不要去死记硬背啊。这是无序列表。再来。
24:02
嗯,我们的一个网页上有文字啊,文字也有大小啊,然后呢。咱们再来讲讲什么呢,你看这啊,稍等一下啊看这。你看到我的工具上面有这个B。嗯,它表示加粗。这个I,它叫italic斜体。这个叫underline。带下划线。其实我们这三个字母为什么显示的是这三个字母,就是因为我们HTM标签里面这是三个单词的首字母。比如说我来写一个。啊,我写一个叫叫叫这个马夫人对吧,问白石静,这个你是喜欢,你是喜欢吃甜的月饼是吧,甜月饼。还是咸月饼是吧?然后这个甜咱们得加加重加粗一下,表示给他一个暗示是吧,你得选甜月饼是吧,这结个这个。
25:02
好,那咱们刷新一下。你看一下这是不是加粗的呀。啊,就这样子。啊,这个咸月饼咱们可以加个I。表示Italy。表示斜体。我们刷新一下,它是不是就斜过来了。啊,这个月饼两个字,咱们可以加个下划线。好,就这样子。好,刷新一下月饼,你看其实带有下划线了。好,就这样子。当然了,你不是说这个标签内部能不能嵌到其他的标签是可以的啊。比如说喜欢两个字先加粗。然后再带有斜体,这是没问题的。然后咱们再写个带,再带个下划线啊,这也是可以的。刷新一下,你看既加粗又有下划线,然后又是斜题是吧,同学们就这样子。当然。你不要这么去写,老师这个U啊,这边结束在这能不能把它U,把它变成这样。
26:04
这样是不行的,当然他不会报错,他不会报错,但是会有一些你意想不到的一些效果,你刷新一下。这边好像没啥意想不到的效果,因为正好是这两字挨一块了是吧,感觉没啥效果。但是这样是不行的,同学们。这样是什么?这样是不是就是我们的标签变成这个形式了。这是一个标签的开始。然后这是它的结束,在这结束,然后你第二个表现在这边开始的结果,你在这儿结束了。这是不行的吧?咱们只能够是在这儿开始,在这个地方解锁是吧,同学们。哎,这么讲大家应该没没啥问题吧,啊,这个应该还是比较好理解的啊,所以说你不要这个嵌套,你要把它嵌套的格式,把它嵌套好了。OK。好,所以我们把它恢复一下啊。那也就是说老师这个B标键是不是一定要放在外面,I是不是要一定要放在里面,没有顺序。没有顺序好不好?这三者嵌套是没有顺序的,其他的标签也是可以嵌套的。
27:02
啊,OK。好,那我们这边说的是加粗斜体下划线,我们把它写一下。回到这边来。U表示下划线。B表示粗体。I表示斜体。再来。我们还有什么,还有什么内容呢?再看一下啊,我们把这在这边换一行。换一行啊。比如说我想写一个叫水分子,水分子的化学式。学士。叫HRO嘛。那你这个数字二。应该是下标。是不是应该是下表。再来一个叫氧气。啊,或者这这些氧气吧,氧气的化学式。应该是O2是吧,同学们这应该是一个上标是不是啊。那行吧,这个下标我们叫cub。
28:05
上标叫up。不要去死记硬背啊,我是怎么记得呢?你看这个B的圆圈在下面,那就是下标,P的这个圆圈在上面,那就是上标。刷新一下。所以你看一下,这是下标,这是上标,没错吧,就这样子。再来。比如说还有。我想表示五小于二。啊,我五不是小于二五小于十。那这个这个小贱货。会和我们这个标签的这个小金号会引起一些混淆。是吧,所以这个小间号呢,你最好就不要写这个小间号,我们有替代的方案。我们可以写叫and。那些爱封号。这个东西。哎,这个就叫奈斯站小鱼。
29:00
比如说十大于,叫greater than。大于五。啊,叫greater than。再来比如说你还有五小于等于less一口时。它颜色没变,不管它啊,十大于等于great一口五。这也是可以的。我们看看这四个表达式,刷新一下。是吧,小于。大于小于等于大于等于没问题吧,同学们。就这样。当然还有其他的一些符号,不用去死记硬背啊,如果你想要去查哪一个,百度一下就可以了啊,HTM当中的这个叫实体是吧,好。呃,比如说还有什么呢,还有比如说注册商标,我们试试啊,注册商标我只记得注册商标是叫什么还是叫什么啊,所以and IG封号。这叫注册商标。版权符号。啊,叫copyright。版权符号。Copyright,我们是个copy啊。
30:02
刷新一下。是不是都有啊?他都有。大家要知道啊,我这个写的仅仅是冰山一角,有好多呢。所以我说的没有必要记啊,没有必要记。HT叫尸体。应该叫尸体,叫尸体,我看一下啊。字符实体。哎,在这。小于号大家看一下是不是可以通过NEXT3来表示啊?大于号可以通过这个叫GREAT3来表示,还有这个and的符号叫amp。双引号,这个叫T,这是一个引双引号的那个单词。啊,还有这个癖好。是吧,还有各种各种各样的这这些符号没问题吧,同学们。啊,咱们刚才写的这个叫copy,以及这个叫注册商标是吧,写在这儿。啊,所以这边好多了。这个是叫。实体啊,HT面当当当中的实体,来,我们把它写在这啊。
31:18
下标。Su,是吧,好。然后呢,我们有HTML中的实体。比如说我们有小于号。小于号。我们用的是奈斯在。啊,大于等于大于等于。待遇的越好。我们用的是叫great e。比如说版权声明,版权符号啊,版权我们用的是叫这个叫copy。好意思一下啊,就这样。好,这个叫HTM当中的尸体。那其实我们的HHTML当中啊,还有一些标签。比如说。回到这儿。
32:01
我们有一个叫span表情。失败。SPA它表示的是一个框,一个不换行的一个框。比如说我这边写一个啊,我这边写一个那个,之前那个叫什么,之前那个叫高圆圆是吧,这个结婚引起这个轰,这个轰动是吧,那个是叫叫叫赵又廷是吧。这个叫这个叫什么叫赵又廷是吧。这个叫毒气,毒气之首是吧。夺夺夺。这高圆圆都大家都不知道是谁是吧?这看来和大家真的有代沟啊。那我可以把这个SPA,可以把它围起来。好,就这样子。那表示我要对它进行特殊的修饰。如果我光写一个span,同学们其实是没啥效果的,其实是没有什么效果的。啊,所以说我现在我我我刷新一下啊,回到这刷一下,它其实是没有任何效果的,但是呢,我们既然已经能够把它围起来表示这其中这是这一块,我们可以独立的对它进行修饰,明白我的意思吗?
33:05
这是SPA它所存在的一个意义。啊,我们可以用于用SPA来来来做这么一件事情,把它专门的围起来表示这三个字,我们要将来我们要对它做一些特殊的处理。这个叫SPA。我们再学一个标签,我们还有一个标签是什么呢?叫超链接。超链接。我们一个网页上,我们经常上网会看到有很多的超链接嘛。好,所以超链接肯定是必须要的,有的啊。我们写一个超链接。好,这边我们写个叫百度一下。表示去百度的主页。如果我们光这么去写的话,它是没有任何效果的,你刷新一下,那就在这百度一下啊,就是普通的文字。
34:00
它里面有一个属性叫h ref。我这边可以写个HTTP。3W点百度点。com。叫H,叫超级的hi是吧,叫超级的RF,叫references,叫引用链接的意思。所以这个叫超级链接,超链接。当我点击这个超链接的时候,他就去这个网址了。所以我们刷新一下,你看现在它是不是就下下下划线了,我点一下它就跑到百度的页面上去了。啊,这样就能练过去了。当然,我这边写的是一个绝对路径,因为我是从协议开始写起的。将来如果我们这一个项目当中,我们的页面有很多,不仅有代零幺,还有代0203,我这边可以直接写。啊,也是可以写个路径的,行吧,同学们用相对路径,用绝对路径都可以,不一定是连到其他地方去。暂时先了解一下啊,这个叫超链接,那么超链接里面有一个属性,我得给大家说一说。
35:00
稍等我先把它写下来啊,A表示超链接。那么其中一个属性叫I加EF。表示链接的地址。再来。我们这个HF除了H属性啊,咱们还有一个属性,同学们叫target。我这边可以写个blank。Blank指的是什么呢?他指的是在一个空窗格里面打开刷新一下。我先点一个。一点击。刚刚咱们点的时候,好像一点就直接在当前的里面显示的,现在我一点击是不是给我搞了一个新的这个选项卡出来啊。这个叫blank,在一个空的一个打开一个新窗口。它默认值叫selff。默认值叫杠SF。我们有四个固定的值。Target。有四个固定的值。指的是在本窗口。
36:01
打开。下面一个是叫,呃,下面一个叫。在一个新窗口打开。还有什么呢?还有一个叫parent。在副窗口打开。还有一个叫top,这指的是在顶层窗口打开。这个代码我暂时没有办法给他演示,但是没有关系,我可以画图啊,这个也是比较好理解的。是这样的,同学们。这是我们的一个网页,这是我们的一个窗口。我现在来画个图,回到这边来,我先把这个先保存一下啊,把这边先删掉。好,我们把它放到。今天的这个里面。就放在这吧。H。这是我们的一个窗口。同学们。我们经常这个窗口呢,其实它内部有好几个小窗口组成。
37:02
比如说这个窗口。上面。有企业的这个啊部分。左边有导航部分。企业文化呀,公司产品什么大全啊,什么诚聘英才啊等等等等。右边会显示我的主要内容。下面可能还有一些叫版权声明等等等等,或者什么站长邮箱。那么此时。这个。啊,这是一个窗口。这个窗口内部。它有四个小的窗口。有三个吧,这是一个小的窗口。这也是一个小的窗口。四个是吧,这个是一个,这个数学学的不大好啊。啊,有四个。啊,有四个小的窗口。那么这个橙颜色的大窗口,我们称之为叫副窗口。
38:00
这四个蓝颜色的,我们称之为叫子窗口。行吧,同学们,父窗口和子窗口。然后呢,我这个这个显示主要内容的部分呢,我会在这个内部,我又嵌入一个小的窗口,比如说在这个地方。嵌入一个小的窗口。这个小的窗口,想象一下,里面有文字进行滚动,表示当前公司的一些动态。哎,轮播是吧,企业动态。啊,有些企业新闻一些动态往上滚滚动。啊,然后你鼠标放上去,它就停在这边,一点击能够显示这个新的内容。那也就是说在这个。子窗口内部是不是又嵌入一个小的子窗口啊?哎,就是这样。好,这就是个小的子窗口。现在,现在同学们假设我在企业动态这个小窗口里面,我写了一个A标签。哎,这个字换一下颜色。
39:01
我写了个A标签。我就不写了,我直接写一个target,如果target写一个下划线,请问一下将在哪里打开?是不是就在我外面这个打开啊。没错吧,在我的副窗给打开,那如果我写的是下划线top。是不是在这个黄颜色这个窗口里面打开啊,哎,我这么来说大家应该能听懂吧。啊,大家暂时先了解这么多啊,先知道一下有他的这个属性。默认情况下,它等于self,表示你一点击就在我这个小窗口里面展示。啊,Blank表示一点击打开一个新的一个选项卡,一个新的窗口打开。Parent指的是在它外面这个副窗口打开。杠top指的是在顶层最外面最大的这个窗口打开。那行。好,我把它写一下。我们这个指的是叫target的四个。
40:02
属性值。我们其实除了这四个属性值之外,我们还可以去指定其他的一些值,这个先不着急,后面做项目的时候咱们用到再说。OK。好,这是我们所讲的一个叫超链接,那当然其实我们还有一个标签,最后一个。我们再讲一个DV。Divv我们就称之为叫层,这个叫换行的一个块标记,那就是叫层。啊,我需要写一个代码,让大家对这个层呢先有一个认识。啊,先从视觉上对他知道是一层一层的,先有个认识代码大家先不需要掌握。我们来写一个试试看。我在这个地方呢。我写个div,一会儿我再把它删掉啊,这个代码是大家是不需要掌握的,我这边写了个div。这样吧。这边代码太多了。稍等一下啊。
41:02
CTRLCCTRLV复制一个出来。重命名一下代码零二。零二在零二里面全部删掉。我单独给他演示一下,演示完我再删掉啊。因为这个代码咱们现在还没学,先看一下就可以,这边有div,我显示显示为叫div r1。好,Could you see。D2。P2P3。ID。D。好,这边我写个叫IDDB2。好,这边我写个叫ID叫D3OK。好了,然后呢,我需要这边写个叫样式啊,这个叫样式大家还没学啊,不着急啊。CSS。好style。好,然后呢,我在这边写一个叫。D。好,我让他的这个Y的全部是200PX。槽高度也是200PX。好,它们的尺寸都是一样的,然后呢,我这边写个叫div,我让它的背景颜色background。
42:06
大家看到啊,我让他一个叫ABC。意思一下啊,CTRLC。CTRVCTV好,代零三这个叫DV2。好,我把这个改成叫BCA。瞎瞎写的啊,我也不知道什么颜色,CBA好三个颜色我全搞定了。现在呢,我们来运行一下代码零二。咱们先到代零二里面去看一下,代零二我们会有三个DP,这个颜色怎么这么暗啊。这个。学学程序的和学美工的这个差距可不是一点点啊。这个怎么难看怎么来是吧,哎呀,这这怎么办。F,这个审美观点还不如我呢啊?AF。我看一下啊。我试试啊,我不知道我瞎瞎写的。
43:01
啊,鸡蛋差不多吧,稍微亮一点啊,亮一点给人的感觉也愉悦一些是吧,要不然太压抑了,好,这是三个啊,大家感觉是正方形的框,但其实它这个div它独占一行,它独占一行啊。然后呢?然后呢,我怎么做呢?呃,这些div,我把它的position啊叫定位,大家先不用管啊,先不用管position。我改了绝对定位啊。那这样的话,你就只会只能看到一个了,因为另外两个藏在它下面的。好,然后呢,我把它的left,我把它改成100PX。Top改成100PX。那么这个呢,我把它改成改成200PX,把它的top改成200PX行,我们看一下啊,再刷一下。大家看一下。这三个第位给大家的感觉是不是一个空间的感觉?啊,一层一层的,大家先暂时先知道一下第二位叫啥哦,第二位叫层。就是一层一层的这个概念行不行,同学们。啊,这个代码线不用掌握。
44:02
好了,那这边我就把它删掉了啊,我们整个的这个HHTM当中比较基础的标签,咱们就先说这么多。
我来说两句