<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. NYOJ题目62笨小熊

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr4AAAK1CAIAAAChInrhAAAgAElEQVR4nO3dO3LjutaG4X8Szj0Qxx

  2. NYOJ题目11613n+1问题

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAIvCAIAAAAXg+GWAAAgAElEQVR4nO3dO1LryNsH4G8T5CyE2A ...

  3. 使用C与C++混合编程封装UDP协议

    引入头文件,导入lib文件 #include <stdio.h> #include <stdlib.h> #include <string.h> #include ...

  4. DDD的思考

    概述 DDD领域驱动设计,它是对面向对象的的分析和设计(OOAD,Object Orient Analysis Design)的一个补充,对技术框架进行了分层规划,同时对每个类进行了策略和类型划分.领 ...

  5. POJ3321 Apple Tree(树状数组)

    先做一次dfs求得每个节点为根的子树在树状数组中编号的起始值和结束值,再树状数组做区间查询 与单点更新. #include<cstdio> #include<iostream> ...

  6. [v9] 列表页 调用 正文内容 或 自定义 字段（moreinfo的调用方法）

    "才能使用的字段) id content readpoint groupids_view paginationtype maxcharperpage template paytype all ...

  7. hdu 4762 公式 java

    n/(n)^(m-1) import java.io.*; import java.math.*; import java.util.*; public class Main { static Big ...

  8. Waiting Processed Cancelable ShowDialog

    namespace ConsoleApplication { using System; using System.Threading; using Microshaoft; /// <summ ...

  9. C字符数组赋值(转)

    举例如下: char a[10];1.定义的时候直接用字符串赋值char a[10]="hello";注意:不能先定义再给它赋值,如 char a[10]; a[10]=" ...

  10. css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...