html多个ul标签怎么设置

这节课给大家讲解网页前端编程 ul 标签，这个是视力代码，它是由标签对 ul 组成， li 表示列表中的像 啊，这些文本代表是每一项的显示内容，看一下他的视力代码， 视频代码长这样子，咱们看看在浏览器中它显示效果，这个就是显示效果， 他是像列表一样的一个显示效果，这一个讲解的这个 ul 罗标签。到此结束，感谢大家的收看。

先看效果，右边还有这几个，左边穿云池已经做完了，右边啊，这里这比较高，是不是大家看的清楚右边这二的位置啊？二，在哪里呢？我们看代码， 二，在这个地方，首先我要把这个颜色把它套上去，让我看到是不是是哪里是这个吧？啊，然后这个颜色看到那么一看的左右都看到了， 这肯定的吧。啊？二，你看一下他靠左对齐的，我们要靠右边去，是不是因为这个是不是靠右边啊？但是这个是靠左边是吧？啊，这是这样的啊，然后怎么办呢？ 你们有几个？是不是有几个？有同学就直接写也没问题啊，因为，但是这个在开工之前 你要跟客户确定你到底这里要三个还是四个要哪个字的啊？这是 要确定的，如果需求确定不了，到时候做的时候他要你改，你又花时间。好，现在来这里看到没有？ 看到？确定三个是不是好，这里做什么呢？有几种方法啊？首先有人用这个，呃， ul 有人用这个哈，然后呢？里面用什么 啊？用力是不是多少个？四个是不是四个是不是好，这怎么写呢？怎么一下上去四个出来呢？你要这样子，那乘以四是吧？回车看到右边没有 啊？看，没有，这个是什么功能？一， ana t 啊，这功能 到时候百度查一下就知道这个强大功能是不是回车四个是不是一个是什么？好，回到这里一定要满足，可登录注册订单。是不是登录 啊？注册啊，因为这个基本上定了之后就不改的了， 所以可以写史是吧？写静态，然后呢，这个什么？就是购物车一个小图标是不是啊？这个准备一个图标啊，这个叫啊？图标有没有？ 现在没有拿到是不是？那首先我们这个先不放这里啊，先设一个等会再来做图标的问题啊。啊，这第四个是吧？好， 做了之后保存。那就做干嘛啊？去看一下吧，是看到没有其他东西呢？看没有他往下跑了，是不是往下跑了？那我们要做什么都有呢， 肯定要样式，是不是啊？这里面的东西啊，这里面有 ul 有力吗？哪个有啊？直接在这来，直接在这来啊，是这样写的，这里面的 ul 的力是吧？那么首先 ul 我们打上什么 控制他显示方字为盒子弹性盒子不行，对吧？然后呢，回到这里来一刷，他不上去吗？但是问题是什么？密密麻麻的是不是啊？所以呢，还要设一个 这一个里面的它里面的力是吧？他们干什么？他们的宽度对吧，要给一个宽度， 关注他密密麻麻的是吧，保存再来刷新，是每个有了，太宽了，是不是多少？那自己定了，是不是啊？自定啊，再来 是不是这样子啊？还有个问题，他怎么靠右边去啊？这靠左边去了是不是有问题啊？是吧？好，首先等下后面再讲，首先把这点去掉吧，是不是好，这个也是有点 宽了，是不是耍一下？好，还可以，是不是这到时候放个购物车的图标好点。去掉，怎么去掉？是属于 ul 的，去掉点 n o n e 是不是 丫头的样式？项目符号没有，那就没有了吧。然后剩下的内容就准备往右边靠。 好，我们等一会再讲，是不是首先把这个能够上去，是不是还有后面还讲这里上个图标。好，我们后面再讲。

