15.尚硅谷_HTML&CSS基础_xHtml语法规范.avi原创

我们来继续啊，我们再说一个东西，这东西呢，来先创建一个新的页面，其他的我们先把这些没用的我先都给它去了，我们来说一个什么呢？说一个我们这个HTML的一个语法的一个这个规范啊，语法规范这个东西其实比较简单，其实我说是HTL语法规范呢，其实不是说叫什么呢，应该叫做严格来讲叫做什么呀，叫做XHTL的语法规范啊，就做XTL的语法规范，诶那同学说了，诶老师咱们不是说了要学的是这个H5嘛，对吧，为什么要讲这个XNL的语法规范的，那我因为我们说什么呀，我们说XL是为为什么会出现的呀，我们是为了从这个HTML是不是过渡到我们这个XL啊，所以出现了一个XHL，那为什么要。

滚到F3R，因为我们说它这个语法是不是比较比较严格一点啊，诶比较严格一点，那么说了语法严格就意味着其实我们的解析效率会干嘛呀，会更高一点啊，会高一点，所以呢，我们这个呃，普遍的都是使用什么呀，都是认为我们这个xal语法更加的什么呀，更加的严格啊，更加的严格，所以这里边呢，呃，AA方五的语法干嘛呢，相对来说还是干嘛呀，还是要松散一些，那我们说松散语法，其实我们学学起来就干嘛了，就没有意义了，所以我们要学就学什么呀，学这种最严格的语法啊，学这种最严格的语法好，那这里边我们来说一下这个语法规范都有什么东西比较简单啊，首先第一个啊，我们来说一下，但是注意啊，他这些都是一些这个规范，也就是说规范的这东西，其实是不是说让你必须遵守啊。是不是必须遵守啊，不是必须遵守，比如说举个例子，我们说了咱们是规范，咱们说在马路上我靠右行走，是不是就是一个规范呀，那你说我不靠右走，我就靠左走，我就逆行，行不行，行，但是就是有可能你会被撞死，对吧，但是一不一定啊，不一定啊，有可能会被撞死，所以干嘛呢，我们还是尽量的去遵守这个规范啊，尽量遵守规范，诶我们来说一下叫什么呢？第一个我们叫做HTML中叫做什么呢？不区分大小写啊，不均分而写，什么叫不均分而写啊，我这来个A，然后这样写一个A，这样别写A，咱们还没讲A呢，是吧，咱们写一个这个P标签吧。

哎，我这么写一个P标条，这么写一个P标条，P标条看不太清楚是吧，我前面这是一个大写的P，后边是一个什么呀，小写P这样行不行，哎没问题，大写的P跟那个小写P，他认为什么呀，他认为是一个东西，或者这样写，我这来一个大写的，大写的这个B，这样行不行，也没问题啊，也没问题，不取大写，用这个大大写小写呢都行啊，不区分大小写，但是什么呢？但是我们一般都使用什么呀，小写啊，一般都使用小写，那有一些情况我们是需要用大写的，什么情况呢？诶假如说你到了公司工作以后，有一些有一些公司干嘛呀，他强制要求你，我这个页面里的标签全都得是什么呀，全都得是大写，那那时候你就干嘛呀，你就换大写，除了这种情况，剩下的我们全都什么呀，全都用小写，也就说在这个页面里尽量不要出现什么呀，大写字母啊，尽量不要出现大写字母，但是一般情况下。

这种公司我们碰见碰不见呀，基本上碰不见，因为这种公司一般都倒闭了是吧？对提这种无耻的需求是吧，那无耻的需求啊好，这是我们说的这个啊，不全而写，但是一般我们都使用小写啊，然后我们来说叫什么呢？说一下注释的事叫什么呢？HTML中的这个什么呀，注释干嘛呢？不能嵌套啊，AR注释不能嵌套，什么叫注释不能嵌套啊来我这是不是写了一个注释啊，哎，来这是一个注释，那干嘛呢？怎么叫嵌套呢？哎，我在注释里，我我是不是再写一个注释啊，哎，那我们来说这是什么呢？这是我们这个注释中的这个注释，这是不是叫嵌套了呀，这么写行不行啊，哎，我们来看效果啊，来看效果，直接来给它打开。

