一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>html 图像</title>

</head>

<body>

    <!--插入图像-->

    <p>

        An image:<img sr="smiley.gif" alt="smiley face" with="32" height="32">

    </p>

    <p>A moving image:<img src="hackanm.gif" alt="computer man" with="48" height="48">

    </p>

    <p>note that the syntax of inserting a moving image is no different from a non-moving image.

    </p>

    <!--从不同的位置插入图片-->

    <p>An image from another folder:</p>

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

    <p>An image frome W3Schools:</p>

    <img src="http://www.w3cschool.cc/images/w3cschool.png" alt="W3CSchool.cc" width="336" height="69">

    <!--排列图片-->

    <h4>Image with default alignment(align="bottom"):</h4>

    <p>this is some text,<img src="smiley.gif" alt="smiley face" width="32" heigth="32">this is some text.</p>

    <h4>image with align="middle":</h4>

    <p>this is some text,<img src="smiley.gif" alt="smiley face" align="middle" with="32" height="32">this is some text</p>

    <h4>image with align="top":</h4>

    <p>this is some text.<img src="smiley.gif" alt="smiley face" align="top" width="32">this is some text.</p>

    <p><b>Note:</b> the align attribute is deprecated in html4,and is not supported html5.Use CSS instead.</p>

    <!--浮动头像-->

    <p>

        <img src="smiley.gif" alt="simly face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.

    </p>

    <p>

        <img src="simley.gif" alt="smiley face" style="float:right" width="32" height="32">A paragraph with an image. The image will float to the right of this text.

    </p>

    <p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>

    <!--设置图像链接-->

    <p>创建图片链接:

        <a href="http://www.runoob.com/html/html-tutorial.html">

            <img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>

    </p>

    <p>无边框的图片链接:

        <a href="http://www.runoob.com/html/html-tutorial.html">

            <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>

    </p>

    <!--设置图像映射-->

    <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>

参考资料：《菜鸟教程》

【代码笔记】Web-HTML-图像的更多相关文章

  1. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. opencv笔记2：图像ROI

    time:2015年 10月 03日 星期六 12:03:45 CST # opencv笔记2:图像ROI ROI ROI意思是Region Of Interests,感兴趣区域,是一个图中的一个子区 ...

  3. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

  4. 【opencv学习笔记六】图像的ROI区域选择与复制

    图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...

  5. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  6. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  7. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  8. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  9. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

  10. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

随机推荐

  1. MVC+EF CODE FIRST的使用

    1创建标准MVC项目 2通过NuGet安装EF 3在Models文件夹中编写实体类 4创建EFDB上下文类 5在webconfig中创建连接字符串,其中name=EFDB上下文类名 6通过管理控制台执 ...

  2. jdk8新特性---list.stream

    项目中用到了该api ,记录下来 具有get set 构造方法的实体类 开始使用: 结果为: 更多可以参考: https://blog.csdn.net/justloveyou_/article/de ...

  3. LinkedList 的源码分析

    LinkedList是基于双向链表数据结构来存储数据的,以下是对LinkedList  的 属性,构造器 ,add(E e),remove(index),get(Index),set(inde,e)进 ...

  4. VRRP&HSRP

    HSRP 活跃路由器和备用路由器都会向组播地址 224.0.0.2  UDP 1985  端口发送hello消息. VRRP组中有一台主用路由器(Master),以及一台或多台备用路由器(Backup ...

  5. 双系统Ubuntu无法访问Win10磁盘分区解决方法

    今天在linux下打开win的NTFS硬盘总是提示出错了,而且是全部的NTFS盘都出错,其中sda3错误显示如下: Error mounting /dev/sda3 at /media/struggl ...

  6. HoloLens开发手记 - 使用HoloLens模拟器 Using HoloLens emulator

    首先下载HoloLens模拟器 HoloLens模拟器运行在没有真机的情况下在你的PC上测试应用,属于HoloLens开发工具系列.模拟器使用了Hyper-V虚拟机.通常通过传感器获取的人体和环境输入 ...

  7. ubuntu里面搭建虚拟环境过程中遇到的问题以及解决方法。

    今天开始学习Django,发现要搭建虚拟环境.就按照百度上面的方法在ubuntu中输入终端命名进行配置.发现自己是按照步骤来的.却总是在最后一步启动 source .bashrc 的时候出现''com ...

  8. 利用jquery操作隐藏table某一列

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. //隐藏表格第一列 $('tr').find('th:eq(0)').hide(); $('tr').f ...

  9. 使用配置文件自定义Ribbon配置

    1.application.yml——Ribbon配置文件 debug: false spring: application: name: mcc-ribbon-properties cloud: c ...

  10. vue-01

    1, vue优势 虚拟daom, 易用, 灵活, 高效 2, 介绍 渐进式框架 3, 兼容性 es5的星特性, 不支持ie8 4, 新版本内置 webpack