img标签及其它替换元素

最新推荐文章于 2023-02-20 16:57:07 发布

雙安

最新推荐文章于 2023-02-20 16:57:07 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS

本文链接：https://blog.youkuaiyun.com/xiongwanfeng/article/details/75036861

HTML/CSS 专栏收录该内容

24 篇文章

订阅专栏

图片是内联元素，同时是内联替换元素，内联替换元素可以设置宽高。

为了网页美观，初始化标签中会做一项工作：转化img为block块状元素display: block;，并消除图片的margin border，置为0。

什么是替换元素与非替换元素？

⑴替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

XHTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

⑵非替换元素：

XHTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如<p>wanmei.com</p>，浏览器将把这段内容直接显示出来。

测试代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>image图片标签</title>
	<style type="text/css">
		img{
			width: 300px;
			height: 300px;
			display: block;
			margin: 0px;
		}
		div{
			width: 300px;
			height: 300px;
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<img src="mypicture.jpg" alt="江河落日图" title="鼠标放上，它就显示">
	<!--src中写入图片的地址 
		引入上一级目录的图片方法：../picture.jpg
		图片丢失时，可以用alter进行说明 -->
	<img src="https://img.alicdn.com/tfs/TB1euIeSXXXXXctXFXXXXXXXXXX-520-280.jpg" alt="">
	<!-- 引入远程图片，粘贴地址即可 -->
	<div></div>
</body>
</html>

效果图：
由

变为：