3.尚硅谷_HTML&CSS基础_HTML简介.avi原创

那把咱们这个主要的一个学习内容，还有我们这个课程呢，都做了一个简介，然后呢，接下来我们开始正式的进入到我们这个学习，那么说了我们一个网页我要分成几个部分来的，哎，三个部分我们叫结构、表现，还有行为，结构用的是我们的HTML，表现用的是我们这个CSS，行为用的是我们这个javascript，我们的JS，那我们来一个一个学，先学习什么呢？我们的HTMMR，还有这个CSS，那今天我们要主要讲的是这个谁呀？HTMMR啊，HMR，那我们说HTMMR，学习HMR之前，我们先了了解一下HMR是什么，我们说了它负责我们结构表现、行为里边谁呀，是不是结构啊，诶，它是负责我们这个结构的，那我们来看一下HMRHTML英文叫做hypertex markup language叫做一个什么呢？叫做一个超文本标记语言，诶它负责网页三个要素中的这个什么呀。

结构，诶，那我们先来看第一个问题，它叫超文本标记语言这个名字吧，其实起的挺奇怪的是吧？诶，那我们先看超文本，我们一个个看啊，我们先看超文本，超文本这块呢，可能还不太看懂，那我们先看什么呢？看简单的文本，什么叫文本呀。什么叫文本，诶或者说什么叫纯文本，什么叫纯本，来我这里边直接在这notepad打开我的这个记事本，这是我的记事本啊，诶记事本里边写一段内容，诶诶编写一段内容，那我问你这个叫不叫文本，诶这个叫文本，所以注意什么叫文本在什么呢？在我们这个纯文本边界器中编写的这个内容都是什么呀？都是纯文本，那什么叫纯文编辑啊，比如说我Windows里边这个什么呀，记事本，比如说我这还有一个叫做not pad加加，比如说我们这个sub lamp这些都是什么呀，都是纯文本编辑器，在这里边写的内容都叫什么呀，都叫纯文本，而什么呢？而我们的网页，网页就是什么呀，使用我们这个纯文本编写的啊。

网页就是用纯编写的，那我们说纯文本它有什么特点，诶，那我在这个记事本里，我能不能插入个图片啊。没有这功能吧，哎，那记事本里我能不能设置一个背景颜色呀，也没有吧，在记事本里我想干嘛呢？我想把字体变一下，把字体变大一点，把字体颜色变一下行不行啊？哎，有同学说行啊，诶我们这有什么呀，格式是不是有一个字体啊，字体咱们就简单点，往下变大一点，来一什么呢？来一个现在三号来一个什么呢？一号我这一保存走，你字体是不是变大了呀，但是注意它真的变大了吗？

来，我保存在我这个桌面上，我随便保存一个啊，叫做一个text网，Text网，诶我这一保存保存完了，来看我这文件是不是跟这儿了呀，来我一双击，诶，这字是不是确实大了呀，诶确实大了，来我们来看看换一个编辑器，这个是记事本啊，我关掉换谁呢？用我的这个note pad最加，打开直接右键ID的位置，Notepad最加，这也是一个纯文本编辑器啊，打开以后发现诶。这里边变不变大呀，没变大，也就是说在我记事本里变大了，而在我这个note pad里并没有变大，那证明这个文字实际上它真实情况有没有变大呀，没有变大，它只是显示的时候是不是比你变大了呀，爱你变大了，所以这里边我们要说的一个问题就是什么呀，纯文本中。诶我先把这个字啊给它改回来啊，来把它改成还是改成这个三号，我们要说一个什么呢，叫做纯文本中，纯文本中只能什么呀，只能保存我们这个，诶文本内容，诶图片啊什么这种音频呀，这种什么呀，诶视频的这个，诶内容相关内容，诶视频等什么呀，诶格式化的这个内容干嘛呢？哎都不能什么呀，都不能设置，就说白了，这里边只能写什么呀，只能写字，你写个大于号小于号什么也没啥问题，只能写这个文字，这种符号啊，这种符号，所以它这有一个限制，诶那我们说了，那既然是这样的，我们说网页是不是就是用纯文本写的呀，那网页就是用纯文本写的，那意味着我是不是用记事本，我就直接可以去写网页呀，行不行呢？我们来试试notepad。打开我这个记事。

