img标签及其它替换元素

来源：互联网发布：网页设计什么软件编辑：程序博客网时间：2024/06/13 22:44

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

为了网页美观，初始化标签中会做一项工作：转化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>

效果图：
由

变为：

阅读全文

0 0