首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么指令属性在img html标签上无效?

指令属性在img HTML标签上无效的原因是img标签是一个自闭合标签,它没有结束标签,因此无法包含其他内容。指令属性通常用于指定元素的行为或样式,而img标签只能通过属性来设置其行为和样式。

然而,img标签有一些特殊的属性,如src、alt、width、height等,用于指定图像的来源、替代文本和尺寸等。这些属性是img标签的固有属性,可以直接在标签上使用,而不需要使用指令属性。

指令属性通常用于具有开始和结束标签的元素,如div、span等。在这些元素上,指令属性可以通过指令语法来设置元素的行为和样式,例如ng-if、ng-class等。

总结起来,指令属性在img HTML标签上无效是因为img标签是一个自闭合标签,无法包含其他内容,只能使用固有属性来设置其行为和样式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue 入门 指令

{{变量名}}获取数据 进行算术运算 逻辑运算 调用获取数据对应类型相关方法 5.v-text 指令 和 v-html 指令 作用: 都是用来获取vue实例data中声明数据 语法: 在哪个标....v-text获取数据直接渲染到页面的指定位置 2.v-html获取数据先解析数据里面html标签然后在将解析标签渲染到页面上 6.v-on 指令 作用: 用来给页面html标签绑定事件 语法...作用: 用来将html标签的属性进行绑定,绑定给vue实例进行统一管理 好处: 如果没有绑定标签属性写死的,无法动态修改 绑定之后,日后修改vue中属性值达到修改标签属性效果 语法: 绑定html...标签哪个属性 直接在标签的对应属性上 v-bind:属性名=“vue管理变量名” 简化语法: v-bind:属性名=“变量名” ==== :属性名=“变量名” 9.v-for 指令 作用: 用来在html...:key=“唯一值” 10.v-model 指令 作用: 将html (form)标签的value属性进行绑定,交给vue进行管理 语法: 直接对应form标签上加入 v-model=“变量名”

