<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h2>Norwegian Mountain Trip</h2>

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

</body>

</html>
演示如何在网页中显示图像。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>

一个图像:

<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>

<p>

一个动图:

<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

<p>

注意插入动图的语法和静态图的语法是一样的。

</p>

</body>

</html>
如何将其他文件夹或服务器的图片显示到网页中。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>一个来自文件夹中的图像:</p>

<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32">

<p>一个来自菜鸟教程的图像:</p>

<img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">

</body>

</html>
HTML 图像- 图像标签（ <img>）和源属性（Src）

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

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

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

定义图像的语法是：

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

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
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 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h4>默认对齐的图像 (align="bottom"):</h4>

<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>

<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>

<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>

</html>
演示如何使图片浮动至段落的左边或右边。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>

<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。

</p>

<p>

<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。

</p>

<p><b>注意:</b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>

</html>
演示如何将图像作为一个链接使用。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

</body>

</html>

吴裕雄--天生自然HTML学习笔记：HTML 图像的更多相关文章

  1. 吴裕雄--天生自然HADOOP学习笔记：hadoop集群实现PageRank算法实验报告

    实验课程名称:大数据处理技术 实验项目名称:hadoop集群实现PageRank算法 实验类型:综合性 实验日期:2018年 6 月4日-6月14日 学生姓名 吴裕雄 学号 15210120331 班 ...

  2. 吴裕雄--天生自然 oracle学习笔记：oracle理论学习详解及各种简单操作例子

    1. 数据库的发展过程 层次模型 -->网状模型 -->关系模型 -->对象关系模型 2. 关于数据库的概念 DB:数据库(存储信息的仓库) DBMS:数据库管理系统(用于管理数据库 ...

  3. 吴裕雄--天生自然HADOOP学习笔记：基本环境配置

    实验目的 学习安装Java 学习配置环境变量 学习设置免密码登陆的方法 掌握Linux环境下时间同步的配置 实验原理 1.Java的安装 java是大数据的黄金语言,这和java跨平台的特性是密不可分 ...

  4. 吴裕雄--天生自然HADOOP学习笔记：使用yum安装更新软件

    实验目的 了解yum的原理及配置 学习软件的更新与安装 学习源代码编译安装 实验原理 1.编译安装 前面我们讲到了安装软件的方式,因为linux是开放源码的,我们可以直接获得源码,自己编译安装.例如: ...

  5. 吴裕雄--天生自然HADOOP学习笔记：Shell工具使用

    实验目的 学习使用xshell工具连接Linux服务器 在连上的服务器中进入用户目录 熟悉简单的文件操作命令 实验原理 熟悉shell命令是熟悉使用linux环境进行开发的第一步,我们在linux的交 ...

  6. 吴裕雄--天生自然MySQL学习笔记：MySQL UPDATE 更新

    如果需要修改或更新 MySQL 中的数据,我们可以使用 SQL UPDATE 命令来操作. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table ...

  7. 吴裕雄--天生自然MySQL学习笔记：MySQL 插入数据

    MySQL 表中使用 INSERT INTO SQL语句来插入数据. 可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 以下为向MySQL数据表插入数据通 ...

  8. 吴裕雄--天生自然python学习笔记：python 用pyInstaller模块打包文件

    要想在没有安装 Python 集成环境的电脑上运行开发的 Python 程序,必须把 Python 文件打包成 .exe 格式的可执行 文件. Python 的打包工作 PyInstaller 提供了 ...

  9. 吴裕雄--天生自然python学习笔记：python 用pygame模块动画一让图片动起来

    动画是游戏开发中不可或缺的要素,游戏中的角色只有动起来才会拥有“生命”, 但动画处理也是最让游戏开发者头痛的部分.Pygame 包通过不断重新绘制绘图窗口,短短几行代码就可以让图片动起来! 动画处理程 ...

  10. 吴裕雄--天生自然python学习笔记：python 文件批量查找

    在多个文本文件中查找 我们首先来学习文本文件的查找字符 . 我们通过 os.walk 扩大查找范围, 查找指定目录和子目录下的文件. 应用程序总览 读取 当 前目录及子目录下的所有 PY 和 txt ...

随机推荐

  1. PHPCMS 1分钟快速搭建

    一.下载CMS源码 https://www.yzmcms.com/xiazai 下载完成后得到一个这样的压缩包 接着下载PHPStudy,安装只要一直点下一步就可以了 安装完成后打开,如下图启动两个地 ...

  2. Println(Object)小贴士

    println public void println(Object x) 打印 Object,然后终止该行.此方法首先调用 String.valueOf(x) 获取打印对象的字符串值,然后的行为如同 ...

  3. 14）载入png图片

    1)之前在窗口中载入图片  一般都是bmp的  但是  我想从网上下一些图片,这些图片可能是png的 2)那么就有了下面的操作 3)png图片可以直接做成透明的. 4)首先是创建窗口的基本代码: #i ...

  4. [原]排错实战——解决Tekla通过.tsep安装插件失败的问题

    原总结调试排错troubleshootteklaprocess monitorsysinternals 缘起 最近同事使用.tsep安装Tekla插件的时候,Tekla提示该插件已经存在了,需要卸载后 ...

  5. axios新手实践实现登陆

    其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记 用到的:1. vuex 2.axios 3.vue-route 登陆流程为:1.提交登陆表单,拿到后台返回的数据 2. ...

  6. Linux 标准IO库介绍

    1.标准IO和文件IO有什么区别? (1).看起来使用时都是函数,但是:标准IO是C库函数,而文件IO是Linux系统的API. (2).C语言库函数是由API封装而来的.库函数内部也是通过调用API ...

  7. NOIP复赛文件路径怎么写

    以2018年NOIP普及组复赛为例,四道题对应着四个文件夹:   随便选一道题,比如第一道题,进入title目录,可以看到title1.in, title1.ans, title2.in, title ...

  8. HTML5之FileReader小结

    方法: 方法名 参数 描述 abort none 中断读取 readAsBinaryString file 将文件读取为二进制码 readAsDataURL file 将文件读取为 DataURL r ...

  9. zabbix自定义添加主机

    1.安装zabbix-agent [root@web01 ~]# rpm -ivh https://mirrors.tuna.tsinghua.edu.cn/zabbix/zabbix/3.4/rhe ...

  10. idea快捷键（最常用）

    --跳到上一空白行 ctrl+alt+enter --跳到下一空白行 shift+enter --为代码生成包裹快(try catch等) ctrl+alt+t --跳到某行 ctrl+g --实现父 ...