00:00
好了啊,咱们继续啊,那么接下来呢,我再给大家介绍几个好玩的,大家刚才在练习的时候,忽然发现一个问题啊,比如说这里边我们新建一个呃,form02.html。没名吗?现在呢,好了好了,然后呢,你们现在就是咱们现在写的效果多数都是表格套表单的,对吧,然后呢,我们经常可能是比如说table,然后TR这个行啊,然后TD。比如随便给一个对吧,那可能这个TD里面他需要有一个引的框对吧,那有的人呢,就直接就这么写了啊,有没有问题,这没有问题,因为你现在看到的效果,它确实是可以往这里边输入内容的,这是一个表格里边对吧,这个表格我们给他一个边框嘛,来包。哎,是不是可以的对吧,但是呢,你有没有想过啊,就是说诶好了啊,就是说在这里边你给他,他是可以在这里面输入内容,但如果这个数据一旦涉及到提交的时候怎么办。
01:03
那提交的时候是不是我们再来一个,比如说我这里面再来一个TR啊,我这个格式比较丑陋啊input对吧,提交。提交数据。好了,那是不是相当于我在这里边,比如说我ME1点击提交,我要把这数据提交走,但现在能提交吗?不能需要什么,是不是你只要提交数据,是不是就需要有这个form标签的存在,对吧?那form开始。然后放不结束,这么放过来对吧?放过来以后呢,那大家记住啊,刚才就是上午的时候吧,是不是有人练习的时候,他练习的时候就遇到了这样的问题,对吧?我们传输方式get方式表示这里面数据的传输方式,对吗?那么当你提交的时候,这个数据被传到哪儿了?由谁来控制的?谁呀?
02:01
当我点,比如说我在这里边有。来,我输入一个密对吧,当我点击提交数据的时候,把这个数据提交到了一块,是由哪个标签或属性来控制的。哎,对了,Action啊,还method了,上午都教你一遍了,还method method什么是不是指数据的提交方式对吧?而这个action克才是什么,才是提交的动作,就是你要提交到哪个页面,所以一旦你点击提交的时候,他要是给你报个404或怎么样没找到,那很简单的原因就是你这块一定写的有问题了。对不对,所以你要去找这块的原因啊,然后呢,再往下来,像刚才我这里边你点提交数据,我没有拿到数据,看到了吗?数据提没提交走啊。提走了,提交走了,提没提交走,提交走了,但是我有拿到数据吗?没有,为什么,就很简单这个这遇到这种问题,第一个考虑的就是你没给他起名,没起名他就找不到明白吧,所以你看我这里边有名字吗?没有对吧,我们给它起一个名字,比如说叫username,那么现在我再来这里边刷新来个ad me,然后点击提交,你看是不是拿过来,嗯。
03:12
看到了吧,哎,所以这会儿大家注意啊,然后呢。大家可能蒙的就是这个表格和表,表单和表格同时出现,对吧,到底他们两个谁先写谁后写,可能大家写的就比较随意对吧,可能有的人是不纠结这个,反正我都写出来了对吧,但确实是你把它放到这儿,就是你把它放到这儿都没有影响。看到了吧。我能不能提交,能吗?只是说这样的格式会看起来怎么样,友好度不好对吧,因为什么呢?因为表格里边只会存在于行跟单元格对吧,而表单里边要存在的内容就会多一些,所以这个时候我们尽量是什么呢?尽量是把这个表单包含着表格的形式出现。能明白。能明白吧,哎,所以下回再遇到用这种格式好吧,然后呢,我想说的是什么呢?就是在HTML5中啊,就是H5中,他为了排版方便,它又推出了一个新格式,比如说这个form我写到这里边来了,然后method呢,我依然是用GA的方式,然后在这里边我再来一个引出的标签,叫做S。
04:22
我有一个提交按钮对吗?然后在这里边看好了啊,我再来一个input input test。诶,TXT对吧,然后起名为test,好了,那么问题来了,现在啊,我在这块诶。叫做提交。好了,现在我在这里边输入完,我点击提交可不可以啊。来123123点击提交可以吗?不可以,为什么。哎,因为他没有被放所包含,他不知道数据用什么方式提交,也不知道往哪提交,对吗?哎,那所以说这种方式,也就是换句话来说,我们要想写这种表单,如果表单项一旦脱离form以后,是不能实现提交动作的,对吗?那么在H5里边要想实现提交动作怎么办呢?可以不是不可以,在这里边通过name方式,你给他起一个名字,比如说叫MY。
05:25
My form对吧,然后呢,在这里边你通过form属性来跟他进行关联,跟谁关联呢?跟这个叫my form的这个家伙进行关联。看到了吗?那么这个时候我再来刷新。点击提交有吗?没有这个属性。我大脑短路了吗?Form。Name my form ID。好了。来。
06:02
提没提交,提交了提交了,但是提交归提交数据有吗?没有对吧,那么也就说明证明在此时此刻我点击提交是可以走向到这里的,对吧?但是咱们也不确定是这里是吧?好像就我一个人在说,那你可以换一下,比如说我要提交到HTTP冒号斜线斜线3w.so.com搜索吧,Q等于。美女来看看可不可以啊?嗯。好像是不是有个S问号啊,来刷新看好了啊,我在这里面来个你好,我们点击提交。提没提交过来,嗯。美女,没有,那是路径,我那个可能是参数我写错了对吧,但是在这里边它能不能跳转到这个360啊可以的对吧?哎,也代表的是我提交过来了啊,那么也就证明我这个标签确实跟他干嘛实现了什么,实现了关联对吧?好了,那这一步实现关联以后,接下来什么,接下来是不是就是这块的内容了,对吧,那这块的内容。
07:09
没有提交过来对吧,这个我先删掉啊,反正咱提交能提交过来咱知道就行了,那这块的话好了,我要想让他也能提,也能把数据提交走怎么办,是不是也得让他跟他进行关联呢。所以这个时候我在这里边依然是form等于my form好了,都指向到这里边来了,那么这个时候你看啊,我在这里边来一个me,我们点击提交配等于A的me上不上来,上来了吧?哎,这就是为了排版方便,它可以干嘛呢?允许这个表单项跳出form标签之外,对吧?但是你要想实现提交需要干嘛呢?需要做两件事儿,第一件事儿呢,就是在放标签里面定义ID属性,对吧?第二件事呢,就是要提交到表单项里边去定义什么,定义form属性跟它进行什么进行关联。对吧,哎,只有这两件事才能实现啊,来这里面笔记里面没有啊,我给大家记一下。
08:05
来,嗯,怎么写呢,叫做。我直接这么记了啊,叫做这个H5表单的新玩法对吧,那么一天妈五中啊。为了排版方便对吧,允许表单项跳出,诶表单项跳。出form标签。之外,对吧,但是要想实现提交对吧,需要怎么样,需要干嘛呀,需要做两步。两步啊,那么第一步干嘛呢?就是在form标签中定义ID属性,属性值任意这么写能能看懂吧,啊那第二件事儿呢,就是什么呀,在虚。
09:05
要提交的表单。向中,当然这个表单项包不包含萨呀?包不包含他呀,是不是也要包含他,不然他不知道往哪提交对不对,所以是包含萨项的啊在需要在这个,呃,在在在刚才我就说什么提交在需要。需要提交的表单项中添加。Form属性对吧,然后跟谁关联呢?跟这个form标签中的ID属性值关联即可。实现。能明白吧?哎,那OK,好了,那再往下来看看这几个标签,一个叫field set,它是将表单内的相关元素进行分组,那么用的倒不是太多啊,来。
10:02
表单。分组一般什么时候会分组呢?你比如说我做一个这个呃,个人的体检表吧,个人的体检表里面有什么项啊,首先它会有一个呃什么基础的范围,比如说个人信息对吧,然后下一下一个这个这个这个组合呢,可能是这个它的所体检的这些指标项对吧?它会有这么样的一个分组,那你比如说我们就以这个个人信息分组为例啊,比如说呃,Input test。嗯。然后这里边我们来一个姓名。然后我们给他一个B。Form加上。好了,如果啊,我要是没有写method的话,没有写method的话,它默认也是get方式,明白吧,哎,好了,然后在这里边姓名还有什么性别。
11:05
来一个input。然后我们叫six y为零。可能我在这么写的时候,有的人不理解啊,就是说你为什么会给他这里边写个零对吧,那这块我写个难行不行,哎,这绝对没问题,为什么写零呢?是这样的,因为最终这些数据是不是要传到后端,后端拿到数据以后干嘛知道吗?转码转什么码?后端拿了数据不用转码,你传过去是什么,后端拿的就是什么,拿完数据以后,你比如说我做一个注册,我把我的个人信息都输入进去了,一点击注册,那后端拿到以后,他是不是把我的数据给我保存了?对吧,他要给我做存储的,所以他要存到数据库里边,就是这样,我给大家画个图,我告诉一下啊,就是我们所有的软件的这么一个流程,大概是什么样的。
12:02
比如说我们就以这种BS结构的软件,知道什么叫BS吗?不知道。咱们就以这个基于浏览器的软件,这知道不啊,它就是BS啊,这个B代表着browseer ber吧,对吧,Browseer浏览器的意思,浏览器的英文是不是叫ber,有没有英文好的给我翻译一下,我这一张嘴一股散的味的英语,我都不好意思秀,然后呢,这个S呢,代表什么呢?代表so啊ser v服务器,那既然说到这了,咱们。我就多给你们补充补充知识面吧,好吧,Ber browser,然后serve,这叫什么呢?这就叫做BS结构。那么有BS,还有一类叫什么呢?叫做ER啊,错了,叫做c clin,然后ERV这一类呢,叫什么呢?叫做CS结构,我现在开始扩展了,一会儿告诉我,我要讲,讲乱了啊,我要讲多了的话,告诉我刚才我画图要画的是什么,我要画的是。
13:04
不是数据库,我换的是结构是吧,数据结构啊,好一会要讲多讲话的时候你们提醒我一下啊,那么你看啊,其实这两种结构软件现在没有人敢去提。啊,为什么?因为这概念越来越混淆,那么对于BS而言啊,BS而言,你看它browse浏览器啊,然后呢,Server服务器,也就是说所有通过浏览器访问服务器的都叫做BS结构,对吗?那么问题来了,手机APP算不算?手机APP有的其实它是仿CS的,但它真实就是BS,你比如说我们用的京东。京东的APP对吧,或者是那个哔哩哔哩。哔哩哔哩应该没用过吧,啊这个咱现在播的这个软件叫啥来着,腾讯会议对吧,那么其实有很多这样的软件,它都是什么呢?叫混合APP。就是它不是真正的APP啊,其实它就是一个什么呢?它就是一个流,这个比如说像京东吧,京东你访问,你看我访问不了京东页面吗?来看看哥哥给你访问一个京东页面。
14:15
IPHONE12访问来。等啊,我现在正在读呢。看到了吗?这手机访问的是不是他,你打开你手机APP是不是这个页面底下有没有。首页分类惊喜购物车未登录,我肯定没登录,没登录啊。对吧,看到了吧,那你说它是什么结构的。BS结构的,但是你在手机里边下载的是什么结构的CS,因为它有客户端对吧,CS就是客户端clin客户端server服务器客户端对服务器的,但实际上这类软件它是什么样的呢?并不是你们所想象的,其实它本身就是还是还是这么一个东西,你看好了啊,咱们手机端的这个网址是M点京东点。com看到了吗?这个网址会发生变化,对吧?那么实际上它就是把那个软件呢。
15:06
就是打了个包,就是他外层,他其实是套了一个浏览器。能明白我说什么,就套浏览器,你打开浏览器,这浏览器里面就只有一个网址,你也只能访问这一个网址,别的你动不了,所以你看着就像一个手机APP一样。能理解说是什么意思吗?啊就现在比如现在这个浏览器里边有什么,有这个这个叫地址栏对吧?有地址栏我可以任意的去往里面输入地址啊,我们去访问什么都行,对吧?但是那个浏览器呢,它没有地址栏,他把地址栏给关闭了,然后呢,就只能就是他默认就只捆绑了这一个地址,所以你一打开那个京东的图标,它嘣就跳转到这个地址了,就是这个意思。能理解我说什么意思了吧,啊,所以它归根结底它属于什么呢?属于BS结构,它不属于CS结构。能明白吗?能明白吗?你别老瞅我,一瞅我就蒙了是吗?别邂逅啊。
16:00
听明白了吗?就是咱再简单点说啊,就是咱们只是讲那个京东网站到底是CS还是BS嘛,那我只是说他最终是拿一个浏览器,然后把那个网址装这个浏览器里面了,你打开这个浏览器就只能访问这个网址,然后这个浏览器没有给你提供地址栏,没有提供地址栏,你在这个地址栏里面,就在这个位置看看桌面,别老看我,我脸上没有这。看这个位置啊,他不给你输入这块,你是不是就访问不了了,对吧,你因为你只有动了这块,你比如说这块我给它换成什么呢?换成3W点京东,它才是移动端的那个叫什么,就是这个这个这个叫移PC端的页面。对吧,他不给你这个地址,你就输入不了了,输入不了了你就动不了了,包括百度,你看3W点百度它会自动跳,它会检测我是什么设备,当它检测我是移动端设备以后,它会自动给我变百度手机端不就是这样的吗?你下个百度的APP你看看。明白说什么意思了吧,哎。所以呢,现在很多人都不会去提这个东西了,但是他还会分那么像这个CS跟BS,它同样也会有一一些优缺点啊,就是你了解就行了,我就口头说一下,我也不给你记笔记了,好吧,哎,你现在只需要知道有这么两个词儿就可以了啊,CS咱们说了是客户端跟服务端对吧,那么你看看想想用苹用果这一类的软件啊。
17:16
说说你们用的这类软件。客户端跟服务端的软件。王云。王云,对,是。还有什么微信,微信算呐,QQ也算呐,包括你们电脑里面玩的那个什么STEM啊,还有那个呃,什么英雄联盟啊,这不都是吗?对吧,这一类是不是你必须下载它指定的客户端,然后通过它指定的客户端输入你的用户名密码才能登录到他的服务器。对吧?哎,他们中间是用任意协议进行通信的啊,只要客户端跟服务器端能对上就OK,不像BSBS是必须通过什么呢?通过HTTP协议来进行通信的,是这样的啊,然后呢,CS的客户端有着数据处理和存储的能力。
18:06
你们有一些资料就是保存到电脑本地的,比如说你聊的QQ。对吧,可能你不会找,但是在你的电脑里边一定有你登录QQ号的那个文件夹,那个文件夹的命名就是你的QQ号。对吧,里边会保存的一些信息,包括你的聊天记录,他在本地里边是可以帮你存储的,但是BS软件就不会。对吧,因为BS是浏览器,浏览器就是客户端了,对吧,所以他不会去帮你去做任何数据的存储,那么所有数据的处理都交给谁了,都交给服务端了。对吧,那你想啊,这个时候BS是所有数据的处理都交给服务端了,而CS呢,相当于这个客户端也能帮你处理,这个服务端也能帮你处理,对吧,那是不是对于数据这一块的话。这个相对来说它就要轻松一些,对吧,而这个BS的这个服务器,它的数据复合是不是就要较重了,对吧,因为它需要处理所有的数据嘛。
19:02
能明白吧,这就相当于他们两个优缺点,当然了啊,这些问题其实都不算问题,在有绝对资本的情况下。啊,都不算问题,就是你只要有足够的钱的情况下,对于软件行业都不是问题,我一台服务器不行,我上十台。对吧,十台不行,我上100台。就是这个道理,明白吧,我的数据,数据的计算存储慢不要紧。我加大它的什么呀,CPU对吧,然后加大它的什么内存,加大它的硬盘是不是全都给我拉回来对吧,就你们的电脑卡了,你知道换个电脑,换个电脑时候你还是要选一个高配的对吧,高配高配到哪啊。对吧,一个是什么运算,计算机的运算靠谁。CPU对吧,然后存储呢。硬盘对吧,以前都是什么,都是机械硬盘对吧,一这个一秒钟可能这个这个几千转对吧,现在都是什么,基本上都是固态了,你开机可能就那么几秒钟就可以完成操作了。
20:01
对吧,哎,然后还有一个什么呢,还有一个帮我们计算存储的就是内存。啊,还有一个就是内存,因为很多软件为什么你第一次打开的时候它特别慢,然后打开完以后你再用的时候特别快,因为它所有的数据都存到内存里了。内存是最快的。内存是最快的啊,包括比如说在座的,如果对这个后端有留有过了解,你们可能会听过,听过这个数据库的名对吧,什么mycycle啊,Oracle啊,对吧,这些呢,它都是基于硬盘存储的,还有一个基于这个内存存储的叫听过吗?你听过吗?啊用过的,你看人都用过了,对吧,它就是这样,它是经过,它是属于属于建值对存储,它就是存到内存里的,所以他一般会用的,用它做什么呢?做缓存技术。啊,什么叫缓存技术呢?就是你第一次访问的时候就告诉说,你第一次访问的时候可能让它这个呃慢一点,它得一点点加载一点加载数据,对吧,加载完以后他都干嘛呢?给你缓存起来,等你再来访问的时候,还是这些数据。
21:04
就是这样。能明白什么意思吧,哎,你就可以这么理解就没问题啊。那这就是咱们所说的这个BS跟CS这两款软件,这回能分清了吗?那么所有的BS软件,比如说我们就以浏览器为例,那么我们在访问的时候。比如说这个就是浏览器,然后呢,我们要访问一台电脑,一个一台服务器,对吧,那么比如说我们通过这个地址来访问。诶诶,比如说HTTP冒号斜线三,诶斜线斜线3W点百度点com对吧,我们通过这个地址找到了百度的这个服务器,找到百度服务器有可能啊,比如说我多写两个吧,比如带PP问号A等于负A,比如说Q吧,等于这个帅哥。好了啊。这一段地址能看得懂了吧?啊,那么这个时候他会干嘛呢?当你访问到这台服务器的时候,因为咱们说了这一台电脑就是服务器,那么他们怎们就是这个电脑,怎么能当做我们外部的服务器呢?需要装有对应的服务器软件,如果学装学Java的,他需要装一个tomca。
22:15
学其他的可能要装什么呢?装一个阿帕奇或者N吉克啊,比如说我们就以阿帕奇为例,这个阿帕奇这是一个软件啊,只要你的电脑里边装了这个软件,那么它这电脑就可以成为是我们的外部服务器了。明白吧。那么当他。这个服务器一来看你访问的是你带点PP的时候,它会干嘛呢,它会。这个阿帕奇会让什么呢?会让挂载它上面的这个PP引擎去解析。啊,那么一样,那Java的话就要Java引擎去解析了,对吧,比如PP引擎哎,去解析它的代码,当他解析代码的时候,他会发现他干嘛呢,他要找帅哥对吧,是不是搜索帅哥呢?Q嘛,搜索帅哥一搜索帅哥呢,他没有数据啊,数据存到哪了。
23:01
所有的数据都会存到数据库里面。数据库对吧,那么这个时候pap的引擎会干嘛呢?会进行数据库的连接。连接数据库,连接数据库以后,告诉数据库,你把这里边所有跟帅哥相关的所有数据都给我,对吧?数据库开始干嘛呢?进行拼命的查找,拼命的查找对吧,查完以后他在干嘛?把这个数据返回给谁啊。哎,返回给PP引擎。返回啊,返回给PP引擎,那么PP引擎拿到了这个这个数据以后再干嘛呢?再交给谁啊,交给阿帕奇,阿法奇拿到数据以后再返给谁呢?返给浏览器。啊,然后由于这些数据。以及我们浏览器中那些样式是不是都是由HTML csi来做的,所以最终就是我们看到的最后搜索到数据的效果,比如说在这里边你看3w.so.com然后在这里边我们搜一个帅哥的时候,你看是不是请求到这个服务器,我们要搜索帅哥,他把他数据库里边所有跟帅哥相关的资料全拿出来,拿出来以后又返回给浏览器,浏览器再给我们解释出这样的一个页面来。
24:23
能明白吗?能理解吧?哎,那么好了,那你说在整个过程中谁最累呀?PP。谁最厉?对啊,阿玛奇,他只是做了一个命令,对了,谁在这里面谁是真正干实事的?数据库没错吧,中间有两道传输者对不对,就比如说我想这个从从那谁从那个小胖那要要根烟对吧,我只是执行一声命令,我说哎,给我根烟,然后中间通过他传输一下,传输一下你们两个传输者是不累的,对吧,但是谁的他累。
25:04
没错吧,啊,所以这块是一个什么,这是一个指挥者,这是一个传输者,一个传输者到这才是什么真正干活的人。能明白吧,那你想一想,你要去查数据,他就要去做运算对吧?哎,去找数据,你到数据库长什么样知道吗。我给你们看一眼,我有没有啊,咱只看好吧。你有的,我会行的。我们老师没教过我。我先启动一下我的服务啊。咱只是看一眼啊,就是让你们扩展扩展知识面好吧。四。啊。这不卡脸了吗?没有事。
26:00
哦,我也有这个外。没有事。怎么我还进不来了?来,BA ta好了,这就是我目前数据库里的这个库,其中这个ew shop是一个商城的库,然后我们去选择e hop so,然后so tables,查看库里边所有的表,这些表,这就是数据里的所有的表,然后我可以干嘛呢?去查看每一个表里的数据,这个表就相当于Excel的表一样,明白吧,数据库就是长这个样子的,然后我们开始select形from from去查,查谁呢?查这个ew有没有user呀,有user来。看到了吗?这个是里边的数据,就长这个样子。看到了吗?啊,这就是数据库,那你想想所有的东西他都要存到这里边来,然后最后要查询的时候,比如说我们查询的时候可能会给一些条件,VR条件,ID等于一,他给你查一,没有ID等于六,他给你查第六条数据,对吧。
27:03
给你查到了吧,看到了吧,那你想一想啊,你如果说对于像刚才我们再回过来啊,又回到课程里面了,扩展知识到此为止,够了,回到这里面来,那你说在这里边,你说我是存一个难到数据库里边方便还是存一个零方便呢?那不就得了吗?这就是我写零的原因呢。这回明白了吧,啊,就是在这个数据库而言。你们应该再交点学费。你们不是前端班,你们快成全站班了。这不就是这不就是那个的。前端怎么讲这些啊。SOSES啊,等会儿我看看啊。我刚才那个库叫什么名来着,是这么写的吗?不对。数据库里不区分大小写。
28:02
但推荐使用大写啊。好了,来咱们看一下啊,这里边有没有什么信息没有。咋这么复杂呢?因为我想找个个人信息。好。个人信息个人信息。阿子哥的广告吗?Pro商品setting是设置,那个是购买order订单link链接iplo iplo是什么玩意儿?来耐星from。
29:11
IP。哎哟。后悔了。杠,Set t这些你们不用去练啊,我用的这些命令,我只是想看一下AK呢。E cw-AK。啊好了,咱用这个表啊,比如说你看啊星from ew-AK来大家看一下啊,比如说这里边你看它有一种状态。看到了吗?S sta是不是状态,状态有一有零,当然了,我不用一零,我用什么?比如状态这个,这个是已回复或者是未回未回复明白什么意思吧?啊就比如说我们在商城里边,我们下单以后,他就会遇到状态啊,你这个订单是已支付还是未支付对吧?比如说这个状态就是已支一就是已支付,零就是未支付,那你想想我是写这个零查询的速度快,还是写那个已支付和未支付速度快。
30:25
是不是可以写零啊,对吧,所以在数据库里边就有这么一句话,就是能用一零的用一零。一零用不了了,用数字,数字用不了了,用字符。明白了吧,啊,所以说就在这个,所以从这块儿开始以后,那么我们在表单这里边去写东西的时候,就很多时候都会考虑用什么呢,就是用这种零一来代替了。就会知道为什么在这里边我会给他。101这种数字的方式了吧,能明白了吧。哎,好了,那表单分组继续回过来,继续说,这回我跳回来,能跟得上思路吗?
31:00
那好了,那姓名性别。呃,还有啥呀,年龄。再来一个年龄,年龄之前我们先给他一个BR,然后年龄我们再给他一个input,叫做。呃。我没学没讲number呢,我就先不用啊,而且年龄又number的话不算太合适啊。然后呢,这里边我们一样给他一个H。BR好了,还有什么,还有身高,这都是一个人的基本信息嘛,对吧。呃,He GT吧。然后再给个BR好了,比如说我给这些啊,那么现在我们来看这是不是就是一组数据,对吧,从这开始啊,我们给他拉一个线吧,来。
32:00
来是不是一组数据对吧,然后接下来呢,可能还会出现出现一组数据,我复制了啊,但你们再去练习的时候,不要像我这么随意的去复制了,明白吧,就哪怕这两个一样的,你也就打一遍,因为你本身打字就慢。对不对,那么好了,在这里边。比如说咱们有什么有这个三高,有什么有血糖。还有什么血压,还有呢,血脂。啊,好了,给你们来个三高。啊,身高不是个高啊那个。来吧啊,我看看啊,没有错吧。啊。这个怎么这么大个空啊。点啥,我俩B这不就挨着了吗?这不对了,对吧,那正常,你比如说这一个人的体检表。来个H2。H2个人体检表。
33:07
好,那么你想想,个人体检表上来是不是先写名许枭雄?徐枭雄,哎呀。我名呢,然后男,年龄18,身高一米八四,闹的血糖,血糖有点高,我血糖确实有高,我血糖九,血压不知道随便给个血压正常值多少啊。一百二血脂呢?我低不了哪续写100行给个100吧,这是不是这样去写啊,但是你这样的一个表单给用户去写的时候,他就会看起来就会很难受,对吧,他没有一个很好的分类,那么这个时候我们就可以通过什么呢?通过我们要去用的这个标签叫做嗯哪去了。这呢来干嘛给它进行分组啊,那咱们来看一下啊,在这块这块是一个基本的信息,诶,错了啊,我把这两个删掉了,能看懂吧,整个都是一个表单下了,看到了吧?啊好了,前半部分这些是个人的基本信息,所以在这里边e fie LD fid set没打错吧。
34:22
有没有打错?来我看一眼。没有没有。还是相当有水平的,好啊,再来一个Fi e。好,能看懂吗?然后把里面缩进一下。再来收集一下,好保存,保存完以后看看怎么样。是不是给你打两格是这么一个效果分组了,但是分完组之后咱是不是要有个标题还能好看一些啊,所以可以继续配合下边的这个标签叫做L,它是专门为field set来进行什么呢定义这个分组的。
35:08
在这里边叫什么L。好了。然后这块叫这个叫什么叫做基础信息呗,是吧,基础信息。然后你看它变成什么样了。看到了吗?在这里啊,这位是不是稍微好看一些啦,然后还有什么呢,下面呃,这里边还有一个这个叫啥呀L。三高好嘞,你这没等撤呢,上来就给个三高来三高。看看。这个基本信息三高对吧,可能你还有其他的这个分类,那你就继续往下写啊,明白什么意思了吧?哎,那OK,这就是这个表单的分组,那么再往下来它还有一个分组,但是这个分组呢,就不是给他用的了,呃,哪去呢?
36:02
在这里。OPT它是为下拉列表定义分组,我们什么时候会用到这样的分组呢?你比如说。嗯,对,省市线可以,嗯,省市线可以,那讲究省市线吧,来在这里边看好了啊,我再来一个HR标签,给它再画一行,然后我们再来一个form标签,然后在这里边,比如说我们做一个省市线SE select,对吧,然后呢,Op在这里边op kon,这是它的像对吧,比如说这是那个先是这个,这个我们就写就以北京吧,啊来北京。北京市下面都有哪些区干得漂亮?来昌平区,然后呢?大兴。
37:04
大兴区还有呢,海淀朝阳。东城行,比如给这么多啊,那么再来一个。Op。Op t ion。还有什么呢?还有这个,不不不不是写区了,我再换个省。河北河北河北省。衡水啊。唐山。唐山,唐山是你知道你在喊这个名的时候,有的人的心里阴影面积有多大吗?来OPT,然后还有什么,还有这个保定。保定也是是吧,然后再来一个op PLO。
38:04
啊,廊坊。然后op p,然后再来一个石家庄好了,比如讲给这些啊,那现在给完以后啊,你看啊,当我们去打开这个时候,你看这个下拉列表,你很难分清。哪个市是哪个省下的对吗?或者哪个区是哪个市下的。对吧,那这样的话呢,就看起来就比较麻烦了,所以这个时候它可以干嘛呢?可以给这个进行什么进行一个分组,那么怎么分呢?我们通过这个叫optgup。Group组。给这份呢,给这些放到一个组里边,跟这放到一个组里边啊,那这个组归,那这个组这里面所有数据归谁所有啊,是不是归北京市所有啊,OK,北京市。
39:00
一会再说啊,先放到这吧,那就然后这个再来optgg up。因为这里边我们还要再去给他加属性的啊,我们先放到这儿啊,好了,我们来看一下现在的效果。有没有断档啊,有了对吧,但是有断档以后,咱们说了这个断档的位置最好你看,而且这里边的值注意有没有前面是不是空白还是大了一些呀,对吧?哎,所以说它这个空白的地方,如果我能把这个省份名写到这儿,那就是更完美了,这样的分组效果就更清晰了,对吧?那么这个时候怎么办?我们在这个组里边要起组名的话,主名应该是叫叫叫。不是这里边不是抬头啊。哎,主名叫啥来着。不用放我试一下啊,我忘了北京市北京市。
40:02
不是忘了。嗯,我这里边有没有鸡。表示for。是什么组名的?容我度娘一下吧,想不起来了,百度点。com。真的是?怎么的了,我,你割肉。就他了。然后。哎呀。Libra。拜拜。LA,好了啊,这回就完事,有点卡脸哈。来吧,刷新一下,这个时候你看北京市上不上来呀,是不是上来了对吧,当然了,那你的第一行可以给它变成什么呢?变成这个请选择嘛。哎,叫做什么op,呃,不对对op ton,然后我们给它加一个,比如说杠杠杠杠杠叫做请选择好搞定来,你看北京市是选不了的,你只能选它下面的区对吧,因为这是组嘛,这是一组里边的看到了吧,然后呢,在这里边,同样我G区域叫什么呢?来不是等于呃,这叫什么呢?叫做河北省,然后这个不要了,好,那这个时候你看河北省是不是也上来了。
41:26
看到了吧,这样的这个的就就是这种有这种分组的效果,看起来是不是就更清晰了。哎,能明白吧,啊好了,这就是这个叫什么分组啊好了,分组完之后我们再往下来应该还有一个吧。来这里边啊。这个分组labor啊,属性啊,定义分组的标题对吧,好了,再有一个什么这个这个data list date什么意思啊。
42:02
数据啊,像这种单词你们要记一记了啊,Date数据对吧,List呢。列表,哎,那就说白了,数据列表嘛,对不对,那他是说的是什么呢?定义可选数据列表,什么样的叫做可选数据列表呢?很简单,刚才我是不是用到百度了,百度里边我要去搜,搜什么呢?搜一个。还没等收呢,就出来了。呃,刚才我说的什么了,说的是。就data list的吧,好比如说data list,你看我一打开以后,下面是不是所有跟data list相关的都有了,然后可以在这里边选择,比如我选择data list的标签,你看是不是就过来了,对吧?哎,那OK,那这种就叫做什么呢?可选数据列表,这种叫可选数据列表,你比如说我做一个。这个。嗯,我还是在下面来了啊HR,然后这个form。
43:00
然后在这里边叫data list口数据列表对吧,里边的列表线呢,Op ion啊,依然是用它,诶op t I依然是用它当列表项对吧,比如说我们去多写点,多写点内容吧,比如说小。小明。然后还有小啥。小红。小红,我们穿插点啊,小熊小熊行,来小。然后多少年没有人敢这么叫过我,然后这里边再来,咱等会儿再来,小的,咱再写点别的啊,别都写一起是吧。嗯,古代有一个有一个美女姓史,叫真香。
44:00
真香。对吧,然后还有这个。啥?啊行,还有一个姓杜的。叫紫藤。还有呢?Op t I,还有姓刘。好了,这几个了,三个了,咱能不能再想点,跟他也是这个字里还有的。没有了,我也想不起来来往大上想大有吧,大。打我。还有啊。大耳朵图图你看一看,年轻人是好啊,干得漂亮,熊大,然后呢?
45:07
熊二,行了,这也差不多够,哎,不,不对,熊不一样。蜥熊,好了,这差不多够了啊,那么现在啊,咱们做的可选数据列表了,当你一打开以后,你会失望。页面里面啥也没有。你看啊,人百度里可以说你是不是还有一个这个这个叫什么,这个东西叫输入框呢,对吧,而你这里边有吗?啥也没有,所以这数据根本就不好使,那怎么办,你得有个输入框才行啊。来,来个隐扑他。TE。XP对吧。好了,你说能用吗?肯定用不了对吧?为什么说用不了呢?因为他们两个根本就没有关联嘛,你看我在这里面来个大有提示吗?没有对吧?所以要想让他关联,如果老夫没有记错的情况下,先给ID起个名,在这里边通过list进行关联,但是他没有,那就是反拉ID,我给它定义一个one,然后在这里边它跟谁关联呢?通过list,诶,这回对了,给它进行关联。
46:18
啊,这个时候这个表单跟这个可选数据列表才关联上,那么关联上以后是什么样呢?这个时候再来一个大。我试试啊小。假的呀,这个属性过一过吧,我打开一下再试一下啊。好使大。Data list data数据没有打错吧?List,然后我在这里面定义了一个ID,叫做one,然后我通过list。等于Y来进行关联是没有错的。
47:01
不用加井号啊,List不用加井号,加井号反倒报错了,看到了吗?Open。List列表里面配合的列表项叫open,这没有问题。怎么可能啊,来再让我试一下小不给小了啊,我再给两个来OPT我给个一一。一零。一一。一二,然后这块1112好了,保存一下来刷新给个幺。值。有了吧,幺幺,你看带幺的101112是不是都有了,哎,没给没给,Y60里面没写东西,你不出来。这不难为我吗。那刚才白。
48:01
写这么多了。OK,来。小。小红小不对,小明小红小熊是不是都有啦,然后还有什么大大熊大耳朵图图熊大对吧,还有二熊二对吧,咱还有香。真香。是不是都有了,看到了吗?这个是每个浏览器显示的效果可能不太一样啊,如果你换了这个。嗯。欢火不旺。暂时不要这个来你看啊大你看它就是这样的,看到了吗?嗯,就是每个显示的效果是不一样的,看到吧,但有的人可能会纠结,那效果都不一样,后期我们怎么办是吧,到底。可哪个浏览器使用啊,不用,因为它效果不一样,你没办法对吧,那怎么办,自己做。
49:09
这种效果自己做不出来吗?能做出来吧,可能没学过的,可能你没有什么思路,最终它就是两个元素,这就是一个表单,下面会有一个什么,有一个扩张元素,当你这里边就像百度就是自己做的啊,百度可不是这个数据列表,因为你百度在用的时候还这个数据列表还没有的百度的。com啊你看啊,百度这里边我搜一个一你看。百度是自己做的,因为你只要一搜一的时候,他就已经把跟一相关的一些高频匹配词拿过来了,然后给你放到这个这个元素里边,让你进行显示,是这样的,是这个意思能明白吧,哎,但是它的这个模模样也是什么,也是可选数据列表了,对不对,哎。OK,这就是可选数据列表,那么对于刚才给大家介绍的这些这些呢,大家作为了解就可以了。
50:03
这里边的这些东西。你知道有知道怎么用就可以了,注意啊,是只仅限于刚才我介绍的这些,明白吧啊,其他的这些都要给我记住。下面我没讲的,不用说,等我讲的时候我会告诉你,这肯定是重点对吧,这块的东西为什么呢?作为一个这个选学的部分就可以了。明白我说什么意思吧,哎,那OK,嗯,歇会吧,歇会之后回来大家把这块再练一下,今天没有作业啊,今天的作业就是练习代码。好吧,但是明天的测试。是很难的。啊,但是测试我测考的所有的东西都在这个文档里面。啊,所以你们不用再问我了啊,来吧。我今天讲的都听懂了吗?都听懂了吗?今天不快吧,我讲了一节课,给你们一大半天练习的时间是吧,我这几天给你们这么长时间啊,然后呢,过几天我会把时间再追回来的。
51:01
啊,所以你心里要有底,先把这个先让你们把底打好,你说什么。里面可能是大屏,我们就。我管你大小,我看着舒服就行了呗。
我来说两句