03_尚硅谷_h5_H5与H4的区别.wmv原创

看一下啊，那H5这一块的话，我们会做好多东西是吧，之前大家看过了啊，我们在H5这一块，我们可能比如说第二天我们就要上音频视频是不是啊，那肯定要做一个音阶导航，这个这个应该看过吧，360的硬件导航。走你360是不是有这种什么硬件导航的，然后还有什么，还比如说我们要做一个播放器。啊，我们自定义的吗？播放器OK。好看一下啊，这边我们肯定要制定什么播放器。嗯，什么鬼，视频被删了。那我得换个视频号。这个放着就没了呀，这个时间啊，这个我们是自己要定义的一个什么播放器要控制音量什么的，懂吗？这个给我删了还。

啊，那我肯定要重新去找资源了啊OK。好，这个这个视频很正常呀。好，我们再来看，嗯，那这是我们要讲什么，音频视频里面的标签，其实你应该知道，我们这个阶段讲H5是讲它狭义上的那个意思，HHTML的新增的一些标签跟属性能不理解，OK，那这是讲音频视频，那后之后的话要讲。啊，开发式这一块的话，刚刚看了一下，那我们这边东西要稍微多一点啊，我们要做到像素操作马赛克啊，那我们说之前什么，你们是不是画过那个。挂号卡哦，看起来你们那挂卡可能会稍微有点问题，那我们这边这个挂号卡可能要做的比较符合我们的一个真实应用场景当中，也就项目开发当中怎么去做国划卡啊，OK，那我们这个国划卡要干嘛，让用户最起码划上去比较舒服吧，啊我看一下大家之前做的是不是都是圆啊，上学啊，那这个其实不能画圆啊，这个我们之后再来什么。

优化能不解啊，而且发现是滑到一半的时候，其实就应该给你个嘛刮开来懂不懂啊，所以说这里面其实还是涉及到很多东西的啊，特别是开va的像素操作啊，大家不需要会啊，然后的话我们可能还会去做一些什么呢。啊，你们这个分享做过了是不是，那马赛克什么的啊，这个我们肯定要肯肯定要去做啊，然后的话，我们做完这些东西之后的话啊，然后就刮刮卡，然后要去讲什么呢？讲就要讲项目什么的，懂不懂，那项目可能我们年前讲不到了啊，年前只能把所有的基术点我们讲完，年后来第一天我们开始讲下午啊OK。好，那我们首先跟HTML打个照面。邂逅不邂逅了，打造面了，OK，好H啊，我们说爱是定义爱标准的最新版本，该语表示两个不同的概念，它是一个新版本的什本语言，具有新的元素、属性跟行为，这是我们之后两三天要去讲的东西。

懂吗？OK，当然它有，它干嘛有，有什么有另外一个含义，它是个更大的数题吧，这个东西啊，是我整个课程要讲的东西，有没讲啊，当然这个也跟你说过了啊，因为等于H78加三加CS吧，好说一下H785的优势啊，我之前也跟大家去提过一个概念，我说在国内H很有可能按值。移动端是不是有说过啊，在国内说H开发H开发开发，那可能安的就是移动的开发，有没讲OK，那他有什么优势呢？跨平台，唯一一个通知PC Mac iPhone，安卓等主流平台的跨平台语言啊，其实不是语言跨平台。你们知道是什么东西在跨平台吗？为什么H5HTM的优势这么大？要跨平台？是语言能跨平台吗？不是，是浏览器的。

跨平台H75不是跑在浏览器上面了，说你这H75这门语言跨平台啊，是吹捧它不是这门语言能跨平台，而是我的浏览器可以跨平台，你哪个手机不能装浏览器啊，哪一个设备不能装览器啊，电视都可以装浏览器啊，懂不懂就说跨平台，跨平台任何语言跨平台都是借助于它的什么啊，是借助于它的这个编译器啊，或者说借于它的这个数据啊，大家说Java跨平台，Java跨平台是不是啊啊Java它也是Java虚拟机跨平台。啊是跑在什么，我们知道我们的，我们这种这种语言是跑在览器上面的吧，啊va是跑在街边上面。是不是是Java语言跨平台，不是语言跨平台，而是截面跨平台，懂吗？这个界面相当于我们这边的浏览器，懂不懂这门语言的一个编译器，它的一个运行的一个数组，懂吗？OK啊，切记啊，他说H5跨平台，你要知道到底是什么东西在话，懂不懂跨平台这个事也不需要你去做啊，还一个快速迭代，这是个什么意思啊，用H5开发速度极快。

