<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. CSS3的新属性的一下总结

    阮一峰:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混:animation,tran ...

  2. 借教室（codevs 1217）

    1217 借教室 2012年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Descrip ...

  3. Java遍历List的时候删除item

    参考:http://blog.csdn.net/longyulu/article/details/8315068 在Java中有时候我们会需要对List里面的符合某种业务的数据进行删除,但是如果不了解 ...

  4. 《孙子算经》之"物不知数"题：中国剩余定理

    1.<孙子算经>之"物不知数"题 今有物不知其数,三三数之剩二,五五数之剩七,七七数之剩二,问物几何? 2.中国剩余定理 定义: 设 a,b,m 都是整数.  如果 m ...

  5. 列出zip文件内全部内容 当前目录下的所有文件压缩成zip格式的文件(file.zip)

    [root@ok Desktop]# zip -r image.zip ./*.jpg adding: 20161007_113743.jpg (deflated 0%) adding: 201610 ...

  6. 数据结构和算法 c#– 1.单项链表

    1.顺序存储结构 Array 1.引用类型(托管堆) 2.初始化时会设置默认值   2.链式存储结构 2.1.单向链表 2.2.循环链表 2.3.双向链表

  7. jQuery - 1.简单的JQuery

    1.简单的JQuery 2.jQuery对象(包装集).Dom对象 3.JQuery提供的函数 1.简单的JQuery $(document).ready(function () { alert(&q ...

  8. TCP 四次握手

    TCP协议中的三次握手和四次挥手(图解) http://blog.csdn.net/whuslei/article/details/6667471/

  9. 13.代理模式(Proxy Pattern)

    using System; namespace Test { //抽象角色:声明真实对象和代理对象的共同接口. //代理角色:代理对象角色内部含有对真实对象的引用,从而可以操作真实对象, //同时代理 ...

  10. Android系统中默认值的意义列表

    转自:http://blog.csdn.net/yabg_zhi_xiang/article/details/51727844 在SettingsProvider中设置系统中默认值,我们可以在fram ...