本，那我写一个来，这是我的第一个网页，诶那我一想记事本，既然我既然网页就是纯文本的，那我这个是不是也是中文本啊，那这个是不是就应该也可以是一个网页呀，行不行呢？我们来试试啊，那我要当它把它作为一个网页，我是不是得先得保存呀，来我这快捷键CTRLSCTRLS保存，那我这来一个吧，就叫一个DEMO01，诶那我这个注意我这一个点TXT，这是我这个文件的一个什么呀，扩展名吧，TXT表示我这个文件是个文本文档吧，但是现在我写的我想干嘛，我想把它作为一个什么，我是不是想给它作为一个网页呀？那我这个扩展名还能不能写T了，我得写什么了？哎，我是不是得写HTML了，哎，表示它是一个网页，那有可能有的同学看到过什么呢，写这种HTM的。

诶，那这个呢，实际上和HTML是什么呀，一个意思啊，一个意思，只不过什么呢？早期的系统里，我们Windows系统只支持三位扩展名，比如说你看什么exe呀，什么doc呀，什么DLL，是不是都是三位的呀，早期系统里只支持三位的，但是现在的系统有没有这问题了，没有了，所以你就完全就可以用什么了，全都用HTL，然后我就直接保存到我的桌面上，然后我一点保存，诶我们来看。

这文件是不是跟这儿的呀，DEMO1DEMO01你会发现什么呀，这图标是不是变成我们这个火狐乱气了呀，诶来我这一双击打开，你会发现什么呀。诶，这是我的第一个网页，是不是就显示出来了，诶我们发现我这写一个网页简不简单。非常简单吧，哎，只需要在我们这个记事本里写个文字，然后一保存，以什么呀，以HTM2为扩展名保存是不就OK了呀？诶，但是同学可能感觉到，顿时感觉到有点有点上当的感觉，是吧？这是网页，你蒙谁呢？是吧？你蒙谁呢？但是这的确是个网页是吧？只不过是一个比较简单的网页，那也就是说我们这个网页文件是是是由谁来写的呀？是我们写的呀，但是被谁打开的呀，是不是由浏览器去显示啊？哎，有浏览器去显示，我们直接右键查看页面源代码，这是不是就是刚才我们写的内容啊，M写的内容啊，那现在就带来一个问题，我觉得这个显示它有点什么呀？

这不过瘾是吧？那么现在我们还说呢，你刚说了文本我们还有什么呀，是不是还有叫超文本呀，那怎么叫超文本呀，我们说了文本，纯文本是不是只能显示文字内容啊，那么说了，在我网页里它能不能显示文字以外的东西啊？哎，我能不能引入图片啊，能不能引入音频，能不能引入视频啊，是不是都可以啊，诶所以超文本你可以简单理解什么呢？简单理解成是超过这文本这什么呀，在这个文本基础上做一个扩展，在我的网页什么呀中，可以保存图片啊，可以保存音频啊，可以保存视频啊，但是实际的意思，这个超指的什么呢？超链接的意思啊，指超链接意思，到时候我们再具体说超链接是什么东西啊，然后呢，除了文本以外，还有一个什么呀，语言就不用说了，Language就是一个语言，中间还有什么呀，标记，标记又是干嘛的，标记又是干嘛的呢？那这里边我们来说一下，那现在有这么一段文字，文字虽然已经。

在网页里显示起来了，但是感觉显的是不是很单调啊，哎，很单调，那现在假设我想干一件什么事呢？我想这个这是我的第一个网页，这个呢，是我整个页面的一个什么呀标题，那既然是个标题，我是不是希望你浏览器可以干嘛呀，可以给我自动的干嘛呀显示的。大一些，然后字体干嘛呢？有一个加粗的效果，诶我是不是需要用浏览器把它作为一个标题去显示啊，那这个是怎么办呀？那我们说了浏览器显示一个一级标题，它默认就是变大然后加粗的，那我我需要做的事只是干嘛呀。

