HTML插入图片:标签 |
您所在的位置:网站首页 › 在网页中插入图片的代码 › HTML插入图片:标签 |
首页 > HTML
阅读:55,900
HTML插入图片:
![]() ![]() ![]() ![]() ![]() ![]() ![]() 注意,width 和 height 属性只是临时修改图片的尺寸,并不会改变图片原始文件的大小。 关于 width 和 height 属性的两点建议: 一般建议为图片设置 width 和 height 属性,以便浏览器可以在加载图片之前为其分配足够的空间,否则图片加载过程中可能会导致您的网站布局失真或闪烁。 如果您的页面使用响应式布局(自适应布局),建议在上传图片之前裁剪好尺寸,而不要设置 width 和 height 属性,这样图片能够跟随屏幕宽度自动改变尺寸,从而不会变形,或者超出屏幕宽度。 HTML5 中的图片属性 有时我们需要按照比例来放大或缩小图片的尺寸以适应不同的设备,避免图片过大超出屏幕的范围,为此 HTML5 中增加了 标签,该标签允许您针对不同类型的设备定义多个版本的图片。 在 标签中包含零个或多个 标签,通过 标签中的 media 属性可以设定匹配条件(允许哪个版本的图片显示),通过 srcset 属性可以定义图片的路径。另外,在 标签的最后还需要定义一个![]() ![]() 注意:图片映射不能应用于网站导航,因为它对搜索引擎并不友好。图像映射经常与地图一起使用,有许多工具都可以创建图像映射,例如 Adobe Dreamweaver 就可轻松创建图像地图。 shape 和 coords 属性 在 标签中可以通过 shape 属性来定义可点击区域的形状,并通过 coords 属性来定义形状所对应的坐标。其中 shape 属性的可选值有三个,分别是 rect(矩形)、circle(圆形)和 poly(多边形),coords 属性中坐标的值则取决于可点击区域的形状。 假如定义一个矩形的可点击区域,示例代码如下:其中 x1、y1 代表矩形的左上角坐标,x2、y2 代表矩形的右下角坐标。 假如定义一个圆形的可点击区域,示例代码如下: 其中 x、y 代表圆心的坐标,而 radius 则是圆的半径。 假如定义一个多边形的可点击区域,示例代码如下: 其中每对 x 和 y 的值都代表一个多边形的顶点坐标。 注意:所有坐标都是相对于图片的左上角来计算的。 关注微信公众号「站长严长生」,在手机上阅读所有教程,随时随地都能学习。本公众号由C语言中文网站长运营,每日更新,坚持原创,敢说真话,凡事有态度。
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |