尚硅谷前端基础 (7)

好，刚刚我们介绍了注释，还有我们H填宝里边的字节束标签啊，那这些东西都是你必须要去记住的，还是那句话，这些东西没有什么道理好讲，那就是我们HTML铝酰的一些规则啊，你记住了就好啊，记住就好，那接下来我们再来尝试写一个页面，说一下我们的网页里边其他东西，那这里面我们还是先写一个网页的一个基本结构，首先最外层是我们的HTML的一个跟标签，HTML跟标签里边有两个子标签，一个叫做hi啊，一个叫做hi啊，你看啊，我一直在反复的去写这个结构，那我也希望你在写的时候自己把这个东西给它写一下啊，写一下我们来一个title啊title title里边我们写一个标题啊，写一个啊，我们来说一下我们这个标签的一个属性，哎，标签的属性。

然后呢，在这里边我们创建一个body，我们叫做一个body body body里边呢，我们来写一个H1吧，H1啊H1我们写一个H1，然后里边我们随便写一句话，诶写一个，诶这是什么呢。诶，这是我的这个第三个网页啊，第三个网页啊，我们已经写了三个页面了啊，还是conttras保存一下，保存到这儿，我改个名，我INDEX3啊INDEX3保存一下网页呢就写完了，那我要运行的话，还是需要双击去打开我的第三个网页，在这儿就运行出来了，嗯，那这里边呢，我就想再做一件特别的事儿，哎，那你给来看啊，我们说了这个是我的第三个网页，那其实从我来讲呢，哎，我写了三个了，已经是吧，我想突出一下，这是我的第三个，已经不是第一个，第二个已经是我第三个网页了，我已经写了三个页面了，那我想突出这个第三个，那我想让这个第三个这三个字变成一个红色，那我要怎么办呢？诶，那这件事儿我们就要一步步来了，首先我们来看，现在从网页的源码这来看，你看第三个这三个字，还有其他的什么，这是我的呀，还有网页呀，叹号啊，这些东西它有没有什么区别。

诶，实际上很明显，这三个字和别的字它没有本质上的区别，可能就是字的内容不一样，但是它和别的东西一样，它也只是一个一个字，所以既然我们要想单独给他们三个这三个字来设置颜色，那我首先要做的第一件事儿，我是不是得让这三个字和别的字它不一样啊？哎，那问题就来了，那怎么让他三个和别人不一样呢？哎，那这里我就需要给他加入一个单独的标签来选中它，那这样是不是就不一样呢？哎，所以这个时候我们在这儿我可以写一个标签，这个标签叫做放，放什么意思呢？放叫做一个字体啊，放叫一个字体，那现在我们来看，那现在这三个字和别的字有没有区别了？哎，那区别就挺大了，因为只有这三个字在放在里边，而这些其他字是不是都在它放在外边啊，哎，好，但是现在啊，你这虽然加上了，但是在这儿。

你看有没有区别啊，没有任何的区别啊，没有任何的区别，那这是怎么回事啊？哎，因为你现在只是让它和三个，其他的这三个字和其他字不一样了，但是你有没有告诉浏览器，你要把它设置成红颜色呀？哎，没有，那这里边我们要怎么办？哎，我写个注释，这里面我们就要说到我们这个东西叫做一个属性的问题，属性属性是干嘛的呢？哎，我们来说一下，在我们这个标签中啊，在标签中我们可以什么呢？诶还可以，诶还可以设置什么呢？设置属性，那注意了，我这个标签中指的是什么？指的是括号，我们叫做开始标签，开始标签或什么呢？哎，或是字结束标签，也就是说我可以设置属性，可以在哪设置，你可以在开始标设置，或者有自结束标签也没问题，但是我能不能在结束标签里设置注意这一个。

啊是绝对不行的，我们只能在开始标签当中去设置这个属性，所以属性应该写哪写到这个位置啊，写到这个位置，那我们的属性要怎么写啊，那注意了，哎，属性它是一个这个名值对结构啊，明值对结构明。对，什么叫名值对，名就是属性名，而值呢就是一个值，所以你要注意以后你看到这个东西，一跟你说名值对结构，那它基本上就是一什么呢？就是一个X等于Y这样一个结构啊，X等于Y，这里的X表示的是名字，而Y表示的就是一个值，所以以后一说到名字对，一说什么什么对，基本上就是一个东西等于另一个东西这样一个结构，那所以这个属性我们可以在开始边写一个，怎么写呢？那注意了，我的属性和我标签的名字之间，你需要有一个空格隔开，那属性和标签的名字之间需要有一个空格隔开，那我可以先写一个属性名，那属性是干嘛的呢？我们先演示一下，那首先我现在是不是想让这第三个，这三个字变成红色呀，哎，所以在这我就可以写一个属性名叫做color啊，叫做color color，然后等于我要。