我只需要告诉浏览器这个是一个什么呀，一级标题，诶，我只需要告诉览器这个是个一级标题，诶，那我怎么能告诉他是个一级标题，诶，我们可以用标签是吧？诶就像什么呀，举个例子就什么呀，我想告诉全世界我是一个大帅哥，诶，还得是大帅哥是吧？那怎么办呀？哎，我们说了还有干嘛呀，我戴一个两米高的一个帽子是吧？大红帽子是吧，特别显眼，然后这帽子上干呀，用白字写上。诶，画一个箭头看，这是一个帅哥。然后我就走出去，人家第一眼是不是就看到这帽子呀，哎，一看他不管我帅不帅，一看哦，这是一个帅哥来了，对吧？所以干嘛呢，我可以通过一个帽子来标识我自己，那我想想我是不是想标识这段文字是个什么呀，是个一级标题呀，那所以我是不是可以给。这段文字戴上一个帽子呀，诶，那怎么给文字戴帽子呀，那就用到了我们所谓的什么呀，叫做超文本标记语言里边的个什么呀，标记，那标记指什么呢？标记指的就是什么呀，标签啊，标签，我们用标签来标记我们这个网页中的不同内容，比如说我是不是想标记这个什么呀，这个是个一级标题吧，那我们就需要使用什么呀，使用我们这个H1标签，那H1标签怎么用呢？我们来说一下HTM的标签，首先使用什么呢？使用一对尖括号括起来啊，尖号实际上就是一个小于号加上一个什么呀，大于号，然后呢，里边写的是我们这个标签的名字，你是什么标签，你就写什么标签名，比如说我是不是现在想写一个一级标题标签啊，它的标签名叫什么呢？叫做H1，所以这里边我直接写什么呀，H1啊写H1，诶那问题来了，我是不是想用这个H1把这。

这句话给它括起来呀，那我一个标签能不能表示括的是一句话呀，不能，所以注意标签一般都是什么呀，成对出现的，有开始还有什么呀，结束，这个叫一个什么呀，开始标签，往往我们还需要一个什么呢？叫做结束标签，但是我直接你看我直接CTRLCCTRLV，我是不是给复制过来了，复制过来以后你发现这俩是不是长一模，所以为了区分我们干嘛呢？在结束标签的前边加一个斜杠，诶那这就表示什么呀，一个结束标签，这就是什么呀，一个开始一个结束，一定要注意标签一般情况下都是干嘛呀，成对出现的，好，那我这标签写完了，那我这标签我现在想干嘛呀，我是不是想标识这一段内容是个一级标题啊，一级标题的标签我也有了，但是现在这标签和我这文字有没有关系啊，是不是没有关啊，我得体现出我这个标签是不是标识的是我这个文字啊，所以干嘛呢，我需要把这个文字。

等到标签什么呀，中间，那现在就表示什么呢？诶在H1标签中间有一段文字内容，就表示我这段内容是一个一节标题，那浏览器一看，诶这是个一级标题，那我干嘛呀，我是不是就按照这个一级标题的效果去给你显示啊来我们看看一保存，我们看一刷新走，你是不是变大了呀，哎，变大了啊所以干嘛呢，在我们网页里编写的实际上都是一个一个的标签啊，标记指的就是什么呀，标签一定要注意标签我们格式首先是一段监控块，监块里边写的是标签的名字，然后有开始有结束，结束标签和开始签格式一致，只不过多了一个什么呀，诶斜杠啊叫做有开始有结束，诶那我们说了，这回这网页效果是不是就好多了呀，还是右键查看页页面源代码，这H1它是不是过来了，诶那这儿写完了，可能大家还是感觉什么呀，这网页是不是还是太简单了呀，诶虽然这格式是对。

对了，但是它并不是一个什么样标准格式，诶那我们来说一下网页的标准格是什么样的，来CTRLX我先把它剪切掉，那标准格是什么样的？首先我们最外层网页也就叫什么呢？叫做HTML跟标签啊HL跟标签，什么叫跟标签？我们先写上，叫做HTML标签，我们说标签首先是一段什么呀？肩块里边是不是标签的名字呀，HTML标签的名字叫什么呀？就叫HTML，还是有开始，有结束，结束标前面多了一什么呀，斜杠，哎，这就是什么呀，一对标签，这个标签我们叫什么呀？叫跟标签，什么叫根呀，什么叫根呀？根是不是树根呀，一个数有几个根呀，是不是有只有一个根呀，所以我们叫做根标签，我的一个页面里也是什么呀，有且只有一个跟标签没有行不行？

没有也不行，你多了干嘛呀也不行，有且只有一个，我们的所有的网页当中的内容都应该写到HTM2什么呀跟标签里，也就是说我H1你看我写这行不行，我写这行不行，我写这是不是写到跟标签外边了，所以注意网页里边的所有内容都应该写到HTML的什么呀里边啊，都应该写到HL的里边，诶然后呢，在HTL里边我们可以去编写网页了，那怎么写呀，HTML里边还有什么呢？还有两个子标签，什么叫子标签，我们先写上，一个叫什么呢？一个叫做还还有一个叫什么呢？叫做body啊，还有一个叫body，这还写错了，多写了一个，这个写个，诶这个HTML里边有两个子标签，一个叫做hide，还有一个叫什么呀，叫body，什么叫子标签啊，子什么意思啊，是儿子呀，诶儿子你看我这个hi是不是。

