粉丝54获赞254
![[网站开发入门指南19] a标签的其他属性和跳转到特定元素位置 | html css零基础入门教程
#html #CSS #JavaScript #前端开发 #网站开发](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/9043cce5dc0120892c9cb2101077d7ab~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2087780400&x-signature=S3BYUv9p5RDQY5RbsudiUnZ1fKI%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260302112557789EDE55B4E3C04083D6)
然后呢他这个 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 标签的话呢,其实主要的就是这些使用方式了。

如何在网页插入超链接?嗯,上面一个第四本的文件,这里的话,我已经把这个网页的结基本结构给打出来了,嗯,开头给他出入输入一个超链接,嗯,在网页插入超链接的话,只有用的是这个 a 标签 a, 然后在 a 标签这里插入一个属性,哦, 等于双引号,这里面的话就是那个网页的链接的地址,比如说百度,百度的话他就必须 ppt 报号,百度点 com, 然后在两个标签之间的话,就是把那个那个链接的名称百度,这样子的话,一个链接就算就完成了。保存一下,然后 把他的后缀改成那个 hthtml 的文档格式,这样子打开的话就可以在网页上看到这个链接了。当我们去点击他的时候,他就直接可以显示到百度这个页面来了, 再回到这里啊,再布置一个吧,做一个对比, 再看一下,刷新一下。我现在是像这样子的话,我们不换行,但是两个表现是很多去排列的,那我加在这里加了一个比亚的话,就可以实现他的换行。 br 这个标刷新的图标已经换好了,再加一个 dr, 像这样的话就换了两行,没保存吗?换了两行应该是对的,小心啊。对,换了两行了,那如果我们想让他在这个文档行业的中间显示的话,就要在波顶这里加一个数数线 slide, slide 样式 刷抖音, 这个属性用太熟了,这个属性用深度,这样子的话他就可以实现在网页上面取中 刷新一个已经集中过来了。还有一个的话是这个链接的默认 a 标签,默认的链接是有一条很咸的,下面的要去掉,怎么去掉呢?在这里再加一个属性,加个类似的 这个属性呢,只是慢,这样子就没有那个下滑线了,哎,没有效果,应该出错了。对对对,这个这个属性是要加到 a 标签里面取的,那就把它复制下来, 不要这个渗透的, 这样子的话他就可以实现那个百度的下滑线没有了,第一个百度的下滑线没有,第二个还是有的,在高速刷新网页看到没有这个百度已经没有了,这个还是有的。 那么如果我们要在百度这里用按钮的形式去显示的话,要怎么做?那就直接在 a 标签这里套一个花盆, 用至尊的形式把它,嗯,这里非常贴用,把它把这个 a 标签包裹起来,那它就是一个按钮的形式,保存一下, 现在他显示的话,下面这个套了八筒,他就是有一个按钮的显示,下面这个的话就是没有的,学会了吗?就是这么简单。


接下来介绍 reform 属性,它指的是 ref 属性所指向的链接文档的语言,这个属性只是标识作用及对于标签没有实质性的作用。 reform 属性需要结合 ref 属性一起使用,单独使用是没什么价值的,它的值不是随便写的,是有固定要求的。 具体支持的语言可以查看视频中给出的链接,我们看一下加上 reform 属性之后运行结果发现并没有影响数据的输出。接下来我们看一下密帖属性,同样它也是在有 rafter 属性的时候才有意义。属性用于规定目标。 usb 特殊设备,比如 语音或打印媒介设计的,我们可以为他设置多个字。我们简单看一下设备有哪些值,我们简单看一下操作符 w 哪些值,最后看一下属性 性质有哪些, 然后是看一下加上媒介之后运行结果发现运行之后没有任何改变。下一个要介绍的是 target to 性,他规定在何处打开目标。 url 也是仅在外属性存在时使用,目前它的只有四个,分别为视频中所示。然后我们修改代码, 加上他的属性设置值为 black。 一,在新窗口中打开保存,然后运行发现点击链接之后在新的窗口中打开了链接,而不是在当前页面直接跳转。

我发现了一个非常残酷的真相,在短视频平台当中,如果你试图真正教会别人某些东西,那么你就必须要讲逻辑,讲理性,讲知识, 但这种东西往往却没有人看,也没有流量,因为群体不需要知识,他们要的是情绪。嗯,考虑到生存问题,所以呢,在此后的内容当中,我会做一些流量的内容,当然, 为了不耽误粉丝们的时间,不影响粉丝的正常观看呢,后面我做的流量内容会打上一个 a 的 标记 啊,这就意味着流量内容啊,你们可以直接跳过,因为他对你们没有任何的帮助啊。如果是,呃,我自己想做的内容啊,是我觉得能真正帮助到大家的,能从 底层的逻辑或者是心理结构方面啊,帮助大家去认识到自己的一些处境啊,解决一些情感上的问题啊,这样的一些硬核的内容哈,我就会打上一个 b 的 标签,嗯。

从零到医学前端至 html 标签的属性,咱们在实际开发的时候啊,同学们会发现咱们很可能在标签的内部呢添加这么一坨东西,而这一坨东西呢就是咱们所说的标签的属性。 而标线的属性呢,它也是有相关的结构的,比如说首先最开始呢是一个单词,咱们称之它为属性的名字,叫做属性名,然后属性名的后面写上等于号,加上个引号,往引号中写上对应的曲值, 好针对于引号中的曲值呢,咱们称之它为属性值,那属性名等于号,引号属性值合在一块,就被咱们称之为标签的属性,那这呢是咱们标签属性的基本 结构。介绍完了标签属性的结构之后,那接下来咱们再给同学们说明一下标签属性的一些注意点, 那这里呢,咱们接待同学们通过实际代码的形式来分别演示一下,那在这里呢,老师打开一个准备好的网页,网页中呢咱们来写一些相关的标签, 比如说今天呢,咱们会带同学们学习到超链接标签,超链接标签的标签名呢是咱们的 a, 那咱们写上 a 之后,按下看不见,直接会帮咱们生成当前的标签, 那咱们会发现当前的 a 标签呢,它是由两部分所组成的,但同学们仔细观察会发现这个双标签和咱们之前所学的词教呢,有一点不一样,在咱们当 形 a 标签开始,标签的内部呢,存在着一个 hr, e, f 等于号引号这么一个玩意儿,那这一块部分咱们称之它为标签的就是咱们刚才所讲到的标签的属性呀, 那这呢就是一个很明显的例子,咱们在使用某一些标签的时候呢,可能需要设置一些标签的属性,来完善它整个的结构以及功能。 首先同学们需要注意到第一个小的注意点,第一个注意点就是咱们标签的属性呢,他一般是写在开始标签的内部的 好,除了咱们之后所需的 a 标签身上会带有一些属性之外呢,咱们在之后还会学习一个比较常见的标签,叫做 i n g 标签,那咱们 写完 mg 标签名之后,直接按下看不见,咱们会发现一面积标签呢,它是一个单标签,是由一个部分呢所组成的,而且呢在咱们单标签的内部呢,它同时出现了两个咱们刚才所认识到的标签的属性, 那通过以内几标签身上所对应的自带效果,咱们会得到第二个标签属性的注意点,也就是咱们一个标签身上不单可以出现一个属性,还能同时存在多个属性。 第三个注意点就是同学们会发现咱们以密集标线身上的第一个属性和第二个属性之间,他们是紧挨着的吗?他们之间呢是存在着一个空格的, 那么针对这一个写法呢,也是咱们书写的小规范,就是标签属性与属性之间呢,需要以咱们的空格来隔开才是最好的。 除了咱们属性与属性之间需要以空格隔开之外呢,咱们第四个注意点,同学们也需要小心一下哦。第四个注意点就是咱们标签名与属性之间呢,他是必须以咱们的空格来隔开的,否则呢是会出现问题的, 比如说给同学们来演示一下哦,咱们来看 a 标签,咱们会发现 a 标签呢,他的标签名是咱们的 a, 而咱们的标签名和属性之间默认是存在一个空格来分格的,如果同学们不小心将这个空格给删除掉了之 后,咱们会发现整个属性的颜色呢都不对了。这样写呢,浏览器会解析错误,他会加 a, h, i, e, f, 后面这一坨东西呢,都看作咱们标签的名字, 而因为 stm 秒钟没有 asr、 ef 这么一个标签,所以此时呢,浏览器解析会出现问题。

嘿,大家好,今天我们来聊一个特别有意思的话题,给 ai 装上一个能预见未来的超能力。 你想想看,要是你的 ai 助手,总能百分之百猜到你下一步操作会发生什么,那体验得多爽。现在一个叫做 co2 world 的 新连旧就真的在朝这个方向努力。 不知道你有没有过这种经历,就是被手机上的 ai 助手给笨到不行,明明一个很简单的操作,他就是能给你点错地方,或者直接卡住不动了。说真的,这些 ai 不是 号称很智能吗?怎么一到实际操作就老犯这种低级错误呢? 其实啊,问题的关键不在于 ai 会不会去点那个按钮,而在于他根本想不到点了之后会怎么样。这就好比一个蒙着眼睛下棋的人,他能动棋子,但是完全预判不了后面的局势。这种预见性的缺失,说白了就是现在 ai 发展的一个大冰井。 那么,这种预见能力听起来这么重要,它到底难在哪儿呢?咱们这就来深入聊一聊, ai 在 预测这件事儿上,到底碰到了什么大麻烦。 你想啊,我们人类厉害在什么地方,很大程度上就是因为我们脑子里有一个模拟器,不管做什么事之前,我们都会下意识的想一想,哎,如果我这么做了,会发生什么,对吧?这个在脑子里预演一遍的能力,恰恰就是 ai 现在最缺的东西。 以前呢,大家想让 ai 预测未来,主要就两条路,第一种是基于文字去预测,这就像是 ai 能读懂你的心,猜出个大概意思,但具体画面是什么样的,它完全没概念。 第二种呢,是基于像素去预测,这就像是让 ai 给你画饼,它能生成个图出来,但那个图呢,往往是又模糊又不合逻辑。所以你看这两条路好像都不太行, 既然老办法找不通,那是不是得换个思路了?没错,这项研究就提出了一个全新的想法,简直可以说是颠覆性的。 他们造了一个用代码写成的水晶球,他的核心思想简单又巧妙,简直让人想拍大腿。咱们别费劲去猜那些像素点了,直接把未来的那个界面用代码给他写出来。 这里的关键技术就叫做可渲染代码,你可以把它想象成咱们网页、 app 这些用户界面的母语,比如我们熟悉的 html 这种代码,它既能把一个屏幕的结构骨架给定义好,又能把它的外观长相给描绘出来,所以说它就是连接想法和现实画面最完美的桥梁。 你看这张对比图一下就明白了,左边是初识屏幕 go to world, 要做的不是去猜右边这个画面长什么样,而是直接写出生成这个画面的代码。所以你看,最终渲染出来的结果是分毫不差,一模一样。 哇,这么厉害的模型,到底是怎么训练出来的呢?这里研究人员用了一个特别聪明的办法,他们没有自己去当老师,而是训练出了一个非常严格的 ai 裁判来指导整个学习过程。 首先,万事开头难,你得有好的教材吧?但现成的数据根本不够用,于是研究团队干脆自己动手,从零开始,建了一个超级大的数据集,叫 android code。 这里面有超过八万个高质量的样本,每一个都记录了初识屏幕用户操作最终屏幕的完整过程,可以说是给模型准备了最丰富的营养。 整个训练过程分两步走,第一步有点像我们上学叫监督微调,就是让模型先看课本,把 ui 代码的基础语法规则都学扎实了。 第二步就进入实战了,叫渲染感知强化学习。这一步模型写的代码不能光与法对,还得看最终渲染出来的画面效果好不好,效果好就给奖励,效果差就得受罚。那么问题来了,这个奖励和惩罚谁来决定呢? 没错,就是我们前面提到的那个很巧妙的 ai 法官系统。这个 ai 法官评判的标准主要有两个,第一看颜值,也就是视觉上像不像预测出来的屏幕画面对不对?结构合理不合理。第二看逻辑,也就是动作上对不对。 这个新出来的屏幕到底是不是上一步操作应该到高分? 好了,模型训练完了,那在实际应用里,怎么把它的这种预见能力用起来去帮助其他的 ai 呢?答案就是这个提议,模拟选择三部曲。 这个流程其实很简单,第一步提议让另一个 ai 代理先想出好几种可能的操作方案。第二步,魔怒让 call to world 出马,把每一种方案可能导致的后果都生成一个 mini 未来的画面。 第三步选择让 ai 代理看着这些模拟出来的未来,挑一个最好的方案去执行,就这么简单 来,光说不练假把式。咱们看一个真实的例子,这是一个旅行 app, ai 代理的任务是要去搜索 它的,第一步操作就是点击这个搜索框,这时候要是让传统的那种像素模型来预测,你看直接就翻车了。它生成的结果要么模糊的看不清,要么布局乱七八糟,最关键的是,它根本小象不出来一个和原来页面结构完全不同的新界面。 但是你看 code word 的 表现,简直是完美,它不仅精神地生成了点击之后该有的新页面,而且你仔细看左上角的时间,它甚至连十点零六跳到十点零七,这个微小的变化都捕捉到了。 我的天,这才是代码级别预测的恐怖之处,这种精度太惊人了,刚才那个例子已经足够经验了,但背后还有实打实的数据。所以这项技术到底有多重要,我们直接用结果来说话。 这张表里的数据信息量很大,最关键的一点是, code two world 的 模型大小只有八十亿,参数非常紧凑,但它的表现却能跟那些行业巨头的顶级大模型掰手腕,而且还明显比那些参数量大它十几倍的开源模型要强,这说明什么?效率? 而这个数字啊,可能是最有说服力的。当其他的 ai 代理把 code two world 当做自己的军师之后,它的任务成功率直接提高了百分之九点五。 这意味着什么?意味着 ai 犯的那些笨错误一下子就少了很多。所以说, call to world 最大的贡献,就是让我们朝向一个全新的 ai 时代迈出了特别关键的一步。 在这个时代里, ai 不 再是一个只会听命令的机器,而是一个真正能理解并且预见后果的智能伙伴。最后,咱们也来畅想一下,当 ai 真的 拥有了这种安全模拟未来的能力之后,它的潜力边界会在哪里? 从复杂的金融交易到前沿的科学发现,还有哪些我们今天觉得 ai 根本搞不定的任务,在未来会被它一个一个地解决掉呢?

我们来看到 a 标签的另外一个属性 pocket, 现在呢我们去去到这个百度 s t d p 冒号斜杠,斜杠三 w 点,百度点 com, 去百度打开页面,那我点击去百度的时候注意观察,刚刚是在当前这个页面,你看我回去发现一下啊,点击 在当前这页面就打开了百度这个页面。那这种行为呢?我们其实可以去控制他的,我可以让他在当前的,我也可以让他去到另外一个页面,那我现在给他改掉通过这个 party 这个属性。 然后呢,我来一个下划线 black, 那 black 是空白的意思吧?那我现在打开页面刷新一下啊,点击去百度, 你看他是新生成的一个页面啊,这还是在这原来的。那我们这个刚刚为什么点击他还是在原来的页面呢?因为他的默认值呢?就是在当前也打开,那默认值是哪一个呢?叫下划线 self a 标签呢?我们就学习到这了。

同学们,你们是不是觉得 html 里的文本修饰标签都差不多?其实这里面藏着大学问呢?今天咱们就用三分钟搞懂这些让文字变身的魔法标签。先问大家一个问题,看到加粗的文字,你觉得它只是看起来粗了,还是有什么特殊含义? 其实啊,像这种标签就只是让文字变粗,纯属外貌协会成员。而虽然看起来也是加粗,但他可是带着重要内容的身份登场的,就像老师在黑板上用红笔圈出来的重点,搜索引擎和毒品软件都能 get 到他的特殊地位。再说说写体 标签,就像给文字戴了副墨镜,看着酷,但没啥特别意思。可标签一出场,就像说话时突然提高音量。请注意,这种语气上的强调可是它的独门秘籍。 记住这个小窍门,看到就当它是装饰,遇到就得竖起耳朵听重点。最容易被搞混的还有删除线标签就像用橡皮擦随便涂了一下, 而则是正式宣告这段内容已作废。比如商品降价时,划掉原价,就得用采购专业。对了,写化学式和数学公式时,可离不开和这段好兄弟。 h 二 o 里的小二和 e 等于 m c 二里的平方符号,都是他们的功劳。给大家留个小挑战,如果要标注错误,答案已更正,你会用哪些标签组合呢?把你的答案打在评论区,咱们一起玩转 html 文本魔法。
![[网站开发入门指南15] 了解视频标签的相关属性 | video tag
#javascript #css #html #前端开发 #网站开发](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/10c28faf24965e9a61f9d9c278e41a1e~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2087780400&x-signature=AVVtrVVFqUqiPo9nQrt3QsCfMQ8%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260302112557789EDE55B4E3C04083D6)
接下来呢我们来认识一下如何把视频展示在我们的一个页面当中,那视频呢?其实我们之前也提过,就是有一个专门的用来展示视频资源的这样的一个标签,那这个标签呢就是 video, 那 video 呢?他一般来说他会出现这种 双标签的一个模式,那在这个双标签当中呢,其实你可以直接写一点文字,比如说 不支持视频标签这个文字啊,他就会在不支持这个视频标签的这个浏览器中打开的时候啊,他就会把这个文字给展示出来。 那通常情况下呢,主流的这些所有浏览器都是支持这个视频标签的,所以我们一般呢也很少会去这样去写。然后呢我们这里可以先把这个视频文件先给他放出来啊,那这个视频文 文件呢,我们已经放在了这个项目文件夹里面,这个 videosrc 下面的 video 这个文件夹中啊,这个就是这个文件,那这个文件呢是这样的一个视频文件,我们可以预览一下, 那这个文件呢,我们要把它的一个相对地址来写一下,那我们去写这个相对地址的时候呢,你其实可以用鼠标右键选择这个文件,然后他弹出的 右键之后,弹出的他会有一个这样的一个拷贝相对路径的这样的一个选项,然后我们选择这个选项之后呢,其实 这个文件的相对路径就已经被我们复制过来了,然后我们这里就可以粘贴一下,然后你就会看到,哎,看到这样的一个视频出现在了这个页面当中,然后呢我们可以这样去给他换个行,这样换 行呢就是可以让我们把这些属性啊,一行一行往这样写,就看的更清晰一点啊,我们把这个收起来啊,这样的一个格式,换行之后的格式也是没有任何问题的。那我们看到这个视频的一个资源呢,他因为他视频尺寸比较大,所以呢他其实没有完整显示出来吗? 所以我们其实呢是可以去,可以去给他设计一个位置,就是一个宽度,比如说我们宽度是个六百吧,他就自动的按这个原始文件的这个视频的比例设置成一个显示宽度 是六百的这样的一个显示的一个区域。那我们这里呢,主要来看一下他的一些其他的一些非常重要的属性。首先第一个叫 alt play, alt play 呢其实就是自动播放的一个效果,但是呢因为考虑到一些用户体验的问题,所以很多浏览器呢,他默认是禁止禁止这个 自动播放的,除非你给他设置了一个静音的效果,你看他设置了一个 muted 静音的效果,那就是相当于他就能允许你自动播放了。 然后呢像我们这种属性,他在只写一个属性名的时候,其实是相当于去设置了这样的一个值, 这样的一个设置方式跟直接写一个属性名是一样的,那这个趣值呢,其实表示的就是相当于你可以把它理解成这个功能开启, 如果这个设置成一个 force 的话呢,表示这个功能是关闭的。你像我们如果没有设置这两个东西的话呢,其实就表示自动播放,包括刚才那个静音,他都是默认是关闭的,所以呢如果你要把它开启的话呢,你就可以 auto play 这样直接写一个,然后再写一个 muted, 然后呢我们还可以去使用这样的一个属性,那这个属性 呢,其实就是可以让这个视频的这样一个显示区域,让他能够展示出这些控制按钮,这样的话呢,我们就能去手动的控制这个视频播放的各个功能了。然后还有一个像是这个 post poster 这个属性呢,是用来设置这个视频的一个封面的图片的 post 这个属性你后面直接跟一个图片地址就好了,那个图片地址的话,你也可以用这种我们放在文件里面的这种图片的地址也可以用这种网上的地址都是可以的。 那还有一个呢,就是这个 playload 这个属性的话呢,其实我们短期之内也不需要去研究它啊。还有一个就比较重要的叫做 loop, 就是视频的一个循环播放,就是视频播放完之后,它自动的又开始播放。啊,那像这个属性呢,就是我们的视频标签上常用的一些比 重要的一些属性了,那像视频这种标签的话呢,其实他也可以跟呃另外的标签形成一种组合式的用法。那这里呢我给大家简单的看一下他的一个组合式用法,比如像这样的一个代码, 那这样的一个组合式的用法呢,就是让这个视频有多种的视频格式的资源可以播放,万一某个浏览器不支持,比如说像这个 mp 四的视频,那他就可以尝试的去播放这个 webm 的这样的一个视频格式的这样一个资源, 然后呢像这个 source 后面还有个这这个 type, 其实你看这个就大概知道了,这个属性其实是表示这个视频的格式的这样的一个信息。那还有一个 check 也是可以用来放在这里面的 check 呢,其实是表示一些,比如说你想要去做这个给视频加上一些字幕啊, 你像这个就是一个字幕的文件的一个格式,然后呢这些其他的属性就是跟这个字幕的一些信息相关的一些东西。那像我们在去学习这些标签的时候呢,其实很多标签你不用太去计较,当下知道它是什么意思。 你其实理解了这些标签的一些基本的用法之后,很多东西我们以后都是可以通过一些查找或者看资料 去快速的知道他是干什么的。所以很多这种属性的话,如果我们不常用的话,我们没有必要去特意去记他。那像我们目前这个阶段的话呢,其实视频这个标签啊,就是这上面的这种用法就完全够了。

htvl 标签可以拥有属性,属性是以名称直对的形式出现, 属性是在 htmil 开始。标签中规定,请看演示,比如我们给网页设置背景颜色,请看在包的标签中设置 style 等号,双引号里面显示,这里我们选 bic blod go clol 背景色冒号格瑞。这句代码的意思是设置背景色为灰色,卡车加 s 保存,保存好以后选择文件,右击选择浏览器,打开背景色已变成灰色。 颜色值我们可以使用预定义的颜色值名称如格瑞来定义,也可以使用十六静置的值来定义,如修改格瑞 瑞为井号 f f 六六六六,这个颜色是个红色,修改好以后考试加 s 保存,按快捷键 f 五刷新浏览器 背景色变成红色。关于颜色我会在后面单独讲,这里就不多做解释。再比如,我们写一个标题肩括号 h, 一开始标签肩括号斜杠 h 一结束标签 标题名称我们写 ht 秒第五讲,写好以后考出加 s 保存,再按快捷键 f 五,刷新浏览器标题显示在这里。现在标题标签文字是左对齐, 我们设置居中对齐,请看设置烂属性为三层就可以了。考试加 s 保存,按快捷键 f 五,刷新浏览器 标题以居中显示。再比如,我们设置标题字体为红色,请看设置 style, 等于双引号当中写卡了冒号 red, 这就是代表设置标题字体为红色。 考试加 s 保存爱。快捷键 f 五刷新浏览器标题字体已显示为红色,由于背景色的原因看不清楚,我们把背景色修改一下,改为灰色,再刷新下浏览器,现在看到的就比较清晰了, 总结一下,今天我们讲了如何设置背景颜色以及标题居中和标题字体颜色的更改。当然 st 马尔标签的属性有很多,会在日后 的讲解中用到的时候给大家慢慢介绍。在这里没有办法一次性讲完,下一节讲解水平线、 hr 标签以及 ht 秒注视和如何查看原代码。
![[网站开发入门指南04] 认识HTML的标签| tag |HTML元素
#html #网站开发 #前端开发 #CSS #JavaScript](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/febcaea264f36e39f94340ca3a0014a8~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2087780400&x-signature=KjlvETIoD6EbbsRKNTPT1oOKMZ4%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260302112557789EDE55B4E3C04083D6)
有同学他想了解一下,就是我们之前讲过的 html, cs, 还有就是 javascript 这三个前端开发的语言,网站开发的语言分别是干什么用的?那这个东西呢?其实我在这个 w d g 点 break 那个网站上的这个文章里面,其实是已经有讲到过的啊,但是呢,我也知道,肯定有些同学就是哎,不看,但是会问, 那我这里呢,就干脆给大家明确的指出来这三个语言,我在这篇文章需要学什么,然后在这段文字里面 给大家去介绍了,分别是干什么用的啊?我在这里把它放大啊,你可以直接暂停,然后先看一会。那你看完之后呢,如果你之前不知道的话呢,你肯定会对这三个语言有一个基本的 了解,但是如果你想更深入的了解的话呢,你肯定是要往后接着去学习的。那我们通过之前的内容呢,已经了解到啊,就尤其是上一节课的这个内容已经了解到了,其实我们通过这个开发者工具 看到了这个 htm 这个文件里面是有这么多的各种各样的这种标签,然后你应该也能大概猜到了,就是我们在页面中看到的各种元素啊, 各种元素其实都是这些标签,所以很多时候呢,我们也会把标签称为叫做页面元素,叫做 element, 这是一种比较常见的称呼,那 tml 语言中呢,他定义了很多的这个标签,那在真实的网页的这个 html 文档当中呢,我们也能看到有很多像这种什么 div 啊, p 啊, hr 啊,什么 body 啊, high 的这些, 那这些呢,都是我们后面要去具体了解的一些非常重要的一些标签,那这节课呢,我们要先来去了解一下 htm 语言中标签的这个概念它本身。那要了解标签呢,我们要先来了解一下 html 这个英文啊, h t m h t m l 那 h t m l 这个是典型的一种缩写啊,它的一个全称是这个叫 hype text mark up language, 我有时候英文念的不是很 准啊,勉强将就着听一下,然后他的中文呢,就是超文本标记语言, 那这个中文呢,其实你跟这个跟这个英文一样,你可以把分开去理解,一个超文本,一个是标记,一个是语言,那语言就是, 呃,这个计算机语言啊,然后超文本呢?我们后面讲,那我们这节课主要是来理解这个标记这个东西, 这个标记呢就是这个 markup, 那 h t m 语言中的这个标记呢,其实就是通过标签来实现的啊,那标签的英文呢?是 tag 啊,我们之前就讲过了,那他呢就是有标记的意思。那标记这个概念我想大家都不会陌生啊, 生活中呢,我们经常会去给很多东西做标记,那比如说我们在读书的时候, 学习的时候,我们经常会用这种彩色的这种笔,或者叫马克笔之类的,这种笔嘛去给一些重点的文字,重点的一些内容做一些划线,一些颜色的标记,那以便于我们在复习或者整理资料的时候呢,能够一眼就能看到这些内容,这些文字是比较重要的, 所以说标记它是包含一定特定含义,给特定用户提示的一个作用。那么 h t m l 里面的这些元素,它也叫做标记, 那这个标记它是不是也有类似的作用呢?那显然是的啊,显然是的,所以 h t m l 当中的这些标记啊,就是这个标签 tag, 它的一个非常非常重要的作用,就是利用不同的标记告诉浏览器该如何 呈现不同的效果。我们知道标签是有很多的吗?就是这个 htm 语语言里面,我们光我们已经看到的就已经好好几个了,对不对?所以它不同的标记它会告诉浏览器,让浏览器知道该如何去呈现这些元素, 那比如说我们这里啊,我们这里呃用一个非常简单的代码来演示一下啊,那我这里呢先给大家去简单的说一下, 如果你一开始的话,这里是一个完全空的 html 文件的话呢,这里有两种方式可以让你快速的生成一个最基本的 html 文档的这个内容结构。一个是你输入一个 英文的英文的感叹号,然后直接他有这个提示的啊,他有个提示的,然后直接回车就好了啊,他的一个基本结构就出来了。然后呢, 如果你这个感叹号没有用啊,注意是英文的感叹号,如果你感叹号没有用,你可以输 h t m l, 然后它这里会有个提示, h t m 五啊,这个冒号五,然后你选择这个,它也是会有这样的一个内容出来的啊,然后呢,我们接下来呢,就是 我们接下来要展示的几个标签的一个效果呢,我们这里就写在这个 body 这样的一个呃,标签里面啊,里面你可以跟着我来做啊,我们这里呢先把这个东西启动起来, 启动起来,然后你就看到一个白色的页面了啊,白色的页面。那我们接下来呢就用几个标签来给大家演示一下标签的这个带给浏览器的这种标记的作用。那我们这里呢先来一个 h 一,然后,然后你可以 直接比如说我们叫 hello code, 然后呢我们复制一下同样的内容啊,比如说我这里来一个,然后也是 hello code, 然后呢我在这里来一个 u 啊, hello code 啊,这三个标记都是 h t m l 当中有的啊。然后呢我们可以打开这个这个页面,你会发现这边我们把这个放大, 你看同样的文字,它是不是呈现出了不同的效果,对吧?所以 这个标记就起到了一个告诉浏览器的作用。我当我用 h 一的时候,哎,他就是这样的一个效果,当我用 e m 的时候,他就这样一个效果,当我用这种 u 的时候,他就是这样一个效果,同样的文字浏览器 他知道该去渲染成,该去展示成什么样的一个效果。当然像除了这种这种文字类的这种标签,这明显对文字是有效果的。那还有其他很多的标签,比如说我们在页面中经常看到的一些呃元素,比如说像视频, 像图片,像图片,是这这个标签 i m g 啊,我们可以先了解一下,然后像视频,我们经常看到的是这样的一个标签,就是 video, 就是英文啊, video 这样的一个标签。那我们这里呢就先不展示这两个了啊,后面我们具体讲他们标签的时候呢,我们就是会具体的给大家去展示这些标签去怎么去使用,那所以呢, 像这些元素,像这像我们在页面当中看到这些元素呢,他其实都是用这些对应的标签来进行设置了,然后让浏览器去渲染出来的。那所以标签的首要作用呢?其实就是告诉浏览器页面中有哪些内容,然后如何去渲染他们。 那这些标签呢?他除了给浏览器去看,去渲染之外,他其实还有很重要的一个作用,他其实就是给开发者看的,因为首先这些代码是开发者写的,对吧?所以你会发现这些标签他的这些名字 它都不是随便取的,它都是一些英文字符,或者是一些英文字母的一些简写或者开头字母。比如像这个 h 一,它其实是 h, 就是 head 的这个首字母,然后 这个 h e 呢,就是一级标题的一个意思啊,一级标题的一个意思,那像这个 e m 呢?它的一个英文就是这个 emphasis, 就是强调重点的一个是意思,然后 u 呢,它就是 underline 啊。 安德拉的话呢,我们可以看到我们之前这里,哎,你看这个文字他就一个下滑线的一个效果,所以他这些名字啊,他都不是随便取的。那开发者他再去使用这些代码的时候,他去记忆这些代码的时候,这样的话呢,他就好记很多了啊。 另外呢,当这些标签的名字他是有意义的话呢,那开发者他基本上光愿读这个代码,他就已经能理解这个页面大概是一个什么样一个状态了。呃,比如说像这个文字哦,我一看我 用 h e 包裹的这个文字就是一个标题文字,然后比如说这个 u 包裹的这个文字,哦,我知道这个文字是加下划线,可能,呃,这个文字是有些特别的意思,就是开发者他直接能通过阅读这些标签,大概就能了解到这些代码在干什么啊? 所以这个羽翼化其实也是在开发当中非常重要的一个概念。那说到这里呢,我相信大家啊,对这个超文本标记语言当中的这个标记,你已经能理解是什么意思了。然后呢,这个超文本就跟我们下节课要讲的这个标签的属性有关了。

来到和前端小组一起学 real 三元码,本章节我们将讲解属性系统。属性系统看起来非常简单,但实则暗藏玄机, 它里面有处理有一些核心的问题,比如说 class 应该使用 class name 还是 set attribute style? 如何高效地 def this able? 是 设置 dom 属性还是 html 属性? 为什么表达元素需要双重设置?这些问题的答案都会在章节中进行得到详细的解析。 在上一章节我们看到的 render options, 它是由 not apply patch proper 去两部分去组成的,而其中 patch proper 是 负责属性的设置与更新,当 view 需要去更新一个元素的 class style 事件或者其他属性时,都会调用 patch proper。 而这一章节我们就将沿着 patch proper 的 分发路径去从先盼什么后盼什么入手, 把属性系统的关键决策点去逐个拆解。而 patch proper 是 属性处理的路口,它根据函数名的特征,将处理分发给不同的专门的函数,其中我们就可以看到它这里是去 patch style patch class, 然后去处理一个 event 以及对应的一个表单元素的设置,这也是它对应的一个 tag 和 custom element 的 特殊处理。以及最后是一个 patchdom 的 proper。 屏幕看起来就代码有点少, 所以看的不是很清楚,但是没有关系。在接下来章节中,在接下来章节中,我们将会一一去解析这些函数。 patch proper 的 分发顺序是非常有讲究的 啊,比如说它首先对一个 class 是 最常用的属性,它是会优先处理,而 style 第二常用,它需要特殊的 def 逻辑,而对于事件就是 on, 是 以 on 开头的属性去交给事件系统。而对于 dom 属性和 html 属性,它会根据 should setup as proper 去进行一个判断。这里有个值得非常提前记住的点,就事件分支算在 purpose, 你只是转发给了 patchevent, 但它背后决定了事件更新的性能上线就为什么要保存 in worker, 为什么我们尽量避免 频繁的 a, d, d 和 remove。 而这一块我们先按下不表,后面一个章节会将门进行展开。这个模板是支持点 proper 和 auto 修饰符去强制指定属性的设置方式。大家可以看到它是会有这两种修饰符, 而编辑器会将这些修饰符保留在属性名中去运行,通过检手手字母来去进行一个识别。大家可以看到它是运行时通过检查手字母来去识别。 而这里是巧妙地运用了一个表逗号的一个表达式,就比如说是这 key, key 等于 key 的 status 一, 就先去掉修饰符前缀,再返回布尔值去决定走了哪个分支。我们了解了修饰符的处理逻辑,现在我们来进入一个高频分支,就是 class 的 处理。 class 绑定是 view 中最常用的动态绑定之一,而 view 它其实是支持三种绑定方式,就在 templar 上是有冒号 class 自创一个是还有包括一个对象,甚至包括一个数值。就无论是哪种方式,最终都会被规范化为可直接应用到 dom 的 形态。就 模板编辑阶段,会尽量把 class 归一化,运行时也会在需要时去做兜底。例如在 n 的 函数中去闯入一个对象簇时会走 normalize class, 因此 patch class 接受的 value 通常是就是最终的 class 字母串。大家可以看到这就是一个 patch class 的 一个最终处理方式, 它这里有几个关,非常关键的点就是过度 class 的 合并,就是这里有个处理过度动画的临时 class, 当元素处于过度动画时, transition 组间会在元素上去添加这些临时的 class, 比如说 to interactive 这些 class 去存储在 adder, 会存储在 adder await 信息 key 中,而 patch class 需要将它们与用户绑定的 class 合并。第二个就是 classname 和 set attribute, 这对于普通的 html 元素中,它就直接去设置 e l 点, classname 比 set attribute class value 会更快,但 sv 机必须使用 set attribute, 所以 它这里有个判断,就是 is sv 机它会去通过 set attribute 形式来去 做。同时大家可以看到为什么不用 classlist, 就是 通过 classlist 的 a, d 和 remove 需要足够去操作 a class name 可以 去一次性设置整个 class 的 字母创,就当 class 变化较大时去直接赋能会更加的高效。理解了 class 的 整创 替换之后,再去看 style 的 就会发现它的复杂点就来自两个点,一个是它贴呢,是箭指队的集合,第二个就是它还承载了 will, 杠, show 等行为层面的协助需求。因此 patch style 的 核心不只是设置,而是以最小代价去维护一致 style 的 绑定比 class 复杂的多,它支持字幕创和对象两种方式,需要处理 class cs 变量,浏览器前缀或者 unimportant 的 等特殊的情况。 大家可以看到这样子的一个方式,呃,这就是一个 patch style 的 一个智能 def。 首先它对于一个对象形式的时候,它是需要去做一个 def, 就是 旧址也是对象,它会去移除不再存在的属性,而旧址是函数创,它会是解析后去移除不再需要存在的属性, 然后它就会去设置一个新的属性,最后它就是去做一些函数,向量等等。这样的方式是 style 的 def 的 算法, 它其实是采用两步的形式,就当新旧值都是对象的时候,它会去一首先去移除旧属性,就避利旧对象,如果某个属性在新对象中不存在,将其设置为空字母串。第二步就设置新属性,去便利一个新对象去设置所有的属性。而这种算法的时间复杂度是 o m 加 n, 其中 m 和 n 分 别是新旧对象的一个属性的数量,其中 set style 它就是属性设置的一个细节点。首先如果是以宿主形式的,它就会依次地设置去用于 cs 回退值。 其次,如果是使用 cs 变量的话,它是必须要通过啊 set property, 如果它是 important 的 话,它也是必须要通过 set property 去做处理的。 大家刚看到这个 set style 的 一个特殊处理,其实它这里面是有两个,一个是 cs 变量,那 cs 变量它是怎么去做识别呢?就是以杠杠开头的属性是 cs 自定义属性值必须要使使用 set property 来设置,不能直接复制而杠。而 important 的 值也是必须使用 set property, 并将 杠 important 作为第三个参数去做传录。同时数对于数值值的 style 值用于 cs 回退来进行处理啊。请注意它这里有个非常点,就是 autprefix, 刚刚我们看到它会进行一个自动添加浏览器前缀, 那它是怎么做的呢?它首先 prefix 会检测浏览器是否支持某个 cs 路径,如果不支持,那它就会去尝试添加 web webkit mode ms 前缀,它的结果会被缓存去避免去重复的检测。而请需要注意的是, freet 属性会被特殊处理,即使浏览器支持无前缀的 freet 也会去做尝试添加前缀,这是因为某些旧版本的浏览器的 freeet 行为不一致。除了浏览器前缀之外, patch style 还出需要去处理一个非常重要的一个协助, 那就是指定就 vga show。 当元素存在冒 style 动态 style 和绑定和 vga show 的 时候,如果 style 动态 style 设置 display, vga show 显示时应该恢复。这时如果 vga show 隐藏元素 display now 应该覆盖 vga style 这样子一个值。 而这是怎么去实现的?那这是去通过 visual origin display 和 visual hand 这两个标记去做一个实现的。大家可以看到,在这里 visual 的 时候,它去做一个,两个标记去做一个实现。 到这里我们就已经分别看完了 class 和 style 两种最常见的快度镜。接下来进入到一个更加通用,也更加容易踩坑的部分,就同一个键,到底是应该写在到米属性里面,还是写在 html 属性里面呢?而这个就是我们的 should set as proper 该设置哪一个? 需要注意的是, html 元素的属性有两种设置方式,一种是 dom 属性, proper 就是 l 点 value 等于 hero。 还有另外一种是 html 属性,就是 attribute, 就 l 点 set attribute variable 对 应的一个 value 值,大部分 情况两者项目相同,但某些元素属性必须使用特定的方式,而 should set as proper 去决定哪应该去使用哪种,大家一看到它就是对应我们的一个具体的方式,而 should set as proper 去决定哪应该去使用哪种,大家一看到它就是对应的方式,而 should set as proper 就 分为两段。 首先我们来进行一个一对一的讲解,对于 svg 来说, svg 元素大多数属性都必须使用 set attribute, 而对于布尔类型的属性,就比如说 spell, trick, dragon label, a translator creator, 它必须使用 set attribute, 而 i framed setbox 必须使用 attribute, 而 form 属性只读必须使用 set attribute, 而 input 点 list 也是必须使用 set attribute。 test tab 也是使用 set attribute, 而媒体元素,比如说 the west hat 必须使用 set attribute, 那 同时原声事件的再加字母串值也必须使用 attribute。 最有什么呢?如果是盗门属性就用是盗门属性,而刚刚那些只是错掉一看。现在我们来对这些特殊的属性来进行一个讲解。 首先第一个就是每每举值的一个不二属性,像 spin, trick, joy, able, trace, state, out, current 这些属性的到某属性必须是不二值,但 h, t, m, l 属性是每举字母串就 to 和 force 它是一个字母串,那如果是使用到某属性去设置成一个字母串的话,那么会被转为成一个 自创 force 会被转为 true 啊 true 化,所以必须使用 set attribute。 同时 fm 的 sendbox 这个属性去控制 fm 的 安全属性就设置,如果你设置到我们属性为 null, 就 会变成自创 null, 而设置成空自创会使用最严格的杀伤模式,而只有通过 set attribute 和 ensure attribute 才能够正确的处理。下一个就是 input 点 list, input 的 list 它是只关联一个 data data list 属性,而到某属性 a r 点 list 是 只读的返回关联的 data list 是 不能直接复制的,而 form 元素里面 表单元素的 form 属性也是只读的去返回索取的 form 元素,所以这些属性不能直接复制,必须使用 set attribute。 对于一些媒体元素的 words 和 size。 什么是媒体元素?就是 image, video, canvas 和 source 点框高,必须使用 attribute 的 设置。盗墓属性的设置可能是不生效的, 就盗墓属性设置行为不一致而 show set as proper 的 本质是什么?本质是在为后续的两条分支选路。 走到某属性分支意味着更加贴近浏览器对象模型,可能带来类型转换与指读限制。而走 attribute 分 支则更加贴近序列表的 html 表达,就更容易与表单重置,第三方读取逻辑对齐。先把这个选择记住,再看两边的具体时间就比较清晰了。 所以我们来看一下到母属性的设置,就是当 should set as proper 返回 true 时,用 patch down proper 去设置到母属性。大家来看到这是一个 inner html 和 test content 的 一个设置,而下面就是一个 value 属性的特殊处理,对应的这是 这是一些空值处理,以及布尔值就是空字副状场为刚呢,就是我们所看到的一个 value 属性的一个特殊处理, 请注意 value 是 最复杂的盗木属性,因为什么它首先它具有一个比较优化,就只有当新旧值不同时才会去设置,避免不必要的盗木操作。同时 option 处理特殊处理, option 的 value 属性如果没有设置的话会回退到其文本内容,所以是比较时要用 get attribute value 而不是 array value。 同时 check box 的 默认值是 on 而不是空字不串,同时它还会去存储原始值, 非字母串值会被 dom 转为字母串,而 will 会将原始值存在 a r 点杠 value 中去共 v 杠 model 去做实体。 而在上一步我们看到中去设置 in the html 表中, will 会去使用 on serve to transfer html 表包装值去以支持 trusted types 安全策略。而正在上一章章我们就建 已经介绍过了,所以在此我们就不再去追溯了。看完到我们属性的设置,我们来再看看 htm 表的是如何去做处理的,就当 should set as proper 去访问 force 的 时候,我们会去通过 patch or true 来去设置 htm 表属性。首先啊,这是 svg 叉 link 的 命名空间 去做,对那个处理危机中的某些属性必须要叉 link 秘密空间,就比如说啊叉 link, 杠 herf 这些属性必须使用 set attribute n s 设置 set attribute n s 而对于而对于布尔值处理的话, 首先需要注意的是,它存在即表示 true, 不 存在表示 false。 设置值 true 或者空字不算,就是 set attribute key 等于冒号,而 false 或者 null 的 时候属于 null。 attribute key 需要注意它是 including or true 函数,判断一个值是否应该包含不小于属性,而这两种方法需要注意,我们这两种方法的写法是等价的, 走路到 patch or true 这里时,已经覆盖了绝大多数使用需要写入 attribute 的 场景。普通键值,叉令、可秘密空间以及不小于 unk 属性,这是有或者无极帧的特殊语义。但 patch proper 还有一种 不适合直接缩略为字母串的例外,就比如说 real element 需要把复杂值当做属性传递, real 跟 model 相关的 true force value 也需要额外的存储,这就是 real 的 custom element 特殊处理。就当元素是 real 定义的 custom element 的 时候,属性处理是有特殊的逻辑的。在这里我们可以看到 custom element 是 通过 its view c e 标识去识别,对于这些元素包含,它会去做这样子处理,就是包含大写字母的属性值会被转为驼峰形式,非字母串的值会作为盗门属性设置,而不是缩列为字不串。 这使得 view 组键可以通过 custom element 去接收复杂的 purpose 值。而除了 custom element, view 杠 model 在 script 上的真自定义真假值也需要特殊的存储。 在这里我们可以看到六杠 model 在 支持自定义的真假值,这也是通过 achieve variable 等于 yes, force 等于杠 value。 这些值并不是标准的 html 属性,不能通过 set attribute 设置 will 将它们存储在原数的自定义属性上。去 这里我们就可以看到了,它是通过啊 r 点杠去 value elegant 点杠 force value 去存储在元素的自定义属性上。 view 杠 model 指定会在处理 check box 上自动去读取这些值,哎,最后我们来看看表单元素为什么需要特殊的双重设置策略。对于 value, 去 tricked, selected 这三个属性 view, 它会去同时设置 dom 属性。 html 属性为什么需要双龙设置呢?这是因为表达了重置,比如说 input type and reset 会将表达元素重置为 html 属性值,同时为了去做一些第三方库的一个接龙,就比如说某些库或者浏览器扩展 可能会去读取 html 属性,而不是 dom 属性。注意,需要注意的是, custom element 标签名包含杠会被排除在外。最后我们再看一个属性处理流程图。 首先,对于一个 patch proper, 它会去读它的 key, key 是 什么?就是它对应的是 class style, on 还是其他的,那对于 class, 它会进行 patch class 对 于 style, 它会进行 patch style。 对 于 on, 是 v 杠 model 兼容器,它会去做。 如果是否他会去做一个 patch event, 而 patch event 将会是我们下节章节的重点,而如果是的话,请跳过。对于检查修饰符,如果是点 proper, 如果是 attribute, 如果是无修饰符,去分别的去对应它进行下一步的操作。对啊,屏幕有点小,可能看不全。 如果将它当成一个流水线来看,前半段主要负责高频而确定的快捷操作,而后半段主要是负责低频但必须正确的边界接龙,而事件系统 则是一个被单独隔离的出来的高频模块。而下一章我们会去看它为什么需要这样设计,那我们来看一下本章节的一个小结。 patch proper 是 real 属性的核心,它根据属性类型将处理分发给专门的函数 a patch class, 利用 class name 直接复制实现高效的更新。 a patch style 它会去通过智能的 def 去避免不必要的到幕操作。 a should set as proper 会去处理到幕属性与 html 的 复杂边界情况。这套系统体现了 view 对 性能的极致追求,能用盗门属性就不用 set attribute, 能直接赋值就不用 casteist。 同时它还处理了大量的边界情况,确保在各种场景都能够正常工作。下面我来回看一下本章节的深入思考。 首先,一为什么 input list 等于 data list 杠低,必须使用 set attribute 而不能用 dom 属性呢?如果强制使用 dom 会发生什么问题?二就是 patch style 的 diff 算法在什么情况下效率最高,在什么情况下效率最低呢?有没有什么优化的空间? 第三点就是 should set as proper 中为什么 fframe 的 data box 属性需要特殊处理?第四个是为什么 will 为什么要在表单元素上去同时设置 dom 属性和 html 属性呢?好的,我们本章节就到此结束了,欢迎大家点阅、点赞、订阅以及分享我的频道,我们下期节目再见!