web如何使用pattern标签

大家好，今天我们学习胎宝表情，我们写代码， 胎宝标签呢是双标签，快元数胎宝标签里边呢包含 tr 标签 一对 t r 标签呢表示一行， t r 标签里呢包含 td 标签 一位， td 标签呢表示一 ti 标签里呢还可以包含 th 标签， th 标签表示表头。浏览器把 th 标签里的内容查出居中显示， 我们往标签里添加文本内容。现在这个 abo 标签结构呢表示一行两列，然后我们给他再复制一行， 我们保存一下。如果这个图标使浏览器型 是的，大家直接打开就可以。如果是文本文档的，我们要选择一款浏览器给它打开。 没有边框，我们呢给他添加边框属性在 tab 标签这个位置呢，给他添加 brother。 一，后面的单位呢是像素 px， 我们保存回来，浏览器里刷新。 如果我们想让这个文本跟这个单元格之间的留白大一点，我们 添加属性 笑格子拍顶填充，合起来就是单元格填充，我们保存回来，浏览器里刷新。 如果我们想让这两个单元格之间的间隔大一点的话呢，我们再添加一个属性 不沉 会来浏览器里刷新。如果我们把 sales by 省这里 设为零的话呢，就变成了普通的表格形式，我们放心。

好，接下来呢，咱们带同学们来去学习影部的系列标签的最后一种状态叫做按钮，那咱们按钮啊，在网页中所出现的场景呢，是非常非常多的，他能在咱们网页中显示各种各样不同功能的按钮空间， 比如说同学们看右图所示的效果，在下面这个部分就给咱们展示了提交按钮，充值按钮以及普通按钮这三种相关的效果。 那我们接下来就来带他们去介绍一下我们不同按钮的标签组成以及代码的实现。那首先啊，咱这边所讲到的按钮都是影铺的这个系列标签下面的，所以标签名都是影 铺头这个标签，只不过他们的泰布属性值有一点不一样，比如说第一种咱们的提交按钮，他所对应的泰布的属 禁止叫做撒吧 mit 这么一个单词啊，提交你的姑娘就在于点击之后能把咱们用户所填写的数据呢发送过去，具体呢是发送给咱们后端的福气的 絕， 他所对应的功能就是能在点击之后让咱们的表单恢复成默认值，而不是去清空这一点。同学们注意一下， 最后一个普通按钮，他所对应的太部属性值叫做八成这么一个单词，这个普通按钮啊确实和名字一样非常的普通，他默认 是没有任何功能的啊，他的存在是为了配合咱们之后 gs 去使用的，所以咱们在气质班中只需要会这个形态就可以了。 好，说完了我们当前不同按钮的标签组成之后，接下来咱们就来通过代码的形式来去演示一下，那这呢是我们所讲到的下面一个部分叫做引破的标签的按钮形态。那咱们回想一下刚才咱们说了哪一些状态啊？ 第一个叫做咱们的撒吧 mit 这么一个单词 submit， 他表示的是提交按钮的效果， 那这咱们写上个影铺特，把里面的属性值改成撒吧。 mit， 我们后来还讲到了一个叫做 resit 这么一个单词， r e s e t， 他的 效果就是重置的按钮来恢复表单的默认值的，我们这边写上应铺特，把它的值改成 reset 即可。 那最后一个按钮的种类咱们说的叫做。第三个是八成这么一个单词，他的名字叫做普通按钮，正如名字一样，他默认没有功能，非常的普通，需要后面配合 gs 来去使用。那这边咱们也写上银铺的，把他的太部署性值改成八成。 写到这咱们已经把三种不同的按钮都已经写出来了哟，来看最后的结果，咱们来去刷新。哎，网页中出现了重置以及提交的按钮，大家怎么会发现咱所写的最后一个普通按钮确实按钮的样子在这里了，但里面有默 的文字吗？哎，它里面默认是没有的，他普通到里面的内容都是不存在的，那么这个时候我们肯定是想让我们当前的按钮中显示一些文本，那怎么控制我按钮中所显示的内容呢？哎，我们 想控制引破的中所展示的内容，咱们可以通过这么一个属性叫做 w 属性来控制就可以了，咱们想让他显示什么文字，就在 w 中写什么样的内容就可以了。比如说咱们写上普通按钮即可， 写完了之后来看咱们的效果哟，此时来去刷新哎，文字就在这里了。那现在啊，咱们已经把三种按钮呢展示在咱们自己的网页中去了。那咱们最终来去验证一下他们的功能是否都能实现。第一个提交按钮呢？咱们可能需要到了剧烈班才会用上，那 这个怎么暂且不论，我们来看第二个重置按钮。重置按钮呢，它的功能是把我们当前的表单置为咱们的默认值，那 咱们来试一试哦，我们找到当前的昵称这一块，我写上一段内容，比如说，哈哈哈哈，当我点重置之后，恢复成咱们默认的状态，是不是应该是没有内容的状态啊？哎，那我此时点击重置一，点击他重置了吗？ 哎，其实没有，那这里老师就要说一个注意点了，同学们小心哦，如果咱们需要去实现按钮各自的功能，他是存在一个应用的要求的， 如果需要实现按钮的功能，咱们需要配合字母标签来去使用。而字母标签如何去使用呢？咱们只需要用字母标签把所有的表单标签一起包 过起来就可以了。那这老师带同学们去演示一下哦，那么咱们在最上面写上一个 form， 这么一个标签写完之后按下看不见哎，就出来了一个标签，而且 fm 标签身上自带了一个 x 属性，这 属性呢，咱们到了距离班才会用到技术班，咱们先把它给删除掉好，删完了之后咱们会发现凤凰标签是个双标签，它内部可以用来包裹咱们的内容的，所以我们把凤凰标签的后半部分直接 ctrl ex 剪接， 放到咱们整个表单的最后的部分，把它给粘过来，那并且呢，为了咱们代码的规整，我们把它里面所包裹着的所有的内容全都框选住，按下键盘上的太部键有一个缩进，这样层级关系 更加的清晰一点。好，现在呢，老师就用缝标签把咱们所有的表带标签都包裹起来了，他们俩配合使用就能实现按钮的功能。同学们再来去看一下哦。老师来去刷新， 我在第一个文本框中输入咱们的内容，大帅哥，写完了之后，我们点击重置，看会不会恢复成咱们默认的状态哦，一点击， 哎，会不会恢复，恢复了呦。而且这边针对于重置按钮来说，老师需要强调一下，有同学可能之前会认为重置是把所有的内容全都清空掉，但其实并不是的， 你们会发现我点重置之后，咱们的性别包括爱好中的默认选中，像是不会把它清空的，因为咱们重置的功能其实是把它恢复成默认状态，这样描述可能会更好一点哦。 说到了这里呢，咱们已经把引破的系列标签中的三种常见的按钮状态已经说完了，相对于这三种状态来说，需要把我们三种不同按钮的太部的属性值需要记住。 首先题圈按钮叫做撒吧 mit， 重置按钮叫做 resit， 普通按钮叫做八层。而且 如果咱们想要实现我们每一种按钮各自的功能，我们需要使用放标签，把整个表单标签一起包裹起来，配合使用才是可以的。好，说到了这，咱们就把影铺的系列标签的按钮这个种类的效果已经就是王了呦。