在我HT猫签的那个内部呀，那这种标签我们就称hide是HTL的什么呀，子标签，Body是不是也是在HL内部呀，我们也称什么呀，也称body是HTL的什么呀，子标签，那hide和body什么关系呀，兄弟啊，他们是兄弟标签，诶那我们说HTML是hide的什么呀，副标签，HL也是什么呀，Body的副标签，哎，所以这种标签他们之间什呀，诶在它内部就叫什么呀，叫子标签啊，叫子标签，但是我这么写了吧，虽然这东西也对，但是你发现看起来干嘛呀，是不是不舒服呀，写成一行，这到底谁是儿子，谁是爸爸，我们是分不出来呀，哎，不太好区分，所以一般我们格式呢，不会写成一行，我会怎么写呢？诶在S码，我这给他码换个行，在这儿呢，我再给它换个行，在这儿呢，再换个行，这样有什么好处，我一眼就能看出来，HTM2中间有两个子标签，一个叫什么呀？

Head还有一个叫什么呀，Body这个结构是不是就非常的清晰啊，哎，清晰，所以这块head在这我们还干嘛了，摁一下table给它干嘛呀，缩进一下啊，缩进一下，这样这个结构就干嘛呀，特别清楚，一看hide和body就是A的这个子标签，Hide和body就是什么呀，兄弟标签啊兄弟标签好，那这里边我们来说氦de呢，还有一个子标签，那既然又说到子标签，那这个标签应该在哪？

是不是在height里边啊，叫什么呢？叫做T，诶同样我这也是缩进两下啊tle，诶你看这个关系，我一看一看是不是title，就是hi的子标签，哎，那我们看title和N猫什么关系，哎，是不是爷孙关系啊，HTML是不是他的这个爷爷标签，这是他的这个孙子标签是吧？但是在这里边我们不这么叫，这叫什么呢？叫做祖先标签，这个叫什么呀？叫后代标签啊，一个叫祖先，一个叫什么呀？一个叫后代啊，一个叫祖先，一个叫后代，诶那所以我们一般都按照这种格式去写，因为写完了以后，你看起来会干嘛呀，一叫清楚啊，比较清楚，诶那你又写这么多标签，这堆标签都是都是干嘛的呢？诶我们先来说什么呢？S标，刚才我们已经说了，是跟标签，是不是有且只有一个跟标签啊，诶我们的所有网页内容都应该写到什么呀，HTML标签里边，然后还有一个什么呢？这有一个叫做什么呀？Had had什么意思。

头，诶头部，所以hide标签呢，用来设置网页什么呀，头部信息，Hi的标签中的内容不会在网页中直接显示，说白了，你这写1万行网页里看见看不见看不见啊，Hide片中的内容不会在网页中直接显示，诶，那既然不会在网页里显示，那hide是干嘛的呀？诶，Hide是设置一些干嘛呀，一些信息让谁看的呢？让浏览器去看的，浏览器通过这些信息来干嘛呢？来判断如何去解析我们的网页，说白了hide就是帮助我们浏览器去解析网页的啊，解析网页的title我们待会再说啊，先说这height，然后height完了以后还有谁呢？还有一个body body什么意思？

身体是吧，哎，主体包地表示我们这个网页的主体页面中所有的可见的内容都应该写到哪啊，包里就是说如果你写一个东西，你希望用户可以看到，往哪写，诶往包里解，千万别往head理解，写完了人家也看不见啊，写完了可能也看不见，所以这里边可以干嘛呢？我是不是可以把刚才那H1，诶我还给删了来，我是不是可以把刚才那H1是不是给他写这啊哎，写这那这边我来写一个，诶这是我的这个第一个网页，我已保存。是不就完事了，哎，这就是一个完整的一个网页结构，来我们看效果，我这一刷新走你。T是不是少写at啊，哎，少写T啊，所以注意成就出现，那开始的名跟结束名是不是得一样啊，哎，得一样啊，保存我们再来看这一刷新走，你是不是出来了，诶可是这一看跟刚才那是不是没啥区别呀，来我们右键查看一下源代码，但是你发现源代码是不是已经变了呀，诶结构就完整了，那我们说了，既然显示没有区别，而我们这种写法是不是有麻烦多呀，那我们到底按哪种写法写，诶一定要记住是按照第二种写法写，为什么？因为这种叫什么呀，叫标准格式，而刚才那种干嘛呀，叫不标准，我们写的时候一定要干嘛呀，按照标准写啊，所以注意这个结构给它背下来啊，背下来好好，那这看完了，那实际上有一个标签，我们一直没有用上谁呀title title是干嘛？Title什么意思？是标题的意思是吧？Title是干嘛的呀？

