热门关键字:
jquery > jquery教程 > jquery教程 > html5 img 选择器,<img> html图片标签学习

html5 img 选择器,<img> html图片标签学习

296
作者:管理员
发布时间:2021/8/12 19:13:10
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5279
  html网页内放图片使用是img标签元素完成,而非直接将图片放到网页代码内。


  一、html img语法


  1、img是自力一个自闭合标签,不像div标签以


  入手下手以


  竣事


  2、img功能介绍


  html代码中紧要img是引入图片的标签。


  3、图片img结构


  img标签必需设置属性为src(图片路子配置的属性),其它均可设置也能够或许不设置装备摆设。


  重点:img标签内src属性是必须的,也是引入图片到html的图片门路地点设置装备摆设处。


  4、img标签元素结构分析教程图


  下列是img图片标签分析图:


  html元素之图片img元素阐发图


  5、实例代码


  html图片img标签使用


  以上代码看出img标签设置装备摆设图片元素在HTML内,src图片地点设置内部网址图片地址,配置描述alt属性,没有配置宽度、高度和其它属性。


  6、截图


  告捷用img在网页配置图片


  二、图片img直接设置装备摆设款式


  图片Img除了配置宽、高大要直接使用属性外,还概略设置装备摆设边框。


  1、border设置装备摆设图片边框


  border="2" alt="CSS5网站logo" />


  到场border属性为2,设置装备摆设图片边框为2px


  img加border配置边框


  从上看出一个题目,图片边框默认是黑色的,同时一致阅读器默许色调也会有些差距,那如何设置装备摆设重要的边框?


  治理这个需求就需求css实现。


  2、img直接设置装备摆设css名堂


  img即标签内设置装备摆设CSS,就须要使用style属性值来配置,下列代码:


  style="border:2px dashed #F00; width:300px"/>


  img标签内使用style属性设置边框,与宽度。


  3、标签内使用style设置装备摆设CSS成绩截图


  img直接配置css示例截图


  三、css设置img图片技俩


  以上先容对图片设置装备摆设花式,经过标签内配置CSS,而通常倡议内部CSS来管制HTML内构造名堂,这样网页多了,独立出的CSS一改,全站HTML构造随从跟随窜改。


  1、内部CSS对html内图片设置装备摆设名目


  html图片img设置装备摆设CSS花色 CSS5


  。imgcss{ width:200px; height:100px; border:2px solid #F00}


  。wcss img{ width:300px; border:3px dashed #00F}


  以上代码一个对img直接使用class引入CSS,其余一个经由指向对class=wcss对象内的img设置装备摆设CSS款式。两种状况都常使用,按照需求决意对图片CSS。


  固然为了便于维护CSS,一般CSS代码是放CSS文件内,再html使用link引入CSS文件,这里便于成绩实例,所以将CSS直接放HTML内进行实例。


  2、截图


  两种外部CSS设置装备摆设img图片的格式排版


  以上进修了IMG元素根本,又深造图片标签内直接配置CSS款式,又进修内部CSS(两种法子)对html img配置须要排版技俩。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