它让它等于一个值，等于号右边的就叫做属性值，那我这里需要加一个引号，单引号双引号都行，我等于一个red，那这个时候注意color就叫属性名，而red就叫属性值。color什么意思颜色，Red就表示的是红色，所以我写的这句话表示意思是什么呢？就是让found标签里面的文字变成红色，而found标签里是不是只有第三个这三个字了，哎，所以这个时候我们再一刷新页面，你会发现第三个第三个字就变成红色，当然你说我不喜欢红色，我喜欢yellow，那你就写一个yellow也是没问题的，直接一刷新是不是就变成黄色了，哎，变成黄色了，所以这个color就叫属性，那相信你属性大概什么作用，你应该有一个很直观的感受，属性用来干嘛？属性。

属性用来诶为诶用来设置我们这个标签，诶如何什么呢？诶如何显示啊，标签中的这个内容如何显示啊，如何显示，但是这只是一部分，后边我们还会说属性可能还有一些其他的功能，但是现在在这儿就是来设置这个字如何显示的，所以属性你可以理解是什么呢？标签它的作用只是标识我们这个文字的一个内容啊，标签只是标识我们这个文字的一个内容，它是干嘛的？H1里边是字体，P里是这个，是这个EG标题，P里边呢是这个段落，对吧？诶它只是来标识这个内容的这个结构是什么的，而这个属性呢，还可以具体的在细节的设置一下如何显示一个内容，比如说你想显示成黄色，你还是想显示成红色，你还是想显示成其他颜色，我们都可以通过它来设置啊，当然。

Color只是其中一个啊，Color只是其中一个，那这里我们来说一下，我们叫什么呢？一定注意属性，属性和我们的这个标签名和什么呢？或或其他属性应该什么呢？应该使用我们这个空格隔开啊，应该使用空格隔开，那我们说了，哎属性名注意了，属这个color叫做属性名，这个yellow叫做一个属性值啊注意了，我们的属性名不能什么呢？哎，不能瞎写啊，不能瞎写，注意了，什么叫不能瞎写，这color是不是我自己随便编的呀，不是我编的，是我们浏览器里，或者说是我们W3C那个官方文档里边规定的，这我不是瞎写的啊，这不是瞎写的，诶当然值呢，他也不能瞎写啊，属性值哎，就直接属性不能随便写，应该干嘛呢？诶应该，诶，根据我们这个文档中的什么呀，中的这个规。

规定来编写啊，应该根据我们这个文档中的规定来编写，而且注意诶，有些属性，有些属性有属性值，哎，有些什么呢？有些没有，所以像color这种就是有属性值的，还有一些没有，没有值的怎么办？没有值的你就直接写一个属性名就行了，所以以后你有可能会看到这种，当然一定不是color，可能是别的属性，直接就写了一个名字，没有值，这也是对的啊，这也是对的，所以有的时候有这些属性，但是像我们这个color，它就属于有值的属性啊，有值属性啊，有些有属性值，有些没有，那注意了，我们如果有属性值，如果有属性值，我们这个属性值应该什么呢？应该使用我们这个引号引起来啊，引号引起来，引号可以是双引号，也可以是单引号。

但是注意你不能混着用，你不能说我前边来个单引号，后边来双引号，这是不行的，要么都是双引号，要么都是单引号啊，数性值应该用引号引起来，而且注意这个引号都应该是我们的这个英文的符号，你就不用想了，只要是需要解析的，我们这个符号都应该是英文的符号，那我们上边其实还写这么一个东西啊，属性和标签名或其他属性应该使用空格来隔开啊，使用空格格来隔开，那也就是说意味着我一个标签里边是不是只能写一个属性，哎，当然不是，所以像这我可以再来空格，我写什么呢？比如说我写一个size size表示什么意思呢？表示尺寸，表示大小，你看我这写一个单引号，单引号也是没有问题的啊，大小这表示什么意思呢？设中文字大小，比如说写一个一，这一保存，我们一刷新走一个，这字是不是变得特别小了，诶我写一个三，诶我写一个三，这个字会变得稍微的，诶保存一下啊，CTRLS保存刷新这字是不是稍微。

大一点啊，我还是换成红色啊，有点不太清楚。刷新一下字就稍微大了一点啊，所以size这个属性是设置大小的，而它这个属性设置颜色的，而且你要知道属性之间要使用空格隔开啊，空格隔开，那这时候有同学会说了，老师啊，你现在告诉我，我知道有哪些属性，那没有你的时候呢，你不告诉我我怎么知道。放这个标签里有color，还有散这个属性，甚至说我怎么能知道有放这个标签呢？诶，先别着急，你们下边的任务先把这个放到标签以及它里面的属性，自己尝试写一下，至于说怎么去查标签，或者说是怎么去查属性，别着急，我们往后接着说，我们先来停一下。