啊，好了，小伙伴们，那么接下来呢，我们就开始正式的学习 html 的标签啊，就是标签的介绍，叫标签的，哎，标签的介绍， 那么在这个 html 中啊，标签呢，实际上也有他的分类啊，叫分为单标签和双标签，叫做标签的分类， 在 htm 名中，标签其实分为叫做双标签和单标签单标签。那么什么是双标签呢？就是所谓的双标签是成对出现， 然后有开始标签，有结束标签，他的格式怎么写呢？就是一个 小括号，一个大括号，在这这个括号之间写标签名， 然后呢再一个小于号，一个大于号啊，在这里里面一个斜杠，然后呢写结束标签的标签名，对吧？注意我写的标签名说明开始标签，结束标签，是不是他们的名字是一样的呀，只不过结束标签以这个斜杠开头， 那么在两个标签之间我们就可以写下内容了，哎，比如说，比如说什么样的呢？ 格式调一下，比如说一个呃 p 标签，一个 p， 然后有一个推包键，注意我这一个推包键呢，这个一对标签是不是就给我自动生成了呀？哎，就是 q 旁边的那个键，那实际上大家呢也可以去自己打打这个括号啊，写写标签，对吧？啊，练习练习 也行，那么我我本身打这几个符号我觉觉得挺费劲的，所以说我就快捷键生成了，你要打一个标签名，一个胎宝键，他就自动给你生成了，回头有一些其他的，对吧？快捷键我都会一一的慢慢的随着后边的奖会介绍给大家啊， 然后双标签呢，在这之间呢，我们就可以写一些我们所需要的内容了，对吧？比如说啊，今，嗯，今天天气不错，挺风和日丽的，挺 挺风和日丽的，可以吧？嗯， ok， 那这就是双标签，那么什么是单标签呢？所谓的单标签呢，他也叫做字结束标签，然后呢，一样一个小一号，一个大一号，在这之间写标签名，那为啥叫字结束 呢？那他自己可以结束，直接一个斜杠结尾，这就叫自结束标签。但是啊，大家注意一下这里呢，注意， 在 html 五中，单标签的这个斜杠呢，是可以省略不写的啊，说在 html 五中，这个单标签的这个斜杠 可以省略不写，所以说呢，以后咱们写单标签的时候呢，这个斜杠杠就没有必要再写了，人家给我们提供了这种方便，咱们就没有必要打破这种方便，听懂吧，哎，那这时比如说 这个单标签有哪些呢？之前咱们应该也见到过一个叫做银妹子标签，一个特步键，对吧？哎，当然这里边根本出现了两个属性，是吧？哎，那个斜杠写了也 没错，对吧？能不写一点毛病没有，建议不写，听懂吧。好，那这就是单标签，那么单标签呢，他不像是双标签，在他之间呢，可以写一些内容，那么单标签呢，需要利用一些属性啊， 去赋予这个单标签的功能，看到吗？哎，单标签需要利用他的属性去赋予一些功能。那么问题就来了，什么是标签的属性？ 标签呢？属性，首先呢，我们说可以为 html 标签啊，设计属性可以为 html 标签呢，设置属性，通过属性为这个标签为标签提供一些附加 的信息也好啊，功能也好等等啊，那么属性通常写在哪呢？属性啊，写在开始标签 中，比如说以这个 p 标签为例啊，我给他来个抬头，随便来一个，对吧？啊，属性回头咱们也会讲，什么标签有什么属性，有什么功能啊，都会讲到的啊，随便写点吧，要，哈哈。啊，那这就是标签的属性 好吧，那说写到开始标签中，那我这单标签对吧，也不分开始标签结束标签了，对吧，那么单标签是不是就直接写到这个标签中即可呀？啊，比如说这是个图片标签啊，来个图片， 来个图片，我去找点资源吧， ctrl c 一下， ctrl v， ok， 行，图片标签的话，然后再找一妹子下有个一点 gpg， ok， 好吧，哎，那这就是标签的属性，单标签可以利用属性啊，为他赋予一些功能，然后执行， 是不是就有了呀？哎，那这就是标签以及标签，单标签和双标签以及标签的属性，那么呢，我们发现属性啊，他其实是以这种间值对的形式呈现的，叫二， 说属性呢，以叫见直对的形式呈现对吧？例如属性名等于双引号引起来，然后来个属性 直，然后呢，我们说属性啊，他必须使用双引号引起来啊，属性必须使用 双引号给他引起来。属性值，属性值必须使用双引号把它引起来。那有些小伙伴在写的过程中啊，说不小心把这个属性的值呢？没用双引号，用这个单引号引起来了，我们看看效果啊，行不行？这个这个太智能了，还不太好用呢， 注意说我没写这个。呃，双引号我就不小心写成了单引号，看看行不行呢？一直行，哎，发现还行，对吧？没啥特别的，正常显示了。那我们检查一下过来看。 那么实际上浏览器解析的时候把它变成了双引号，为啥呀？哎，之前说了，哎，如果我们错的不是太严重的问题，是不是浏览器会按照他认为正确的方式给我们修正啊，只不过人家给我们修正了， 但是我们更强调了，我们不能依赖于浏览器的修正，我们要给浏览器更明确的指令。 好吧，哎，因此呢，我们说那属性，除此之外一个标签呢，其实是可以有多个属性的，一个标签中可以有多个属性，说每个每个属性之间以空格隔开， 即刻，比如说啊，这个一妹子图片这个呢，除了这个标签，我再来一个啊，再来个抬头标签， 说今天天气不错，挺风和日丽的，看到八个姐姐见心情挺好的，好吧，嗯，那么这一执行对吧？哎，今天天气 不错，挺风和日丽的，鼠标往上一放，哎，他不让我选，对吧？看到八哥姐姐姐心情挺好，好了，开个玩笑。所以说呢，说一个标签中其实可以有多个属性，每个属性之间以空格隔开即可， 那么这个就是标签的属性，那标签在使用的过程当中也会有一些注意的地方，标签的注意什么呢？第一个。那就是 第一个呢，就是标签啊，是可以欠套的，但是不能交叉欠套。说标签可以欠套，但是 不能交叉欠套，什么意思呢？比如说我们随便来一个吧。嗯，来个叫 div 标签，先别管标签是什么作用啊，然后这里边呢，我再欠套一个 p 标签，然后这里写点内容啊，这是完全没有问题的，就是标签之中可以有其他的标签，这叫标签的签套啊，这是正确的写法，但是呢，我们说他不能交叉签套，什么意思呢？咱们再来个错误的写法， 做的鞋法。呃，交叉指的是，呃，一个 div， 一个 p， 然后呢？又一个 div， 然后又一个 p， 这是不是交叉了呀？哎，那这时我们执行一下，看看效果，哎，好像也显示了，对吧？也显示了点内容，那这时我们再去检查，检查以后过来看看刚才那个错误，下边 看 div 里边是不是有一个屁啊，然后外边是不是也有个屁啊，对吧？也就是浏览器是不是又按照他认为 正确的方式给我们修正了呀？但是他认为正确的确实不是我们想要的，对吧？他解析多出来了一对 p 标签，那么实际上对吧？他是怎么解析的？他是先解析， 解析的什么呢？呃，解析一对 div 标签，发现，哎，这里怎么只有一个 p 标签，没有结束标签呢？他在这里给你补一个 p 的结束标签，然后又一解析这说，哎，这 p 标签怎么只有个结束标签，没有开始标签呢？他又在他前面又给你补了一个开始标签，但其实并不是我们想要的， 好吧，所以说标签可以签套，但是不能交叉签套，那么标签呢，必须正确的关闭啊，比如说这个标签啊，你忘记写关闭标签了，那这时执行明显是不是又不是我们想要的了？虽然说，呃也显示出 出来了，但是浏览器是不是又给我们修正了呀？注意看他这个哈哈的 p 标签，把我这句话和这个图片全给包含在了 p 标签里边， 对吧？因为他也不知道结束标签应该加在哪，看懂吧，所以说必须正确的关闭，不要依赖浏览器的修正。 第三个，那就是 html 啊， html 五标签呢，大小写不敏感，但是建议小写，也就是说，实际上这个标签你用小写，你用大写的，其实也可以， 对吧？也可以，但是呢，解析的时候呢，他依然解析成了小写。所以说呢，大小写其实并不是很很敏感，我们发现整个 html 五， 他的语法格式都不是特别的敏感，但我们不能乱写好吧，好，那么以上呢，就是对于标签的一些减少。

