html标签内部样式怎么写
哈喽，本期我们讲解内部样式的写法，将 c s s 代码集中写在 atm r 文档的害的头部标签中，并且用 style 标签定义， 我们写个小 demo 看一下。我们定一个标题标签，大家都知道标题标签属性是默认加粗的黑色字体，我们使用内部样式在 high 头部中添加一个 style， 这里注意要用到标签选择器，这个我们后期会再讲解，就是选择你要操作的标签，比如我们现在要操作 h 一， 那么这里我们就写 h 一大括号，然后写他的多个属性，属性是成对存在的啊，一个名称对应一个池。 好了，一起来看一下，运营效果非常 ok， 本期讲到这里，下期继续讲外部样式。
粉丝168获赞1217
相关视频
10:02查看AI文稿AI文稿好的大家，那么刚刚呢为大家介绍了这个行内样式表啊，那么刚才咱们也说了，这种行内样式表啊，他把结构以及样式呢紧密的混合到了一块啊，非常不易于后续的维护，同时也大大降低了可附用性啊，这也不符合咱们软件开发的这种思想， 所以说呢，咱们在正式开发的时候呢，是不建议使用这种行内样式表的啊，于是呢就有了第二种方式，叫做内部样式表，那么这内部样式表怎么用呢？他需要两步，首先第一步要在这个叫 html 中的 hi 的标签中标签中啊，去创建一对叫 style 标签啊，标签在 htm 中的 hat 标签中去创建一对 style 标签。然后 第二步，在这个 style 标签中标签中利用选择器，选择器去为选中的标签添加 样式，那就需要这两步即可，那么咱们就一步一步的来，首先呢在 html 稳当中啊，锁定这一对嗨的标签，然后呢在嗨的标签当中，我们去创建一对 style 标签， 看懂吧。哎，那么有的小伙伴呢，在创建这个 style 标签的时候啊，可能看到过这个属性叫太法，然后直是太克斯的杠， css 太克斯特代表什么意思呢？代表文本对吧？ css 就代表 css 样式表，那么实际上呢，这个东西你不加，那么 style 标签他也默认自带他，所以说其实这个东西你加不加，其实结果 我都是一样的，听懂吧。哎，那么写了这一对 style 标签以后呢，大家啊就要千万要注意了，注意什么呢？大家注意，在 style 标签当中，这就属于 css 的范畴了， 而在 style 标签之外呢，是属于 html 的范畴，那么之前给大家说了说 html 和 css 啊，这是两个完全不同的技术， 能听懂吧，所以说在 style 标线中，我们要遵守 css 的规范，就比如说 css 中的注视语句，那和 html 的就是不一样的， css 的注视呢，是以杠星开头，以星杠结尾的， 而 html 的注视呢，它是以这种啊，小于号，叹号减减，对吧？然后以这个东西结尾的， 听懂吧。哎，所以说他们 html css 的规范是不一样的啊，那这是 css 的注视。然后呢，大家一定要注意，在啊 style 标签中， 标签中啊，它是属于属于 css 的，而 css 和 html 的注视注视 是不同的啊，不仅注视不同，是不是规则也不一样啊，所以说大家一定要注意下， style 标签中属于 css， 好吧， ok， 那么有了这个 style 标签，接下来咱们是不是就可以利用选择器 去为选中的标签添加样式了呀？啊，那怎么加呢？他有他的语法格式，语法格式， 语法格式怎么写？首先呢，一个叫做选择器，至于什么是选择器啊，咱们还没学呢，一会呢，咱们就学习各种选择器，听懂吧。然后呢，紧跟着一对大括号，这个大括号呢，我们称之为声明块， 然后你要为添标签添加的样式，就写到这对大括号中即可，对吧，有几个样式你就写几个啊，你这种形式，比如说属性一，属性值一，英文的分号，然后属性二，然后来个属性值二分号，然后我写个点点点， 这个点点点呢，表示这个样式啊，你可以有多个有多少个都行，你用并排写下去即可。 听懂了，这就是一个基本的语法格式，那咱们简单介绍一下，那到底什么是选择器，或者说选择器用来干嘛的？ 说选择器，所所谓的选择器啊，他就是用于选择需要添加样式打标签的，哎，就是用于选择你需要添加样式打标签啊， 咱们一会呢会学习各种选择器，去选择页面中各种各样的标签，然后为他们添加样式， 这能听懂吧？哎，那么紧跟着呢，后边是不是跟上了一对大括号啊？哎，这个大括号，这个大括号我们称为称为，叫做声明块，也就是你需要为元素添加的样式都写在声明块中即可，哎，有多少样式写到声明块中 即可，然后呢，再往里面那是不就是剩下的就是样式了呀？哎，就是你要为标签添加的样式了，那么此时大家注意样式啊，他都是以间值对的形式呈现的，说样式呢啊，以间值对的形式呈 线，然后呢样式名对应着样式直啊，样式名对应着样式直，然后名和直之间以英文的冒号 连接，对吧？哎，能说说名和直之间以英文的冒号，英文的英文的冒号进行连接， 然后当然是不是以英文的分号作为结尾啊，哎，然后呢说以英文的分号 啊，来个结尾，然后我们说呢，这个样式呢，你是不是可以有多对啊？有多少对都行啊，并排写下去即可，对吧？我们说兼职，对啊，可以有多个，有多个，建议有多个，然后多个，然后建议呢，每行写 一对啊，建议每行写一对，那这就是格式，接下来咱们是不是就可以利用这个格式去写写样式了呀？哎，那么写样式的话呢，我们得搞几个标签啊，下边这个我给他加个注视，这叫行内样式表。 搞几个标签，比如说我们搞个 p 标签，这里再来个，还是这今天天气不错，然后呢，再来一个叫挺风和日丽的啊，然后再我们再来个 h 一标签，来个天天好心情，可以吧？ 哎，那么接下来呢，我们就选中这几个标签，为这几个标签添加个样式啊，利用我们刚刚说的这种叫做行啊，叫做，呃，内部样式表， 来吧。那按照刚才的这个格式，首先我们是不是要学来个选择器呀？那当然，选择器咱们暂时还没学呢，咱们就随便来个，比如说屁， 这个 p 呢，就表示选中页面中所有的 p 标签啊，一会呢咱们会详细的学，然后一对大括号呢，表示声明块，在这里边我们就可以添加样式啊，为 p 标签添加点什么样式呢？比如 说来个卡了，将文本的颜色呢都变为红色，对吧？将所有的 p 标签啊颜色变为红色过来执行，那么此时所 所有的 p 标签颜色都变成了红色，那如果说呢，你在这基础上，你又想添加个字体，把这个字体呢调大一点，对吧？字体的尺寸调大，那你就加一个，比如说方的 ces 设置为三十 px， 也就是三十像素，那这是在也执行， 那字体就变大了，哎，那这就是利用第二种内部样式表为标签添加样式， 那么比如说你现在是不是有个 h 一标签啊，那你现在又要为 h 一标签添加个样式，你只需要利用选择器，对吧？哎，咱们后面会学，然后一对大括号生冰块，这里边呢就写建制队 这个形式的样式即可，比如说来个 color 啊，颜色呢，我们来个不露蓝色，然后呢方的赛子呢，我们来个八十像素， 那此时一直行这个样式就添加成功了，搞定吧。哎，那么这呢就是 第二种方式，叫做内部样式表，然后以及一个语法格式，那么这种内部样式表相相较于刚才的这个行内样式表好在哪呢？此时大家注意对吧？如果说现在我所有的 p 标签啊，我不想用红色了，我想改个橙色，对吧？你只需要把 red 找到，他 变成 orange 对吧？这时一直行所有的就都变成色了，要是原来的行内的，你是不是得一个一个一个的去改啊？而现在你改一个即可， 是不是比行内样式表要好很多？但是啊，大家注意对吧？内部样式表呢，也有他的缺点，他的缺点在哪呢？就是这个内部 样式表啊，他仅对于当前的 html 文档有用，换到其他的文档当中啊，就用不了了。比， 比如说我现在呢啊，又有一个页面，随便起个名，然后在这个页面当中呢，我们也有几个标签，比如说 h 一叫我是标题，然后呢又有个 p 标签，我是一个 p 标签，那么此时假如说我这个 htm 问他也要用到刚才的那些样式的话， 那我们怎么办？我们是不是得把这个内部样式表又来个 ctrl c 到那头再来个 ctrl v 啊？哎，那，那又回到了原点，是不是特别移植性特别差呀？ 哎，那所以说呢，就有了第三种方式叫做外部样式表，那么咱们先把这个停一下。
109点播教育
07:53查看AI文稿AI文稿hello， 大家好，欢迎来到汤圆儿的家。今天呢，我们根据前几天学的这些标签，我们来做一个简单的页面，首先呢，我们创建一个 html 文件 index 点， 然后我们把它打开，写我们的基本代码， 加个 petal 汤圆的家 all day， 然后写个标，呃，标题吧。 h 二，这里是 单元的加，然后我们写个 style 样式， 首先我们把它的默认样式给它去掉， 好了，我们先看一下这个页面，它就是一个这样的，我们在 做页面的时候呢，首先要考虑一下我们做的页面是什么样的 页面分，呃，首先是一个大框对不对？他有一个大大的框，然后里边我们去写他的头部内容，这样去拆分。所以呢，我们首先得在外边写一个大框， 写个 div 吧，把它包起来， can i wish you class。 然后再一样是我们今天写，让他所有内容都剧终，所以写个 text 的话 center 这个这个剧终了，然后我们想让他剧，想让这 这个距离顶部这有个距离，我们怎么弄呢？我们可以写个攀顶，对不对？那边距， 然后上边我们写二十 p x 左右都是零，再看一下是不是就往下走了，这就有了。接下来呢，我们写一个段落吧，介绍， 嗯，这写了介绍了，我们就直接考过来 更新于，那写今天吧， 五月十三日十四点四十五分，太原汤圆的家。那接下来呢，我们来一个，呃，给他加点距离，用 b r， 然后我们再来个分隔线， hr size， 给它写一个二 color， 给它写一个 点 c c c c c， 再看一下不就出来了，但我们之间有点编剧还是好看一些， 这样对不对？好，我们下边带来段内容， 再写个 b r， 然后写一个，再写个皮标签吧，我们加上死状标签，出我们的重点，然后这是汤圆的家在短视频平台第一次分享自己的技术，希望大家多包涵，多谅解。 再来一行，再来个 p 标签。 汤圆的家分享的课程是从零基础 开始的，只要大家一直跟着学，将来肯定可以在平朋友面前秀一半。未来我们还会学习如何做一个动态的相册，可以将我们喜欢的照片放在网页上，有一个更好的效果显示出来。好了，我们再保存一下，看看效果， 是不是一个简单的介绍页面就出来了。他那又说了，后边怎么这么白，我们想给他换个背景色，可不可以？可以给这 box 加上呃宽度？ call vh 是高度， vh 是 一个自适应的高度，他会根据浏览器去匹配分布，他的高度就跟这个呃宽度是百分之百的意思是一样的，然后给加个背景色， 比如是 black， 黑色，稍微这就黑色了，那我们的字看不见了，这怎么办呢？打个 color， 写成字体是白色，这样是不是就出来了？那我们背景背景可以可不可以换成一个图片呢？我们也可以把这个屏蔽掉， 然后写个呃， grand image， 这玩意写个引号点斜杠，我们这有个 dj image ppt， 我给引入进来看下效果， 他是偏的，我们发现对不对？然后我们写背景图片呢？我们可以给加上 repeat， 是否循环，我们不让它重复，这是否重复？我们不让重复。然后再写个 size， 我们让它百分之百就是 f， 呃，根据负标签的宽度它去显示，去 刷新一下，是不是就剧终了？这样我们简单的一个自我介绍的一个页面就出来了， 是不是比我们写 word 文档要好看一些呢？好了，今天的课我们就到这了，欢迎大家继续关注点赞，谢谢大家，下期我们再见。
357汤圆的家
04:03查看AI文稿AI文稿h r 标签在 html 页面中创建，水平线可以用来分割文章内容，请看演示监控号 h r 斜杠，这就好了，一条水平线就创建好了。一般的标签都是成对出现的，但是也有个别的标签，我们是可以在开始标签中结束，也称为自闭和标签，我在前面讲过，这里就不多做解释。 点击保存，或者按换节键考试加 s 保存，选择我们刚写的 html 文件，右击选择浏览器，打开 这条水平线就是 hr 标签创建的，我们可以使用它来分割文章的内容，请看演示我们写首诗敬业 床前明月光，疑是地上霜。举头望明月，低头思故乡。我们再写一首春晓 春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。这两首诗中间我们用 h r 标签来分割， ctrl 加 s 保存， 我们按快捷 gf 五刷新浏览器现在看到的效果不是很好，我们修改下，让每一句诗都换个行。 br 就是坏行。标签考试加 s 保存，再按快捷 gf 刷新浏览器，这就是我们要的 分割效果。我们还可以修改 hr 标签的一些属性，比如我们绕水平线变粗，请看修改扇子属性等于五像素。考制加 s 保存 i 快捷 gf 五刷新浏览器。现在水平线已经变粗了，但是默认是带阴影的水平线，我们可以修改为不带阴影的，请看 no shit 等于双引号 no shit， 这就代表水平线没有阴影。考制加 s 保存 i 快捷 g f 五刷新浏览器。现在就变成没有鹰眼的了，还可以设置宽度，请看位置等于三百 px 设置宽度为三百。 孝素考试加 s 保存，按快捷 gf 五刷新浏览器现在宽度就变为三百孝素， 我们还可以按照百分比来设置宽度，请看将三百 px 改为 三十百分号。考试加 s 保存， i 快捷加 f 五刷新浏览器现在水平线的宽度是按照百分比来显示的，我拖动浏览器窗口大小，大家就看的更加明白了。 但是默认 sr 水平线标签是居中显示，我们可以修改为靠左或者靠右显示，请看 la 等于双引号当中写 left， 这就设置水平线靠左显示。 考试加 s 保存， i 快捷 g f 五刷新浏览器现在已靠左显示，也可以修改为靠右显示，请看修改 let 为 ride 就好了。考试加 s 保存， i 快捷 g f 五刷新浏览器现在靠右显示。 总结一下，这节我们讲了 x 二标签以及他属性的设置，虽然属性的设置现在不建议这样写， 我们在正式的开发中是使用样式表来控制，但是大家还是有必要了解和知道，这对你打好基础是非常有用的。下一节讲解 html 的注视。
175踏雪无痕编程教学
03:27查看AI文稿AI文稿在这一段文字里面，我们加一些换行以及空格，还有字表符来保存，看一下效果，你会发现，我们加了这么多空白字符，在浏览器里面渲染出来之后，就只有一个空格，这种效果叫空白折叠。 就是在原代码里面，连续的空白字符，包括换行空格，字表显示的时候会被折叠成一个空格。 当然不只是屁元素里面，任何元素里面都是一样，这是一个全局规则。但如果我们的页面里面就是需要用到连续的空格呢？这就涉及到了一个新的知识点，叫 tm ntt h t 猫试题，通常用于在页面上显示特殊符号，比如空格，我们的标签符号大于小于等等。在 h t 猫试题的写法是这样， end 符号开头，然后跟上一个单词，最后分号结尾，空格就是这样表示的。 end of 开头，然后跟上 n b s p 最后分号。这个 n b s p 全称叫 breaking space， 表示不断开的空格，你记不住的话可以这样记。 nb space 牛逼的空格，你看 type 也可以识别它，它也显示成了空白。如果你想显示代码的话，可以给它加一个反应号，在那个档里面，反应号表示标记它是一段代码。 ok， 来试一下它在天猫里面的效果，把这一段换成 nbsp。 可以多来两个 保存，这里就从原来折叠的一个空格变成了三个空格。不过虽然可以做到这种效果，但你有没有发现，这种写法显得不是那么的优雅。我们在实际工作中其实是不建议这么使用的。 如果你要用空白分割开两部分文字的话，可以用 c s 来做，你写一大段这个玩意儿虽然也可以达到效果，但不是蛮好看，显得比较 low， ok。 除了 n b s p 之外，我们再来看一个版权符号 and copy 来看一下，就是这个符号，一个圆圈里面一个 c， 相信你在很多网站上 也看到过这个符号大于小于，在题目里面是用来写标签的。如果我就想在页面上显示一个 a 元素及时标签，就可以这样写， l t 表示小于内实战的缩写， g t 表示大于归特战的缩写。来看一下，这样我们就在页面上显示了一个 a 元素的及时标签。由于 ant 符号本身是用来描述 t， m， s t 的，如果你想在网页上显示 and l t 分号，就可以这样 把这个 and 符号换成 and m p 分号，它就表示一个 and 符号，来看一下没问题吧。当然这种 e t 猫试题还有很多讲是讲不完的，你需要用的时候可以去查官方文档。 e t 猫我们说了是 w 三 c 定义的语言标准，那我们要查 e t 猫试题，最好就是 g w 三 c 的官网，对于这些专业性的知识，你最好就不要去查百度了， 一定要查官方文档。我们来打开 w 三 c 官网看一下，网址是这个三 w 点 w 三 c 点幺耳机展开这个标准， w 三 c 标准和草案在这里说一定没有 往下翻，就是这个，然后点击 tm 语法往下走，在最后 name the character references 命名制服参考，这里面有非常多的实体制服，比如我们搜一下 m b， s p 有吧，再搜一个 copy， 都是有的，什么样的符号都有，你需要用的时候来查就可以了，当然如果你英语不好的话，这个网站可能对你有点压力。我再给你推荐一个网站叫 m d n， 直接搜 m d n 就可以了， 就是它 developer 点播这拉点耳机，这里面有很多互联网标准的相关文档，而且支持各种语言，我们在这里查的话会比较友好。比如我们搜 n t t， 这里就可以看到 n t t 相关的描述，以按的开头，以分号结尾，当然这里可以切换语言 in 符号小于大于，还有一个双引号。最后这里给了一个支付实体官方列表，这其实就是 w 三 c 里面我们刚刚看到的文档，点进来看一下这个页面熟悉吧。 ok， 对于这些专业性的知识，要么你就查官方文档，要么就查 m d n， 就不要再用百度查了。
500小飞有点东西
08:17查看AI文稿AI文稿ok， 大家好，我们接下来呢继续学习 html 标签，我们接下来要学习的呢是来学习图片标签。 ok， 图片标签的话，我们需要在我们的网页当中插入一张图片，我们使用的是一妹纸，我们使用的是一妹纸标签，那么我们使用一妹纸标签呢？他无法把我们的图片显示出来，因为我们并没有指定我们图片的一个地址， 对，没有指定我们图片地址，那么指定图片地址我们需要使用到它自带的这个 src， 那么 src 表示的是什么呀？哎呦， src 表示的是指定图片地址，那么这个地址呢？你可以使用网络地址，你也可以使用我们的北地地址。哎，两种方式都可以， 那么网络地址呢？你必须得是携带 https 或者 http 的，哎，必须得有这个 http 请求的网络地址才可以。你比如我们 去百度地图啊，百度图片来个 风景图片吧， 我们随便，我们打一 一个，哎，眨一个，我们复制一下图片的地址，复制一下图片地址，然后呢在 src 这个地方放过来，哎，他这个地址比较长， 那么我们看一下，我们是不是已经把这个图片拿过来了，注意啊，这个地址我们是用的网络地址，那如果说我们断网的情况下，我们就没有办法了，断网情况下，我们没有办法去请求网络地址，所以呢我们图片呢就显示不出来。 那另一种方式呢？我们可以用北地地址，也就是我需要把这个图片另存为，我要保存下来呀，这个保存不了， 这个是个 webp 的格式的，我们得下一个那种 gpg 或者拼音机格式的怎么下载呢？稍等一下，我这里来个 hr。 ok， 我们去找一个能够下下来的 都是这种格式的，对吧？嗯， 来个王者荣耀，去他这个官方里面 这个轮廓图， 哎，像这种格式这些一级也也行，这种格式也可以，我们改个名字， 一注意啊，我这个地址保存到是哪里啊？是不是我这个麦 st m 的文件夹，也就我们代码所在的这个文件夹看到没有是吧？ ok， 那么我就可以怎么去下载啊？ 通过这个引面者标签 ssa， 我在这里直接使用这个一点 gpc， 哎，就可以， 我们来看一下是不是这种方式也是可以的。 ok， 我们这个注意啊，我们这个北地地址我们使用的是北地的相对地址， 相对地址也就是相对我们当前为鉴， 相对当前 html 文件所在的目录下的资源可以直接使用。你说我这个 一点 gpg 是不是和我这个图片标签 htm 的文件在同一节目录下，哎，在同一节目录下我都可以直接使用的， 而且前面呢，像这种点斜杠啊，点斜杠他也表示的是当前违建夹，如果说你想要拿到上一级违建夹的话，你就再加个点啊，再加个点，这个我们慢慢的后面再接触多了我们再说啊， 他除了一个北地的相对地址之外呢，他还有一个北地的绝对地址，但是现在目前来说 浏览器呢，为了安全起见，不想让这个网页直接去访问我们北地硬牌资源，他就不太支持北地的一个绝对地址了。你像我们这个绝对地址是在哪里放着呀？是在 三排，因为我们在桌面上存放的，我们是在三排用户用户，然后有个桌面，然后 m html， 绝对路径呢，就是我们这个有盘服的，就是我们的绝对路径，但是绝对路径呢，现在艾特天卖了，好像是不太能使用了，我没有试过哎，因为我们一般开发呢，建议使用的都是相对路径，我们代码为鉴，在哪里资源就跟着一起去哪里啊。 或者我们可以自己使用网络图片，如果你觉得网络图片不靠谱的话，那么你就用北地的下载，下载到北地来使用， ok， 另外我们也就是说我们这个图片如果写着不出来的话，怎么办呢？ 我们这里呢还有一些其他的属性，你比如说我们这个图片图片也有个耳蓝根，就看到没有，也有个耳蓝根，但是呢，他用的不太多，除非呢，我们需要把我们的银面纸变成一个块表签，哎，因为我们现在银面纸属于一个特殊的行内块，哎， 快标签行标签，我们后面再给你们说啊，如果说我这个图片一旦报错了，或者说我找这个幺幺 没有这个资源，他就出来这么一个缩略图，表示图片损坏，那损坏了我们不知道他这是什么图片，所以呢，我们这里可以给他加一个 a l t， 表示的是当图片在损坏的情况下，提示用户这里原来存放的是一个什么， 比如说这里是一个王者荣耀， 王者荣耀， ok， 我们可以看到啊，当我们找十一点 gpg 的时候，找不到这个资源，那么我们就会出现一个替代的文本显示在这个地方， 如果我们图片正常显示的话，那么这个文本呢，是不会显示出来的。另外呢我们这里呢还可以再加一个探头，哎，标题，哎，这是一张比赛图片， 探讨的意思呢，就是当你鼠标放上去的时候呢，他会有一个提示，看到没有就用我们鼠标悬浮静止的 时候，他会告诉我们这张图片是一张什么图片，是用来解释的，哎，如果你不加的话，他也是没有的，基本上我们这个图片标签我们使用一个 src 就够了，当然他这里还可以再加一些其他的属性，你比如说这个宽高啊，也可以加， 你给他变小一点啊，变，变到小一点， 哎，对不对？你可以控制他的一个宽高，哎，这东西也就我们自己用的很少啊，像这些 宽高呢，我们基本上不会在标签里面去使用的，我们都是通过这个 cs 来调用的。 ok， 那么这个是我们的一个图片标签。
153冬儿要冲吖
03:39查看AI文稿AI文稿大家好，今天我们学习胎宝表情，我们写代码， 胎宝标签呢是双标签，快元数胎宝标签里边呢包含 tr 标签 一对 t r 标签呢表示一行， t r 标签里呢包含 td 标签 一位， td 标签呢表示一 ti 标签里呢还可以包含 th 标签， th 标签表示表头。浏览器把 th 标签里的内容查出居中显示， 我们往标签里添加文本内容。现在这个 abo 标签结构呢表示一行两列，然后我们给他再复制一行， 我们保存一下。如果这个图标使浏览器型 是的，大家直接打开就可以。如果是文本文档的，我们要选择一款浏览器给它打开。 没有边框，我们呢给他添加边框属性在 tab 标签这个位置呢，给他添加 brother。 一，后面的单位呢是像素 px， 我们保存回来，浏览器里刷新。 如果我们想让这个文本跟这个单元格之间的留白大一点，我们 添加属性 笑格子拍顶填充，合起来就是单元格填充，我们保存回来，浏览器里刷新。 如果我们想让这两个单元格之间的间隔大一点的话呢，我们再添加一个属性 不沉 会来浏览器里刷新。如果我们把 sales by 省这里 设为零的话呢，就变成了普通的表格形式，我们放心。
19胖大海呵呵![[网站开发入门指南43] 标签元素的类型差异 块级元素 行内元素 ｜ html css 零基础入门教程
#html #css #javascript #前端开发 #网站开发](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/9c840c66cb0261ede54598dc5030a1d9~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2101928400&x-signature=UDIjUAWsHIXyLbGrHL4HXy%2B0XCk%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=202608130500490CCBEACE91FDD1272713)
08:48查看AI文稿AI文稿不知道大家有没有在自己学习的过程中呢，碰到这样的一个问题。那比如说我在这里有一个 div 这样一个元素，然后呢我这里随便写个文字，然后我在样式表里面啊，我给他设定一个呃背景颜色， 然后你会发现他这个元素啊，他哪怕只有这么一点点文字，我们把它放大一点，他也是会占满一行的这样的一个宽度的啊，占满一行的这样一个宽度，但是呢，假如我这里是一个 span， 同样我给他随便写点文字，然后呢我给他定义一点点 样式，比如说就是也是定一个颜色，背景颜色，然后你会发现他就跟这个 div 不一样，他就很老实的就该自己有多宽的一个内容，他就占用多长的多宽的 这样的一个距离。那他们这两个元素表现出来的这两种不同的一个状态呢，其实是两类不同的元素类型的一种表现。那像 div 这样的，他会独占一行的这样的一个元素，叫做会计元素， 会计元素英文叫做 block， 然后呢像这种很老实的，他就自己内容文字有多宽，他就自动占用多宽的 一个距离的降点元素，叫做行内元素，叫做 in line， 那很多元素呢，其实都是属于这两类的元素，你比如说像会计元素的话，基本上所有做结构的元素都是会计元素，然后像行内元素的话呢，像 span， 他像很多一些修饰用的这些标签、文字标签，他们都是这种行内元素，还有这个 a 标签也是行内元素，然后呢像我们，呃，像这个 p 元素，还有 h 一 h 二这些的话呢，其实都是会计元素，我们可以把它简单罗列一下， 那这个会计元素和行内元素的话呢，他们其实有一些特征是比较明显的区别，我们来看一下，首先呢是这个会计元素啊，他会自动的撑满负极的这样一个宽度，那我们知道 这个包底里面的元素，他的他的外层是包底这个元素，然后他包底在上层呢是 html 这个元素，所以呢其实他的腹肌，就比如说这个 div 的腹肌是这个包底，那 html 呢，他默认的他的宽度呢，就是这个整个页面的宽度，然后包底呢又是跟随这个 html 的，所以这个 div 这个会计元素，他到负极的宽度的话呢，他就是占满这个页面的宽度了。然后他其实这个左边右边他其实有这个空隙啊，那我们学到后面就就知道为什么他这里会有一个左边右边的这个空隙了。那我们这里呢，就先不管他，我们就把他当成是完全占满复元素的一个宽度。 然后呢他这个独占一行啊，不是一般的独占一行，哪怕他这个宽度不占满，他也是会独占一行的。比如说我们这里哪怕给他设置一个具体的一个值， 你看它它这里它是不会不会让这个东西接过去的，不会让这个 span 往后面接的。那假如说我们这里前面是一个 span， 他们其实是会在一行的，只有说这个内容太多了，然后一行放不下了，他才会换行。 但是呢 div 就不是这样，这种会计元素呢，他是不管他的宽度有没有真的占满一行，他都是独自占一行，他是非常霸道的，所以这是会计元素的一个非常重要的一个特点啊，叫做独占一行， 独占一行，然后如果他另外一个他也是，下面你看再来一个 div， 他也是独占一行的啊，他不会 接到这个 diy 后面的那行内元素呢？对应的他就是他是不赌战银行啊，不赌战银行。然后有些同学可能会觉得，哎，为什么这个元素啊 没有设置这个高度，这 div， 那是因为它会自动的被这个它内部的这个文字撑开这个高度了，所以我们不用设，它也有它的自己的一个高度在那里。第二个比较明显的特点呢，就是会计元素，它是可以设置宽高的，设置宽高有用。 然后这个行内元素呢，是设置宽高是没效果，只会被内容撑开，只会被被内部呃元素或文字文字撑开， 是这样的，比如说我们给这个 span 元素啊，我们去给他设计宽高，比如说宽，然后 go 两百，你会发现没有任何的作用啊，但是呢，如果我们给这个 div 设置宽高的话呢，它就是会有作用的， 对吧？所以这也是他们一个非常明显的这个差别。然后呢，还有一个就是像这个会计元素，他内部是可以放任意的这样的一个类型的元素的， 还有其他类型啊，那其实还有其他类型的元素的，反正他就是什么都可以放。然后呢，像这个 行内元素的话，只能放文字或者行内元素，或者其他比如说像行内会计这种结合的，但是他一定要有行内的这个特性的，这个元素 我们就叫其他行内相关元素吧，或者我们直接叫他其他行内类型。 我们其实还有一种类型比较常见，比较常用的就是行内会计元素，它是行内元素跟会计元素的结合的这样一种特性的元素。那像我们常见的这个图片元素 i m g 视频元素 video， 然后这个 input 标签这种，它其实都是行内会计元素。 像这个行内会计元素的话呢，其实你只要了解了这个行内元素和会计元素，然后呢他们就是把各自的特性稍微结合一下，其实就非常好理解。我们这里简单写一下吧，其实他们就是 有点综合的感觉啊，行内会计 in my block， 然后它的一个特点呢，就是 不换行啊，不不独占一行，但是呢他设置宽高是有效果的。然后他内部呢是跟这个会计元素一样，就是你什么东西都是可以放的， 所以像这个东西的话呢，其实我们不用特意去记得啊，像这三种元素类型，那这三种元素的类型呢，其实也不是全部，只是说这三种，尤其是这会计元素和行内元素是我们非常常用的，非常容易碰到的这样的一个概念。那像这些东西的话呢，其实我们最重要的是理解 他的一个概念，因为我们后面的有些知识啊，会需要用到这两个概念，所以我们现在呢最主要的就是理解原来元素之间他有不同的这样的一个类型，然后他们呢有这样的一些特性的一些差异， 然后呢其实有时候呢有也有一些特例的。像这个行内元素，我这里先跟大家说一下，就是也不一定 说完全不能放这个会计元素，那比如说像 a 标签的话， a 标签的话，有时候你想某个这种，比如说某个会计元素，你想让他去呃，能够产生这种点击跳转的效果的话，你也可以把这个会计元素放到这个 a 标签里面， 这样进行包裹，这样进行使用的。所以 a 标签呢，他算是一个特例，就是有时候你想把会计元素放进去，用 a 标签来包裹一下也是可以的。一般情况下我们不会把会计元素放到这个行内元素里面啊， 所以为什么说这个会计元素主要就是来用来做结构的嘛？因为他什么东西都可以放，他作作为一个组是最合适的。 然后呢，我们后面呢可能会学到这个相关的一些布局方式，比如说 flex 布局、 great 的布局，那用这些布局方式的话呢？其实这个元素它是什么类型？到底是会计元素也好，行内元素也好，还是行内会计元素 都无所谓的啊？他们在那样的两种布局的情况下，这些这些特性是没有任何作用的，他只是在一种最普通的一种布局方式里面， 这种元素的特性他才会展示出来。所以我为什么说大家只要把这个概念，把这两个概念这几个概念了解一下就好了，等我们学到一些深入的内容之后呢，你会发现基本上你在开发当中，你是很少会去关注这个元素到底是会计元素还是行内元素呢？
72好奇代码的三木
06:33查看AI文稿AI文稿大家好，这是 javascript 的第三个视频，这一讲主要讲解的是浏览器的控制台，也叫 ctrl， ctrl 这个单词就是控制台的意思，也就是说所有的浏览器都有控制台，但是对于如果不是设计者的时候，那么我们关注的是什么？这个网页整个展示的效果，如果你是一个设计者，那么你一定要关注浏览器的控制台， 特别是在开发的过程中，如果有错误，有等等内容，那么控制台的作用就是你在加载浏览器，在加载信息的时候都会体现在控制台， 爆拓也会在控制台。那么首先第一件事情我们要按我们的顺序呢，是要打开控制台，打开控制台非常简单，当我们打开网 以后，在网页的任意位置，单击右键底部有一个检查，检查啊，直接点击以后弹出的这块内容，下边这部分内容就是控制台，他主要就是为设计者考虑的，也就我们设计者要来调试这块内容，考虑到很多同学呢，就说 没有做过项目，实战控制还不熟悉，我作为零基础两家两个视频来讲解，这个视频主要讲解的是 css 和 htm 来调试， 那么它的前边有两块内容，第一个是箭头，第二块内容各位同学看好啊，第三块是元素，我把这内容呢放大一点， 那么这个箭头啊，就说可以指向，当我们选中以后，它的颜色呢变为是绿，呃，蓝色，我们直接可以移到任意一个标签上面。各位同学看好，现在有三个部分啊，哪三个部分是联动的？ 各位同学看好。当我点击到任意一个标签或者是标题的时候，我们的底部啊，是跟着对应的改变了， 当我们在点击我们对应标签的时候，它的右侧就是 c s s， 就沉淀样式表，也就是三个联动。第一，我们拿这个箭头指向标签，它对应底部就会出来对应代码，这个代码呢，在右侧就出来 c s s 啊。来各位同学老师现在操作一下， 比如我现在要想改变这个文字的颜色啊，是哪一个颜色呢？我们首先来改标题的颜色，我们第一件事情是点击这块内容，各位同学，使它变成蓝色，再点击标题，那对应这块内容，我们就知道是标题了 啊。各位朋友，如果你没有采用这个箭头去指向的话，也就是上面第一个箭头，那么呢，你是不知道他是 h e 的，那么知道 h e 的时候啊，我们现在就可以找到 h e 这块内容了。各位同学，是 h e， 如果找到 h e， 那么这块内容我们到代码当中来，各位同学可以看到 h e， 那我们这边呢，可以给他添加一个什么标题 h e， 然后来个大括号，来个 call， 等于 read。 那各位同学来，我现在把它改为 grip 绿色。各位同学，我们刷新一下啊， 老师写错了，因为是上面是 h 一，下面我写成 h 三了，现在改为一啊，改为对应的一，保存， 我们到浏览器控制台看一看，那么他对应就什么是一种绿色了。如果我们比如现在没有想改变段落的颜色，我直接再次点击这块内容，再次点击其中的段落，那么他 右侧就会出现段落的颜色。目前的背景色啊，各位同学一定要注意了，先点击上面这块内容，再来点击对应的标签，他的右侧就会出来。那么现在呢？我们现在要改变他的背景色，各位同学看好，我在移动的时候他背景色是改变的，那比如现在这块颜色我看中了，我想把这块颜色，我把它改为一种粉红色啊， 哎，不可以，粉红色太亮了啊，改为黄色，那我现在可以把这颜色的值然后复制过来。要换到什么位置呢？ 各位同学，我们再点一下 p 标签，它对应的位置啊，看的非常清晰，也就是主页的第二十五行，各位同学看好主页的第二十五行， 那么到主页的第二十五行是这块内容，那么现在要直接第二十五行啊，直接保存，他有可能上下会悬出下， 相差那么一两哈，你看现在的背景颜色被改变了吧， ok 啊，那么我们再讲第二块内容，也就是说第二个按钮是一个电脑端和手机端对应的图标啊，各位同学就说我们点击时候他可以切换成电脑的屏幕， 呃，手机端的屏幕和电脑端的屏幕切换来，各位同学，你现在看到的是手机端的屏幕啊，我们让他显示百分百，那各位同学，你看是不是手机端的再一次的点击就可以切换成电脑端。 那么现在讲了这两块内容，我们来讲最后一块内容，就是这个控制台啊，他是可以调整的，比如说我们现在把它关闭，再次打开控制台，他默认他不一定在底部，在他的 右侧这个地方有个有一个什么，各位同学看好了，有一块这块内容三个点啊，是竖起来的点，那么你点击的时候啊，他会有一块塑料桶， 各位同学看好，也就说我们的控制台可以停放到四个不同对应的位置，根据你电脑的版面或者屏幕的需要，那么比如说我现在把它放到右边，那么我们现在的控制台就放在哪边呢？是右边这块内容， 各位同学看好啊，右右边这块内容，那么我也可以点击一下，把它放回电脑的界面，对吧？手机端，电脑端，手机端，各位同学看好。 那么这块内容我们点击展开，比如我们现在点击是电脑端，当我们再拿出第一个内容来选择的时候，选择对应标签，那么我们这块内容啊，也就是可以看到一个对应的标签，同时我们在它的底部还有一个 css 样式， 也可以再一次的改变它其中的样式，各位同学看一看，那么这个视频啊，主要讲解到这里边就是控制台的，控制台的打开啊， 摆放和控制台的，通过上面前面的两个操作，一个是选择对应的标签，然后放在上面可以看到对应的标签，通过对应的标签，我们再找到对应的代码来修改对应的样式表 三块内容，各位同学想看一下，首先控制他要来点击啊，通过这个地方来选择对应的标签，然后点击对应的标签代码，然后直接样式，然后通过修改这块内容，都是通过一个图形化的操作来选择到代码， 那么这讲讲到这里，那么下一讲我们还要讲控制台，又是网页中，网页脚本中的控制台的使用，感谢大家的关注、支持和点赞，谢谢这一讲讲到这里。
104码哥聊
02:42查看AI文稿AI文稿而后面搭挂这部分就是生命块，生命块里面就是一条条生命，或者说一条条属性，这是属性迷，然后冒号指定属性值，最后分号结尾，每一条属性都要以分号结尾，一条属性就表达了一方面的样式规则。这个懂了之后，我们再来看 cs 的书写位置， 之前我们写的这种在 style 元素里面写的 c、 s、 s， 这种叫内部样式表，写在 style 元素里面，一般我们都会把 style 元素写在黑的元素里面，因为我们希望浏览器加载页面的时候，先把 cs 加载出来，这样的话后面加载页面内容的时候，直接加载的就是 cs， 是美化之后的效果，当然它也可以放到 body 里面， 比如我们放到波点的最后浏览器加载的时候，他是从上往下加载的，这时候他就会新加载这些 atm 代码，这些代码现在是没有样式的，样式在下面还没有加载，这时候的页面就会比较丑。等到后面这段 cs 加载出来之后，样式就会被加到页面里面，在这个过程中你可能会看到一个明显的闪烁，刚开始很 丑，突然闪了一下就变没了，只不过我们这个页面内容比较少，就是在本地加载，可能就看不到这个效果。而当我们把样式代码写在黑的里面之后，样式代码就会先被加载，然后才加载页面结构，这样用户直接看到的就是美化照后的页面。 ok， 这是第一种样式书写的方式，叫内部样式表，写在三个元素里面的， 然后第二种叫泪点钥匙表，来看一下怎么写，这些钥匙我就全部删了， class 属性也不要了， 比如我们要给这个添加样式，那就可以给他写一个 style 属性，我们在元素里面写样式，就不需要再写选择器了，直接写生命就可以了。比如我们来个 color blue 分号，再来一个 takes a land center， 这样也是有效果的，这就是类型样式表，可以直接写在元素的 style 属性里面。 然后还有第三种叫外部用手表，这个是写在独立的 cs 文件里面，来看一下怎么写。通常我们会在项目里面单独建一个文件夹， 叫 c s s， 然后在这里面我们可以增加很多的 c s s 文件。比如我们先新建一个 index s s s， 在这里面直接写 c s s 规则就可以了。比如我们写一个类选择器，点 blue 杠三头 color blue text land center， 然后可以保存，然后我们来页面上使用它。这个内内样式就不要了，我们直接来使用刚刚写的内样式，这 blue concenter 对吧？很明显这样写的话是没有效果的，保存来看一下，肯定没有效果， 因为我们打开的是 atm 这个文件，他根本就找不到这个类样式， c s 代码在另外一个文件里面，所以现在我们就需要告诉浏览器 c s 文件在哪里找。同样在黑的元素里面，我们写一个立刻元素， 它有一个二幺属性，表示连接的类型，这里是 style 写的，表示样式表，然后它有一个 ref 属性，和 a 运输的 ref 属性一样，表示链接地址。如果 cs 文件是别人网上上的，你可以写绝对路径，这里我们就使用相对路径，你点斜杠开头， cs 是文件夹里面 index 变 css， 这样就可以了，浏览器读取载行代码的时候 就会去加载这个 cs 文件，当然这个宁可元素不一定非要写在黑的里面，也可以写在包点里面。至于为什么写这里，还是和之前的 style 元素一样，我们希望他先加载出来，现在我们再来保存看一下效果就有了。
127小飞有点东西
03:20查看AI文稿AI文稿好了，接着呢，我们再看我们的第二种路径，叫做绝对路径，那绝对路径啊，是指我们这个文件的绝对位置，通常啊，是从我们的盘辅开始的，那简单来说啊，就是这个图像文件啊，在你电脑中的哪一个位置，那我们来看一看。 哎，那这是不是一个 img 点 tpg 啊，这个图片在我电脑中的哪个位置呢？你可以把国标定到我们上面这个框框， ok， 你看他是在我们 c 盘 uzer 前端基础第一天案例里面的这张图片，那这个路径呢，我们就称之为绝对路径，他是在我们电脑中的哪一个地方。好了， 那么我们可以这么做啊，还是我们的 img src 等于我把这个拿过来，那么选择里面的，哎，叫做啊 img 点 gpg， ok， 然后呢，给它扩起来， 可以利用这种方法呢，来显示我们这张图片，看看能不能拿到啊，右键选择里面的，打开。好，你看这个图片是不是也给我们拿到了？但是呀，这种绝对路径的形式啊，是看你这图片在我电脑中的哪个位置，那你想想，每个人的电脑一样吗？ 你的电脑中有 apple 这个文件夹吗？有 u 字这个文件夹吗？哎，是不是不一定啊，如果你电脑上没有这个文件夹，那这时候呢，你就看不到这张图片了，所以啊，我这个案例只有在我电脑上才可以，如果你们把这个文件拿过去，你一打开，你会找不到图片的，因为每个人的电脑是不一样的， 所以这种形式我们平时很少去使用，在这，同学们作为一个了解就行了。那还有一个特殊情况需要你注意一下，你看啊，我们绝对路径这个反斜杠是朝这翻的，看到了吗？哎，那我们相对路径刚才我们看到的是不是 朝这边来反的？所以绝对路径和相对路径他两个符号是不一样的，这个呢，你一定要小心，但是呢，还有一种绝对路径呢，我们后面可能会使用，那么也就说我们这个图片呢，是在网络中存在一个绝对地址，那就比如说，你看这是我们的传至官网，传至官网，这是不是有一个小图片呀？ 我可以这样，右键里面有一个图片地址，我可以复制一下。好，那么这个图片地址呢是在网络中唯一存在的，那么我想我的页面中想把它引入进来，你可以这么做，建国号 i m g s i c 等于 i， 把你复制地址卡下 v 展贴过来就行了。然后呢括起来， 那这一个地址呢就是一个网络上的绝对地址，嗨，或者说叫做绝对路径，那么我们保存一下，看看能不能给他引进来啊？走着，你看这个图片是不是也能拿进来呀？因为这个 地址是绝对的，哎，这个路径呢也是唯一的，那么只要你这个电脑能上网就能拿到这张图片，哎，当然了，如果这个网站把图片删掉了，你这呢也拿不到了啊， 那这个呢也是一个绝对路径哎，是唯一存在的。好了，那在这里呢，我跟你讲了第二种路径叫做绝对路径。那第一种情况呢，我们可以查找我电脑中的某个文件所在的位置，我可以通过自拍的方式来查找，但是这种呢，同学们作为了解就行了，我们十一开发中不常用 第二种呢，在我们的网络中也存在一个绝对路径啊，他这个地址呢是固定的，不会变的，如果你一改变就找不到这个图片了，那你可以把这个地址呢，可以复制下来，可以来找到我们这个图片， 这是我们两个绝对路径的方式，但是呢，整体来看我们使用的较少，同学只是作为一个了解就行了，同学们重点记住我们的相对路径。
07:20查看AI文稿AI文稿好了，接下来呢，我们讲解一下 at 码的基本结构标签，因为啊，在每一个 at 码网页中都会有一个基本的结构标签，哎，这个标签我们也称之为骨架标签， 那页面里面的一些内容呢，基本都是在这些标签的基础上代替性书写的。那还有一个名词啊，需要我们注意， h 码页面呢，我们也称之为 h 码文档啊，它是不同的叫法而已，那就比如说这是一个 h 码的页面呀，那我们也可以叫做 h 码的文档，哎，这不同的叫法而已，同学们记住就行了。 那我们接下来看一下他的基本结构标签有哪一些。那首先啊，我整个页面里面最大的这个标签叫做 htmr 标签，他呢是把所有的标签都包含在这中间的，所以啊， htmr 呢，是我们页面中最大的一个标签了，我们称之为根标签。 那第二个呢，是我们的嗨的标签，这个嗨的呢是我们这一个页面的头部标签，那你打开一个页面啊，那我们整个页面就是一个 h 码页面了，那么 hig 呢？是这块区域，同学们跟我来看一下，哎，是不是就是我这个页面这个头部分了，哎，这是 hig 的管家范围。 那么在这个害的里面呢，还有一个标签叫做探讨，这个呢叫做网页标题，或者叫做文档标题，这是探讨的，那么他呢，主要显示的这个地方，哎，看到了吗？船只博客官网，好口碑 呀，页面上想要显示这几个文字呀，他是通过我们这个开头标签来进行显示的。好了，这是我们的第三个标签喽，还有第四个标签就是我们的保底标签了，这个保底呢是我们文档的主体部分，他呢包含了我们的主要内容，而我们页面里面写的所有的内容啊，基本也是放到 包的标签里面的。那你来看一下这个页面来说，这一大块就属于我们的包的标签了，哎，这大块都是啊，也说我们想要页面显示内容呢，基本都是放到我们这个包的标签里面的。好了，那么解释完之后呢，我带着同学们来写一下，同时呢也可以写一下我们人生的第一个 htm 啊页面， 那我们说了，我们的网页是不是就是一个 h 码文件呀？所以我们再次到我们的案例里面去，哎，再次新建一个记事本，我们起个名字叫做零二杠，第一个页面。好嘞，然后呢，我们打开这一个文件，在里面书写我们刚才的加 基本股价标签。好了，我们看一下啊，第一个最大的还记得吗？是吧？ html 呀，一定要注意，我们所有的标签必须包含在监管号之内，而且我们讲的这个基本股价标签呀，也 也属于双标签，所以一定不要把杠 h 码给他落下了，这是我们最大的根标签，叫 h 码。哦，好了，在 h 码里面呢会有一个头部标签，那叫做 haid， ok， 那么他也是双标签，还有一个杠 had， 那这一个呢就是我们文档的头部分了， 在害的标签里面呢，还有一个小的标签叫做 t i t l e title， gun title， 那这个呢是我们这个页面的标题标签，那在这里面你可以写着，哎，第一个页面，好的， 那这样呢，我们把这三个标签写完，注意他们三个呢是有层级关系的，或者包含关系，你看最大的 h 码啊，那么包含了害的，害的呢，又包含了开头，那你如果按照呃排辈的方法来说的话，那就让 h 码是爷爷，害的是爸爸，开头是儿子。 就可以这么来说呀，没问题的啊，注意他们是前套关系。除了这个之外呢，还有最后一个标签，注意啊，是在我们孩子的下面，他和孩子是并列关系的，叫做 body， 这个呢是我们页面的主体标签哎， 杠包的，咱们页面里面主要内容基本也是写在包的表现之中的，那我想往页面里面显示几个文字，你可以这么写啊，键盘敲烂， 工资过万， ok， 那这样呢，我们写了这么一句话，当我们写完币之后呢，哎，此时我们这个文件就建好了。那我再说一遍，我们的网页是 是 htm 二文件，现在呢，它是叫做 tst 的，并不是我们要的网页文件。所以啊，我们呢可以右键啊，你可以右键里面有个重名名，或者是你可以两次慢慢的点一下，这时候呢，只需要把后面的 ts t 改成 html 就可以了，是否要更改吗？那当然要试喽，点开，那现在就是一个网页文件了。好，那么我现在就可以通过我们的浏览器打开双击走着。哎，看到了吗？哎， 我的人生第一个页面就写完了，键盘跳烂，工资过万，这是很正常的事。好了，那么我们能够看到啊，你右键，我在查看网页原代码，你会发现我们这个探讨标签呀，它里面的文字是显示到了我整个网页的最上面，哎，是不是这块内容属于他的管线范围啊， 而我们这个包的呢，他写的内容呢，是在我们这个主要内容来显示出来的，所以啊，你要记住哦，每一个标签他到底在哪去显示？好啦，那这一个呢，就是我们 htm 的基本结构标签，或者叫做股价标签，需要同学们反复的拨打背下， 而且你会发现每一个网页都会有这几个标签的，你看我们传承官网，你可以右键再打开看一看，有没有 atm 呢， 有没有害的呢？有没有太疼呢？是有的，肯定毫无疑问是存在这几个骨架标签的癌症的一句话，需要同学们把它默写下来啊。 那通过我刚才的操作，我们是不是再次验证了，我们的网页就是一个 atm 文件，或者叫做 html 文档，他的后缀名呢，必须是 atml 或者是 atm。 哎，所以啊，我们创建了一个 htm 文件，这就是一个网页文件了， 不过呀，在这个网页文件里面，我们写的是 stm 二这个语言，我写了我们的基本骨架标签，把标签写进去了，那写完毕之后呢，我们是通过浏览器打开的这个 h 码文件，就能看到刚才我们写的这个 网页了。好了，那需要我们注意的地方啊，他的结构呢，同学们一定要多摸些两次，谁包含谁啊，谁和谁是兄弟关系，谁和谁是千种关系，把它写的很熟才可以 在这里。哎，我让同学们更好的记住这几个标签的结构呀，我们请小猪佩奇来为我们代言。好， 你来看啊，我们最大的标签是不是 atm 标签呀，就相当于整个小猪佩奇，然后呢，再来一个嗨的标签，嗨的呢就是我们的小猪佩奇的头部了啊，就相当于他的猪头啊，当然你叫吹风机也可以啊， 那在害的标签里面呢，还有一个小的标签叫太太，他呀相当于眼睛，那我们知道眼睛是不是肯定在头里面的呀，所以是包含关系的啊，那再来一个呀，跟头是病情关系的，是不是身体呀，那就是我们的保底标签，那一定注意，保底呢，跟害的他俩是并 关系。那通过我们的小猪佩奇呀，这个结构，你能更理解这几个标签到底是什么的关系，还是那句话，同学们一定要把他们默写下来， 好，简单总结一下刚才我讲的内容。我们呢在我们的案例里面新建了一个计时本，在计时本里面写上我们刚才的 html 骨架标签， 那么我们把我们这个文件呢后缀名改成了 hmr， 就形成了我们人生的第一个 htm 页面，然后我们通过浏览器打开就可以看到我们刚才写的这个页面了，同时也给我们树立了一个口号，键盘敲烂，工资过万，开始准备我们的前端开发的人生路程吧。
