footer标签菜鸟教程

大家好，今天我们介绍两个标签，喜欢请点赞收藏。第一个要介绍的是导航标签， 标签表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见势力是菜单目录和。所以要注意的是，并不是所有的链接都必须使用导航标签，他只用来将一些热门的链接放入导航栏。 例如福特标签就常用来在页面底部包含一个不常用到没必要加入那样的链接列表。一个网页也可能含有多个那标签， 例如一个是网站内的导航列表，另一个是本页面内的导航列表。站内导航就是可以跳转到站内的其他页面，页面内的导航就是可以跳转到页面内指定位置。下面我们一向视力代码以及运行效果。 接下来我看一下第二个标签，标签含义是如果页面上的脚本类型不受支持，或者当前在浏览器中关闭了脚本，则在 html 元素中并以脚本未被执行时的替代内容。 最后我们看一下视力代码以及运行效果。从运行效果上看，左边是支持脚本的显示结果，页面显示内容正常，右边是浏览器不支持脚本时候显示的结果，在页面上显示了标签中定义的内容。

好，那我们继续开始啊。那么接下来呢？我们再来介绍一下咱们的列表标签啊。那么列表标签一样，我先记一下笔记，叫 html 啊。第一个我们来了解的叫做 ul 结束的 u l 啊，他叫什么呢？叫做无序列表啊。这标签是定义 定义无序列表了啊。什么叫无序列表呢？那咱们来看一下吧。来这里边新建一个文件，保存一下，叫零四点 html。 然后还是一样我们页面布局。这里边我们来介绍列表相关标签啊。第一个叫做无序列表， 我们不写了，直接给个 h 二吧，好，叫无序列表 好，然后给他 ul 结束的 ur 注意啊，他既然是一个列表，注意，他只是定一个列表，那么列表里边会有每一个的列表像，对吧？那么我们配合另外一个标签叫什么？叫做 li 标签。 结束的 li 标签干嘛呢？用来定义每一个列表像，注意 ul 里面包含的 li， 定义每个列表像啊。那比如说我们来写一个什么呢？人生四大喜吧。人生四大喜都有什么都有这个洞房花烛夜 对吧？然后再来 li 结束的 li， 还有这个金宝 提名石。然后还有呢，他乡遇故知。 最后一个是什么啊？久旱逢甘露是吧？久旱逢甘露。 哎，行风干淋就风干淋吧。那 ok， 那么现在咱们来看我在我的这个叫什么无序列表中对吧？写了这四项啊。那么接下来我们来页面访问一下。 好，咱们来看我的无序列表前面是什么样，是不是以点的方式啊？哎，没有序号的对不对？哎，这就是咱们的无序列表啊。无序列表。那么一样，我能不能改这 这个点的方式呢？也可以，我可以通过另外一个属性，但是这个属性已经不支持啊。不是不支持就不推荐使用啊。我怎么知道呢。我教大家怎么来查啊。百度 w 三 cs 酷 sc 是酷 sol 吧。好像是哎。我的鞋哪去了。 来你看我们上这个在线手车里面来找你。直接找哎他妈我。 然后这里边会有对应的他这些标签对吧。那咱们往下拉你看这些标签啊， 你像这种的就是什么带五的就新增的啊，带五的就是新增的啊。 这个康沃斯啊没有讲这里面讲的没有用啊。康沃斯里面的在在在 gs 里边才能用啊，他必须配合 gs 才能用的啊。那么我们来看一下这个刚才我说的什么 ul 标签对吧。那帮我找一下啊。这两边我看这边吧。这边快 这有个 ololul 哎这呢啊来看 ul。 那么 ul 这里边我可不可以去更改他的每一项呢？你看下面有可选属性介绍啊。一个康配的一个 type。 那这里边都说了你看不赞成使用不赞成使用看到了吗？然后他说什么时候使用呢？请使用样式取代他。请使用样式。说白了什么意思啊？就是让那个 css 啊，用 css 来取代他。所以这些属性啊，我们记不记呢？就没什么用了。 但是我需要的时候你过来看一眼就行了啊。那这里边我给大家演示一下啊，我把它就关掉了，大家知道怎么来查就可以了啊。好，那咱们来看。我在这里边我给他太博属性啊，太博属性默，他的默认词叫 ddisic 啊。一个什么实心园 来走你这什么默认值啊。哎那么我可以不可以给他变成空心圆呢？也可以叫做呃 crclv 来，你看这里边是不是变成空心园了对吧？哎另外我说我让他不显示 aoae 来走你，你看前面的这个列表符号就没有了。哎，甚至我还可以干变成什么？变成这个小方块了叫呃 sisquai 来，你看是不是有小方块的方式。当然啊，不是说就这四个，我说我再增加一个可不可以？可以啊，这叫做人生四大喜 好。走你你看对吧。这里边要注意在无序列表中，我加多少个列表像都没有问题啊，这就是咱们的无序列表啊。好，那么无序列表了解完之后，我们还有对应的什么呀？有无序肯定也有有序列表啊。 有序列表好了，那有序列表这里边也一样是用的 ol 结束的 ol。 那么注意 ol 标签，它只是定义。什么定义有序 列表那么里边的列表像呢？需要通过谁啊？通过这个 li 来定义啊结束的 li。 那 ok， 那这里边我们写个什么呢？写 这里边我们写点写点写点诗吧是吧。来叫做苍天游 井独自空。好，就你了。然后再来哎哎叫做松江孤岛一夜风。 然后再来叫犯境之岛。哎呀，我的输入法匹配率这么高吗？哼 李再来一个李世美与近似春 ok 好了啊，这里边我也写了四个。那么现在我们来看周妮有序列表。你看有序列表前面的这个序号是不是一二三四给我们标明了 对吧？哎那同样我们也可以通过属性干嘛把他的这个样式也可以进行一个控制，比如说我不想显示一二三四，我想想显示这个 abcd 可不可以呢？也可以对吧？或者说我这里边呢， 想让他倒序，比如说四三二一可不可以呢？也可以啊，我们加一个属性叫什么属性呢？叫做啊，一 vrsed， reverse， reverse 啊。然后等于等于什么值呢？其实他等于的值也是他自己本身啊。那么既然是这样的写法的话， 我们可以给他简写为一个来把它删掉啊，就只写这个属性就可以了。那写完之后刷新，你看这变成了四三二一啊， 对吧？注意啊，顺序还是这个顺序对不对，只是前面的序号是不是倒序了，哎，这就是这个属性的作用。当然我说了他的属性值就是他自己本身啊，那么这个时候我们来刷新，你看是不是一样的 哎。所以这个时候注意啊，只要是属性值等于本身的时候，我们可以干嘛呢？我们可以把它省略掉，只写属性名就可以了啊，这是一种方式。那么接下来 比如说啊，我不想要这个，或者是这样吧，我们变换一下啊，来把它就不要了啊，还让他默认一二三四了。你说我能不能说不从一开始默认从一开始的，我说从 十可以不对吧？我想从十，我能不能设置呢？也可以通过 sts 这个属性，你要告诉他从几开始，我说从十开始，那么这个时候咱们来看是不是十十一十二十三呢？ 哎，这就是十大属性的作用。那么再往后，比如说刚才我们说了，我说我不要这个，什么不要这个 abc 啊，不，不要这一二三四对吧，我要 abcd 怎么办？我们给他设置这个太婆。太婆等于什么呢？等于 a。 注意啊，就写个小写的 a。 那么这个时候来，你看 abcd 对吧？那同样，我要是给一个大写的 a 呢？ 走你。你看大写的 abcd 没说吧。哎，那能给？还能给什么？比如说我们有那个呃，叫什么？就那个罗，罗马，罗马的那个。哎，对吧， 那看一下效果。走你。你看，哎哎哎哎哎哎，一二三四嘛，对吧？哎，这是罗马小写的对吧？那大写的呢？就大写的哎呗。 走你看到了吗？哎，就是我想要什么样的这个符号，我可以干嘛？我可以对着他去找他，去设置他啊。这就是这个意思啊。那 ok， 我们来给他记一下。 叫做 ul， 他是定义无序列表，然后还有一个 ol， 结束的 ol， 他是来定义的有序列表，对吧？那么无论有序列表和无序列表里面都需要配合什么样 li 标签 啊。他是干嘛呢？用于这个 ur 或者 ol 中 定义列表像，没错吧，每一个 l i 就是一个这个列表像，一个单独的一个列表像啊。然后呢，在这个 ol 里边会有一些属性， 我给大家记一下啊，但是用的很少啊，或者基本上不用。我们都是通过什么通过 css 来给他调用的啊。一个是 reverse 的 revrsed， 干嘛呀？是不是 道序啊？哎，然后呢？还有一个 strt 啊，干嘛？规定有序列表的起始，起始值， 其实之啊。然后另外一 一个太蓬，规定在列表中使用的标记类型，对吧？有哪些类型呢？刚才我们看到有这个数字，给个一代表什么？表示项目用数字标 号。就是这种一二三这种方式的对吧？然后我们还可以给什么？给一个这个 a， 这就是表示项目用小写字母标号， 然后拖着大写的 a， 表示项目用大写字母 标号，然后还有 这个小写的爱，这是表示项目用小写罗马数字标 好对吧？然后另外一个是什么？大写的哎，这是表示项目用大写的罗马数字标好， ok， 标号啊。然后 ur 呢，也有属性， ur 属性就记那一个就可以了啊。甚至这你知道就可以了。那么太婆来是干嘛呀？规定在列表中 使用的标记类型吧，哎，那默认的是 disc 啊，叫做默认实心园 啊。然后还有这个空心圆呢，叫 crcle， 这是空心圆。然后还有这个不显示 nve， 这是符号不显示。以及这个 squaire， 这是方块对吧？小方块。 ok。 这就是咱们的 ol 跟 ul 啊，以及咱们的 li 列表像。那么接下来这块完事以后，我们还有一个列表叫什么呢？叫做定义列表，它是一套标签啊，叫 dl 结束的 点。这个标签呢，就是用来定义一个定义里边的啊，然后定义里边里边会配合一个叫做 dt 结束的 dt 标签，定义一个 定义列表中的一个项目，一个项目啊，以及 dialogdelog 标签中的一个角色，刚才我们也演示过了，对吧？然后地地呢，也一样，结束的地地标签定义定义 一个列表，一个定义列表中对什么样项目的描述， 描述对谁的描述，谁是项目，是不是 dt 是项目啊。哎， dl 只是定义这么一个定义列表而已啊。然后呢， dt 呢？是定义这列宝的一个项目，然后 dd 才是什么呀？才是对项目的这一个描述啊。然后 ok， 我们记完以后，我们来演示最后这么一个啊，叫做 d 的定义列表。 ok， 那我们拿定义列表写个什么呢？写一个商品吧，来结束的 dl， 那么 dl 里边会配合的 dt 结束的 dt 对吧？他是定一个项目，那么意外商品我们是不是都以图片为主啊？那还是一样，我这里面加一个图片当前目录以媚及下边叫什么名呢？又忘了 看，就是 c， 把它拿过来放到我们这里边来。 ok， 图片有了，然后图片大小我给们给他缩小一下 width 啊，这些属性我还没讲，你可以先不用记啊，一百五。 好嘞，图片有了，接下来干嘛？比如说这就是一个项目了对吧？接下来什么？对项目的进行的描述那滴滴。 比如说这个叫做商品名称对吧？比如说叫做这个，随便写个，比如说写个 pp 开发工程师。 ok？ 然后接下来呢？还有商品的价格对吧？那商品价格。那我们再来写一个。写一个什么呢？写一个这个这个这个 dl 结束的 dl， 注意你看好我是怎么包含的，看到了吗？啊，然后这里边就是 别叨着了，比如说给他一万八，然后再来一个弟弟，就因为刚才我这个是， 是不是给个三路线啊，对吧？啊，这个线是优惠价格吧，优惠价格。然后来一个 给个什么？给一个 maok 结束的 maok 吧， 到了就是一零二四哎。然后最后再来一个什么呀，叫做叫做商品描述啊。好呀 好呀，真的很好呀。 ok， 那么写完以后，现在我们来看这个效果。走你，你看这里边有我们的这个项目对吧？接下来干嘛？是对项目的这么一个描述吧。哎，那可能我们现在看的效果 我啊，太难看了对吧？那么怎么办呢？咱们来看啊，我在嗨的里面是不是可以放一个 style 标签，我在这个 style 标签里面找到第二，咱们来看，我先给他一个边框啊， 你看就可以了啊。哎，看到了是不是正块啊，然后呢，干嘛呢？我让他 发动。哎，是不是就这样的了。然后我可以干嘛呀？我可以让他里边所有的内容，比如说 tsg 等于 深塔啊，剧中的意思啊，你们不用管，因为咱还没有讲对吧。然后接下来干嘛呀？给他设置一下，比如说 paddiang 为十， 走你啊。这是我大概调的这么一个样式啊。当然这个左边呢，可能这个他有这个默认样式啊，那默认样式点 mairgmpgng 为零。我先清除他的默认样式啊， 没停掉，来看一下，检查把它关掉啊。 哎，图片在这对吧。然后哦，你看 dt， 再往后点。哦，是这样啊，是每个标签他都有，我要给他兜点清一下啊， dtdldldtdd。 但是我要都清的话呢，他这效果还会消失。 行啊，先这样吧，你看啊，现在清了，这是不是相当于一个商品了对吧？那么相当于一个商品以后，接下来我想要有多个商品的话，怎么办？我是不是把这个定义列表恳求 c ctrl vvvok 你看我的三品列表是不是瞬间又出来了， 看到了吗？哎，这就是咱们这种定义列表的一个玩法啊。 ok， 好了，这是咱们今天讲到这些所有的内容，那么今天主要内容呢？就是这些标签。大家要把今天讲解的标签，除了我们第二部分这个鱼化标签以外啊，也就是我们这个 这个布局标签以外，可以不用去死记。那么其他这些标签必须练习三遍以上啊。必须练习三遍以上。那么咱们来看一下今天的作业， 这里边有一个作业啊，作业这里边还有一个图片资源，看到了吧？哦，然后呢，在这个作业这里边 我的第一个作业。咱们看去各个网站中查找，研究今日标签用途所在。 然后呢，并且备注到握着文档上，怎么备注的？咱们看比如说 ulli， 这是不是一个无需列表啊？那么无需列表标签一般会用到什么样网站的导航栏上 啊，你也可以说可以干嘛，也可以写别的，对吧？然后呢，你是在哪块学到的这个标签呢？来源王子在哪？然后他的截图什么样的效果图，看到了吧。 哎，你就以这种方式把今天所学到的所有的标签都要在网上给我找的。那么怎么找呢？咱们来看啊，谷歌。 然后比如说我们就以这个 l monkey 为例。然后呢，在这里边我们有一个什么，有一个右键检查啊，比如说我想知道他这个标签到底是用什么呢？咱们来看啊， 我把我多余的先关掉，不然你们不好看啊。来，你看你看 div 富特看到富特了吗？刚才是我们讲过了，哎，这是不都是什么？包括这个，这个 div， 这里边是不是还有个嗨的，看到了吗？哎，咱们刚才是不是都讲过了，嗨的代表什么？是不是代表网页头部？那么也就是说只要我找的这个嗨的标签，是不是就是网页头部了？ 能明白吧？哎，找到这副的标签是不是就网页底部了？哎，那 ok， 那么比如说我们一样，我没看到 nv 在哪呢？来，就这吧。啊，这不是史莱克森 diy 这样吧，来看好了啊。我比如说点到这个 pap 开发公司 a 点，你看这里边有什么？有 li， 有 uli， 有 li， 你看是不是无需列表啊，只是 li 里边又包含了我们没学过的标签。那不要紧，因为我们还没讲完， 对吧？那你看整个这个无序列表，是不是就做出了这个导航的效果哎，甚至什么呀？比如说这一块， 注意我先点这个位置啊，查找，查找谁呢？查找这这一块内容，你看是不是点过来了。然后呢？他的上一标签是谁？是 div， 你看这个 div 包含了什么？是不包含了这个导航栏。 哎，你就这么样来查找，来跟我学习。你要给我看每个标签都用到哪了？一般在布局页面的时候，我们 a 标签用的是最多的超链接标签，我们还没有讲，明天才会讲啊。然后呢？ 这里面挨标签是干嘛的，对吧？今天我们这这些子都讲了，包括实判标签，你看我也讲了，他这里边实判标签是个行的元素，他给放了一个什么？放了一个竖线，对吧？那如果说你说我光用学习原地这一个网站，我没找着你那么多标签怎么办？不要紧张，网站不有的是吗？对不对？你实在不行，百度 搜索去，或者是什么呀，比如说京东啊，对吧？或者是这个，这个，这个叫什么？呃，这个这个淘宝啊啊，这里面内容都很多嘛，对不对？或者上新浪啊 啊，都可以啊，你随便去。不管怎么样，你要把我今天讲到这些标签，你给我搜一遍啊，搜一遍，按照我的这种方式，按照我的这个格式给我全部写到这我的文档当中啊。这是第一个作业，第二个作业呢，要求创建一个 a 天门文件，写出如下的效果。那么这种带颜色的我已经给大家讲了，他用的是放的标签对吧？那么放的标签呢？我说了只今天用，除了今天以外，我们就不要再用了啊，因为今天做作业我们不允许用四 ss， 只能用 a 天门的这个属性来做 啊。然后这里边有什么有背景图片，有布局，有水平线，有颜色。那么这个背景图片，我们怎么在页面上加点这个背景呢？我们可以找到我们的这个包的标签 啊，在这里边给他一个什么呀， b a c k 加 u n d 等于图片路径。 ok， 这就是背景图片设置的方式啊。好了，那这就是咱们今天的主要内容。那 ok， 今天咱们就到这里。