在了解完页面结构的知识之后啊，我们就可以来看一下 html 标准中专门用来给这种页面元素标签打组嵌套做结构用的这些标签了。 这里呢，我把相对常用的一些结构化的标签啊，大概罗列成了三种啊三类，那还有一些其他很不常用的，那我这里就不展示了。那这种专门用来做结构的标签呢，它有一个典型的特点， 就是跟之前我们学过的那些专门用来展示包裹文本的标签不一样的地方，就是这些标签，这些结构化的标签它是没有任何的特别的样式的一个效果的， 我们可以把这些标签直接用来包裹文字，然后我们看一下他在这里展示出来的就是完全都是一模一样的一种最普通的一种效果， 你可以把他们理解成就是和设计软件中的这种组是一样的，他组这一层呢，默认是没有任何的一个样式效果的。 所以对于这种页面元素来讲，这种结构化的标签，在没有特意的去做一些样式的设定之前呢，他都是一种透明的状态，我们在页面上其实是直观的是看不到这个元素的存在的。那这些标签呢，我们把它分成了这三类，那这三类呢，其实也是比较好理解的。 像这种常规结构啊，其实就是任何页面都有的一种结构，那基本上所有的页面呢，他都会有导航，都会有头部这些，还有一个页面的主要区域，还有页脚。 那像这种文章结构的话呢，其实主要是针对于大量文字内容的那种偏文章一样的这样的一些内容页面展示的时候用来做结构用的，那像这个通用呢，就 是跟我们文本里面的类似于那个 span 那个标签，这里的任何一个你都可以用 div 这个元素来代替。那这里呢也给大家列举了一下，就是我们展示的这些标签，它的一个从语意上来讲应该用在一个什么样的地方，你这里呢？你可以自己暂停 稍微看一下。那我们这里呢就去看两个真实的网页，通过这个真实的网页来了解一下，这些标签大概是用在一个什么样的一个地方， 比如说这样的一个大疆的一个页面，那大疆的一个页面的话呢，其实你看像这个头部的这个位置，其实他就可以最开始用这个 header， 这个 header 大家要注意啊，跟我们这里的这个 header 是两个标签，这个不要弄错了。那我们看到这个大江的这个页面呢，其实像顶部这种导航栏的区域，其实他最 合适的就是用一个 head， 就这个头部的标签先做一个整体的一个结构，然后呢他的这个内部的这标签，内部的这个导航栏的这些元素就可以用，就可以用这个 knife， knife 这个标签去包裹， 然后像他这个页面的整体，整体的一个内容就是他页面当中这些核心的展示的内容，整体这些所有东西其实都可以用最外层用一个这个命元素，因为就是表示页面的主要内容的区域，用这个命元素来进行一个包裹， 然后像这个页面当中这个底部这里这种就其实就是相当于是一个页角的一些内容的一个区域，它呢整体就可以用这个 footer 来进行一个包裹，所以其实很多的页面都可以大体的分成这样的几个结构的， 然后像这篇这样的一个页面的话呢，你就会看到这里其实会有很多的这种文字内容，这更像是一种文章的结构，那像这样的一个整体的一个结构呢？它的这个内容区域呢？其实我们就可以用什么用这个 article 阿迪口这样的一个标签来包裹啊？当然你也可以在他外层包裹上一个命运，对吧？因为这个阿迪口是属于这个页面的主要内容区域的，所以说为什么我们说这些是常规的结构，然后这里是偏向于文章的结构， 然后这在这个文章 article 里面呢，如果我们在这里面有很多不同的区域，你看它这个核心的内容区域呢，用这里比如说这个 section 来进行分块，然后呢它有一个叫做 aside， aside， aside 的话呢，其实我们就可以看到这旁边的这些东西， 你就可以用什么 aside 这样的一个呃元素来进行包裹来进行嵌套，嗯，包括这底部的这些跟贴的这种评论区，你也完全你可以用这个 aside 或者用 section 都是可以的。如果你实在找不到这个合适的这种羽翼化的标签呢，你就直接用 div 也是可以的。 像这种结构化的标签啊，其实他的具体的一个选择，他的这个根据语意化的选择呢，其实没有那么严谨的，很多时候呢，你甚至可以基本上全部都用 div 来做啊， div 来做都没有任何问题。 所以像我们很多时候你会发现，可能有些网站他顶多就有个命，或者有个什么 head， 有的复特，然后其他的呢？全是 div 啊。那因为像我们的这个页面当中，其实很多这种板块内的这种小元素，小结构，这些内部的这些子集，再包括他内部的子集的话， 这些嵌套的元素其实没有具体的一个羽翼化标签是可以用的，所以像这些内部的元素，内部的结构基本上全部都是用 div 来走的。 所以你会发现很多的网站其实他除了最外层的几个结构，可能会用一些羽翼化的标签之外呢，其实内部的更深层的结构，他们欠套打组的话，全部都是用 div。 所以很多时候我们再去用这个结构化的标签的时候呢，其实不用那么纠结，你只要根据这个标签的语意，你明确知道可以用在这里的，你就用，你不知道怎么判断的话呢？你反正随便的都用 div 都是没有任何问题。那最后呢，跟大家说一个，就是有些同学可能注意到的一个问题， 就是我们在一开始去展示的时候，你会发现我把文字的这样的一个内容直接的放在了这种结构化的标签里， 然后呢这个文字也是正常的能展示出来的，所以其实像这种结构化的标签，他并不是只能去放其他的标签，他也是可以放文字的啊，你可以把文字这些内容理解为是一种特别的标签，特别的元素，不用怀疑，说这个文字他只能放在文本类的标签里面， 他其他的标签内容你想放也是可以放的，只是说很多时候不是那样用的而已。你像如果我们常规正常的去想把文字放到一个 这样的一个结构化标签里面呢？一般来说至少都是要给他去包裹一层专门的这种文字类的这样的一个标签的，这样才是一个比较标准、比较合理的一个用法。

好，接下来呢，咱们带同学们来去学习有序列表的相关内容，那有序列表啊，他的意思就是表示在网页中展示出一组有顺序之分的列表，比如说咱们常见的排行榜， 那么排行榜咱们都知道，他里面的每一项呢是有固定的顺序要求的，第一就是第一，第二就是第二，暂时不能随意调换他的无位置的。 那现在啊，咱们想在自己的网页中也展示出一个排行榜中的效果，那咱们应该怎么做呢？哎，那接下来老师就要通过语法的介绍和代码的撞写，带同学们感知一下有序列表如何去完整他。 那咱们首先先来看右图所示的成绩排行榜，那咱们会发现成绩排行榜他明显是一个有顺序的列表，咱们要使用有序列表的方式 来去展示，那么他应该由哪些标签来组成的呢？哎，首先呢咱们有序列表的整体，咱们通过这个标签叫做欧要标签来表示， 然后整体里面也分为每一项，那每一项咱们用的是叫做立标签来去表示的，他们俩也是一个标签的组合。好，标签明确了之后，接下来咱们就来试一试如何在咱们自己的网页中也把这样一个排行榜呢展示出来。 这边老师切换到咱们的五个 sk 中去来写咱们的代码了呦。首先第一步咱们还是从上往下 x 去分析第一行成绩排行榜，他属于整个的标题，那还是咱们的老朋友叫做 h 一标签，他是叫做成绩排行 糖宝好。然后呢再往下来写，下面呢是咱们整个的有序列表了，那有序列表同学们不要忘记了哟，刚才咱们说过，整体呢，是咱们的欧维奥，欧维奥表示有序列表的整体， 然后他里面的每一项用的是另外一个标签，叫做利标签，他来表示有序列表的每一项。 好，那咱们来去书写一下，先写整体，再写每一项整体，写上 ol 这么一个标签，然后每一项咱们写上立标签放在这， 那一共有几个例呢？一二三有三项，那咱们再复制两个出来就可以了，那咱们写上内容哦，成绩排行榜吗？比如说第一名是小姐姐，他考了一个一百分，哇， 不错，很棒。那第二名的话呢，是咱们的小帅哥，他考了八十分，嗯，也还不错，挺棒的。最后一个呢叫做小可爱，他平时呢光顾着卖萌，然后呢成绩可能有点落下，他只考了一个六十分，不过也也算低分飘过了。 好，那代码按照咱们的要求写完了之后，我们来看效果呢，和咱们想的是不一样的哦，此时写完了之后， ctrls 保存，我们来去刷新。 哎，咱们会发现，我们最终所展示的效果和咱们想要的效果就是完全一模一样了。而且同学们通过对比咱们的代码和展示效果，很轻易的就会发现，我们有序列表存 咱们游戏列表中的每一项，咱们并没有写对应的序号，但是浏览器呢，会默认帮咱们在前面的每一项之间 加上咱们的一二三这么个序号，来表示他内在有顺序的含义。好，那说到了这里啊，咱们就把有序列表的标签和代码的书写呢给说完了，那我们最终呢还有一个小点需要同学们注意一下的，就同学们在实际写代码的时候的一些注意事项， 那这边注意事项同样分成两点，第一点就是 ol 标签，他作为整体，他里面语法中要求只能包含里标签，你不要报其他的元素哦。 那另外一点就是咱们的立标签可以包含任意的内容都是可以的，同学们在写加码的时候呢，需要注意这么一个情况哦。好，说，到了这里，咱们就把有序列表的标签组成，包括特点，包括注意点都说完了，那最终老师 来带同学们进入一个小节环节，那么在小节中呢，准备了两个问题，第一个问题，有序列表有几个标签组成，分别表示什么意思呢？哎， 首先有序列表的整体叫做 ol， 每一项叫做立标签，他俩是一个组合的用法。第二个注意点就是咱们有序列表的签要规范是什么呢？哎， 首先整体是 ol， 但 ol 中要求只能放什么放立标签，而立标签呢，它里面可以放任意的内容都是可以的。好，说到了这，咱们就把有序列表介绍完了呦。