好，接下来呢，咱们来带同学们学习 htm 语法规范中的标签的属性， 那么咱们在刚才呢，已经带着同学们通过 stram 标签的形态来学习了标签的基本结构，但是呢，咱们刚才所学习的结构还并不够完整， 那咱们这边就来看一下标签完整的截个图长什么样子的。那刚才呢，咱们是讲到了此状标签呢，它是双标签，有两个部分所组成， 前半部分呢是开始标签，后半部分呢是结束标签，中间呢来包裹咱们对应的内容。但是咱们在实际开发的时候啊，同学们会发 发现咱们很可能在标签的内部呢添加这么一坨东西，而这一坨东西呢，就是咱们所说的标签的属性， 而标签的属性呢，它也是有相关的结构的，比如说，首先最开始呢是一个单词，咱们称之它为属性的名字，叫做属性名， 然后数姓名的后面写上等于号，加上个引号，往引号中写上对应的取值。 而针对于引号中的取值呢，咱们称之它为属性值，那属性名等于号，引号属性值合在一块，就被咱们称之为标签的属性，那这呢是咱们标签属性的基本结构。 好，那同学们可能现在呢还并不认识标签身上的属性，这没有关系，咱们待会呢，随着学习的深入，会带同学们一个一个的去详细的认识每一个标签属性的作用。 好，同学们现在所要做的事情呢，就是要将标签属性的结构呢先记住起好。介绍完了标签属性的结构之后，那接下来咱们再给同学们说明一下标签属性的一些注意点， 那这里呢，咱们就来同学们通过时机代码的形式来分别演示一下，那在这里呢，老师打开一个准备好的网页，网页中呢咱们来写一些相关的标签，比如说今天呢，咱们会的同学们 学习到超链接标签，超链接标签的标签名呢是咱们的 a， 那咱们写上 a 之后，按下泰步键，直接会帮咱们生成当前的标签。 那咱们会发现当前的 a 标签呢，它是由两部分所组成的，咱们称之它为哪一类标签呢？哎， 对的，是咱们双标签，但同学们仔细观察会发现这个双标签和咱们之前所学的子教呢，有一点不一样， 在咱们当前 a 标签开始标签的内部呢，存在着一个 hr e f 等于号引号这么一个玩意，那这一块部分咱们称之它为标签的什么， 同学们还记得吗？哎，对的，就是咱们刚才所讲到的标签的属性呀，那这呢就是一个很明显的例子， 咱们在使用某一些标签的时候呢，可能需要设置一些标签的属性来完善他整个的结构以及功能。好，那通过这么一个例子呢，首先同学们需要注意到第一个小的注意点，第一个注意点就是 咱们标签的属性呢，他一般是写在开始标签的内部的，同学们在之后手写的时候千万不要写错位置了哟。好，除了咱们之后所学的 a 标签身上会带有一些属性之外呢，咱们在之后还会学习一个比较常见的标签， 叫做 i m g 标签。那咱们写完 img 标签名之后，直接按下太部键， 哎，咱们会发现一面积标签呢，它是一个单标签，是由一个部分呢所组成的，而且呢，在咱们单标签的内部呢，它同时出现了两个咱们刚才所认识到的标签的属性， 那通过以内级标签身上所对应的自带效果，咱们会得到第二个标签属性的注意点， 也就是咱们一个标签身上不单可以出现一个属性，还能同时存在多个属性。好，那大同学们接受到第二个注意点之后，这边还 有第三个注意点，需要同学们小心点哦。第三个注意点就是同学们会发现咱们以密集标签身上的第一个属性和第二个属性之间，他们是紧挨着的吗？哎，明显不是， 他们之间呢是存在着一个空格的。那么针对这一个写法呢，也是咱们书写的小规范，就是标签属性与属性之间呢，需要以咱们的空格来隔开才是最好的。 好，除了咱们属性与属性之间需要以空规格开之外呢，咱们第四个注意点，同学们也需要小心一下哦。第四个注意点就是咱们标签名与属性之间呢， 他是必须以咱们的空格来隔开的，否则呢是会出现问题的，比如说给同学们来演示一下哦， 咱们来看 a 表情，咱们会发现 a 标签呢，他的标签名是咱们的 a， 而咱们的标签名和属性之间默认是存在一个空格来分隔的，如果同学们不小心将这个空格给删除掉了之后，咱们会发现 整个属性的颜色呢，都不对了，这样写呢，浏览器会解析错误，他会将 a、 h、 r、 e、 f 后面这一坨东西呢，都看作咱们表 标签的名字，而因为 skm 中没有 ahr、 e、 f 这么一个标签，所以此时呢，浏览器 解析会出现问题。好，那同学们在实际开发的时候呢，千万不要将空格省略掉哦， 咱们需要保证标签名与属性之间呢，以咱们的空格隔开才是最规范的。好，说了以上这么四个注意点之后，那最后呢，咱们再给同学们补声说一个同学们可能会比较疑惑的一个问题。 有同学可能会说，老师，我发现以秘籍标签身上既有 src 属性，也有 ar 的属性， 写一个写在前，一个写在后，那么标签的属性之间有没有顺序之分呢？哎，在这里呢，老师给同学们说明一下哦，其实标签身上可以有很 很多属性，并且标签属性之间是没有咱们的顺序之分的，哪怕咱们后面将咱们的 ar 的属性写在了咱们 src 属性的前面呢，这样写也是符合咱们语法的规范的。好， 那说到这里呢，咱们去带同学们介绍完了 htm 标线的属性结构以及相关的注意点，那么最终呢，咱们来带同学们进入小节环节。首先第一个问题， 咱们在双标签中，属性应该写在双标签的开始标签中还是结束标签中呢？哎，对的，咱们标签的属性呢，应该写在双标签的 开始标签内部才是正确的。好，第二个问题，咱们标签上可以同时存在几个属性呢？只能是一个吗？哎， 对的，咱们标签上的属性呢，可以同时书写多个，完全是可以的。好，第三个问题， 咱们标签名与属性之间以及属性与属性之间需要以什么东西来进行隔开呢？哎， 对的，就是咱们刚才所看到的空格。好，说到这里呢，咱们就带同学们介绍完了标签属性的相关语法，同学们在之后开发中需要将老师刚才所讲到的语法规范给记住哦！