一打开我们来看，哎呦，诶这猪式的确没出来是吧，但是发现的多出来一个什么呀，箭头，这箭头哪来的，咱们先说这箭头应不应该有，不应该有，诶我们来看看怎么回事，诶那怎么办呀，我们就来读一下这个程序啊，我们就假设我们是这个浏览器，我们怎么解析这个页面，一看到这儿，一看到一个箭头，一个小括号，小于号，一个叹号，两个减号，是不是标志着一个注释的开始啊，诶从这开始读读这是注释，这儿也是注释，一读到这儿，诶一读到这儿了，这个东西是不是也是在我这个注释里边啊，所以干嘛呀，是不是把它也当成一个注释啊？诶再往后读读读这是不是还是注释了，一直都到哪儿，一直都这，这是不是一个注释结束啊，所以干嘛了，他把这个整个前边这一块当成一个完整注释了，诶那再往后看，最后这哥们儿他是不是找不着主了呀，他是不是变成一个人了呀，那我们说了是不是就导致我们这儿页面里多出一什。

怎么样，是不是多出箭头啊，哎，多出箭头啊，所以注意注释是不能嵌套的，而且我们这国说嵌套它也没有什么呀，没有意义啊，没有意义，所以注释是不能嵌套的啊，不能嵌套的来我把这给它去掉了，就不写它了，来然后呢，我们接着来说注释不能嵌套，这里边是一个，然后还有一个什么呢？还有一个接着来说叫什么呢？第三一个HTMMR中叫什么呢？HTL标签必须什么呢？必须结构完整啊，必须结构完整，什么叫结构完整，两种，两种情况，要么成对出现，要么什么呀，哎自结束标签啊，要么成对出现，要么自结束标签什么意思，我这来一个P标签，怎么叫重字出现啊来哎，我是一个这个P标签，我这一保存，这叫什么呀，是什不是有开始。

啊，有结束啊，这叫成对出现啊，这个是我们一个正确的一个语法，那怎么就不对了呀，CTRLCCTRLV，从你我是不是只有开始而没有什么呀，没有结束，这对不对呀，哎，这是一个错误的一个语法啊，这是一个错误的法，所以这来写一个，这是我们这个正确，正确这个呢，下边是我们这个错误，诶那我们说这东西的错误，它能错到哪去呢？我们来看看吧，错误我这一保存，我们来看效果，我这一刷新走你诶这两个东西是不是显示效果是一样的呀？哎，显示效果是一样的，那也就是说实际上我这么写跟我这么写从直观上看有没有区别啊，没有区别，没有区别，那这是为什么呢？这是为什么呢？诶我们来说一下啊，我们来说一下这个问题，这个问题也挺有意思的，我们叫什么呢？哎，我们说浏览器会什么呀。

我说浏览器会以这个叫什么呀，最大的一个善意去理解我们这个网页，他会想什么呀，诶他会想这哥们儿干嘛呀，他不是诚心这么写的，他干嘛呀，他可能笔误少写一个什么呀，少写了一个结束标签，那浏览器干嘛呀？诶浏览器会自动给你什么呀，给你加上啊，浏览器会自动给你加上，所以浏览器干嘛呢？浏览器会进。诶尽什么呀，尽这个最大的什么呀，努力这么干嘛呢？诶正确的解析页面，你所有的什么呢？诶不符合语法规范的这个内容，浏览器干嘛呢？浏览器都会为你干嘛呢？自动修正啊，自动修正，所以你这是不是没有写这个结束标签啊，那浏览器干嘛呢？浏览器会自动给你加上，诶那它加没加呢？我们来看看啊，现在我这一刷新来右键查看源代码，源代码一看这这加没加呀，没加啊，所以这里边注意通过源代码是看不出来的，我们得看什么呢？我们得看我们这个代码在我这个内存里边的一个什么呀，结构啊，在我内存里边的结构，那内存里边的结构怎么看呢？那我们可以干嘛呢？通过我们这个开发者工具来看，那我们最常用的，我最常用的就是一个什么呢，Fair fire bug firebug，昨天在我们这个什么呀，开班资料里已经发给你们了，来在工具我们这个浏览器里边，火狐浏览器。

