<html>

<head>

<title>第一个网页</title>

</head>

<body>

***************图片元素******************</br>

<img src='mm.jpg' />

</body>

</html>

新建一个文件夹“text”,在text文件夹内新建index.html并放入一张图片mm.jpg

在index.html中写入 <img src="a.jpg" /> 保存

打开index.html

更改图片大小<img src='mm.jpg' width=170px />只需写width,height会随着width自动比例变换

另外我们使用“../”来表示上一级目录，“../../”表示上上级的目录，以此类推。

<img src="" />
如果图片和html文件在同一目录，就直接写*.jpg
如果图片的文件夹和html在同一目录，就写/../*.jpg

说明，图片可以链接外部网络的URL
例如百度页面上百度的logo，在logo上右键复制图片地址，将图片地址复制到src中
<img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=120px />

<img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=120px border=1 />

观察上面两行，第二个多了border，图片显示的效果是图片外面一圈有黑色框，border的属性值可以更改

<img src='mm.jpg' width=170px />

<img src='mm.jpg' width=170px />

<img src='mm.jpg' width=170px />

<img src='mm.jpg' width=170px />

<img src='mm.jpg' width=170px />

<img src='mm.jpg' width=170px />

<img src='mm.jpg' width=170px />

<img src='mm.jpg' width=170px />

观察效果，相同的图片可以显示多次

HTML图片元素（标记）的更多相关文章

  1. HTML基础知识（常见元素、列表、链接元素、图片元素）

    1.HTML有关概念 全称: Hyper Text Markup Language(超文本标记语言) 其文件扩展名为".html"或".htm" * 超文本 - ...

  2. HTML5元素标记释义

    HTML5元素标记释义 标记 类型 意义 介绍 文件标记 <html> ● 根文件标记 让浏览器知道这是HTML 文件 META标记 <head> ● 开头 提供文件整体信息 ...

  3. PHP 提取图片img标记中的任意属性

    PHP 提取图片img标记中的任意属性的简单实例. 复制代码代码如下: <?php /* PHP正则提取图片img标记中的任意属性 */ $str = '<center><im ...

  4. ObsoleteAttribute 可适用于除程序集、模块、参数或返回值以外的所有程序元素。 将元素标记为过时可以通知用户：该元素在产品的未来版本中将被移除。

    官方文档:https://msdn.microsoft.com/zh-cn/library/system.obsoleteattribute(v=vs.110).aspx 备注 ObsoleteAtt ...

  5. img图片元素下多余空白解决方案

    在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的 ...

  6. ASP.NET -- WebForm -- 给图片添加水印标记

    ASP.NET -- WebForm: 给图片添加水印标记 ASP.NET:使用 WebForm(C#) 制作一个简单的为图片添加水印的页面. 1. Test2.aspx文件 <%@ Page ...

  7. BUG 图片元素img下 高度超出 出现多余空白

    BUG 图片元素img下 高度超出 出现多余空白 1.将图片转换为块级对象 即,设置img为“display:block;”.   2.设置图片的垂直对齐方式 即设置图片的vertical-align ...

  8. 基于jQuery图片元素网格布局插件

    基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览   源码下载 实现的代码. html代码: <c ...

  9. IE6图片元素img下出现多余空白问题

    在进行页面的 DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法 也是“见机行事”,根据原因的不同要用不同 ...

随机推荐

  1. error TRK0002

    运行程序出现error TRK0002的原因是因为3ds max中打开了程序生成的模型,同时使用导致memory conflict,然后随之出现一些乱七八糟的问题. 只要将3ds max重置即可,即不 ...

  2. Mysql基于GTIDs的复制

    通过GTIDs[global transaction identifiers],可以标识每一个事务,并且可以在其一旦提交追踪并应用于任何一个Slave上:这样 就不需要像BinaryLog复制依赖Lo ...

  3. mysql 源码安装

    yum install -y gcc gcc-c++ autoconf libjpeg libjpeg-devel perl perl-CPAN libpng libpng-devel freetyp ...

  4. Redis不同数据类型的的数据结构实现

    我们知道Redis支持五种数据类型, 分别是字符串.哈希表(map).列表(list).集合(set)和有序集合,和Java的集合框架类似,不同数据类型的数据结构实也是不一样的. >>Re ...

  5. Android init.rc执行顺序

    转自:http://blog.csdn.net/kickxxx/article/details/7590665 1. 所有的action运行于service之前 2.  下面为各个section的执行 ...

  6. Python 调试 PDB

    出处:http://blog.163.com/gjx0619@126/blog/static/12740839320114995947700/ 完整 请参考:http://docs.python.or ...

  7. 重温WCF之WCF传输安全（十三）（2）基于SSL的WCF匿名客户端（转）

    转载地址:http://www.cnblogs.com/lxblog/archive/2012/09/13/2683514.html 这一篇我们利用上一篇制作的证书,来演示一个基于SSL的WCF服务, ...

  8. 【翻译八】java-内存一致性错误

    Memory Consistency Errors Memory consistency errors occur when different threads have inconsistent v ...

  9. 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]

    无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...

  10. poj 1004:Financial Management（水题，求平均数）

    Financial Management Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 126087   Accepted: ...