今天给大家分享两个标签，喜欢请点赞收藏。第一个要介绍的是标签来，标签中的文本显示为解体，代表一定范围的文本具有特别的语义，例如技术、术语、 外文、短语或是小说中人物的思想活动等。和之前扣标签一样，也是一个短语标签。同样，如果想要标签中显示内容更加丰富，需要配合 css 向视表进行使用，视力代码以及运行效果如视频所示。第二个要介绍的标签是 avery answer 标签，表示一个内联框架，一个内联框架被用来在当前 htm 文档中嵌入另一个文档。当使用标签的时候，可以把提示文本放置在标签之间，这样就可以应对不支持该标签的浏览器。 当浏览器不支持标签的时候，就会显示不知支持的文本提示给用户，建议用户升级浏览器。如果需要修改标签样式，比如显示框大小，修改滚动条等等的时候， 可以使用 css 相视表进行控制。标签主要用于那些多个网页的共有部分，如导航栏、广告栏等场景。接下来我们看一下它的属性，第一个属性为高度， 它指定标签的高度。第二个属性为设置标签的宽度，这两个标签就可以定义 f 人标签在页面上显示的大小。第三个属性为 dang， 他指定了 afram 的名字。第四个属性为 sandbox， 规定了在 fram 框架中的内容启用一些额外的限制条件，通过 sandbox 属性提升 fram 的安全。 三 box 属性可以防止不信任的 yd 页面执行某些操作。第一个是空值，代表启动所有限制条件。第二个只指的是允许表单提交。第三个只指的是允许将内容作为普通来源对待，即嵌入的浏览上下文章和复元素被视为来自一个独立的源。 第四个值表示允许执行脚本。第五个值表示嵌入的页面的上下文可以导航加载内容到顶级的浏览上下文环境。如果未使用该关键字，这个操作将不可用。第六个是指允许嵌入的浏览上下文打开模态窗口。 第七个是指允许在没有征求用户统一的情况下下载文件。第八个是指允许弹窗。第五个属性作用是使标签看起来像是副文当中的一部分，没有边框和滚动条。第六个属性是 是在页面中显示的页面的儿。第七个属性指的是是一段 atm l 代码，这些代码会被渲染到到 rain 中。 如果浏览器不支持 soca 属性，则会渲染 src 属性表示的内容。最后我们看一下势力代码以及运行结果。代码是在页面中嵌入了一个地图。