大家好，这节课呢，我们来介绍一下 folter 元素， 我们看一下福特元素的简介。福特元素可以作为其上层负极区块或者是一个根区块的角柱。福特通常包含其相关区域块的角柱信息，如作者、相关链接及版权信息等。我们还是通过具体代码来了解福特的具体使用。 打开 webstone 来创建一个新的文件 future okay， 我们在包语当中来演示一下以前我们是如何来书写的。以前我们通常会以 div 作为容器，指定 class 为 photo， 然后在里边我们会使用一个 u i o， 然后是立标签，当然我们这里说的只是一种使用方式，指定 a 标 先，那每个 a 标签当中我们可以写些信息，比如版权信息，第二个站点地图，第三个 联系方式。以前我们会这样来书写，但是这样的语句话并不是特别好，因为我们最外层还是 div。 ok， 那现在的写法是怎样呢？把它更改掉了，让他更加具有语意化，让我们读起代码来更加清明。如何更改呢？不再使用 div 注视一下，而是直接使用 focure。 我们看 直接使用 footer 标签，然后把这个 div 里面所承载内容全部放进去。 ok， 与嗨的元素一样呢，一个页面中也限制未必要 要使用一个数量，也就是说在当前的页面当中未必只包含一个，否则用来表示底部，他还可以在一个区域块当中进行表示。比如现在我们看一下，来创建一个阿铁口，然后在里边呢，我们来创建一个，否则 当然给 foot 指定一些信息，比如说这是一个文章的第一步， ok 也是可以的，它跟 head 的使用呢比较相似。 ok， 那当然呢，我们不单是 auto 可以，比如我们说 session 可不可以呢？也是可以的，在这里我们也可以签到一个 future， 然后在里面来添加一些具体的信息。 ok， 我们可以看一下在真实的案例当中，他是如何来书写的。打开一个网站，在当前这个网站当中呢，他也有一个底部，我们看 这呢属于它的整个底部。来审查一下原码，我们往下找，在这里你可以看到一个 foot 标签，当鼠标选中 foot 标签之后，你会发现整个的底部全部被选中，当然下面的备案我们不算，然后把它展开往上看， 这就是一个否则底部，然后里面包含底部应该包含的信息，那当然里边可包含的信息跟我们之前所介绍的嗨点是一样的，可包含的内容是比较多的。 ok， 那关于 photo 呢，我们暂时先讲这么多，接下来我们看一下下一个点， h group 元素，看一下 h group 元素的简介。 h q 元素呢，是将标题及其子标题进行分组的元素。 h q 元素呢，通常会将 h 一到 h 六的元素进行分组，譬如 一个内容块的标题及其指标题算一组，那我们还是通过代码来展示一下，让大家更好的理解它。 ok， 那在这里创建一个 h group， 在包底当中呢，我们来写一个内容，比如我们在这里啊创建一个 article， 然后里面包含一个 header， header 下面呢 包含一个内容区域块，内容区域块我们可以使用 div 承载，因为它肯定会有一些样式，我们存在的样式呢，肯定是都通过 div 来进行，添加一些 css 样式，底下是一个 focure， 然后在 div 当中我们来创建一些内容。 在孩子当中，我们一般都会配合一个 h 一标签或者是其他的标签，然后来承载一个标题，这是文章标题。 ok， 底部呢？我们来写一个， 这是底部，然后在这文章下面呢，可能会使一些文章的内容我们来写一下，比如说，呃，有一个文章的时间或者作者，我们指定一个 time 标签，时间， time 标签指定一个 date time， 然后是二零一五一零一零，那当然在这里也是二零一五一零 一零，而当我们程序在读取的时候，肯定读取的是 datam 的属性， ok， 然后现在我们会看到啊，当前只存在一个 h 的标题，他只有一个主标题， 那可能是当我们需要为主标题加上一个指标题的时候，尤其是一些文章，或者一些我们看到的广告，他会有指标题，那在下面再来创建一个 hr 的指标题， 刚才是文章标题，这是一个子标题，为了让大家更好的去理解这篇文章，可能会这么来写，那现在的标题比较多，所以这个时候我们就需要进行分组，把 h 一和 h 二呢放在同一个 h group 组当中， ok， 粘贴进来，那这就是 h group 的作用。当只有一个标题的时候，我们没必要去使用 h group， 但是当标题过多，第一个和第二个是同一级，而且它是属于第一个的子标题的时候， 此时呢我们应该使用 h group 将其包裹起来，代表当前它是一个指标题， ok， 那 h group， 我们就讲到这里，谢谢大家。