只不过性能上面可能会有问题，说一般一家公司你要去写一个APP，一般先请个两三个什么外部前端请你们啊，先把这个产品花个两三个月快速做出来，立马把这个产品投到市场上去，看赚不赚钱，如果赚钱继续去维护他，如果不赚钱，立马把你们辞了啊，他就去转而去搞下一个项目了，懂不懂，你想想啊，你说一个公司他他有可能他做做一个东西，他都不知道这个东西到底干嘛，能不能赚钱，他上来把H5的招完。安卓的招完，OS的招完，全部招完，然后让你们一起开发是吧，安的先开发完，你放到市场去，这个东西压根都没有人玩是是，然后再花花个几百万让安卓跟S把这个APP再再做出来，再投出去，发现还是没人玩，你们是不是疯了是不是啊，我们说什么H5有一个快速迭代，降低成本的一个优优势，就是我刚刚讲的，一般一个团队肯定你要做APP是不是，那肯定先做H5版本的，做H版本把它放到什么应用市场上面去看看能能不能赚钱，能赚钱进行迭代啊，这么迭代啊，请los跟安卓的团队过来把你的东西给迭代掉啊，可能你自己要跟他们配合对不对，那这里面有个很重要的概念，也就是说。

大家可能对这个iOS跟安卓。啊，可能理解不深啊，还有我们叫外部前端。啊，咱们属于哪个领域。Web前端什么叫web前端啊？IOS跟安卓是不是画页面呢？IOS安卓是不是换页面的？是啊，他们也是换页面的，只不过用不一样的语言画页面。他们用OC话，他们加法。我没有。H。你们讲语言不一样而已，懂不懂也就是说他们不是后台工程师，他们也是前端工程师，那讲只不过他们的东西都叫CS架构，咱们就叫。

BS架构什么意思？安卓iOS开放，最终这个代码，除了数据啊数据，咱们不把这些页面，这些代码最终在哪跑在跑在上哪。跑在你的设备上。懂吗？咱们的代码最终跑在哪服务器上？要不要走网络？走网络就会有损耗。有可能东西还拿不到是不是，可是我们说走本地。那就极快性能极高，压根没有网络这一层嘛，对不对，可是我们说走本地有走本地的坏处，每次版本升级的时候，他们是特别麻烦的。每次都要打成adk，让你去应用市场上，让用户自己去点吧，然后要自己去更新吧，咱们呢。外部前端呢，直接服务端东西改一改，第二天他们直接去发请求，拿回来东西就不一样，能不能讲是咱们的优势快速迭代降低成本吗？他们打版本很烦的，打成版本之后是不要上线的，用户要去下的，下完这个APP很有可能还要干嘛重装的。

能理解吗？啊，所以说咱们的优势是极其的灵活，缺点是什么？性能没他们高，为什么性能没他们高，人家直接走本地的，我们呢，要走网络的，懂不懂？OK，还有一个我们说H5导流入口播，什么叫导流入口就吸引流量。为什么H更加能吸引人？想想PCPC端的电脑啊，它能吸引流量的东西只有一个浏览器。啊，或或者说说的更直白一点，就是搜索引擎。是不是移动多少。不一样，微信朋友圈是不是咔嚓给人家给你发一个链接，是不是支付宝里面咔嚓给你发个链接，是不是，是不是我们在H5端，我们这个流量的入口更多。

等不等啊，不管什么样的生态是不是啊，肯定要比P灯来的多，能理解啊啊还有一个分发效率高，什么叫分发效率啊，分发效率就是说哎，你这比如说你发一个链接数据，最终有多少人去装你这个APP啊，在移动端可能这个事情更靠谱。这就是APP的转化率叫分发效率懂不懂，所以最终会有更多的人来使用你的应用懂不懂，在PC端的话可能是比较局限的，因为这种的嘛，营销手段比较就是导流的入口太少了啊，最终导致这个分发效率比较低，可是在我的移动端或者什么在H5端导流入口很多啊，最终导致你这个什么分包效率会很高，懂不懂？其实我们H股不光是APP，你想想你在微信里面看到的任何一个营销的站点，或者说你们经常是不是会收到一些就是结婚的一些是请帖。