啊，首先呢，我要准备的是把要用到图片放在自己的项目里面啊，这准备了 三张图啊，然后呢，我就找案例了，是不是啊？案例很简单，因为它里面这一个是一个 div， 我们要用的 div 里面有个 ul 啊，余额有三个力，每个力放一张图，这样的一个啊，最基本的一个样式是啊啊，一个签，我把这个内容我放到我这一页里面来 啊，所以放到这里面，他现在已经有 a、 d v 了，是不是啊，也定好了，所以呢，我这个到时候了就不要了，是吧，等于放到这里来，好，一放进来之后，首先你要去看一下啊，是这样的，很正 正常，是不是为 ul 力，他是不是有个点的要三张明显没有做任何处理，这个很正常，是不是非常明显，然后是说了我要做什么事情呢？ 要做的 ul 我要跟这个是一样大，也就说了这个 ul 要跟上面这个一样大，这时候这个样式我就全部写了，我又不看他内容啊，到时候不再参考，是不是啊？首先这个 ul 宽度是多少？对他的容器的 百分之一百，是不是啊？高度呢，也是百一百啊，但做完之后又看一下是不是最好呢？我们给一个颜色吧，如果不是你自己看不到他在哪里，是不是啊？再随便给一个 啊，剪完之后他也是很方便的，是不是这里改一下啊，比较鲜艳，差别大一点，是吧？然后去看一下，看他，虽然这个 ul 确实是跟后面的背景是容器一样大，但是图片呢？图片他没动，是不是？那图片是谁的？ 图片不是 u l 的那个，那是谁的？图片是 l i 的，是不是 l i 它用的这个样式，所以呢，我们要把这个 l i 要放大一点，然后又来 这个 u l u l 的 l i 是不是这个名字啊？这是我打完它，然后为了把管理叫做传，是不是？然后把这个复复荣器的名字这来？好，这时候他有多大了？也 是百一百，高度呢？也是百一百，是吧？好，你看都是这样写字啊，你看一下啊，变颜色，没写啊，没写字啊，没写，不知道他有多大，是在哪里去了啊？我们又来一个颜色， 同样道理，我给一个不同的颜色好看一下，这个在哪里？你看灰色啊，是不是完全挡住了？不是说我为了看到他 给一个外边距，给一个十，加以区分，好，这里发现好三个例，一个在这里，第二个在这里，第三个在这里，是不是 第一个被挡住？因为 ul 只有一个而立有三个啊？很明显，我们等下处理之后，这个点是不是去掉啊？这是肯定的啊，图片呢？图片怎么办？ i n e i t e n 里面的，所以这个图片呢？我们要做什么呢？啊？我们也要做一个东西，是不是 里面的图片 i n g 了，然后也是百分之一百，这时候这张图片就这么大了吧？当然，所以有点不太对，是不是分辨率比较低？是不是到时候我们再换，是不是高度，如果这个高度变了， 这改了很自然，这样涂了就自然就会增高，是不是？好，现在我们要做的是什么内容呢？首先把这个点去掉吧， 这点是属于谁的了啊？属于力的，力的，也是属于 u l 的，是不是把 u l 的点去掉，怎么去点呢啊？谁的类型？ m o n e 啊，就可以去点了。首先虽然看起来有问题了，但是当边界，边界这里有十，就我们去掉它啊，就这个带边距啊，十，我们到时候去掉它，它就看不出来了，要看不出来之后呢？你发现三张图这样排啊， 我们必须把图水平排列，是不是？因为他是默认是从上往下的水平排列，怎么办？好办？这个做什么 啊？没错啦，又来这个，是不是好一招走天下啊？这绝招很好用啊，保存一下再来是不是可以了？有问题没有得弹性布局，弹性布局，但是为什么会会这样子呢？用什么办法啊？这时候我们之前用 什么办法的？也就说弹性不齐，他的意思你三个就挤在一堆是不是？那我们用什么方法？我们看一下 原来我们怎么处理的？为什么现在挤在一堆？挤在轮播还轮的了吗？会超出去，是不是啊？所以之前我们怎么处理的？我们回到这里来，这三个为什么又不会出现刚才的情况呢？好，现在我们来看一下我们当时怎么做的啊？每一个都要 每一次的细节我们都很注意，是不是？我们看一下样式写哪里学到这里来，是不是当时我们把这个怎么处理？那没有问题，把这个怎么处理的，我们看一下啊？ 怎么处理？用的什么东西啊？啊？这里写到这来，我们用弹性布局，没有， 有了，是不是加了个什么东西？这什么东西啊？加了这个，然后它里面大小呢？我们给个固定，是不是这时候我们不放糖啊？有个不放糖，是不是然后就准备放进来行不行呢？ 我们一步步来揪揪啊？一步步揪揪过来。刚才不是加了个弹性布局吗？再加个不化糖，是不是这意思啊？我去看一下是不是 没问题？还有问题是不是明显有问题了？那么这个放你放多少？一百行不行？那到底有多少？我看一下总共宽度是多少啊？ 宽度是一千三，是不是我把这个啊放到这里来看清楚啊？放到这里来啊？啊？试一下他有没有 挤在一起还是挤在一起，是不是那么有种什么办法呢？我们还有其他办法啊，我们把这个假如我不用这个啊，我不用这个啊，他是没有问题的是不是？然后呢我就在这里写上一个 d i s in life。 什么意思啊？然后他们就是同行了，看一下他还不同行是不是然后再加一个芙蓉记，再加一个空白换不换行呢？换行是不是 扎这两行？这时候可以了。用什么办法？我们这里来提醒我。再来提醒一下哈，这里一样的话是不是换了一个东西？这里换了什么？没有弹性布局啊，大家注意啊。没 用弹用。用什么呢？用的这个这个是什么意思啊啊？用的是如果还有空位啊，就差几码了，他不换行是不是啊？不换行就什么他呈现的这种效果只往右边排是不是啊？一直往右边排的，没有，等会我们就让他走，是不是 字后面还有一个基点就是有一个溢出，不看看不见的情况是不是？好，那首先我们排这个对这里有没有弹性布局？ 没有，是不是啊？用什么啊？不能千变绿，这里用啥就不急用了，这个是不是好？现在我圈一下这个效果，大家看清楚是什么内容啊？我就捉一下是不是这个内容。我们圈的什么东西， 为什么要让这样做啊？用其他方法行不行？是吧？首先这个用来干什么的？ 然后呢？这个每一个图放在 id 页里面，我们还有这个注意，注意啊，这个注意不是遇到副容器最大的就这个我们不要超出去，是不是？然后这样就达到第一步，后面我们再把它做成会轮播的。