好了，大家，那么接下来呢，我们学一下列表标签，叫做列表标签， 那么列表标签是用来干什么的呢？哎，这个列表标签挺重要的，后续布局也少不了列表， 那么所谓的列表啊，他就是可以整齐有序的展示一些内容，这就是列表标签做的事啊，可以整齐有序的展示一些内容，就是列表标签做的事。 那么在 html 中，列表也有三个，分别是无序列表和有序列表，还有一个叫做定义列表三 叫做定义列表，有三个，那第一个先说无序列表，无序列表其实就是 ul 加上这个 l a， 什么意思呢？就是 使用这个 ul 标签创建无序列表啊，行 ul 标签标签吧，标签去创建无序列表，然后呢，使用这个叫做 li 标签去创建列表像就完事了，那么我们过来试一下，那首先一对 l i 标，呃， ul 标签，这是一个 无序列表，对吧？那叫无序列表啊，这是一个一个无序列表，然后呢，列表嘛，里边是不是得有列表像啊？就如同我们现在这个就是一个列表，一像二像三像，只不过这是一个有序列表，是不是整齐有序的展示一些数据啊？ 那么无需列表的话呢？ li 创建列表项，比如说我们来个叫项目一展示一下，项目一二三，项目二项 三过来一执行，注意看是不是有整齐的展示一些内容啊，哎， 哎，前边呢无序嘛，他就用一个实心的圆圈代替了，但是呢，还是那句话，之前是跟大家说了，像是这种展示的效果来讲的话，我们是并不关心的，听懂吧，哎，效果样式是后边交给哎 css 做的事，那么我们呢，尽管是 这个定义网页的结构啊， htm， 那这就是无序列表，那么比如说 像是这个无序列表放到 ie 上的话，一展示，看这小点是不是就变小了呀，所以说我们是并不关心他展示出来的效果的啊，行了，那这就是无序列表，那么相应的有序列表呢，有序列表，那就是 ol l 加上 l i， 那么还是一样的，就是使用叫 ol 标签去创建创建有序列表，创建 创建有序列表，然后呢，也依然使用 li 标签创建列表，像啊，我们过来试一试，再来两个叫做 有序列表，有序列表的话呢，来个 ol 一对标签啊，创建有序列表，然后里边一个个的列表像使用这个 li 就可以了啊，叫项目一。哎，我这后悔了， 复制，复制的话，大家呀，这个快捷键，我用的快捷键呢，其实是以前的快捷键，我用的是 out ctrl 加下方向键复制的，其实呢， 这个歪不死道的快捷键应该是 ctrl 加 d， 用于复制一行，听懂吧。哎，当然这种快捷键呢，大家呢， 去没事的时候去看一看这些快捷键啊，稍微的看一看，看两眼，把那几个常用的记一记就可以了啊啊，咱们在因为我用的快捷键可能跟大家的就不太一样了啊，所以说大家没事把这个东西拿出来看一看，当然分享的时候呢，我也会把它 快捷键放到资料当中啊，大家去没事掏出来瞅一瞅，看一看就好了啊。嗯，有很多好用的快捷键，我们掌握了之后呢，会帮助我们加快开发速度啊，加快开发速度， 然后呢游戏列表来个项目三，这样意义执行，那是不是有序的呀？啊？为啥叫无序的？比如说无序的话呢，他前边用十 的点，你上下的位置，你变换一下，没有关系，那么有序的话呢，就必须一点，二点，第三点啊，排列一下，所以说相比较之下，其实无序列表比有序列表用的场景更多。 那么这时假如说如果我们不想用一二三作为这个序号的话，其实他们呢有一个叫太婆的属性啊，比如说你想用这个 abc 去啊，排序的话，是不是也可以啊？可以去指定啊，然后呢，包括这个无序列表也行，对吧？现在呢，默认是用实心的圆圈， 你也可以用空心的圆圈也可以啊，但是呢还是显示效果，我们是不是并不关心呐？那么下一个呢，叫做定义列表，叫定义列表，定义列表的话呢， 他是使用叫做 dl 啊，使用 dl 标签创建定义列表，然后呢注意，定义的话，其实他就是 对项目具有对某些项目具有某些描述的列表，就叫定义列表，所以说他多了一个标签， dt 的话呢，去 dt 标签 标签去创建需要描述的项目，然后呢还有一个叫做地地标签啊，地地标签呢，用于创建对项目的描述啊。注意，我这说的大家可能有点迷惑，我们一试大家就知道了，比如说这个定义列表什么意思呢？ 一对 dl， 这就是创建定义列表，那首先你得有一个你需要描述的项目，那就 用 dt 标签去创建，比如说我们这里来客叫做，嗯，叫做中国三大中心，好吧，哎，那么中国都有哪三大中心呢？哎， 再来，中国都有哪三套中心呢？哎，你要是对上边这个题目啊，进行一个描述啊，比如说来一对对地啊，有北京政治文化中心， 看到吗？然后呢，再来一对滴滴，说一点描述还不够，还有第二点，对吧？那叫做上海， 上海金融中心，上面少个心，对吧？哎，上海金融中心，然后再来一个滴滴，还有哪三？哪三大中心？还有一个那叫啊，沈阳洗浴中心，是吧？哎，中国三大中心，那么选中执行，哎，这就是你需要定义的 项目，下面三项啊，就是对你这一个项目的描述，哎，这就叫定义列表， 好吧，这标签记一下就可以了，是不是没有难理解的地方啊？那么关于标签的话，关于这个列表的话呢，稍微有一点大家注意一下就可以了，就是列表之间呢，都是可以欠套的，说列表之间可以相互欠套啊，比如说呢，我们来个什么呢？ 呃，来一个 ul 吧，来个 ul， 来个无序列表，无序列表是不是里边这是 li 定义列表像啊，那么在列表像这里，我们来个叫北京市， 北京市，那么北京市这里呢？下边我再给他来个叫 ol， ol 叫有序列表，对吧？哎，然后北京市有几个区呢？ 来个昌平区，然后来个海淀区，然后来个朝朝阳区，对吧？哎，那这是 ul， 代表无序列表，这是第一个列表像，那么我再来一个列表像， 哎呀，不能，怎么就直接就 olol 了，错了错了啊，叫 ol 里边 ol， 这是不是欠套一个叫有序列表啊， ol 里边还得有 li 呢， 不好意思大家啊，写秃噜了，翻车了，这个 l i 呢？这叫昌平区，对吧？然后呢？这个叫，呃，海淀区，然后这个叫朝阳区， 能看懂吧？就是列表像里边又包含着另一个列表啊，列表之间可以相互签到。哎，大家看我这工具，这一签到，他为了帮怕我自 自己写混乱，还给我变了色，是吧？早点变色呀，先混乱了主要是，是吧？然后再来一个 la， 再来第二个列表像，第二列表像来个，比如说叫深圳市吧。啊？深圳市，深圳市呢？我，然后再我再欠套一个有序列表，然后里边再来，哎，哎，列表像，比如说有，嗯， 宝安区，然后还有这个叫南山区，然后还有这个叫做罗湖区。这样那，那这样的话我一直行 看，对吧？外边是大的，是无序列表，然后无序列表列表相中欠的是一个一个的有序列表，所以说列表之间可以相互前套。好吧，哎，标签记一下即可啊。以上就是列表标签。