7910
  • 前端基于DOM或者Canvas实现页面水印

    水印盒子放到包裹水印图片的盒子里 (包裹水印图片的盒子包裹水印)(2)包裹水印图片的盒子放到被绑定元素之前(3)被绑定元素放到裹水印图片的盒子里(不然被绑定元素与包裹水印图片的盒子层级同级)2.新建index.vue将水印的指令放到标签上...水印可以放大div标签上,也可以是img标签上。注意:img才有onload方法,div标签么有。...(type === "attributes") (2)判断删除的标签属性是否是在设置水印的标签上 (3)判断修改过的style和之前的style对比,不等的话,重新赋值// watermark...// 1 判断删除的是否是标签的属性 (type === "attributes") // 2.判断删除的标签属性是否是在设置水印的标签上 // 3.判断修改过的style和之前的...有onload的方法,如果自定义指令注册在html标签的话,只需要init(el, binding.value) el.onload = init.bind(null, el, binding.value

    57550

    前端基于DOM或者Canvas实现页面水印

    水印盒子放到包裹水印图片的盒子里 (包裹水印图片的盒子包裹水印) (2)包裹水印图片的盒子放到被绑定元素之前 (3)被绑定元素放到裹水印图片的盒子里(不然被绑定元素与包裹水印图片的盒子层级同级)2.新建index.vue将水印的指令放到标签上...水印可以放大div标签上,也可以是img标签上。注意:img才有onload方法,div标签么有。...(1)判断删除的是否是标签的属性 (type === "attributes") (2)判断删除的标签属性是否是在设置水印的标签上 (3)判断修改过的style和之前的style对比,不等的话,重新赋值...// 1 判断删除的是否是标签的属性 (type === "attributes") // 2.判断删除的标签属性是否是在设置水印的标签上 // 3.判断修改过的style和之前的...有onload的方法,如果自定义指令注册在html标签的话,只需要init(el, binding.value) el.onload = init.bind(null, el, binding.value

    33910

    CSS 基础 之 基础选择器+字体文本相关样式

    所有标签上都有class属性,class属性的属性值称为类名(类似于名字); 2. 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头 ; 3....所有标签上都有id属性 ; 2. id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的! ; 3. 一个标签上只能有一个id属性值 ; 4....font-size 取值 数字 + px 注意点 谷歌浏览器默认文字大小是16px ;单位需要设置,否则无效 谷歌浏览器默认文字大小是16px ; 单位需要设置,否则无效 4.2 字体粗细 属性名...文本 ;2. span标签、a标签,3. input标签、img标签 left :左对齐 center : 居中对齐 right:右对齐 注意点 如果需要让文本水平居中,text-align属性给文本所在标签...文本 ;2. span标签、a标签,3. input标签、img标签 5.3 文本修饰 属性名 text-decoration 取值: underline 下划线line-through 删除线overline

    2.1K10

    从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范

    每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间。...2、为什么要初始化CSS呢? 为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。...:子绝父相,然后子盒子先往右走父盒子的一半50%,在向左走子盒子的一半(margin-left:负值。...---- 六、图片和文字垂直居中对齐 vertical-align 主要用在 inline-block 标签上,效果最好。...默认属性是: vertical-align:baseline; baseline: 默认。元素放置在父元素的基线上。 sub: 垂直对齐文本的下标。

    1.3K30

    JavaScript-Vue

    **指令:**HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同含义。...例如:v-if,v-for… 在vue中,通过大量的指令来实现数据绑定到视图的,所以接下来我们需要学习vue的常用指令,如下表所示: 指令 作用 v-bind 为HTML标签绑定属性值,如设置 href...指令 作用 v-bind 为HTML标签绑定属性值,如设置 href , css样式等 v-model 在表单元素上创建双向数据绑定 v-bind: 为HTML标签绑定属性值,如设置 href , css...效果如图所示: 注意:html属性前面有:表示采用的vue的属性绑定! v-model: 在表单元素上创建双向数据绑定。什么是双向?...data属性中数据变化,我们知道可以通过赋值来改变,但是视图数据为什么会发生变化呢?只有表单项标签!所以双向绑定一定是使用在表单项标签上的。

    7310

    前端面试题归类-HTML1

    sessionStorage:在浏览器关闭的时候就会清除二、什么是 HTML 语义化,有什么好处语义化的意义给用户们看:保证css失效时用户仍然可读给开发者看:代码结构更清晰给浏览器看:利于搜索引擎检索有助于构架良好的...DOCTYPE>不是Html标签,而是告知浏览器此页面使用哪个HTML版本进行编写的指令 3、标准模式(Standards mode)以浏览器支持的最高标准运行;混杂模式(Quirks mode)中页面是一种比较宽松的向后兼容的方式显示...五、HTML5为什么只需要写HTML> 主要原因为html5中只有一个文档类型,就是html,而不像html 4.01或xhtml1.0还有多个文档类型。...空元素是在开始标签中关闭的。...十二、a标签在新窗口打开链接怎么加属性? 链接十三、form标签上定义请求类型的是哪个属性?定义请求地址的是哪个属性?

    46440

    Vue有什么特性,相对于其他框架都有那些优势!

    (给达达前端加星标,提升前端技能) ​ ? Vue所提供的一些相对高级的特性,表单操作,自定义指令,计算属性,过滤器,侦听器,生命周期。 表单操作的作用,用于用户的交互,通过表单来进行数据的交互。...计算属性,为什么需要计算属性呢,表达式的计算逻辑可能会比较复杂,使用计算属性可以是模板内容更加简洁。 如何使用计算属性呢?...指令是用来操作dom,什么是组件,组件是html css js等的一个聚合体。组件化,可以加速项目的进度,可以在项目中复用,将一个完整功能的一部分可以多处使用。...el:'#app', // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器 data:{ // Vue对象中绑定的数据...请分享给更多人 关注「达达前端」加星标,提升前端技能 在博客平台里,未来的路还很长,也希望自己以后的文章大家能多多支持,多多批评指正,我们一起进步,一起走花路。

    1.5K20

    :第二章 - 常见的指令的使用

    ,从右侧的样式中可以看到,隐藏显示,当加载完成后, p 标签上去除了该属性,同时插值表达式也编译完成,正确显示出来。...在更新数据上,我们也可以使用差值表达式进行更新数据,不同于 v-text、v-html 指令,差值表达式只会更新原本占位插值所在的数据内容,而 v-text、v-html 指令则会替换掉整个的内容。...3、 v-bind   v-bind 可以用来在标签上绑定标签的属性(例如:img 的 src、title 属性等等)和样式(可以用 style 的形式进行内联样式的绑定,也可以通过指定 class 的形式指定样式...-- 3 v-bind:可以用来在标签上绑定标签的属性和样式,对于绑定的内容,可以对该内容进行编写合法的 js 表达式 4 可以简写为 :要绑定的内容 5...同时,我们在 ul 标签上绑定了一个 key 属性,它可以为循环出来的每一项提供一个 key 值,我们可以理解成数据库表中的每一条数据都有一个唯一的主键值,同样的,我们需要保证这个 key 值要唯一对应着当前的数据项

    1.2K10

    跟我一起探索HTTP-内容安全策略(CSP)

    CSP 被设计成完全向后兼容(除 CSP2 在向后兼容有明确提及的不一致; 更多细节查看这里 章节 1.1)。...一个 CSP 兼容的浏览器将会仅执行从白名单域获取到的脚本文件,忽略所有的其他脚本(包括内联脚本和 HTML 的事件处理属性)。...一个策略也可包含一个 default-src 或 style-src 指令去限制来自一个 `` 元素或者 style 属性的內联样式。...示例 5 一个在线邮箱的管理者想要允许在邮件里包含 HTML,同样图片允许从任何地方加载,但不允许 JavaScript 或者其他潜在的危险内容(从任意位置加载)。...在 Content-Security-Policy 标头中指定的策略有强制性,而 Content-Security-Policy-Report-Only 中的策略仅产生报告而不具有强制性。

    44820

    深入理解内容安全策略(CSP):保障网页安全的利器

    CSP 兼容的浏览器只会执行从白名单域获取的脚本文件,可忽略内联脚本和 HTML 事件处理属性,甚至站点也可以选择全面禁止脚本执行。(二)数据包嗅探攻击除限制内容加载域,服务器还能指明允许使用的协议。...三、CSP 策略的制定与编写(一)制定策略通过 Content-Security-Policy HTTP 标头指定策略,策略参数是包含各种 CSP 策略指令的字符串。...为防止内联脚本运行和杜绝 eval()的使用,可以包含 default - src 或者 script - src 指令;限制 元素或者 style 属性的内联样式可包含 default...report-uri http://reportcollector.example.com/collector.cgi六、违规报告(一)违规报告语法报告 CSP 违规行为的推荐方法是使用报告 API,在中声明端点并使用标头的指令...七、浏览器兼容性在某些版本的 Safari 浏览器中存在特殊不兼容性,设置内容安全策略标头但未设置相同来源(Same Origin)标头时,会阻止自托管内容和站外内容并报错。

    18710

    浏览器特性

    标签 HTML中的 标签用来加载外部脚本或者编写内联脚本。 页面在执行时,遇到 标签都会让页面等待脚本的解析和执行。...需要注意的是:这两个属性不能用在内嵌脚本中,只能用在外联脚本标签上。 带有 defer 属性的脚本将在文档完成解析后,触发 DOMContentLoaded 事件之前执行。...制定策略 一个策略由一系列策略指令所组成,每个策略指令都描述了一个针对某个特定类型资源以及生效范围的策略。...也可以指定别的策略,如 script-src 指令来防止内联脚本运行, 并杜绝 eval() 的使用。style-src 指令去限制来自一个 元素或者 style 属性的內联样式。...一个在线邮箱的管理者想要允许在邮件里包含HTML,同样图片允许从任何地方加载,但不允许JavaScript或者其他潜在的危险内容(从任意位置加载)。

    1.3K10

    『知识巩固#1』Html、Css基础整理

    根据语境区分 b、strong 加粗 u、ins 下划线 i、em 倾斜 s、del 删除线 媒体标签 图片标签img 属性名、属性值 alt属性值作为替换文本、src属性作为图片链接、title...textarea 文本域标签 一般通过css给其添加行列,即宽高 禁用文本域的拖拽改变大小 label标签 实现点击固定区域便可选中单选框、多选框 使用方法① 用label标签把内容包裹起来 在表单标签上添加...id 属性 在 label 标签的for属性中设置对应的id值 使用方法② 直接使用label标签把内容和表单标签一起包裹起来 需要把label标签的for属性删除 语义化标签 无语义 div...,用空格隔开即可 id 选择器 配合js 诞生,在一个页面中式唯一的,不可替代的 #id {属性名: 属性值} 所有标签上都有id 属性 每一个标签只能有一个id属性值 一个id 选择器只能选中一个标签...给行内元素设置margin和padding 水平方向的margin和padding布局中有效 垂直方向的margin和padding布局中无效

    4K20

    【Nginx32】Nginx学习:随机索引、真实IP处理与来源处理模块

    而今天,我们要学习的则是另一个类似的指令,只不过它是随机在目录中拿出一个文件来当做默认页索引。...它只有一个配置指令。 random_index 在指定位置启用或禁用模块处理。 random_index on | off; 只能配置在 location 模块下,默认值为 off 。...PROXY 协议必须事先通过在 listen 指令中设置 proxy_protocol 参数来启用。...如果禁用递归搜索,则与受信任地址之一匹配的原始客户端地址 REMOTE_ADDR 将替换为由 real_ip_header 指令定义的请求标头字段中发送的最后一个地址。...Nginx 中处理这个的就是 ngx_http_referer_module 模块,它用于阻止对“Referer”标头字段中具有无效值的请求的访问。

    72820

    JavaWeb学习——4.XML

    标记性语言:html就是标记性语言  可扩展:html中每个标签是固定的,每个标签都有其特定的含义  但是xml中的标签是可以自己定义的 2.xml用途和介绍  html是用于显示数据,xml也可以显示数据...前端学习必备公众号ID:mtbcxx】 3.xml属性的定义  属性定义的要求:  (1)一个标签上可以有多个属性  (2)一个标签上两个属性的名称不能相同  (3)属性和属性值之间用等号,属性的属性值用引号引起来...6.PI指令  PI指令也叫处理指令  可以再xml中设置样式(比如css等)  写法: 1 ?...注意:PI指令对中文的标签元素是不起作用的 注意:PI指令对中文的标签元素是不起作用的 3.xml的约束 1.为什么需要约束  比如现在定义一个person的xml文件,只想要在这个文件中保存person...  简单元素:没有子元素  复杂元素:有子元素  (3)在xml文件中引入dtd文件 ?

    73420
    领券