IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> HTML图片 -> 正文阅读

[移动开发]HTML图片

当需要在网页中插入图片时,需要用到图片标签<img>,图片标签是一个单标签,他其中有一个源属性(src="插入图片的链接"),源属性的值是图像的 URL 地址。

<img src="url" />

浏览器将图像显示在HTML文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

?

    <p>这是汤姆猫</p>
    <img src="image/cat.jpg" height="100" alt="汤姆猫">
    <p>这是第二段文字</p>

设置网页背景图片:在body属性中,添加background="url",就可以把网页背景设置为自己想设置的图片

height和width属性:可以修改图片的比例大小,一般来说,只修改图片的一个属性,另一个属性会根据原来比例自己调整

代码如下:

<body>
    <img src="image/dog.jpg" height="100">
    <img src="image/cat.jpg" height="200">
    <img src="image/mouse.jpg" height="300">
</body>

alt属性:在相应图片位置设置该属性,当图片在浏览器中加载不出来时候,就会显示在alt属性中设置的文字

    <p>可以显示时的样子</p>
    <img src="image/cat.jpg" height="100" alt="汤姆猫">
    <p>不能显示时</p>
    <img src="image/cat1111.jpg" height="100" alt="汤姆猫">

?align属性:通过在图像标签中添加该属性,可以设置图像在文本中显示的位置

<p>这是一段文本<img src="image/mouse.jpg" height="100" align="top">用来演示图片在文本中显示位置</p>
<p>这是一段文本<img src="image/mouse.jpg" height="100" align="center">用来演示图片在文本中显示位置</p>
<p>这是一段文本<img src="image/mouse.jpg" height="100" align="bottom">用来演示图片在文本中显示位置</p>

制作图片链接:将图片标签插入到超链接标签中间,点击图片就可以去往相对应的网页

?

<a href="http://www.baidu.com"><img src="image/mouse.jpg" height="100"></a>

<figure> 标签:给图片配上标题,可以用来给图片一些解释,将图片和解释都放在<figure>标签中figcaption元素来定义图片标题或解释。

<body>
    <figure>
        <img src="image/cat.jpg" alt="cat" width="100px" height="100px">
        <figcaption>这是汤姆猫</figcaption>
    </figure>
</body>

?

创建图片映射:将图片转为一张地图,在图片上可创建可供点击区域,点击已经设置的区域,就可以前往指定页面

??我们将斯派克的图片作为一张地图,通过点击区域位置和形状的设置,在点击图片嘴巴位置时,他会跳转到写好的汤姆图片的页面

<img src="image/dog.jpg" border="0" usemap="#planetmap" alt="dog">
<map name="planetmap" id="planetmap">
    <area shape="circle" coords="300,150,50" href="cat.html" alt="cat">
</map>

<map>就是将某一张图片设为一个地图,其中用到name和id属性,在需要设置为地图的图片标签中添加usemap属性,属性值为name或者id的属性值

<area>就是设置点击区域,其中shape属性就是设置点击区域的形状,coords属性设置点击区域在map图像中的坐标,href属性就是点击区域后跳转的页面的位置,同样这里也可以设置target属性来设置打开跳转页面的方式

shape:circle->圆形? ? ? rect->矩形? ? ?poly->多边形

coords:圆形? coords="x1,y1,r"圆心坐标(x1,y1),以及半径

? ? ? ? ? ? ? 矩形? coords="x1,y1,x2,y2"左上角坐标(x1,y1)和右下角坐标(x2,y2)

? ? ? ? ? ? ? 多边形? coords="x1,y1,x2,y2,x3,y3……"多边形每个点坐标

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-05-11 16:33:45  更:2022-05-11 16:35:30 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 1:38:25-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码