好，接下来呢，咱们来去介绍一下鱿鱼翼的布局标签分别有哪一些？那其实啊，咱们在 htm 早期的版本中呢，咱们在布局的时候一般用的更多的还是咱们的 div 和死板标签比较多一点， 但是啊，咱们到了 html 第五个新版本中呢，他其实推出了一些由于域的布局标签可以供开发者来进行使用，那么同学们在之后的开发中呢，也可以使用到咱们下面这边所对应的一些新的由于域的布局标签来表示网页中相应的区域。 好，那分别有哪一些呢？那这边老师就分别来介绍一下鱿鱼的布局标签有哪些常见的，待会通过代码的形式给同学们来演示一下。那首先第一个标签呢，叫做嗨 的标签，他表示的羽翼就是整个网页的头部区域，就比如说右图所示，整个是一个网页，那么在网页的最上方这个位置，咱们会把它称之为网页的头部区域，咱们可以使用嗨的标签来进行包裹进行表示。 第二个标签呢叫做咱们的 nice 标签，他表示网页的导航区域一般会在咱们网页头部的下侧这一块区域呢来进行表示，一般是一些网页的导航链接。 然后第三个比较常见的叫做福特尔标签，他表示网页的底部，换言之就是咱们整个网页最下方的一块区域，咱们可以使用复特标签来进行表示和包裹。第四个标签呢叫做咱们的 ssi 的标签，他表示网页的侧边栏这个 区域一般就表示网页在侧方的一块区域。第五个标签叫做 six 标签，他表示网页的区块一般指的就是特定的独立的一块区域， 然后呢，最后一个需要同学们知道的标签叫做 it 口标签，这个单词本身的意思呢，有咱们文章的意思，那么他所表示的语音就是网页的文章区域，一般由于包括类似于新闻，包括评论等一些文章的相关内容 好介绍完了以上由于的常见布局完全之后，接下来老师就通过代码的形式带同学们分别去感受一下。 首先我们跟他讲到了网页整体的头部区域，咱们可以使用嗨的标签来去表示。 h e a d e r 标签，他表示网页的头部。好， 那再往下还要表示咱们网页整个的导航链接叫做 nice 标签 n a v 太保健，他也是个双标签，内部来包裹一些内容，比如说咱们写上网页的导航， 那还有一个部分是网页的底部，叫做福特 f o t eapod 标签，他表示的是网页的底部， 那数字之外，咱们还讲到了三个，分别是网页的侧边栏叫做啊 sad 标签，他表示网页的侧边栏还有一个呢，表示网页的独立区块，叫做三可审标签 cctr on excon 标签，表示网页的区块，那还有一个表示网页的文章区域叫做啊体口标签 art icl e 这么一个标签，他所对内语意就是网页的文章区。好，这边呢，咱们把这些标签都写完了之后，咱们来看他网页中的效果长什么样子的哟，此时咱们来去刷新， 哎，咱们所写到的每个内容都展示在咱们当前的网页中去了，而且同学们可以很明显的看到，我们所写到的每一个标签，一行中只能放下几个呀，只能放下一个，哎， 其实这个效果呢，就类似咱们刚才所说到的 diy 的效果是一样的，也是独占一行的。那么同学们在去认识这一些标签的时候啊，同学们可以这样去记忆 咱们。其实我们以上的鱿鱼的布局标签，他的特点和 div 完全是一致的，只不过咱们以上的鱿鱼的布局标签，他比 div 多了一些不同的羽翼，仅此而已。好，那么介绍到这里之后啊，咱们就把鱿鱼鱼的一些布局标签咱们就介绍完了哟。最终我们来进入一个小阶环节。第一个问题，常见鱿鱼鱼的布局标签有哪些？同学们还记得吗？ 刚才所说的分别是，网页的头叫做 pad， 网页的导航叫做 nf， 网页的底部叫做福特，网页的测表人叫做啊， siri 的网页的区块叫做 sex， 网页的文章叫做阿提口。 好，说到了这里呢，咱们就介绍完了，由于的常见布局标签分别有哪一些，那么同学们目前的任务就是把这几个常见的标签在脑海中，需要一定的印象。咱们后续讲到了网页布局部分之后，咱们回答同学们挨个的在网页中使用到，同学们不用着急哦。

