>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26308 个阅读者 刷新本主题
 * 贴子主题:  HTML 图像 img标签的用法 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-16 17:43:27     消息  查看  搜索  好友  邮件  复制  引用

  

HTML  图像

范例

Norwegian Mountain Trip

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小              

HTML 图像- 图像标签( <img>)和源属性(Src)

        在 HTML 中,图像由<img> 标签定义。

         <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

         要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

         定义图像的语法是:

                         <img src="url" alt="some_text">

        URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.javathinker.net 的 images 目录中,那么其 URL 为 http://www.javathinker.net/images/pulpit.jpg[/url]。

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

HTML 图像- alt属性

        alt 属性用来为图像定义一串预备的可替换的文本。

       替换文本属性的值是用户定义的。

                 <img src="boat.gif" alt="Big Boat">

       在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。    

HTML 图像- 设置图像的高度与宽度

     height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

     属性值默认单位为像素:

               <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

     提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。    

基本的注意事项 - 有用的提示:

     注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

     注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。    

HTML 图像标签


标签 描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域







程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-03-07 22:14:01 重新编辑]
  Java面向对象编程-->泛型
  JavaWeb开发-->Web运作原理(Ⅱ)
  JSP与Hibernate开发-->Java对象持久化技术概述
  Java网络编程-->ServerSocket用法详解
  精通Spring-->
  Vue3开发-->计算属性和数据监听
  基于vue-element-admin 的权限管理
  JS中==和===的区别
  JavaScript实现睡眠函数
  HTML5中的 Web Worker的使用
  BootStrap, React, Vue的比较
  加快 Vue 项目的开发速度
  JS对树形数据的遍历和过滤,
  JavaScript的HTML DOM Input Search 对象
  JavaScript的HTML DOM Column 对象
  CSS3字体
  CSS3 文本效果
  CSS 属性选择器
  JavaScript中的 this关键字
  JavaScript 闭包
  应该掌握的几个HTML标记语言(个人总结)
  更多...
 IPIP: 已设置保密
楼主      
1页 1条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。