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配置须要排版技俩。