今天我们终于完成了第一模块的技术分享，之前说过的知识点你还记得几个呢？在这里再跟新来的朋友说一下，想从事软件开发的朋友们可以先测试一下自己能不能学前端， 我主页里有前端的入门视频，对职业迷茫的小伙伴可以看看，因为前端开发是相对比较容易上手的，并且前端的从业方向是比较多的，或许对你是一个好的选择。今天咱们对网页开发的第一阶段技术 html， 也就是一堆标签做一个分类， 顺便看一下你还认识几个。我们只看一下常用的标签，因为我们工作中使用的大概率就是这几个。这里我先写两个输入框，然后加上一个按钮， 预览一下页面，我们这里只关注他在页面中的排版，可以看到两个输入框文字以及这个按钮都在同一行展示了。如果想换行的时候，我们需要给他加一个 b 二标签，我们在这两处都加上 b 二标签 签，再次预览页面可以看到他们都换行了，然后我们写两个大标题，标题标签我们使用 h 一就可以到页面上看一下，我们发现在排版上面他们两个是分别在两行上面，第一行文字后面还有很多空位，但是第二个标题没有和他放在同一行，而是在下一行展示了， 当我们再写一个标题后，他也是新起了一行。不管后面有没有空位置，我们可以审查元素看一下，这里提示的蓝色区域就是这个标签所占用的区域，这个黄色区域是这个标签的间距， 根据我们在 css 环节会讲到，但是这里我们的问题是， h 一标签，它的标题一这三个字明明只有这么短，它为什么能占满整个一行呢？这就是他们的一个共性，一个标签独占一行，哪怕我的文字和内容都不够一行，也不允许其他标签和我放在同一行的，所以这就是我们 h 一和音库的的区别点了。说到这里，我们可以暂且把标签分为两大类了，一类是一行可以放多个，像上面这种音库的，我们一般叫它行内标签。另一种是像这个 h 一一样，一行只能放一个，就算自身内容不占满一行，他也不允许其他标签和他放在同一行的。这种我们叫做会计标签， 快捷标签。我们讲一个比较典型的叫做 div 标签，为什么说这个标签呢？因为在工作中，这个 div 可能是我们使用频率最高的标签了。具体原因是什么呢？ 哦，请讲是因为我记不住那么多标签了，哈哈，比如 html 中还有福特、 atco 之类的，很多他们都是会计标签。 像这种同样都是会计标签的，我们只会关注他的羽翼，但是如果我初期并不那么在意羽翼，我只关心我的功能有没有 bug， 或者今天能不能不加班，或者能不 不掉头发。况且 h 天苗中他并没有提供所有模块精细的寓意，比如我用页面画一个人，那 h 天苗也没有画过三十二块腹肌的标签。 所以在实际工作中，标签的羽翼化优先级是略微靠后的，大家之后也不用发愁记住那么多标签了。我们可以把标签分为两大类，一类是行内标签，也就是一行可以放多个。一类是会计标签，一行只能放一个，典型的就是 div 标签。其实在 atm 中还有一类叫做行内块标签， 相当于各站一点这俩的特点后续说到 csis 的时候会跟大家细说一下。