宣传的那种请帖啊，就是两个人在上面抱着那种，是不是这种东西都是用什么H5画的是不是啊，比如说你一到双11了啊，是不是会有好多软文和会有好多一些比较好看的一些邀请函啊，就是一些就是说比如说双11会场的一些介绍啊，这些东西是不是都在我的这个。朋友圈里面会转发的啊，比如说像一些游戏的介绍啊，是不是啊，这人是不是一直在你的朋友圈里面转发转发，这就是H5的生态。这就是导流入口，懂吗？最终都会转化成这个APP的是。下载绿档啊，也叫分发效率的，有没讲这些就是H5本身的一个优势啊，千万不要去把H5想的太局限，懂不懂啊，这是一个生态，OK。好，那说完这个东西啊，装逼装完了，看好那咱们落地。

好，那咱们写了这么多就HT页面了，是不是好，我们说咱们现在写的，你看是不是HT5版本的，比如说index，比如说零一不不应该什么零四了吧，零四杠275的是不是啊，是不是好，再来新建一个。啊看一下什么二且是的是吧，OK来七是的好零五是不是看这两个东西有没有注意过，它们俩是不一样的。是不是啊，那这个多是干嘛的。哎，这个是干嘛的。哎，面标签里面这个东西是干嘛的，有没有想过啊，首先我来问大家，我们来看这个什么面标签啊，问你这个面标签是干嘛。这个是不是说我页面的编码盒子就是天吗？是不是，想想是不是。是我页面有有有下编码的是吧？啊，那我页面就是他编码的，告诉浏览器U天F杠八对我进行渲染是吧，本质上我的编写的编码方式可看你的编辑器啊，我默认是有吗？这个我把它改掉。

改成K是走，你比说干吗？我是PK是你本身是以GPK编码的，告诉器已经干嘛来我那就咋了。你知道吗？是不是英文单词不会啊，英为单词这个编码其实简单嘛，不管JP跟那个油油跟那个油条干包一样的嘛，懂懂，只要是中文。那么讲就是在国外这种编码问题很少，懂吗？在我们这就不行啊，因为我们的编码要有邮件通话，它是包含你的中文字符的，懂吗？OKGPK可能就干嘛，跟它是不一样的，懂吗？那你怎么办？

告诉浏览器一样GPK来渲染，我这里刷一下完美，看到没有，这个是告诉浏览器以什么方式来对我进行解码啊，编码方式得看什么。得看你的边线啊，我还是给它调回UTF。杠八走你好，跳回一条杠，你看这边是就来了，因为刚刚这个东西你是以GBK编码的，懂吗？OK，那走你那我们看看这里面还需要我们去注意什么。好，首先我们来看什么？都这个到底干嘛的啊，咱们知道我们整个浏览器渲染我们这个页面，它有几种模式吗。啊然总什么多代表和浏览器渲染模式，多个代码啊，或者称为DTD啊，什么叫ddd，就来约束我这奇妙应该怎么去写的，懂不懂？早年我们在写的时候，我们那里那么。

之前那个年代是不是在去写的时候，你写的话都要去引入的，或者引入干叫什么干文件是干嘛的，告诉我的浏览器啊，我应该怎么去规范的去干嘛解析这些代码，如果没有写。如果这没有闭合标签，要不要报错啊，这个我我总共定义了多少个HTML的一个标签，都在这个DTT文件里面等不等，可是现在H75已经是不是基于什么SKY这种语言了，就是你是基于它的。那你都应该有DTD懂吗？可是我们到了H5之后，哎，有H5自己的规范了，所以再也不需要。Ddd了，这些东西都是在什么浏览器内部已经帮你干嘛实现好了，就说不需要你去管了，对不对，所以以后再去写的时候，不需要去引入，引入什么DD了，懂不懂，如果你学习插庙。你就应该会有这个DD的概念，你就知道这个DTC干嘛懂不懂，可是对于我们前端公司来说的话，你就记住啊，Ddd已经过时了。

能理解吧，好，OK，那这个多tap到底什么？我助掉它或者不住掉他有没有什么影响？啊注掉它就是一个怪异。怪异模式了吧，那我们来看看吧，整你，我们来说一下这里什么读个time好，CTRLCCTRLV06。OK是么？CTY是吧？是OK，好，我们说多个tap啊，可以称为ddd，通常情况，以下多个位于一个S文档的最前面啊，位于这个根源素I起始标签之前，因为浏览区必须在解析H码文档正文之前就应该要确定该文档的类型，已决定采取什么样的渲染模式。不同的渲染模式会影响到浏览器对CS代码，甚至加va会脚本的一个解析，对不对？OK，那渲染模式有几种啊，其实有三种。OK，到目前为止，各浏览器主要包含了三种模式，在H5的草案中更加明确的规定了模式的一个定义，啊，有传统模式。

啊，传统名称嘛，就一个什么叫标准模式，近乎标准模式以及。怪异模式用到OK，好，草案的名称看一下就行了。啊，草案叫什么啊，这个也不需要大家去管是不是OK，那怎么知道我现在这个网页它是处于一个什么样的模式呢？最后面的底下有个叫comp model，它能返回你现在这个网页处于一个什么模渲染模式底下好，我们来看看。这里。CTRLC读个T吧，大家看现在我是不是有这个标签呐啊，这个里面我干嘛又标了啊。好点log这个玩意吧，来看一下不知道。看不上。说一下。CS1什么compare吗？什么意思啊？如果你看到的是CS1COMPARE什么意思啊？标准什么，它是在什么标准模式下去选的，懂不懂，如果大家看，如果我没有这个多肽。

没有读过他板走，你看一下在什么模式大学。Back吧，是吧？Back是什么鬼啊？啊，就是怪异模式懂不懂也说你加不加这个多影响大不大。极大，而且我们说你这个多态前面不能有标签，你出现标签照样怪异模式，F12怪影模式，是不是有些浏览器底下更狠，不能出现注射啊，你这边如果出现一些注射。啊，很有可能也会在关于模式加学染，我们看一下我们这边啊，这边是不是没有，可是在有些浏览器下做的比较严格的，那你这个都在前面，什么东西都不能有，连空行都不能有，那没讲是说养成一个良好的习惯，多个type前面不要给我去写任何东西，而且你要知道这个多个太是干嘛的，告诉浏览器你什么的模式选我有它就正常模式，没它就怪异模式。

懂吗？OK，那我们来看一下好，这边还得跟大家去说一个点好，什么点呢，在IE9网上的。在IE9网上的浏览器中，OK3种模式。在渲染方面几乎没有。区别方面几乎没有区别，对到OK，在1671789中。

理论上存在怪异模式。OK啊，实际上只有。标准模式，也就是说在I789里面，你能看到怪异和模型吗？看不到，因为它理论上去会有怪异模式，可是你会发现没有什么东西可以触发他的怪异模式，所以他实际上只有半种模式，懂不懂OK，在I6中。在IE6中，OK标准模式和怪异模式渲染的区别最大。OK在IE6以下的浏览器中，只有怪异模式好。关于这个怪异模式，其实我们最最最直观的一个感知就是怪异和模型。

有没有说过的关系和型？完蛋了，是不是？有没有说过没有没有，肯定有，来我们看看CTRLCCTRLV07，我们来怪一和模型，怪一核模型，记住就是玻璃BOX3，因为玻璃box怪液和模型。来看一下，比如什么正常情况下，大家看我一个盒子，我在这边好好的放的是吧，我给个ID，为什么test嘛是吧，我在这边好好的房子掉。清掉点清掉吧，是比如说我这个么，我说这个test他的300PX 300PX是不是pen。

50PX啊，正常情况下应该都没太大问题。也没有背景是吧，所以你看是不是干干净净的是吧，那再来看，如果让他变成怪怪异模式啊，只你啊刷一下是不是也没问题啊，因为我们刚刚说了嘛，在IE9网上中三种模式在炫耀方面几乎没有区别。懂不懂？OK，在A78里面只有标准模式，所以说不会不会出现什么关于口型懂不懂，我来看I6下。啊，不看一是吧，先看A5吧，I5什么是不是算I6直角加，那只有关异模式吧，来看一下走你。什么鬼啊，来揍你。不不不。F12是吧，OK，来看一下，比如说干嘛我把它调到五。看是不是变小了，因为干嘛你这个Y跟head现在就是box了，不宽度了，拍是干嘛算在它们里面的，不是在不是往不是往外扩展，这就是关系和模型，懂吗？而且大家看现在我哪怕把它干嘛调回来刷一下，它还是关于和模型。

