<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. [转]DB2类型转换函数

    Src URL:http://www.cnblogs.com/QQParadise/articles/2642677.html

  2. EditPlus

    # 批量更改文件编码 原文:EditPlus批量更改文件编码 # 标签位置设置到顶部 工具-参数设置-布局-文档选择器-位置

  3. 【网络资料】Astar算法详解

    关于A*算法,很早就想写点什么,可是貌似天天在忙活着什么,可事实又没有做什么,真是浮躁啊!所以今晚还是来写一下总结吧! A*算法是很经典的只能启发式搜索算法,关于只能搜索算法和一般的搜索算法(例如DF ...

  4. Linux 端口-> PID -> 启动目录

    1.    lsof -i :8443   找到PID 比如说是5413 2.    ps aux | grep 5413  可以得到一些信息 3.    除了第二步的方式,更直观的是 cd /pro ...

  5. hdu 4028 2011上海赛区网络赛H dp+map离散

    一开始用搜索直接超时,看题解会的 #include<iostream> #include<cstdio> #include<map> #include<cst ...

  6. 深入分析JavaWeb 技术内幕

    1,通过浏览器请求一个资源,会发生以下几种过程 1) http的解析过程,包括对于http请求头和响应头中指令(控制用户浏览器的渲染行为和 服务器的执行逻辑)的解析 2)DNS的解析过程(根据域名获取 ...

  7. Effective C++ 之 Item 2：尽量以 const， enum， inline 替换 #define

    Effective C++ Chapter 1. 让自己习惯C++(Accustoming Yourself to C++) Item 2. 尽量以 const, enum, inline 替换 #d ...

  8. WINDOWS系统Eclipse+NDK+Android + OpenCv

    WINDOWS系统Eclipse+NDK+Android + OpenCv 参考文档博客 1 NDK环境搭建 http://jingyan.baidu.com/article/5d6edee22d90 ...

  9. 在Salesforce中将 Decimal 数据转换成美元格式

    闲言少叙,直接上代码(Apex Class 中的方法): private string ConvertToMoneyFormat(decimal price){ if (price == null | ...

  10. HDU 4162 Shape Number （最小表示法）

    题意:给你一串n个数,求出循环来看一阶差的最小字典序:数字串看成一个顺时针的环,从某一点开始顺时针循环整个环,保证字典序最小就是答案 例如给你 2 1 3 就会得到(1-2+8 注意题意负数需要加8) ...