本文共 3323 字,大约阅读时间需要 11 分钟。
图像标签<img>和源属性(Src)
在 HTML 中,图像由<img>标签定义。<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。
URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为 http://www.runoob.com/images/pulpit.jpg
图片标签用于向当前页面中引入一个外部图片
使用标签<img>来引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素(基于块和行内元素之间,具有两种元素的特点)属性:
src属性指定的是外部图片的路径(路径规则和超链接是一样的)alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录width 图片的宽度(单位是像素)height 图片的高度 - 宽度和高度中如果只修改了一个,则另一个会等比缩放注意: 一般情况在pc端,不建议修改图片大小,需要多大的图片就裁剪多大 但在移动端,经常需要对图片进行缩放(大图缩小)
Document
结果:
jpeg(jpg)
- 支持颜色比较丰富,不支持透明效果,不支持动图 - 一般用来显示照片
gif
- 支持的颜色比较少,支持简单透明,支持动图 - 适合单一图片,动图
png
- 支持颜色丰富,支持复杂透明,不支持动图 - 颜色丰富,复杂透明图片(专为网页而生)
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式 - 它具备其他图片格式的所有优点,而且文件还特别小 - 缺点:兼容性不好
base64
- 将图片使用base64进行编码,这样可以将图片转换为字符,通过字符的形式来引入图片 - 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的
效果不一样,用效果好的html 相对路径的写法:
./ :代表文件所在的目录(可以省略不写)如果写成image/background就相当于是在html文件下找image文件夹,当然是找不到的 ../ :代表文件所在的父级目录 ../../ :代表文件所在的父级目录的父级目录 / :代表文件所在的根目录
例如:
很多个人博客或主页中,会直接使用图片作为背景,这样设计可以很好的突出网页主体
背景图片标签 HTML5 + CSS + JS --- HTML网页图片背景
gif、jpg、png格式图片均可用作HTML页面背景
如果图像小于页面, 图像会自动进行重复
在HTML网页中,图片和文字一样可以设置对齐方式,这样就可以根据需要对图片进行排列了
基本语法:
图片对齐 HTML5 + CSS + JS --- HTML网页中图片对齐
图像 底部对齐(默认缺省方式)
图像 中部对齐
图像 顶部对齐
注意: bottom对齐方式是默认的对齐方式。
默认情况下,图片与周围对象的水平间距和垂直间距都为0
基本语法:
默认情况下,插入的图片是没有边框的
基本语法:
在HTML网页中,浮动图片也是很常用的一种方法,这样就可以根据需要将图片放置在不同的位置了
浮动图片 HTML5 + CSS + JS --- HTML网页中浮动图片
以上带有图像的一个段落,图像的align属性设置为"left".
图像将浮动到文本的左侧.
以上带有图像的一个段落,图像的align属性设置为"right".
图像将浮动到文本的右侧.
href 是 Hypertext Reference 的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
例如:
浏览器会识别该文档为 css 文档,并行下载该文档,并且不会停止对当前文档的处理。
src 是 source 的缩写,src 的内容是页面必不可少的一部分,是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。
例如:
当浏览器解析到该元素时,会暂停浏览器的渲染,直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之,
src 用于替换当前元素; href 用于在当前文档和引用资源之间建立联系。热点区域主要用于图像地图,通过定义标记可以在图像地图中设定作用区域,这样鼠标移动到指定区域单击时,会自动链接到预先设定好的页面
定义热点区域需要在img标签元素内使用usemap属性将该图像定义为客户端图像映射,这里的图像映射指的是带有可单击区域的图像
然后将usemap属性与map标签的元素name或id属性相关联,以建立<img>与<map>之间的关系
<map>标签元素就是带有可单击区域的图像映射,在map标签元素内通过area标签元素定义具有区域参数
图片热点区域
首先,img标签中usemap属性与map元素的name或id属性相关联,以建立img与map之间的关系。
该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位),herf表示此图片区域链接到的位置
1、矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
2、圆形:(圆心坐标为(X1,y1),半径为r)
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)
超链接 HTML5 + CSS + JS --- HTML超链接<a>之图片超链接
Chrome Browser | FireFox Browser | Safari Browser |
---|---|---|
标签 | 描述 |
---|---|
定义图像 | |
定义图像地图 | |
定义图像地图中的可点击区域 |
转载地址:http://taxzi.baihongyu.com/