自己装上，然后这是一个fair bug呀，直接这怎么装，诶直接往我们浏览器里拖到这儿，一撒手，他问你是否安装一点安装就OK了，我这一装了我就不点了，你点安装一下就装完了，很快，然后我一插子给它关上了，然后你装完了以后发现什么呢？你这就多了一个什么呀，小虫子，诶这就是我们这个fire bug开发者工具，你可以直接一点就出来这么一个界面，或者也可以干嘛呀，摁F12也可以蹦出来啊，也可以蹦出来，如果你F f12不行，你就FN加F这二也行啊也行好点开这么一个界面以后，我们来看有什么呢？你看这是不是一个HL啊，那这一栏里边显示的内容就是我们这个代码，我们的网页在我内存里边的一个什么呀结构，诶我来看什么呢？我是不是想看这个P标签啊，P标签在哪里边呢？是包子里边呢，诶来我展开这个包底，我这一看，诶你看我有没有写结束没写，但是他干嘛了，是不是自动给你补上了呀？哎，自动给你补上了啊，所以注意你。

所有不符合语法规范的内容，浏览器会干嘛呀，会自动的给你加上啊，给你加上诶那同学说了，那既然浏览器它这么厉害，那我们就干脆就这么写不就完了嘛，对吧？那么说了，他虽然会给你自动修正，但是有些情况他会什么呢？诶它会修正错误，为什么呀，因为浏览器给你修正，它是不是完全在在猜呀，诶在猜你怎么想的，所以他这给你补了一个结束标签，有一些情况这个结束标签会干嘛呀，他会给你加错了啊，给你加错了，所以注意啊，我们一定要按照这个语法规范去写啊，语法规范去写好，这也是我们说的这个，那它还这里边注意啊，除了这个fire bug这东西说你装不装都行啊，你不用它，你在Chrome里，诶你直接摁F12，现在新的浏览器，包括你的什么360啊，包括你的什么猎豹啊都行啊，F12肯定会出来这么一个开发者工具，开发者工具呢，这里边我们来看直接。

看我们这个element一点开是不是也可以看见啊，你看它是不是也把也把这个P标签给你给你补上来，哎，给你补上了啊，所以很多种方式啊，很多种方式，F12就是我们的开发者工具这个东西咱们慢慢的习惯使用这个东西是一个很方便一个工具啊，很方便的一工具，好那接下来接着说，诶那同学看到了，我们会发现浏览器是不是会自动修正这个页面啊，诶那我们刚才说了，我们上午说东西了，我们我这我们昨天说的东西说什么呀，我们页面里所有的内容是不是都要写到这个H填片里边啊，诶那有一天干嘛呢？诶我就不想写里边，我就得写外边H1，哎我看我看谁敢管我，哎我是不是写外边了呀，那我么说，按理来说这东西能不能写外边啊，不能不能写外边，我们先看能不能显示啊来，我给它关了，我这一刷新走你诶真的管不了它是吧，他是不是真出来了呀？诶那不是说不能写外边吗。

为什么它还能出来呀，为什么呀？哎，我们说浏览器会干嘛呀，是不是自动给你修正啊，所以我们说这个东西虽然你写到HL外边了，你来看我内存结构里边外边有没有没有它干嘛了，自动给你放到哪了。

看见了吗？是不是自动给你放到这个包里边了，哎，自动给你放到包里边，所以注意啊，浏览器会为我们去自动做一些这种修正啊，做一些这种修正，诶那又有问题了，那浏览器它为什么这样啊，他为什么这样，他为什么老关着我们是吧？那么说了，浏览器如果什么呀，如果我们说稍微写错一点，他就不给我们正常显示，这样它是不是就不惯着我们呀，这样我们这个页面是不是写的这个语法会越来越好啊，哎越来越好，为什么浏览器老惯着我们，为什么呀？诶其实浏览器它也是干嘛的呀，他也是被逼的，诶他也是被逼，他也没辙，为什么没辙呢？咱们假设举这么一个例子啊，他都是为了什么呀，它都是为了抢这个市场，那什么意思呀，假如说现在我们有三款浏览器，就两款吧，两款浏览器一个是我们这个A，还有一个是什么呢？一个是我们这个BA浏览器严格遵守我们这个W3的的规范。换句话说，你页面稍微。

写的有一点点不合规律，诶浏器干嘛呀，就不让你显示，非常什么呀，非常这个叫有节操的这么一个浏览器是吧，稍微有一点点不合它走位，它干嘛呀就不让你正常显示啊，这是一个A浏览器，而B浏览器呢，这个下限比较干嘛呀，比较低，或者说干脆就什么呀，无底线诶无下限，你这个网页干嘛呀，写的再烂他也干嘛呀，他也能给你显示出来，诶他也能给你显出来，那现在问题来了，现在我有一个网页，这个网页呢，就写的比较糙了，干嘛呢，在A网站A浏览器里不能正常显示，在B浏览器里面干嘛呢，能正常显示，那现在假设你是用户，你会选择A还是选择B，是不是会选择B啊，为什么呀，用户管不管你网页写的规不规范，不管他只管什么呀，你A浏览器显示出来，那证明你这个A浏览器是不是不行不好啊，我就干嘛呀，谁能显示出来我就干。

啊，我是不是就用这样，那所以逐渐逐渐我们AA乱就会干嘛呀，是不是会逐渐被被淘汰呀，哎被淘汰，所以这里边注意，为了我们说能可以占有更多这个市场的这个份额，浏览器会干嘛呀，会一直会这么做下去，它会干嘛呀，会一直去尽最大的努力去正确的解析我们这个网页，但是我们还是那句话，它有的时候会给你解析什么呀，解析错误，所以我们写的时候一定要尽量按照什么呀，语法规范去写啊语法关系好，这是一个，那我们这个是说的，我们叫一个什么呀，叫做一个成对图线，还有一种叫什么呀，是不是字结束标签，比如说我们这个DRR，诶BR是不是一个字结束标签啊，那字结束标签我们一般都干嘛呀，是不是都在这个开始标签后边加一个什么呀，是不是加一个鞋盖，诶加一个斜杠啊字结束标签，诶那比如说我这随便写一个吧，写一个这个ABC，然后来一个什么呢？诶BCD是不是这样啊在ABC。

BCD之间加了一个这个B啊，加了一换行，我们来看效果，我这一刷新，哎，是不是就换行了呀？哎换行了，那我们说诶还有一种什么写法啊，我还可以这么写，不写这个什么呀。鞋盖，诶这来一个EFG，我是不是不写鞋盖啊，这东西对不对啊，其实呢，咱们先看看吧，一刷新是不是也能出来呀，哎，我们来看，现在我这边有两个换行，一个是我们这个，诶你看他干嘛了，他是不是害怕自动把我那个鞋盖给我给我去了呀，哎，给我去了，那我们来说啊，这两种写法严格来讲呢。都对啊，严格来讲都对，这个是我们这个XML里边的一个什么呀，写法，这个是我们这个H5里边的一个什么呀写法，这两个呢，用哪个都行，所以自接受这个要求呢，不是很严格啊，不是很严格，但是我一般呢，我就已经养成强迫症了，一般我就写完了就打这鞋带，我有点难受是吧，但这两种写法呢，哪个都行啊，哪个都行，好，这是我们说的一个标签啊好，那接下来我们还有什么规范呢？还有一个接着说这个东西就比较简单了，接着来说啊，我们叫什么呢？

第三一个，第四一个叫什么呢？HTML标签可以嵌套，但是什么呢？不能交叉嵌套，什么叫嵌套啊，嵌套是不是跟我们这个刚才那个注释嵌套是一样的呀，我在注释里是不是再写一个注释啊，那么说了，我能不能在标签里我再写一个标签，比如说写一个写一个今天诶天气真不错，哎，真不错是吧，你看他有人结婚的是吧？好，那这里边干嘛呢？我能我这再来一什么呢？来一个这个放我把这个真不错给他干嘛呀，给他圈起来，诶我是不是这样给它圈起来了，哎那我们说这叫什么呀，是不是在P标签里嵌套了一个什么呀，放到标签啊，放标签来我这来一个什么呀？哎，Color color等一个，这个我一保存，咱们来看这么写行不行，哎没有问题，昨天咱们是不是这么写过呀，诶这么写过啊，我这一刷新走你。

是不是出来了呀，哎出来了，哎，那我们说这叫这叫什么呀，这叫嵌套啊，这叫嵌套，诶就少一个鞋盖啊，找鞋盖这叫一个什么呀，嵌套，那什么叫交叉嵌套，这种写法就比较奇葩了啊，比较奇葩了，一般正常人呢，写不出来啊，什么意思呢。我把这found放这个P标签的外边，诶咱们一看这结构就糊涂，你上边这种结构干嘛呀，一看就是什么呀，这个found标签是P标签的一个子标签，P标签是放的一个副标签，而这玩意儿你一看这这好像从这从前头看P标签是found标签是什么呀？副标签，你从后头看fo标签是P标签是什么呀？副标签这两个到底是啥关系啊，他们是不是就像一个你中有我，我中有你这么一个关系啊，那到底谁是谁爸爸，谁是儿子，谁是爸爸，这是不是分不清楚呀？那咱们分不清楚，浏览器解析的时候，他是不是也得费劲啊，哎，也得费劲，所以这里边我们来看这么写，我们来看笑话啊，一刷新走你，哎哟妈呀。