好，接下来呢，咱们来带同学们介绍一下媒体标签中的音频标签，那咱们这边所说的音频标签呢，它所针对的场景就是能在咱们当前的网页中插入一段音频，也就是同学们平时所知道的音乐。 那么如果咱们想在自己的网页中也能播放一段音频，咱们可以怎么样去做呢？哎，其实很简单，咱们只要学会音频标签的代码呢即可，咱们音频标签的代码呢，其实就是凹丢这么一个标签， 然后呢，咱们能通过凹凸有标签身上的相关属性来控制他的一些相关效果。好，那么接下来呢，咱们就来带同学们 通过实际的代码来去演示一下。那么在这里呢，老师准备好了一个小的网页， 现在呢，咱们想在当前的网页中去播放一段音频，那么首先呢，咱们就得应用到刚才所讲到的音频标签，叫做 out you， 单词是 a o d i o， 写完之后按下太普键哎，会帮咱们自动生成一个凹凸标签，并且咱们会发现凹凸标签是由两部分所组成的，它属于哪一类标签呢？哎， 对的，属于咱们的双标签，并且同学们会发现在凹凸标签的身上还自带了一个 src 属性， 这个属性咱们之前见没见过呢，哎，完全是见过的，咱们刚刚在学习以魅击标性的时候呢，咱们是见过他的，同理，咱们这边所看到的 sos 属性呢，他里面填写的也是一个路径， 只不过咱们凹这个标签要找的可不是图片哦，他要找的是咱们所需要播放的音频，填写的是音频的路径。 那么正巧呢，咱们在当前的文件夹中，老师已经准备好了一个 miut 点 mp 三这么一个文件奥，咱们当前的网页呢是十四音频标签点 htm， 很明显会发现当前网页和目标文 文件他俩是在同一个目录下面的，属于咱们刚才所讲到的相对路径中的哪一种情况呢？哎， 对的，是咱们刚才所讲到的同级目录的情况，咱们只要直接写上点杠，是有对应的提示的，找到当前目录下面的 miss 点 mp 三即可。好，路径写正确之后，那现在网页中应该能播放咱们的音频了呀，此时来去刷新，哎，刷新刷新， 咱们会发现当前网页中有播放咱们的音频吗？明显是没有的，那这是怎么一回事呢？哎，那这里呢，同学们就需要注意一下了， 咱们平时比如说使用一些播放器来播放音乐的时候呢，咱们会发现并不是软件一打开咱们就播放音乐了，而是呢，咱们需要点击一些播放按钮啊，进度条啊等一些东西，他才会播放的。 同理，咱们想在网页中播放一段音频呢，咱们其实也需要相关的播放控件才能完整的控制， 那么如何设置咱们播放的空间呢？哎，其实很简单，咱们只需要使用他身上的一个属性叫做 ctus 呢就行了， 他就是来控制显示播放的空间的，那么咱们就在 otel 标线的身上写上 ctuse 呢就行了。而且 这边告诉同学们哟，咱们针对于标签身上的一些属性呢，虽然说感觉比较长，但是呢都是有提示的，同学们只要眼熟他，选对人呢就行了。那老师这边来选择当前的 ctrl x 点击一下，哎， 咱们会发现一个比较特殊的地方，咱们之前比如说想设置抬头属性的时候呢，咱们写上抬头有提示，咱们点一下，他后面呢是帮咱们自动普全了等于号和引号表示呢，咱们要记得写抬头属性的属性值 啊，咱们刚才在选择 ctus 的时候，他帮咱们补全了等于号，引号吗？明显是没有的。那这呢就是 let 想告诉你，咱们 ctrl 这个属性，他所对应的属性值呢是可以省略的，咱们不写属性值呢，他同样是有效果的，这一点呢，同学们稍微注意一下哦，好， 写完了肯救字属性之后，咱们再来看效果哦，咱们来去刷新哎，当前的网页中就出现了咱们很熟悉的播放你哦，进度条，时间呢等等之类的，而且此时老师点击播放你哦， 哎，咱们会发现当时的音乐完全是可以播放的，除了可以播放之外呢，咱们还可以 拖动他的进度条放到后面去，而且呢还能控制咱们的音量变小啊，变大啊，完全都是可以的。 好，那么学会了咱们 ctrl 的属性之后，咱们已经能完成基础的音频播放了。那么下面呢，还有两个属性也给同学们拓展说明一下。 比如说呢，有些时候咱们可能会发现，有的网页呢，网页一刷新立马会播放咱们的音频， 那针对这个功能来说呢，是咱们常见的自动播放的功能，但是呢，默认来说，咱们所写的音频刷新之后呢，是不会自动播放的。如果同学们想自动播放呢，可以使用这么一个属性叫做 凹凸不累，那么咱们就在标签身上加上一个凹凸不累哦，选择这边的提示就行了，同样没有帮咱们补全，等于号引号表示属性值呢，是可以省略的， 那么写完凹凸不累之后，咱们来看能不能自动播放哦，此时来去刷新哎， 刷新刷新咱们会发现并没有自动播放，那针对这一个情况来说呢，老师需要解释一下哦， 咱们奥杜普类这个属性呢，确实是来控制自动播放的，但是呢，他部分浏览器是不支持的，比如说谷歌浏览器中就将这个效果呢给禁用掉了，但是呢，咱们其他浏览器有一些是支持的，比如 说给同学们演示一下哦，咱们在 vsk 中右击选择其中的欧喷音阿泽， 选择其他浏览器，打开这边呢，咱们就选择一个 a 浏览器就行了，咱们点击一下， 点完了之后呢，下方问咱们是否允许住址的内容，咱们点击允许，那此时呢，咱们会发现网页一刷新，他这边就会自动帮咱们播放了，对于 a 浏览器来说呢，完全是没问题的。 好，那正对这个效果来说呢，同学们大概知道就行了，这个属性呢，有一些浏览器支持，有一些浏览器不支持，那咱们可能会说这个属性呢，存在一定的坚 荣幸问题。好，除了咱们奥特普类需要同学们认识的之外呢，咱们播放音乐的时候还可能会出现这么一个效果，咱们音乐播放完了之后，咱们会让他循环不断的重复播放，但是咱们 当前的效果呢，咱们点击播放，将进度条放到最后，之后，我们来看默认会不会自动播放哦，五六七， 发现一遍播放完之后，他就直接停下来了，如果同学们想让他循环的不断播放呢，咱们是要借助于一个属性来去完成的， 这个属性呢就是这边的路 pa 循环播放，那此时呢，咱们找到当前的标签，加上一个路帕 属性，洗完之后来去刷新。此时咱们再来播放，将进度条放到最后，咱们再来看效果哦，来放手 五六七，哎，他还是能循环不断的播放的好。那说到这里呢，咱们就带同学们介绍完了音频标签的常见属性， 那最终呢，咱们再给同学们补声说一个小的注意点，注意点就是咱们目前音频标签呢，他只支持三种格式的音频， 比如说 mp 三 wav 以及 ogg 格式的，因为咱们浏览器它毕竟不是一个专门的音乐播放器，所以呢， 他仅支持这三种常见的格式。而推荐同学们在之后使用应聘标签的时候呢，以咱们 m p 三格式为主呢就行了。好，那最后呢，咱们来带同学们进入小阶环节。首先第一个问题， 如果咱们想在网页中插入一段音频，咱们需要使用什么样的标签呢？哎， 对的，就是咱们刚才所使用的 autu 标签，哎呦， dl 好。第二个问题， 咱们音频标签有哪些常见的属性，同学们还记得吗？哎，对的，咱们音频标签呢，常见的有这么几个属性，第一个呢， ss c 表示音频的入境，第二个呢， ctrl 表示显示音频播放的控件，还有咱们的凹凸不类自动播放，但是呢，他存在一定的兼容性问题，有一些浏览器呢，他并不支持， 还有咱们的 apple 表示循环播放的效果好。说到这里呢，咱们就带同学们介绍完了音频标签的相关内容。

好，接下来呢咱们给同学们拓展补充说明一下空链接的相关使用。那么咱们所谓的空链接呢，说白了就是在咱们 a 标签的和属性的属性值中，只填写上一个井号就可以了。 那么针对控链机来说呢，他在开发中存在着两个小功能，首先第一个功能就是他可以做到点击之后回到网页的顶部。 第二个作用呢就是咱们在开发中如果是不确定该链接最终所跳转的位置呢，咱们会先使用井号空链接来占一个位置。好，那这边呢咱们来带同学们挨个去演示一下。首先咱们来看 看一下回到顶部的这么一个功能，那么回到顶部的效果呢？咱们在网页中还是蛮常见的，比如说当前的神秘官网，一旦咱们将网页滚到最下面去的时候呢，咱们会发现 网页旁边这一块呢，会出现一个回到顶部的按钮，一旦咱们鼠标点了一下按钮之后呢，他会瞬间来到咱们的顶部。 那如果同学们想要在自己的网页中完成类似的回到顶部的效果呢，咱们就可以使用刚才所讲到的空链接来去实现。 那这边咱们来给同学们演示一下哦，比如说老师在当前网页中多写一点内容，让咱们网页足够长，那咱们写上一个 h e 标签，在这 写上我是顶部的 h e 标签，然后呢在他下面写很多个 p 标签，让网易的内容更多一点， 那咱们写上我是一个 p 标签，在这，然后老师教 p 标签这一行，直接 ctrl c ctv 一直复制一下，将网页的内容复制的足够多。好，写到这里之后，咱们再来看效果哦，此时来去刷新 哎，有了顶部的 h 一以及网页中出现了很多个 p 标签，那么现在咱们的想法就是在最底下存在一个回到顶部的按钮，那这里呢，咱们可以借助于空链接来去实现。空链接呢，说白了就是 在和服中写上一个井号就可以了，文字的内容呢，咱们就写上回到顶部。 好，写完之后咱们来去刷新，现在呢，在网页的最下方存在着一个回到顶部的 a 链接了，而且它的功能也是可以实现的哟，比如说老师，此时一点击， 哎，回到了咱们网页的最顶部，咱们再滚到最下面去，然后再点击回到顶部，同样也是能上来的。好， 那说到这里呢，咱们就给同学们演示了空链接的第一个小功能，点击之后回到顶部的功能。那么除了这个功能之外呢，咱们在之后实际开发 项目的时候呢，空链接还有一个功能，就是当咱们所写的 a 标签并不确定他最终的路径的时候呢，咱们会先写上一个井号占着位置，等到咱们明确了到底要去哪里之后呢，咱们会将这个井号改成正确的跳转位置， 那这呢是咱们在后面项目中比较常见的一个场景，同学们也需要认识一下哦。好，说到这里呢，咱们就带同学们介绍完了空链接的相关内容。

