<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. [Android Pro] 临时关闭selinux模式 setenforce 0

    setenforce 0 设置SELinux 成为permissive模式 临时关闭selinux的

  2. IIS6与IIS7中如何设置文件过期

    在IIS6中:一. 打开IIS管理器 二. 选中要设置的网站单击属性,打开站点属性菜单 三. 单击HTTP头选项卡 四. 单击 启用内容过期 如:设置30分钟后过期,此时间段后过期项中填30,单位选择 ...

  3. sendto : Permission denied

    遇到如题的问题,google了一番,找到了解决方法,写下来备用 问题: udp发送数据时候报错sendto error  : Permission denied 改正方法: 在创建了套接字后,加上下列 ...

  4. 分享类shareSDK

    1.新浪微博分享时需要注意: [A] 应用信息->基本信息->应用地址 [B] 应用信息->高级信息->OAuth2.0 授权设置 //当使用新浪微博客户端分享的时候需要按照下 ...

  5. Apache commons-dbutils笔记

  6. java的基本结构

  7. centos 安装 py pyhs2

    1. yum install gcc-c++ cyrus-sasl-develpip2.7 install pyhs2 --->好像不行,在试试 用于 hive thrift 访问 2. os. ...

  8. GitHub 中国区前 100 名到底是什么样的人?

    本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排名,分析前一百名的用户属性,剖析这些活跃在技术社区的牛人到底是何许人也!后续会根据我的一些经验出品<技术人员 ...

  9. sp_executesql的用法

    之前做项目的时候负责一个成绩分析的模块儿,写存储过程的时候因为考试的科目是不固定的,所以导致查找成绩的sql语句也是动态的,就用到了sp_executesql,下面就来说一说它的用法 需求:表名是动态 ...

  10. Linux2.6 内核的 Initrd 机制解析

    文章来自:www.ibm.com/developerworks/cn/linux/l-k26initrd/ 1．什么是 Initrd initrd 的英文含义是 boot loader initial ...