显示效果是不是一样的呀，为什么呀，诶浏览器惯着你的浏览器干嘛了，咱们来看看，往这儿来看，诶浏览器是不是给你自动的去。调整了呀，诶它自动在我们这个放后边，是不是给你补上这么一个P标签啊，诶补上一个P标签，所以注意浏览器会最大限度的给我们正确的去解析这个页面啊，解析这个页面，但是你会发现什么问题呢？你发现这是不是又多出来了呀，诶多出两个，这是为什么，这就是因为我们浏览器解析的时候，它会有一些理解的一个错误啊，导致多重这么一些结构，所以你会发现你这么写虽然好使，但是整个这个结构上是不是就就不对了呀，哎就不对了啊，所以千万不要这么写啊，千万不要这么写，好这是我们说的这个千万不要这么写啊，这么写呢，这么写你这么写吧，写完了以后千万别让人看见，这样让人看见这丢死了啊，丢粉了啊好，这是一个不能交叉嵌套，然后接着来说还有一个我们叫什么呢？第五一个叫什么呢？叫做HTML标签中的这个什么呀，属性必须有值，且值必须。

加引号啊，且值必须加引号什么意思，我们还是拿这个放来举例子，这里边我给它来一个这个H2吧，打一条线，诶咱们写到这个上面，什么叫属性必须有值啊，这东西好了一点，这是不是就color啊，没指什么情况呀，直接写1COLOR对吧，我这一保存这玩意儿啥啥玩意儿是吧，你到底要设置红色还是蓝色还是黄色对吧？诶我这一刷新走你是不是没变化呀？哎，因为你没有指定这个属性值啊，叫做属性必须有值啊，当然这个情况其实说的是一些特殊的属性啊，一些我们以后会学表单有一些什么check呀，什么select呀，这些特殊属性，他们的属性名和属性知识一样的，那这里边注意，即使是一样的，我们尽量也干嘛呀，也把值给它写上，等我们遇到咱们再去细说，但是你要注意，现在我们说属性必须有值，还有一种叫什么呀，且值必须加引号，那这是什么意思呀。

来我这开着等于red把red给它去了，这行这是不是就直就没有引号了，咱们先说这行不行啊，诶也行，诶浏览器呢，它老关着你是吧？诶那我们来看一下，直接看一下这个放在这儿，你看它干嘛了，手自动给你加上来呀，诶自动给你加上啊，所以这块注意啊，必须得有引号，我们自己干嘛呀，你别要浏览器给你加，自己干嘛给它写上这个引号，我们说什么呢？单引号双引号都行，用单引号也行，用双引号也行，但是一定要记住，必须得写这个引号啊，来这样你放心，其实效果是一样的啊，效果是一样的好，所以你会发现讲这个规范的特别没劲是吧，你起码你按邦这规范去做的话，都没啥问题，但是我建我建议你还是一定要按照这个规范去写，因为这个东西要不然没问题，出问题你就不好整啊，出问题就不啊，所以一定要注意遵守这规范，简单回顾一下这个规范，第一个al中不区分大写，但是我一般都用什么呀，小写啊，一般都小写，然后注释。

不能嵌套，它都不是交叉嵌套问题，都不能干嘛呀，嵌套都不行啊，嵌套都不行，然后第三一个标签结构必须完整，要么成对出现，要么什么呀，自结束标签啊，要么成对出现，要么自结束标签，然后我们叫什么呀，H那边标签可以干嘛呀，嵌套，但是不能交叉嵌套，我估计这个问题应该你们是不会犯的啊，应该不会犯的，还有一个属性必须有值，且值必须加引号，这块备注一下，你们叫双双引号单引号都行。

哎，都可以啊，双引号单引号都可以啊好，这是我们说的这么一个基本的一个语法规范啊，我们来听一下。