好，接下来呢，咱们来带同学们去学习泰克斯的 arry 啊，文本与标签的相关内容。咱们的文本与标签啊，他所在网页中出现的场景呢，还是比较多的，类 c， 网页中所对应的评论区域啊等等之类的情况，可以让用户同时输入多行文本的，那像这种部分咱们就会使用文本一标签来去完成。 而咱们文本与标签所最大的特点就在于他可以同时用来输入多行文本，而咱们之前所学习到的文本框，他只能输入单行文本，两者是有一定的区别的。 那现在啊，咱们想在自己的网页中也展示出一个类似于评论区域的部分，能让用户输入大段的文字，那咱们应该怎样去实现呢？哎，那接下来老师就来带同学们去学习文本一标签的标签语法 以及代码的实现哦。首先啊，咱们文本一标签，他的标签名是这么一个单词，叫做 tix 的 al 呀， tx 的这个单词呢是文本的意思， alv 啊，有区域面积的意思，合 在一块就是文本的区域，简称文本与标签。然后呢，在咱们文本与标签的身上，咱们可以使用两个属性来控制咱们文本与标签的大小， 一个呢叫做 c o ls cos， 他用来规定了我们文本与标签的可见宽度。那还有一个属性叫做 rose， 这个肉丝属性规定了咱们文捕鱼标签中可见的函数，就是用户同时可以在文捕鱼标签内看到几行文字的效果。好明确了咱们文捕鱼标签的标签语法之后，接下来咱们通过大 版的形式大同学们来感受一下。那我们刚才所讲到的文本一标签，首先它的作用啊，是用来输入大段的文本的，他所对应的标签名叫做凯克斯特艾瑞啊， txt a r ea 这么一个单词， 写完之后按下看不见哎，咱们会发现 vsq 的会帮咱们默认补全这么几个属性价值，其中就有咱们刚才所介绍到的 cos 和咱们的肉丝分别表示可见的宽度以及可见的行数。 好，至于前面两个属性呢，目前咱们还用不上，咱们可以先把它给删除掉，防止他对咱们开发的干扰。好，写完了之后我们来看效果哦，此时咱们来去刷新哎，已经展示在咱们当前的网页中 去了，而且呢，咱们可以往它里面写上很多很多很多的文字，他是能同时显示多行文字的，都是完全没有问题的。好，那么咱们针对于我们与标签身上两个属性啊，也带同学们去感知一下。比如说呢，我现在把这个 cos 可 可见的宽度把它呢给写大一点，假设给他一个六十的宽，写完之后来去刷新，哎，明显就变宽了。然后我想让我无目于标签所展示的高也变高一点，同学们觉得我可以调整他的什么属性啊， 哎，他的高不就是可信的行数吗？咱们可以控制肉丝这个属性的取值来去书写，比如说我把他的十改成三十，咱们去刷新，哎，宽和高都发生了变化。 那么说到这里呢，咱们就带同学们感受到了文捕鱼标签身上的两个属性，同学们大概认识一下。好， 同学们通过代码的形式实现了无名于标签的效果之后，最终呢，老师还有几个注意点需要给同学们强调一下的。第一个注意点就是咱们的无名于标签啊，他的右下角呢，存在着一个功能，咱们可以鼠标按住之后拖拽，改变他的显示大小。 同学们来看咱们写好的文明标签哦，在咱们这个文明标签的右下角这个位置是有两个斜杠的效果在这的，那么当 咱们的鼠标放去之后，会变成一个双线的箭头，我鼠标按住进行拖动，他可以放大以及缩小，自由改变他的大小，那这是他默认给咱们提供的一个功能。好，除六咱们可以拖拽他 大选的功能之外，还有个注意点，咱们刚才也强调过，我们虽然说现在可以通过咱们 xt l 表身上的 cos 和肉丝呢，改变当前文鱼标签的宽和高， 但是咱们在真正手机开播的时候啊，不推荐同学们这样去做的，因为咱们这边想要控制的标签的宽和高，其实已经属于咱们样式层的内容了，咱们说过样式应该通过什么来控制啊？ 哎，通过咱们的 css 来进行实现。所以呢，咱们目前使用 cos 和肉丝改变乌木鱼标签的大小只是一个过度的措施等等。 那咱们后面真正学到四 s 之后，咱们更加推荐同学们使用四 s 四来完成才是最好的。好，说到了这呢，咱们就把文不一标签的相关内容介绍完了哟，咱们的文不一 标签，它的功能是让用户可以实现输入多行文本的效果，标签名是坦克斯的 ar 瑞啊，这么一个单词，他的 cos 属性控制文捕鱼标签的可见宽肉丝控制的是文捕鱼标签的可见函数。 注意点就是文捕鱼标签右下角两个杠，咱们可以鼠标按住拖拽改变它的大小。好，针对咱们实际开发中想改变它的大小，推荐同学们后面使用所学习到的 cs 来实现，会更好一点哦。好，说到了这咱们就把文捕鱼标签的相关内容介绍完了呦。

然后呢他这个 a 标签我们之前还讲过一个非常重要的属性，叫做 target 属性，那 target 属性呢？它其实有几个值？一个是 下划线 self， 这个是它默认值，就是在它自己这个标签页打开，然后 lank， 我们之前讲过的就是在新的标签页去打开这样的一个网址这样的一个页面，那还有两个呢？一个叫 top， 一个叫 parent， 那这两个词的话呢，其实是跟这个 iphone 有关的，那 iphone 的话呢，相当于它是包裹在一个页面里面的另外一个页面嘛，对吧？那如果你在这个 iphone 这个页面里面有一个 a 标签，它是这种，它给是种 top 的话呢？ 然后你点击那个 a 标签的那个元素，那它新打开的页面，它其实是会在包裹这个 iphone 的 这样的一个外层的这个页面中打开，然后这个 top 是最顶层的这个页面，然后 parent 就是直接包裹那个 iphone 那个元素的那样一个页面，在那个页面中去打开。所以这两个呢，我们是很少用的，主要是这两个，那还有个属性呢，叫做胎头，这个就比较好理解了啊， 我们可以来看一下，其实就是这样，就是你鼠标放在这个呃，被 a 标签包裹的文字啊，或者元素上，他就会显示出他对应的这个胎头的这样的一个文字，就是这样啊，非常简单，相当于也是一种附加的一种信息说明啊。 然后呢这个 a 标签上还可以用一个叫做 i d 的这样的一个属性来配合实现一些特别的一个效果。那 i d 这个属性呢？其实是并不是这个 a 标签特有的，很多元素标签都可以 用 id 这个属性，那 id 这个属性它的英文是 identifier， 是一种就标识标识，或者是说叫做身份认证 这样的一个意思，认证。因为像我们平常说那种身份证啊，身份证其实就是 id card， 英文就是 id card， 那像身份证这个东西，他就是每个人都是唯一的一个编号的，对吧？那所以这个 id 这个属性呢，他有个特点，就是他可以在很多元素上同时设置，但是他的值呢，是必须是唯一的啊，就一个 htm 文件里面，你要给一个元素设置这个 id 的这个属， 那他的值必须是唯一的。就比如说我给一个元素设置了一个 id 的一个词，比如说叫，呃，叫一二三， 一二三啊，那我另外一个元素我也要设一个 id， 值可以设，但是你这个值就不能一样，哪怕你就是给他改个数字，就改个字符， 但是就是不能一模一样啊。那这个东西的作用呢？我们后面会更多的去给大家介绍，但这里呢，我们就给大家演示一下他配合一个 a 标签有一个什么作用。 那我们这里看到我这里通过这个 css 给他去设定了一些基本的样式，就把它页面用加了几个色块啊？那加了几个色块之后呢？我在这几个元素，那这四个色块呢？其实是四个元素，四个 div， 那这四个 div 呢？他每一个都有自己的一个 id 的一个值，第一个是 di v 一，第二个 div 二，第第三个 div 三，第四个 div 四。那我们这里呢有一个 a 标签啊，它这里呢写了一个 div 二，那这里的这个 href 呢？我把它设置为这样的一个值，叫做井号，然后 div 二啊，也就是 这个值就是这里面的这个 id 值，那前面这里呢加了一个井号，然后呢当我去点击这个 div 二的时候，大家注意看啊， 他会这个 div 二，相当于会这个页面会自动的往上跳，跳到哪里呢？这个 div 二这个元素啊，这个元素刚好就在这个页面的最顶端的这里， 那假如我把这里换成一个 div 一，然后这里呃写改成 div 一啊，那这里呢？这个改这里只是为了让大家这个文字跟这个我们要跳的这样的 一个元素的一个 id 值对应起来，你一看就明白了啊，那关键呢，其实就是这里面这个值，然后我们这里改完之后呢，我们再点这个，哎，你会发现他就刚好就是跳到这顶部这里了，这个 div 一的这个元素的顶部刚好会跳到这个页面的这顶部的这个位置， 所以这个 a 标签呢，其实是可以跟这个 id 可以配合使用，形成这种可以跳转到页面某个为元素位置，让这个元素就出现在页面顶部这样的一个效果。 所以这里关键的呢，就是这个 a 标签的这个 h、 r、 e、 f 的值，前面要有个井号，然后呢后面跟的就是你要跳转的这个元素的这个具体的 i、 d 的一个值， 所以这个是他的一个使用的一个方式，那这个方式呢，以后你可能会在某一些就是页面的 这种，比如说目录的功能去使用到，因为你想点击某个目录，然后就让他跳转到页面的相应的位置，就可以利用这样的一个功能，这样的一个方式去实现。那像这个功能的话，其实我们其实在跳转到其他页面的时候，也可以使用类似的一个效果。那比如说我在这里把这样一个 staff 这样的一个页面跳转的个链接地址给他加了一个井号 div 二，然后呢我在这个 staff 的这个 htm 里面呢，同样也给他去修改了呃，添加了这些元素，然后我这里这个可以删掉啊， 然后我这里跳转过来之后呢，他会立马就就跑到这样的一个 div 二这样的一个元素位置，也就是这个元素他会跑到这个页面的跳转过来，切换过来页面的这样的一个最顶端的这个位置，我们可以来试一下。啊。 啊，你看他这里是在这样的一个情况啊，这里有这样一个情况，你可以看到当你使用这种方式去跳转页面，或者说当前页面的这样一个呃跳转位置的时候呢， 他这里这个地址都会变成对应的这样的一个跳转的一个值 a 标签的话呢，其实主要的就是这些使用方式了。