粘了一些标签，新增了一些标签，对不对？新增的这些标签呢？我们给他叫做羽翼化表情。现在呢，来跟我理解一下羽翼化啊。打开看 羽翼化标签。简单的来说，羽翼化标签就是能表示 或者说能够代替这个你所表达的内容这一块啊，就可以了。我们一般在网上，你比如说写一篇文章，对吧？大家看哈，写一篇文章， 我们认为这里边有好多的是。那么按原则上来说，这个这个东西应该被什么东西，被， 被被什么？被标签包起来对吧？我和大家说过哈，应该记住这句话吧。原则上来说，页面上的任何东西 都应该被标签给包起来。这个标签指的不是包的，而是其他的一些标签，其他标签是往包子里面包的对不对？所以这个时候他我就可以用 d i v 来把这一块包起来。 ok 啊，这一步没问题吧？ 好，来。放到这之后呢，再来看我们呢，来把它多放几个啊，这是不是三个，第二位，第二位里边放了单和文字， ok 吧。这个。 那之后呢？再来看我们。一般来说，这里边有一大堆的文字，这一堆文字我们有可能称之为什么 一段内容，对不对？是不是一段内容。所以这是什么？我们说内容。一般来说啊，我们称之为 段，一段内容。那么这个段指带的什么？指的就是段落的一种意思，这个能理解吧。所以我们在包的时候，我们经常做的并不是用的 div， 而是要用谁 p， 因为拼能代表谁， p 能代表段落。我认为这是一个段落，理解的意思吗？所以我就用 p 包着他们里边的文字，而 p 一般来说他里面包的就是文字。所以我们这个时候呢，更合适的叫做选 p。 ok 啊， 大家刷新，大家看屁，同样也是表现成一行一行一行，是不是这样子？中间多一些空格是他特性啊。 那这个时候我们就要选 p 点位。为什么呢？因为 p 代表一种段落的意思，他里边是直接放文字的，能理解吗？这个。那么这个时候我用 p， 我就比 d i 用 di 威就更有意义了。体会体会用 p 段落吗？ dnv 电威就是 dnv 吗？就快吗？对吧？但是我用 p 代表的是一个段落， 这个能理解吧。所以我用拼啊。这个时候这个标签就有羽翼化了。在我们鞋网页的时候，哎，电表里边 w 商科也推荐了，说你所用的标签，尽量能够让他有羽翼化的意思，尽量让他有羽翼化。 所以这个时候呢，我们选 p， 这就叫做羽翼化，这个能理解吧。而 d iv 做什么的呢？ 一般来说 d iv 是包的这些元素的，你比如说有 p 标签，他是要包到水里边的， d iv 里边的，但是 p 不能包。 d i v d i v 可以包 p， 能理解吧。再往后里边，比如说还有一万字也 要抱到水里边第二位里面， ok 吗？这个意思。你再比如说这里边还有什么有列表也要抱到水里面， 也要播到 dnv 里面。那么这个 drv 再直观一点就是他做的是一个内容快的包含。我们在洗网页的时候也是这个道理来看啊，你比如说行动啊，可以， 你比如说你要写个京东页面了，这里边用到了大量高效对不对？那么我们一般做的时候呢，经常会这样啊，你比如说 你别说啊，这一块看到这一块了吗？我们做它的时候会按照块一块一块的这样去完成。之后呢，再把它放到一起，比如说我想做这一块，那么这一块就是谁？我就认为这是一个 div， 快能行吗？这个让 drv 给包起来，完了之后，里边呢，你们说有文字了，哎，再拿 p 标签包着，或 a 标签包着，有图片了，依旧是在拿银麦的标签放进去，但是放的都是水里边呢，是一个更小的 drv， 也就是说他里边又包含了三个小的 drv， 理解这个意思吗？ ok， 没有这一步整体是个大 d i v， 里边做每一小块的时候，我再给他套一个小 d i v， ok 吧。这个那这就是属于 d iv 的一个作用。当然还有另外一块，我们每写一个网站，大部分划分划啊，划分成这么几块，第一块就是属于谁？ 头部和导航信息这一块，这就属于一个网站基本上具备的东西，就是页面一打开，上面有一些行小字啦，或者说有一些 简短的介绍了，这就是头部和导航信息， ok 吗？这个那么这一块也是一个点位，可以吧？这个好，再来往后看。当头部写写的时候，你说这块头部我怎么写？ 这不是一个投诉信息吗？这一整块怎么写呢？我依旧是把它套一个 div， 这个 div 代表谁？ 就代表刚才所说那些头部信息了，导航信息了。这一大块全部都用电维给表示起来，这个能理解吧？ ok 啊，这就代表我的头部信息了，当这块写完之后，该水了， 我们可能干这里边的主体是不是没有了这一个一个块啊，一个文章或一个区域 块。当然这个块里边有什么呀？有侧边栏，有等等一大堆。这每一个都是 dna 小块啊，这个不用管，但是我们把它整体再画一个 dnv， 这个能理解吧。所以啊，这个时候呢，我们依旧怎么做呢？ 会有一个 diy 包起来，这叫做主体内容，这在中间这一块， ok 吧。那么同样道理，当我们这个主体内容写了茫茫茫茫多啊，不管这有没有侧边人了，有没有标题了。我写了很多很多之后，我们发现最后这有这么一个东西， 就是页面结束的时候，我们会做一些简单的什么呀，介绍或更详细的一个说明，其他的一些说明。那这个了吧，这就属于一个页面的结尾。那么结面的结尾怎么做啊？我们的习惯上依旧是写一个谁啊， 写一个 d i v， 把它包起来， ok 啊，来看 d i v。 那么这个 d i v 里面放什么？这个 页面啊，叫做页角啊，就可以了。就最后那块的刷新打一下。这就是我一个主体内容，大致的给他画放了三五块大啊，难做的就是中间这一块，他里面有好多好多东西的一般。 ok。 来看看这三个 dnv， 能理解他的意思吧，每个 dnv 一整块啊，又一个 dnv 一块，又一个 dnv 一块。当这个时候大家有没有发现，这三个 dnv 都叫 dnv 啊。那你怎么能区分哪一块是头，哪一块是尾呢？ 所以这个时候一般我们会给他加一个 id， 等于什么呀？你们说叫害的意见吗？这意思不会叫害的啊，代表头部。那这个呢？叫什么 啊？包里有三等等一大堆。你比如说这个里边的液角叫什么呀？都特等等一大堆。我们通过这个 id 就可以标示每个不同的 d iv 了，对不对？ ok， 但是我们在做的时候， w 三 c 说了已经说怎么样，你写的东西要有羽翼化，是不是这样说的呀？ diy 是没有羽翼化的，所以这时候 dna 不合适。那怎么办？ 我们这时候再转换一个更羽翼的意思，就是这里面的一个结构，知道这个东西吗？这些东西就是根据我刚才给大家做那一遍演演示的过程过来的。话说这些 diy 经过和发展就出现这些标签了。 那么这些标签就是和 dnv 一毛一样的，只不过随便了。标签名变了，这个能写吗？ 这就是他的里边的一个意思啊。大家来看我们做的时候呢？首先啊，这里边有很多很多标签对吧？ 以前你比如说写 dna 是不是叫嗨的呀？我们不再给他叫嗨的了，因为 dnv 没有一句话，怎么办呢？这个时候我给他加一个叫做嗨的。嗨的代表什么？代表头部信息，这个能理解吧？那么实际上如果你不好理解，就理解谁 第二位就可以了。但是第二位要有一句话，就把他变成他的了。明白意思没有？ ok 啊，你说找一个这，这是有开的点勾鼻结啊，加色啊，我就再给他加一个。什么呀？加一个，加一个隐瞒的啊，代表什么？隐瞒的下的嗨的。点 六倍镜。再来刷新。我们一遍打开，这就是一个头部， ok 吧？打啊，我们呢可以实现这个效果，让他居中一点点。这一堆我都给大家看到。中间 来看，是不是都被一个整体电位包起来了。那电位里里边呢？我给他加个耳链吧。耳链耳链记这个东西吗？人头啊，我们举重 ok， 那看这块是不是举重了，是我们第一个寓意画标签叫哈的，哈的代表谁？ 代表的是头部信息， ok 吗？这个好。再往后看，你的头部除了有害的还有什么呢？ 还有主体。大家还有这些东西，你比如说这，你看到这个网站导航了没？有？这一长条的导航，所以会有一个导航。以前写导航怎么写呢？第二位，就这样写， 能理解吗？但是现在有一个一句话标签了，谁呀？叫做 no。 那我记住了，导航，它里边会放很多很多内容，一般来说导航都这个样子啊。你说 a 叫做公司地址， ok 啊，给大家加一些这东西来看啊。 公司简介公司公司名称联系电话在线客服 再来一个客户服务 ok 啊，再来这，再来这刷新，知道这个意思吗？大概是一种导航形式。那么这个时候呢，放到了这个标签里边，就是 no， 代表的就是导航的意思， ok 吗？这个那你不好理解，他就认为他是一个 div， 只不过这个 diy 叫什么了？叫 no 了而已。 ok 吧。所有这些标签都是 drv 啊，大家不用不用，不用把他当做什么深奥东西。那再往后，你比如说你遇到一小张姐怎么办？ 三个省啊，这里边就有章节。那之后呢？再来往下看这个电位还用不用这样写了，怎么办呢？我们直接三个省啊，里边有什么呀？很多很多的内容。好再来啊！行，这就代表我们的耐务，而不叫三省。 章节这一块，当我们写的时候，里边含刻的有什么呀？你比如说有阿奇课文章啊，或者说啊，这个叫什么侧边栏了。我们依旧有个道理啊，在他里边就可以加什么呀， 啊，在的，这叫什么东西啊？侧边栏还叫什么呀？ 阿 t q 这个东西吗？ r t q 这叫文章啊等等一大堆。反正以前所有叫 d iv 的，现在都干什么了，是不是都换名了？对，这个名字不同，代表的是不是意义不同，包括最后的这个 id， 这个 d i v 富态。怎么办呢？ 他又换成这个东西了，叫做一脚一脚哎， 夜宵 ok 啊。再来创新这个主体的上中下等等一大堆，这就是我们鱼化标签， ok 吧，这几个 有没有看看这几个标签啊？赛的代表什么意思啊？赛的 看这坐这 no 再次小杰知道他们代表的意义就是叫什么， diy 就可以了， ok 吗？以前做的时候就是 diy diy， diydy 就要堆起来了，现在不一样了，现在我们有了好听的名字，叫什么呀？ happy no！

成为程序员的第一步，首先记住这一百个单词安排。

驿站标签使用方法，一、打开机器，放入纸卷。二、同时按下开机键和走者键，五秒进入设置三、按开机键切换至标签学习 四、按下走指键，走指四张后听到滴的一声，再走指一张就完成了。