<img> html图片标签学习-html网页内放图片使用是img标签元素完成,而非直接将图片放到网页代码内。 一、html img语法 1、img是自力一个自闭合标签, img .../ ,不像div标签以&l... 刘楷的博客『2020』

<img> html图片标签学习

『记录点滴,记录成长,记录工作,记录生活,记录人生。』
   
首页>> 代码 >><img> html图片标签学习
2020-1-15 16:48 Wednesday
分类: 代码

<img> html图片标签学习

文章作者:onfd1983
手机阅读

html网页内放图片使用是img标签元素完成,而非直接将图片放到网页代码内。 一、html img语法 1、img是自力一个自闭合标签,<img .../>,不像div标签以&......

html网页内放图片使用是img标签元素完成,而非直接将图片放到网页代码内。

一、html img语法

1、img是自力一个自闭合标签,<img .../>,不像div标签以<div>入手下手以</div>竣事

2、img功能介绍

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

3、图片img结构

<img src="images/logo.gif" width="100" height="60" alt="CSS5网站" />

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

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

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

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

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

5、实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html图片img标签使用</title>
</head>

<body> <img src="//www.css5.com.cn/images201610/logo.gif" alt="CSS5weblogo" /> </body> </html>

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

6、截图

成功用img在网页设置图片 告捷用img在网页配置图片

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

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

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

<img src="//www.css5.com.cn/images201610/logo.gif" 
border="2" alt="CSS5网站logo" />

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

img加border设置边框
img加border配置边框

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

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

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

<img src="//www.css5.com.cn/images201610/logo.gif"
style="border:2px dashed #F00; width:300px"/>

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

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

img直接设置css示例截图
img直接配置css示例截图

三、css设置img图片技俩

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html图片img设置装备摆设CSS花色 CSS5</title>
<style>
.imgcss{ width:200px; height:100px; border:2px solid #F00}
.wcss img{ width:300px; border:3px dashed #00F}
</style>
</head>
<body>
<p><img src="//www.css5.com.cn/images201610/logo.gif" class="imgcss"/></p>
<p class="wcss"><img src="//www.css5.com.cn/images201610/logo.gif" /></p>
</body>
</html>

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

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

2、截图

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

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


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:刘楷的博客『2020』 » &lt;img&gt; html图片标签学习
标签: html代码

网友评论(0)

*

*