好了，大家，那么接下来呢，再跟大家说几个关于表格结构的标签啊，表格结构标签， 我们说为什么需要这几个表格结构标签呢？那又回归到之前咱们讲的那个羽翼画标签，对吧？所谓的羽翼是不是叫为为整个页面的内容富一些含义啊？那么其实表格也是一样的， 现在我这个表格对于浏览器来讲，他仅仅那就是个表格，对吧？哎，那么说如果我这个表格啊，特别的长，里边的数要展示的数据特别的多的时候，那么对于浏览器来讲，那我们说那哪一部分是表格的头部部分， 哪一部分是表格主体的部分，哪一部分是表格底部的部分，那这时我们是不是要明确的告诉浏览器呀？哎，否则的话，没有这些 一句话标签的话，那整个就是一个表格，我要分开为表格去布局的话，没有办法区分了，对吧？不知道哪是头部，从哪到哪是主体部分，从哪到哪是底部，因此这时呢结构和表格结构化标签就有了，那其中有三个，那第一个呢叫做踢 害的，踢害的呢就是表格的头部，然后呢踢包的叫做表格的主体，还有个叫踢负的叫做表格的底， 也就是为表格各个部分赋予一些含义，让浏览器更明确，告诉浏览器哪表格的哪一块是哪一部分， 听懂了，哎，就赋予了一些羽翼，赋予了一些含义。嗯，那么在这几个里边呢，有一些比较重要的点，大家千万要注意， 有几个注意的点啊，叫注意，叫注意，注意，第一个呢，注意啊，这一个非常的重要，对于我们后续布局的时候呢，是有很大影响的，就是什么呢？我们说 table 的指标签，指标签并不是叫 tr， 那么大家看现在我们写起来发现，哎，我这个 tr 是 table 的指标签对不对？但是我要告诉大家， table 的指标签啊，并不是 tr， 默认是 t body， 默认是 t body。 那小伙伴们就想说了，哎，我们现在 tr 是配不到指标签，我们一执行也成功的显示并执行了呀，那怎么就是 t body 呢？那这时大家注意我右键检查，我们去找我们的表格，对吧？这是我们设这个 双肩的表格吧，打开注意看 tabo 的指标下是 t bode， 然后呢 t bode 里边才有一个个的 tr， 也就是行， 听懂吧。哎，所以说 table 的子标签啊，并不是 tr， 默认是 tbody， 也就是以后我们要找标签的时候， table 子标签是 tbody， 然后 tboy 的子标签再是 tr， 搞定吧。 ok， 那么知道了这个以后，我们就可以利用这几个结构标签为我表格的各个部分赋予含义了，比如说我要把这一部分设置为叫 thid 啊，让他叫 作为表格的头部啊，叫头部区域，然后呢再来一个 t body， 嗯，我要把这一部分呢，设置为表格的 主体部分，哎，这一部分设置为表格主体部分，然后呢，我们再来个 tf 的 啊，再来个底部踢付的，然后呢，我们再来踢付的话，先来一个来一行，对吧？然后里边踢 d 来点什么呢？呃，比如说有的时候我们表格底部，比如说有一些类似于这样的，呃，这样的内容，比如说来个合计，然后一一一千九百九十九， 是不是可以啊？哎，那这职业执行那，那这表格倒是还是原来的表格，对吧？但是对于浏览器来讲，是不是他更明确了呀？他知道了哦，这一部分是表格的头部，这一部分是表格的主体， 这一部分是表格的底部啊，就这个能搞定吧？ ok， 那么还有一个注意的地方是什么呢？就是这个 t 亥的 和踢腹的呀，他们的位置是固定的，就是什么呢？二、叫做踢害的中的内容啊，永远在表格的最上方，那么相应的呢，叫做踢负的中的内容啊， 内容永远在表格的最下方，什么意思呢？比如说现在呀，我不按照顺序写了啊，我把踢付的给他放到踢害的和踢包的之间， 看懂吗？哎，我把 tf 的中的这个合计的内容啊，给他放到了 that 和 t 包给之间，就是位置给他变换变换，那这时显示出来的表格是什么样呢？注意他是不是依然在底部啊，哎，所以说 that 永远在最上边，踢富的永远在表格的最下边啊，不管你书写的位置是怎么样的， 听到吗？哎，那这几个就是表格的结构化标签，就是为表格的各个部分赋予了一些含义， 听懂吧，大家再来。除了这个含义以外，他还有一个功能，大家注意啊，这个结构标签除了这个含义以外啊，他还有一个功能，什么功能呢？ 就是为了打印的时候，因为我们说表格他就是用于展示数据的一些手段，对吧？那么我说，那他展示数据，有的时候数据是不是就涉及到打印呢？那么此时代看啊， 那我要是长表格呢，他才有效果，我这个表格比如说非常的长，嗯，这时执行一下，注意看是不是表格现在非常 长啊，哎，注意这里有个线，这个线呢实际上是浏览器显示的问题，他知道你这是可以用于打印的，你看这个，呃，火狐浏览器是不是就没有那个呀？啊，这是显示效果啊，以后呢显示效果咱们不用过多的关系啊，那么他好处在哪呢？ 现在这个表格一直行啊，这是不是表格的头部啊？中间是不是都是表格的主体部分呢？最下边这个合计是不是叫表格的底部啊？哎，那这时假如说我打印啊，右键我一点打印， 大家注意看，这一页肯定打不完，在 a 四纸上一页肯定打不完，这一打印表格的头部，第一页有表格的底部是不是有啊？那这时我要打印第二页的时候，表格的头部也有表格的底部，能感受到他的好处吗？哎，比如说如果 说没有这个结构标签的话，我把它复制一份啊， 行，我我在这个配置里，原来的我还给大家留了，我给大家看一下效果，我如果把这几个结构标签啊，我都删掉啊，什么 tf 的， thigh 的我都给他删掉，然后呢，咱们再对比一下，删掉， 对比一下，注意看，现在这是个表格，没有没有这个主体什么的，不这个区分了，你看这个负的都已经跑上面来了啊，没有什么头部底部主体的这个区分了啊，那这时候我要是打印的话， 你看哦，第一第一页还好说，有一个表头我们知道哎，这一列是姓名，这一列是你性别，这一列是年龄，当你打印到第二页的时候，大家看第二页有表头吗？我们比如说这都是这种数据的话，我们知道这一列这是什么东西，这一列什么东西？这一 是什么东西？然后也没有什么底部，看懂吧？而我们原来的表格的话，大家看，哎，每一页上都有头部和底部， 更人性化，对吧？就是说体验更强一些，好吧，行了，那么以上呢，就是关于表格的结构标签，给大家扩展了一下啊，一个好处就是为表格各个部分赋予了含义，另外一个能够利于答应好了。

