WEB前端开发人员交流社区

搜索
查看: 1817|回复: 0

[基础知识] HTML图片(IMG)《四》

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-3-22 12:22:13 | 显示全部楼层 |阅读模式
插入图片

网页中常用的图片格式有:jpg、gif、png等。HTML中插入图片使用<img>标签

基本语法:

<img  src=“图片路径” width=宽度 height=高度>

语法解释:宽度和高度的单位都是像素,<img>是插入图片的HTML标签,src 是描述图片路径的属性,它的值表示图片的路径。

举例:

< img  src=“bg.jpg”/ >

这里的图片路径表示bg.jpg图片和html文件在同一目录下.如果图片很多的话合理的做法是把所有的图片放在images子文件夹中显着整洁.那么上面的路径应改为<img src=”images/bg.jpg” />,关于路径问题,在后面”相对路径与绝对路径”课程中详细讲到.

<img>标签除了src属性外还包括的属性有:

  • lowsrc:设定分辩率比较低的图片
  • alt:设定图像的提示文字属性
  • width、height:设定图像的宽度和高度
  • border:设定图片的边框
  • vspace:设定图像的垂直间距
  • hspace:设定图像的水平间距
  • align:设定图像的排列属性
设定图片的提示文字(alt )

基本语法:

<img  src=“图片路径” alt=“提示文字”>

举例:

<img src=“images/1.jpg”  alt=“北国风光”>

IMG标签的alt属性是指鼠标放在网页的图片上没弹出一行提示性的文字。

设定图片的边框  border

基本语法:

<img  src=“图片路径” border=边框宽度>

举例:

<img src=“images/1.jpg”  border=10>

设定图片的排列属性(align)
图片的超链接

图片的超链接就是在图片上建立链接。和文字的链接相同,就是点击过链接的图片或文字后就会跳到对应的目标地址上。

图片的超链接与文字相同都是[url=]标记。

基本语法:

<a href=”目标地址”><img src=”图片路径” /> </a>

举例:

<a href=“http://bbs.fedte.cc”><img src=”aaa.jpg”>Web开发</a>

本节总结
[CSS] 纯文本查看 复制代码
<html>
    <head><title>插入图片演示</title></head>
<body>
     <h1>插入IMG图片标签演示</h1>
     <img src="img.jpg" height="180" width="320" border="10" alt="熊猫宝宝"/>
</body>
</html>

     

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2023-9-22 20:09

快速回复 返回顶部 返回列表