电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

img图像标签的基本用法编纂者

2020-10-29 15:16:46 出处:[ 菜菜电脑网 ] 人气:次阅读
这篇文章主要参考了HTML/XHTML中img图像标签的基本用法,文中列于了img标签的一些常用属性,能够的朋友可以参照下

图像标签用做在网页里标示出一副图像。
HTML/XHTML 图像 <img /> 标签
在 XHTML 中,通过 <img /> 标签来定义推测一副图像。<img />是一个非形同对标签。

基本语法:

XML/HTML Code拷贝内容到剪贴板

  1. <img src="url" />

<img /> 标签 通过 src 属性来确认图像来源,url 是一个相对或者绝对的图像地址。

图像标签属性:
src:图片源,必要。指明推断的图像来源地址,可以是相对地址或者绝对地址。
alt:可替换文本,可省略。用以图像无法看出或者浏览器屏蔽了图片时,结果显示出来的换成文本。
title:图像指引文字,可省略。当鼠标逗留到图片上时,才会上会之外文字。
width:图片说明了的宽度,可省略。单位为像素。
height:图片结果显示的高度,可省略。单位为像素。

文本附加属性(alt)
图像标签的文本更换属性 alt 虽然不是一个所需的属性,但却是一个很最主要的属性。当因为某些原因,浏览器加载图像受挫的时候,将表明该替代文本以替代原图像以发放被盗的就其图像信息。该属性也并能那些常用文本浏览器的用户阐释网页内容。
因此,给每幅图像替换成一个有意义的 alt 文本去掉属性是个很好的习惯。

<img /> 标签可用唱歌
在 e:html 文件夹下的创始人 images 文件夹用以贮藏图像文件。将下面这幅图片,鼠标右键自由选择 “图片另存为”,将图片存储到 images 文件夹下以可用。
201636120500949.jpg (350×318)

编辑我们的 XHTML 小例子 1.html ,在 id="main-content" 的 p 标签内要用如下变更:


XML/HTML Code解码内容到剪贴板

  1. <h3>文章题目</h3>

  2. <p>文章具体内容</p>

  3. <p><img src="images/flower_1.jpg" alt="花朵" /></p>

这样我们就在网页中推断了一幅图像。

原则上图像标示出尺寸
可以给 <img /> 标签提高 width 或 height 属性以手动均须图像标示出的尺寸:


XML/HTML Code遗传物质内容到剪贴板

  1. <img src="images/flower_1.jpg" alt="花朵" width="350" height="270" />

查看
一般情况下都会忽略图像尺寸属性而配置文件说明了原图大小或者浏览器自适应大小看出。指明不恰当的图像结果显示尺寸,可能会让图像结果显示变形。
由于暂存图像须要一定的时间,应尽量在确保图片质量的前提下,增加图片的体积以尽量超越较差的用户采访体验。

相接读物
像素(Pixel):我们可以形象的显然像素就是一个一个计算机可以揭示的之比的点,例如我们常说的的屏幕分辨率是 1024*768 ,意思就是屏幕横着有 1024 个(像素)点,竖着有 768 个(像素)点。当做单位时一般预设写书 pix。

以上就是img图像标签的基本用法成文的简要内容,更多恳请高度重视php中文网其它系统性文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152