好，接下来呢，咱们来带同学们学习图片标签的抬头属性，那咱们的抬头属性呢，他所对应的属性值填写的是提示文本， 那么提示文本的作用呢，就是当咱们鼠标悬停在图片上时，才显示的文本，那么具体指的是一个什么样的效果呢？哎，同学们来看一个实际的网页， 那么这一个网页呢，是咱们百度的首页，在这里呢是有相关的新闻在这，咱们很明显会发现在这一块区域呢，有相关的图片给咱们展示了出来，那咱们会发现，一旦老师鼠标放在图片上面，等 一会，这叫做鼠标的悬停，就是悬在图片的脑袋上停一会，一旦咱们鼠标悬停在图片上时呢，很明显会发现在鼠标的右下角区域呢，给咱们展示出了当前新闻的标题，在这 同样下面也是一样的，咱们鼠标放在图片上悬停一会，同样也展示出了相关的标题， 那么针对于这个效果来说呢，就是咱们所讲到的抬头属性的效果。那么现在呢，老师的想法就是， 咱需要咱鼠标放在自己的图片上时呢，也能展示一段提示文本出来，但是现在有提示文本吗？很明显是没有的，因为呢，咱们还 并没有设置抬头属性。那如果同学们想让自己的图片中也有提示文本呢，只需要在自己的一面积标签身上加上一个抬头属性呢就可以了，然后往抬头属性的属性值中填写所需要展示的提示信息， 比如说老师随便写上一个标题，写上震惊，然后小猫咪竟然会干这种事， 什么事呢，咱们就不说了，好，用标题党的画风起了一个标题之后，那我们再来看当前图片有没有变化哦，此时来去刷新， 然后一旦老师鼠标在图片上宣停一会出来哎，当前所写的抬头属性的 属性值提示文本呢，就出现了。好，说到这里呢，咱们就带同学们演示了一下咱们抬头属性的相关操作。 那最后呢，咱们再给同学们介绍一个有关于胎兜属性的注意点，注意点就是咱们胎兜属性呢，其实不仅仅可以用于图片标签本身， 他还可以用于其他的标签的，比如说咱们今天所学习的 h 标签啊， p 标签啊等等之类的，都是可以去使用的。那这里呢同样也给同学们演示一下， 比如说老师在下面写上一个 h e 标签，放在这写上内容，比如说我是一个一级标题，然后同样也给 h e 标 先设置一个太多属性，写上这是一个 h 一标签，那么写完之后，咱们来看有没有太瘦的效果哦，来去刷新， h 一标签已经展示出来了，而且鼠标悬停在 h 一上时呢，同样也会显示咱们的提示文本。 好，那说到这里呢，咱们就来同学们介绍完了胎兜属性的相关操作，同学们需要知道，咱们胎兜属性所设置的提示文本是当鼠标悬停之后才会去展示的哟。

好，我们再来了解一个标签， bad， 那么这个标签呢，它是定义的一个容器，它也是一个插件， 主要用来嵌入外部应用或者一些互动的程序啊，这些所谓的这些东西都称之为常见， 和我们的 object 啊比较类似啊，其实呢，功能几乎是一样的，他们也能够嵌入各种多媒体啊，比如之前所说的啊，音频和视频。 好，我们看一下如何来做。呃，这样吧，我们看 gmu 啊，跟我们怎么做呢？ 可以使用这个插入的菜单，也可以使用这个面板里面有个插入， 那么在 h t m l 里面找下面里面有个插件， 其实我们的 inbide 啊，这个中文的意思啊，它就是嵌入的意思啊，原理就是嵌入，那么这里面呢，把它翻译成插件，我们看一下真名，我这个插件它会产生什么样的代码啊？首先呢，我们来嵌这个嵌入一个 m p 三 啊，他显示的是这个图标。好，那么保存一下，先看效果， 谷歌，没问题，已经播放了 哎，这个火壶有吗？ 火候没显示对吧？然后 r e r e 也出现了这个面板。好，这个面板呢比较小得，那我给它弄大一点好，选择它 ctrl f 三，打开属性面板，这里面有个宽度，比如三二零，再保存一下。 刚才呢五哥，没问题，那么 i e 呢，已经显示出来一个控制条，但是播放不了啊，应该是能够播放的，这个和我的 i e 这个版本有关系，你们的 i e 啊，极有可能能够播放， 有这个空支条呢，就说明他已经能够识别出当前的这个对象是一个什么类型了。同时呢， 我们可以看到火狐也识别出来了，单机播放也可以播放，哎，这个控制条非常漂亮啊，很漂亮， 那么三者啊，都是支持的啊，除了阿一啊，阿一有犹豫版本的原因，那么它产生什么代码了呢？我们可以看到产生 inbide， 然后呢，结束了一个 inbide， 还有哪些属性？刚才呢，在我的 ppt 里面有有宽有高啊，另外还有个 src， 这个 src 就是指明了当前的这个资源， 它的一个 u r l 可以是本地的，也可以是我们这个一个绝对的外部资源。那么其实呢，还有一个啊，还有一个类型， 就是 top top 这个属性， top 属性呢，就指明了我们这个资源的啊，卖这个类型， 那么比如像当前的这个，它是一个 m p 三啊，就应该是 audio 斜杠 m p 三啊，看一下对这些东西有没有影响。 好，五个 没有影响，没有影响啊，阿姨呢，依然是那个丑样啊， 去吧。 好，那么当然了， 除了我们的这个音频，他还可以嵌入我们其他的一些类型啊，注意呢，呃，坠落呢，自动产生的代码， 可是前面有个提示的啊，这东西他说多了一个斜杠白，他认为呢，应该是一个单标枪，是这样的， 这个时候就没有这个提示错误了，其实呢，单标签啊，双标签都无所谓啊。好，那么我们看一下他还能够加载别的什么东西吗？ 投销啊，不是啊，很败 s r c， 比如呢，我给他来一个视频啊， 这瓶 mp 四百， 然后给他一个宽，好，也是这个三二零啊，高呢，也就是二四零，好，随便给吧。啊， 好，看一下 没问题啊，我们的火狐没问题，我们的 ie 又是这个死样子啊，应该是可以播放的， 那么如果你的机器里面不支持的话，那么可以再给他加一个什么呢？加个踏啊，踏是 video 第一， 然后斜杠 m p 四，如果不支持就加一个这个类型好，没问题啊， r e 呢？还是这个死样 好，注销啊，注视，我们再来加载一个。加载一个什么呢？加载一个 pdf 吧， 看看可不可以也能够加加载我们的视频，那么加载视频呢，我就不演示了。呃，加载那个图片啊，加载图片我就不不演示了啊，好看一下， pdf 可不可以 变哎，可以这个呢啊，也可以 i 呢？也可以，看见没啊，从这里呢， 可以看到，和我们之前演示 object 啊，是一模一样的，因此呢，他俩啊，所做的这个事情呢啊，都是大同小异啊，那别的一些格式呢？课下的时候大家自己去演示一下。 好，那么我们继续。那么我们这个 object 和 invite 这个到底有什么区别？刚才呢，其实我已经说过了，都是用来啊，这个播放不太对啊，应该是用来嵌入，这么说 像 pdf 层怎么个叫播放，甚至还有其他的啊，比如上节课我们用的这个 object 啊，潜入的一些其他的一些资源啊，或者是一些插件都可以。那么看一下区别。 obj 的元素呢，主要用于 i e 啊，因为它使用的都是我们的控件 x t y x 或者是 class i d。 那么 inbi 的这个元素呢，主要用于非 i e 啊，浏览器。刚才大家已经可以看到了啊，火狐啊，还有我们的这个谷歌支持的非常好， 为了保证这个兼容性，我们通常呢同时使用两个元素，浏览器呢，就会自动的忽略他所不支持的这个标签， 同时使用的时候呢，应该把这个 invite 放到 object 这个标签内部，那么它这样是是这样做的啊，比如就用刚才的这个视频 好复制一份，这个呢给大家注视掉， 首先是 upjet， 然后呢我们直接使用我们的啊代价去找我们这个路径去， 我们找个视频吧，比如就这个上海滩， 好，指定一个类型，指定一个类型也是一样好 video m p 四，然后宽有三二零，高，好，二四零， 然后把我们的麦放里面，应该是这样，那么这两种呢，对于阿艺来说呢， 他出现的状况和我刚才说的是一样啊，理论上应该是没问题的啊，你看到了吧？好，没问题啊， 哎，其实这种哎太麻烦了啊，真正在做项目的时候，根本都现在已经不使用了，但是呢我依然要给大家说，因为呢现在一些老网站依然呢使用这种方式啊。好，下面我们来看一个， 呃，最新的一个东西，就是 html 五视频。

