html学习文档-8、HTML 图像
8.1 图像标签(<img>)和源属性(Src)
在 HTML 中,图像由 <img> 标签定义。<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是:
<img src="url" />
URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
8.2 替换文本属性(Alt)
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
8.3 背景图片
<body background="/i/eg_background.jpg">
提示:
gif 和 jpg 文件均可用作 HTML 背景。
如果图像小于页面,图像会进行重复。
8.4 排列图片
①未设置对齐方式的图像:
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
②已设置对齐方式的图像:
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意,bottom 对齐方式是默认的对齐方式。</p>
8.5 浮动图片
①<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
②<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
8.6 调整图像尺寸
<img src="/i/eg_mouse.jpg" width="200" height="200">
通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。
8.7 制作图像链接
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" /> </a>
8.8 创建图像映射
请点击图像上的星球,把它们放大。
(实例:http://www.w3school.com.cn/tiy/t.asp?f=html_areamap)
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
注释: img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
8.9 把图像转换为图像映射
<p>请把鼠标移动到图像上,看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>
基本的注意事项 - 有用的提示:
假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
转载于:https://www.cnblogs.com/wangzhenling/p/8619238.html
html学习文档-8、HTML 图像相关推荐
- Word处理控件Aspose.Words功能演示:从 Java 中的 Word 文档中提取图像
图像通常用于表示 Word 文档中的重要信息.在文本旁边包含图像使内容更具吸引力.在某些情况下,您可能需要以编程方式提取嵌入在 Word 文档中的图像.为此,本文介绍了如何使用 Java 从 Word ...
- [扩展阅读] EasyGUI 学习文档【超详细中文版】
[扩展阅读] EasyGUI 学习文档[超详细中文版] 0. 安装 EasyGUI 官网:https://github.com/robertlugg/easygui python查看内置的所有模块 h ...
- 安卓学习文档收集汇总
安卓学习文档收集汇总 https://www.jianshu.com/p/86aed183ce6c?utm_campaign=maleskine&utm_content=note&ut ...
- Word处理控件Aspose.Words功能演示:从 C# 中的 Word 文档中提取图像
图像在说明 Word 文档中的关键信息方面发挥着重要作用.此外,它们使文档更具吸引力并改善其呈现方式.作为一名程序员,您可能会得到一份工作来提取嵌入在 Word DOCX 或 DOC 文档中的图像.为 ...
- 100个Java项目解析,带源代码和学习文档!
前言 你是否正在寻找带有源代码的Java项目的免费集合?你的搜索到这里结束,我为你提供了近100多个Java项目. 想要成为一个优秀的程序员写项目是绕不开的,毕竟工程学的最终目标都是要创造东西,所以, ...
- 全网最全Flutter的学习文档,不可转载
Flutter学习文档-Author:Brath 由于文章内容较干,请允许Brath打一波广告- 面试记APP Github:https://github.com/Guoqing815/intervi ...
- Quick3D 学习文档
http://huangchunquanmaker.blog.163.com/blog/static/10740848320110122504678/ Quick3D 学习文档 2011-01-12 ...
- FreeMarker中文帮助手册API文档,基础入门学习文档
FreeMarker中文帮助手册API文档,基础入门学习文档 分类: 编程技术 发布: bywei 浏览: 7 日期: 2011年5月28日 分享到: QQ空间 新浪微博 腾讯微博 人人网 什么是Fr ...
- ffmpeg的中文学习文档
ffmpeg的中文学习文档 文章目录: 一.ffmpeg介绍 二.学习参考文档 1.中文 一.ffmpeg介绍 ffmpeg是视频处理工具,可选参数非常多,功能也非常的强大,可以用来开发各种视频处理工 ...
- Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
最新文章
- 分站实现php,php城市分站是什么原理
- centos6.8下安装破解quartus prime16.0以及modelsim ae安装
- php 预防循环发短信_php短信接口发送短信失败,罪魁祸首原来在这里
- 前后端分离后 前端获得session数据_机器学习模型部署--打通前后端任督二脉
- ACdream	1728 SJY's First Task
- 数字图像处理(第三版)
- coap 返回版本信息_CoAP协议学习笔记——CoAP格式详解
- 2013第四届CSTQB国际软件测试高峰论坛会前培训
- 通过 BT 种子 info_hash 值下载种子又一法
- Android人脸支付功能,人脸支付是未来吗?盘点安卓人脸支付手机,小米看后很尴尬…...
- python实现离散沃尔什变换_【图像处理】沃尔什变换与 python 实现
- 单片机延时C语言程序
- Python 招聘信息爬取及可视化
- 四中矩阵相乘方法对比
- 阿里旗下,豆瓣等滑块验证码解决问题
- javascript入门实例:实现简单网页功能
- 不同速度的蚂蚁跑圈相遇问题
- oracle 截取时间至小时,Oracle中获取系统当前时间 和 进行时间间隔操作
- 计算机应用基础教学进度表,《计算机应用基础》教学计划及教学进度
- 一对多表关联(转载虾皮工作室)