诶，我们来试试标题写个字吧，写一个，诶这是一个诶非常好的网页，我这一保存是不是写完了呀？诶来，那首先这东西会不会出现在网页里，诶网页东西是不是都得在boos里写呀？诶那我可能更难，这一刷新走你。

在哪呢？诶你看是不是在在这块了，诶这是一个非常好的网页，你会发现它是不是设计设置到我们这个网页的一个标题哪去了，诶标题这个头部，所以注意title中的内容会显示在哪呢？显示在我们这网页的什么呀？标题栏啊标题栏好，这就是我们网页的一个基本结构，把这个结构给它记下来啊给它记下来好，那这里边我们说完了，我们先给它，诶那这里边我们再补充一个问题啊补充一个问题，这个问题呢，你们待会也会遇到，那刚才我这创建的时候，我是直接干嘛呀，我直接notepad，我是不是打开这个记事本，然后写网页，然后文件另存来的呀，哎，另的，那有的同学还怎么写呢，它是这么写的，直接来一个吧，右键新建一个文本，文档来一个名儿，叫一个DEMO02 demo02这一想我是不是得写扩名啊，来一个点一个HTMMR，然后往里边写东西，直接打开，来什么呢？来一个HTM，我们那什么呀。

是不是跟标签啊，A码里有两个子标签，一个叫做head head head里边有一个什么呀，哎，Title t都背下来啊T然后还有一个，哎body是我们这个H码的词标签，哎来，那我这一想写再写一个还是写一个这个H1H he来诶这是我的这个第二个网页，我这一保存是不是写下了，哎，他写完了，我一想干嘛呀，走诶。诶，你会发现这哥们连图标是不是都没变呀，我刚才这个DEMO01是不是我这个。网页的图标啊，而这个是一个还是记事本图标吧，诶，但是扩展名我改没改呀，我是不是改成al了呀，但发现是不是没用啊，为什么呀？哎，你注意我们那个Windows系统默认的扩展名都是干嘛的呀，给你隐藏了，所以你看到我这个网页这是不没有点这名啊，他是不是没有啊，他有，但是干嘛的给你隐藏了，所以他已经给你隐藏了，你在这再改有没有用没有用，你看右键我们来一个属性，它的类型还是什么呀，是不是还是tit啊，诶还是tit，那我们怎么去改呢？也就是说我怎么让它不隐藏呢？怎么办呢？来我们来说一下，打开我们这个计算机，计算机这有一个叫什么呢？叫做组织啊组织点开组织有一个叫做文件夹和搜索选项啊，文件夹和搜索选项，点开它再来看，有一个叫什么呀，查看诶点开这个查。

啊看往下这是不是有一堆高级设置啊，往下找啊往下找有一个叫什么呢？叫做隐藏已知文件类型的扩展名，现在是不是勾着呢呀，诶如果你不想隐藏怎么办呀？诶你把它取消掉给勾给它点没了，然后再干嘛呀，确定然后关掉，诶这回你看扩展名是不是都回来了，诶回来以后我们来看这块，诶你会发现什么呢？这文件是不是有俩扩展名啊点HTM2还有一个点T，那既然两扩名为什么我前面的没生效，后边生效了，是不是以后边为准啊，诶实在最后以谁为准，那既然你想设成at干嘛呢？你把这个tit给它干嘛呀去掉，然后问你是否这肯定点什么呀，是然后再点是不是就OK了呀，哎就OK了啊那还有同学说了，那老师我这现想想改的怎么改呀，我这一双击是不是默认用浏览器打开了呀，我想编辑怎么编辑啊，诶选中。

文件右键有一个什么呀，打开方式选中谁呀，记事本是不是打开了呀？诶，所以打开方式不同，你就可以编辑，用浏览器打开你是编辑不了的，用记事本打开你可以编辑或者还可以怎么办呢？来一个notepad干嘛呢？把这个网页往里干嘛呀，拖是不是也行啊，哎，多种方式啊，自己去掌握啊，自己掌握下边呢，给你们点时间把这个东西自己来写一下啊，自己来写。