好，接下来呢，咱们带同学们来去学习 luble 标签的相关内容，咱们的 luby 标签啊，他所应用的场景呢，就是将咱们网页中的一部分内容与表单标签之间相互绑定起来，那指的是个什么效果呢？哎，同学们来看这么一个例子， 在左侧呢，老师打开了一个注册类的网站，在注册类的网站中啊，这一块是咱们刚才所写过的多选框，比如说咱们现在想点击的兴趣标签是新闻和娱乐，那咱们之前是这么去点击的，我要点这个白色的框框，点你一下，哎，选中了，点 一下，选中了，确实是可以的，但是呢，咱们当前这个框是比较小的，那咱们用户点起来呢，其实是比较不方便的，那么这个时候啊，咱们从用户的角度去考虑呢，我们希望用户可以用来 点击的范围更加大一点。那么在新浪的注册页中，他做了一个小的处理，就是如果你想选择新闻这么一个兴趣标签，咱们可以直接点新闻这两个字，也是能把它选中的，点 娱乐这两个字也是可以选中的，这样做的好处就在于咱们这边所能点击的区域呢，会比之前更大一点，更加有利于用户的选择。那么这个呢，是咱们新浪网页的处理方式。 回个头来看咱们刚才自己所写的效果，那左侧这个效果是咱们使用之前单纯的影铺的标签多选框配合文本呢所来展示的看， 看起来感觉是差不多，但是现在我们想选择第一个部分，咱们只能点击前面的小框，我点文字，他理我吗？哎，其实不理我的，那这个时候同学们如果想做到我点文字，就相当于 点了前面的多选框绑定文本内容和表单标签的关系，那这个时候咱们就可以使用我们这边所要讲到的累部标签完成这么一件事情。 好明确了咱们类比标签的作用是用来绑定内容和表单标签的关系的。那么接下来咱们就来看一下如何在咱们自己网页中也能展示出相应的绑定关系的效果。那 那么首先来告诉同学们啊，咱们要实现绑定标签的效果呢，咱们要借助于 libo 这个标签来去实现。然后呢，咱们想在网页中实际的用上勒贝标签，其实他有两种不同的使用方法，那 这边老师就来带同学们挨个去看一下每种方法分别怎么去实现他。那这边老师先来看第一种，在第一种方法中呢，咱们是分成三步来去实现的，第一步咱们先要 要用 vivo 标签把内容包裹起来，第二步，给表单标签上加一个 id 属性，第三步，在 vivo 标签的附属性中设置对应的 id 属性值。好，咱们通过代码的形式来实际的操作一下。 这边咱们找到刚才所写到的代码，我们将第一组敲代码这个选项使用第一种方法的方式来去实验一下。首先第一步咱们先需要使用累部标签把内容给包裹起来， 那在这咱需要绑定的内容就是这边的敲代码这么几个字。好，那我把敲代码这几个字呢， ctrl ex 剪切使用 vipo 标签，然后菜不见，哎 哎，他这个双标签，我们把文本放到双标签的中间就可以了。好，第一步完成了，第一步完成了之后，我们再来看第二步操作。 第二步呢，咱们还需要在表单标签上添加一个 id 属性，我的想法是要让敲代码和第一个多选框相互绑定，那咱们需要在这个表单标签多选框身上加上一个 id 属性，放在这个位置。 那么这个 id 属性啊，有同学可能会比较好奇说，老师，那这是个什么属性呢？那其实告诉同学们，咱们 id 属性呢，类似于每个人的身份证号码，你有我有大家都有。每个标签身上都能添加 id 属性啊， 且有一个特点，同学们需要注意哦，咱们每个人都有身份证号码，但这个身份证号码每个人是一样的吗？哎，肯定是不一样的，咱们全国每个人的身份证号码都是唯一的，咱们在给 id 添加属性值的时候，他的值也是唯一的，整个网页周 只允许出现一次，是不能重复的。好，现在呢，咱们就给第一个引破的标签身上加上一个 id 属性，给他添加一个身份证号码，比如说取个名字叫做五万就可以了， 一般咱们给的是一个单词就行。好，写完了之后，咱们当前的表单标先生上已经有了一个 id 属性了，等会咱们可以通过这个 id 属性准确的找到当前的多选框，就好比是咱们生活中通过身份证号码来找到一个人，是一个逻辑。 好，第二步加完了之后，我们来进入第三步操作，我们需要在累部标签的附属性中设置对应的 id 属性，我等会点文字之后，他需要帮咱们选中对应的多选框，他要通过什么来选呢？哎，正巧咱们刚才加了 id 属性放在这，咱们就直接在 复卧属性中叫他去找 id 属性值为 worn 的这个标签不就行了吗？所以咱们在复卧中写上对应的 id 属性值，要你去找 worm 这个 id 属性值的标签就可以了哟。 那这样写的结果就是，当我点击文本之后，他会通过附属性中所写的万去网页中找到 id 为万的这个标签，把它同时也给选中就可以了。 好，第一组多选框，咱们通过方法一实现过了，接下来我们来看效果能不能实现哦，此时咱们来去刷新。哎，当我来点击敲代码的时候，一点前面选没选中啊，哎，就选中了。 好，这边带同学们介绍完了咱们使用方法一之后，接下来我们来介绍使用方法的第二种情况。第二种方法呢，其实会比第一种更加方便一点。 咱们第二种方法呢，他的步骤只需要两步就可以了，咱们一步一步来进行实现。首先他所要做的第一件事情呢，非常的简单粗暴，只需要直接用勒表标签把内容和表带标签一起包裹起来就可以了。 第二步，只需要把勒部标签的附属性删除掉即可。好，咱们每一步来跟着去试一试哦。我们以第二组为例，首先第一步，我们把整个表带标签包括文本内容，直接 ctrl 简介 使用 vivo 标签把他们整个都去包裹起来，整个都包裹起来之后，第二步，不要忘记了哟，我们要把他身上的附属性给删除掉就可以了。好，洗完之后我们来看效果能否实现哦，此时咱们来去刷新。哎，当我点击熬夜 时候，前面同时也被选中了，那这样做呢，就可以了。好，咱们已经带着同学们学会了使用六倍标签来去绑定内容和表单标签的关系。 在刚才的案例中呢，老师是通过多选框的形式给同学们演示的，其实呢，咱们单选框也是可以实现的，同学们可以自己去试一试哦。

好，接下来咱们来去学习影铺的系列标签的第二种形态叫做密码框，咱们的密码框啊，他就表示在网页中显示一个用于输入密码的表带空间，就如右搜索式的第二个部分，专门用于输入咱们的密码的。 那么咱们如何在自己的网页中也展示出一个密码框出来呢？哎，这边老师就来带同学们来去学习我们的标签组成以及代码的实线。 首先啊，咱们的密码框锁定的标签名还是叫做影铺的，但是呢，他的太不属性的属性值更改为了另外一个单词，也就是密码的单词叫做 pastry 的。 好，试完了他的标签组成之后，这边老师就来带同学们通过代码的形式来演示一下，那刚才咱们所说 到的第二个形态呢，叫做密码框，他所对应的太位的属性值叫做他斯文的，那这边老师就来写一个，写上一个密码，跟上一个影铺特加上咱们的单词帕斯文的 p a s s w o r d。 好，那咱们都写完了之后来看结果哦，此时来去刷新，哎，咱们的密码框就展示在我们页面中去了，并且他有一个默认效果，就是往里面输入老师的银行卡密码，一二三四五六会发现咱 我们是看不到我们所输入的内容的，那这就是密码框的一个显示特点，如果我们往里面输入内容，他是会逆纹展示的，把它转换成一个点一个点的效果。那么说到这里呢，咱们已经是把我们的引破的标签给 写出来了，但是咱们在实际开发的时候啊，还可能会遇到这么一个场景，比如说咱们会发现我们的百度注册页针对于密 码框这一块，当我们没有输入内容的时候，它里面有个灰色的文字提示咱们请设置登录密码。但我如果这边真的写了咱们的密码之后，它里面呢就没有咱们提示的信息了，如果清空呢，又会跑出来。那这一块效果从前还记得是通过什么属性来实现的吗？ 哎，就是咱们刚才所讲文本框中的一个属性叫做普雷斯齁的名字叫做战卫服。 好，那这边老师也给他加上一个站位符哦，写上一个普雷斯 hold， 同样我们写上个 pl 就提示了，咱们点击一下，那在这里面咱们填上请输入您的 的密码即可。当老师写完了之后，此时再来去刷新，咱们也同样有了提示的文本，并且我书内容就没有了，当我进空又出现了， 好，那说到这里呢，咱们就把密码框的相关内容呢都介绍完了。同学们，这样对于密码框来说还有一个小的注意点需要小心一下的。 同学们，在写太不属性的值的时候呢，千万千万不要拼错了哟，咱们密码框的太不属性值叫做 pastry 的，千万不要写错，或者说不小心加了一个空格，否则如果写错了，其实相当于设置了默认的状态，会变成文本框的形式。 好，那这边给同学们演示一下咱们的注意点哦，那比如说老师这边故意把咱们的帕斯布尔的写上一个 l 放在这，当然这样写 肯定是不正确的，那我们来看一下，如果太部的属性值写错了之后，展示的效果长什么样呢？咱们来去刷新， 哎，有同学说，老师这个效果不还是一样的吗？没毛病啊，来，咱们仔细来去感受一下。我们在密码框中输入咱们的密码，一二三四五六， 本来密码框中所存在的密纹输入的效果现在还有吗？哎，就没有了。其实告诉同学们，如果你这个 top 属性值写错了，它相当于设置了 top 的默认值，也就是上面所讲到的 fax 的，其实它现在是一个文本框的形式， 不仅是咱们单词拼错会产生这个效果，如果咱们这边不小心往帕斯沃的后面多带了一个空格，这样写也是不正确的。同学们来去刷新，哎，看 起来感觉是一样的，但如果咱们往里面输入一二三四五六，直接展示出来了，他还是一个文本框的存在。所以同学们在实际写代码的时候，一定要保证咱们代码的严谨，不要写错，也不要多加正，正好才是咱们需要的。 此时写对了之后再来去刷新，这样再输入咱们的密码就没有任何的问题了。好，那说到这里呢，咱们就把影铺的系列标签的第二种状态密码框给介绍完了。同学们需要注意，我们密码框所对应的太部属性值叫做帕斯， 并且他也可以使用占位符属性叫做普雷斯 hold。 而且同学们在实际写代码的时候注意，千万不要把太不属性的属性值拼错了哟。