懂吗？它底下只存在。怪异模式能解吗？啊，I6底下就不一样了啊，这个应该知道吧，有多个的时候他按正常去染，没有多个半的时候就是个怪异模西，懂不懂？好，那以后你开发这个机子把它把它写上就行了，懂不懂？可是有人很无聊，他就会问你这个是干嘛的。啊，而且让我很纳闷的是，80%同学都不知道啊，就是无聊归无聊，其实还能还能很考察你这个人干嘛，这个细节上面到底掌握的怎么样，是不是，到底是不是真的懂啊，OK，你。好，这是我们说什么多个太吧，应该没啥问题吧，我这边有个站点。好，这个站点里面啊，这个站点比较老啊，我们来看一下这个站点。

好，这个站点是一个维基百度上面一个东西啊，这个站点的话，里面记录了不一样的什么。多个type，它分别在不同的浏览器底下以什么样的模式渲染？Q的话就是怪异模式吗？S的话就是什么正常模式吗？A的话就是近乎正常吗？懂吗？OK，那在这边都有记录，懂不懂啊？可这东西不需要你们搁的太细，知道它的作用就行了啊，以后我们乖乖写上不就行了。能理解吧，好，这里，那再来说好这一个点读个table了，好再看根元素啊，根元素是什么？HH4中的根元素大家看是不是长成这样的，是不是多了一个什么庙是吧？OK，我们看我们H5当中电源素是不是干干净净的。是不是啊，OK，在H4里面它记录了，哎，记录了你这个HTML标签，它到底有哪些元素及它们一些信息都放都都在这边记录着，哪懂不懂，到了H75里面，这些东西已经内嵌到这个元素本身的结构里面去了，所以再也不需要去写了，因为在H75里面其实跟标签已经被简化了啊，以后我们只写个什么跟标签就行了。

能理解吗？很简单，基本上就可以了啊，这种没有什么原理的，这就是规范，懂吗？再来说什么had。Head OK head里面有个重点来看H5里面这个head。里面是不是只有一个查赛塔爱，里面这个塔是不是一个叫杠H奇妙是不是是不是比它多多了这个东西啊，记住这个东西叫什么。类型。啊，变慢我就不说了，我们来说一下这个慢类型，什么叫慢类型。整个资源在网络里面进行传输的时候，网络要不要知道你这个资源是什么资源。需要干嘛，得知道你这个资源是一个什么样的资源嘛，比如说哎，你传过来是HTL，他肯定干嘛有不一样的规则的，哎他比如说你传过来是个HTL，如果里面有个table table布局的，那他要把这个table布局完完整的给浏览器，这个浏览器才能渲染呢，懂不懂说不一样的资源处理方式不一样吧，你是不是得告诉网络你自己是个自自己是个什么样的资源啊，你看在爱四里面有没有主动告诉网络我自己是一个。

H里面H5里面有吗？没有，为什么H5里面现在可以省掉了，来看一下这个东西被移植到HP协议里面去了。F12大家看work。我刷一下。OK，这是不是我去发我是不是我发出去一个，嗯，还里面你看这是我的一个请求头啊，请求头里面有没有告诉网络你是个什么东西啊。T-HTM吧，就说HTP协议是帮帮你把这个事情做了，所以说你这个网页本身还需要告诉网络我是一个，我是个HTM吗？不需要H4里面，因为干嘛可能比较老嘛，所以说我再告诉一下网络，我自己是一个H文件，能没讲你们可以看到啊，比如说干嘛3W点百度点。com是不是所有的资源都是有自己的慢类型的，整个网络都是靠慢类型来支撑起来的，走你来看这这是个图片，点开这个图片看，肯定代表为什么你杠PNG，这就是它的慢类型，告诉网络我是一张一张什么PNG格式的图片，简呢，告诉网络我是什么。

一个javascript的application脚本。懂吗？这肯代表都是必须要告诉网络你是个什么东西的，因为处理方式不一样，懂吗？这叫慢类型啊，那这边我们说的是HT是个什么。说的是HTML跟HTML5在页面上的一些区别，对，有没讲OK？