关于HTML5的img标签

目录
  • HTML5 <img> 标签
    • 如何插入图像：
    • 浏览器支持
    • 标签定义及使用说明
    • HTML 4.01 与 HTML5之间的差异
    • HTML 与 XHTML 之间的差异
    • 属性
    • 全局属性
    • 事件属性
    • 尝试一下 - 实例
    • 支持的图像格式
    • 与 CSS 的交互

HTML5 <img> 标签

如何插入图像：

实例

HTML5 <img>标签用于向网页中添加相关图片。

<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

尝试一下 »

浏览器支持

所有主流浏览器都支持 <img> 标签。

标签定义及使用说明

  • <img> 标签定义 HTML 页面中的图像。
  • <img> 标签有两个必需的属性：src 和 alt。

注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。

HTML 4.01 与 HTML5之间的差异

HTML5 中不支持以下属性：align、border、hspace、longdesc、vspace。

在 HTML 4.01 中，以下属性：align、border、hspace、vspace 已废弃。

HTML 与 XHTML 之间的差异

在 HTML 中，<img> 标签没有结束标签。

在 XHTML 中，<img /> 标签必须被正确地关闭。

属性

New ：HTML5 中的新属性。

属性 值 描述
align(已废弃) top
bottom
middle
left
right		 HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alt text 规定图像的替代文本。
border(已废弃) pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossoriginNew anonymous
use-credentials		 设置图像的跨域属性
height pixels 规定图像的高度。
hspace(已废弃) pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap ismap 将图像规定为服务器端图像映射。
longdesc(已废弃) URL HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src URL 规定显示图像的 URL。
usemap #mapname 将图像定义为客户器端图像映射。
vspace(已废弃) pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width pixels 规定图像的宽度。

全局属性

<img> 标签支持 HTML 的全局属性。

事件属性

<img> 标签支持 HTML 的事件属性。

尝试一下 - 实例

从不同的位置插入图片 本例演示如何将其他文件夹或服务器的图片显示到网页中。

制作图像链接 本例演示如何将图像作为一个链接使用。

创建图像地图 本例演示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

支持的图像格式

HTML 标准并没有给出必须支持的图像格式的列表，因此每个用户代理支持一组不同的格式。

Gecko 支持：

JPEG
GIF
PNG
APNG
SVG
BMP
BMP ICO
PNG ICO

与 CSS 的交互

关于 CSS，<img> 是一个 替换元素。它没有基线，这意味着当在一个行内格式的上下文中使用 vertical-align: baseline 时，图像的底部将会与容器的基线对齐。

到此这篇关于关于HTML5的img标签的文章就介绍到这了,更多相关HTML5 img标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript生成img标签的3种实现方法(对象、方法、html)

    本文实例讲述了javascript生成img标签的3种实现方法.分享给大家供大家参考,具体如下: <div id="d1"></div> <script> //HTML function a(){ document.getElementById("d1").innerHTML="<img src='http://baike.baidu.com/cms/rc/240x112dierzhou.jpg'>"

  • spring mvc+localResizeIMG实现HTML5端图片压缩上传

    最近在做一个移动端HTML5的应用,使用到了上传功能,起初使用传统的上传方式上传手机拍照的照片,由于手机拍照出来的照片一般都是好几MB,所以上传速度是非常慢的. 在网上找了很久找到了localResizeIMG压缩框架,感觉非常的实用,所以在此分享给大家. 第一步:下载localResizeIMG localResizeIMG放在github中的,地址是:https://github.com/think2011/localResizeIMG. 第二步:在web工程中导入localResizeIM

  • asp去掉html，保留img br p div的正则实现代码

    复制代码 代码如下: '去掉html中的table代码 Function OutTable(str) dim a,re set re=new RegExp re.pattern="<(?!img|br|p|div).*?>" re.global=true a=str OutTable=re.replace(a,"") End Function

  • Java 获取Html文本中的img标签下src中的内容方法

    如下所示: /** * 得到网页中图片的地址 * @param sets html字符串 */ public Set<String> getImgStr(String htmlStr) { Set<String> pics = new HashSet<String>(); String img = ""; Pattern p_image; Matcher m_image; String regEx_img = "<img.*src\\

  • webpack打包html里面img后src为“[object Module]”问题

    在html中引入img图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat

  • 正则表达式从HTML中匹配img标签的图片地址

    正则表达式从HTML中匹配img标签的图片地址

    目录 前言 分析 正则表达式 总结 前言 有玩过爬虫的人应该都有过在又臭又长的HTML中找寻信息的经历,虽然有各种工具和各种框架可以辅助查找,但是解析HTML的规则也是人想的,制定规则也是十分麻烦的.恰好在个人的项目中,需要从某个网站中爬取图片,好在需求比较简单,所以试着使用正则表达式来解决. 分析 每个网站中展示图片的地方,无非就是img标签或者style中background-image和background,先解决img标签中的图片.首先,地址在标签的src属性之中,所以找寻src的位置是

  • PHP里面把16进制的图片数据显示在html的img标签上(实现方法)

    客户公司的SQLServer2008的一个生产数据库才1年多就高达18G之巨,原来是系统里面的图片直接以16进制字符串的形式存储在数据库的.要用PHP显示在html页面上,我还耗费了不上时间. <?php // 从数据库读出来的:图片的十六进制形式字符串 $icon_hex = '89504e470d0a1a0a0000000d494844520000001c00000012010300000072c92ca' .'700000006504c5445000000ffffffa5d99fdd000

  • php正则提取html图片(img)src地址与任意属性的方法

    简单版: <?php header("Content-Type: text/html;charset=utf-8"); $str = '<div class="ui-block-a" align="center"> <a href="online-39.html" rel="external nofollow" ><img class="lazy" w

  • 详解HTML5 使用video标签实现选择摄像头功能

    详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> // <input type="hidden" name="imgValue" id="imgValue"

  • JS基于HTML5的canvas标签实现炫目的色相球动画效果实例

    JS基于HTML5的canvas标签实现炫目的色相球动画效果实例

    本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas标签制作色相球</title> </head> <body> <canvas></canvas&g

  • Springboot项目使用html5的video标签完成视频播放功能

    Springboot项目使用html5的video标签完成视频播放功能

    文件的上传与下载会另外再写一篇博客,本篇博客只是记录视频播放功能的实现过程 1.首先引入pom文件: pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi

  • 关于HTML5的img标签

    目录 HTML5 <img> 标签 如何插入图像: 浏览器支持 标签定义及使用说明 HTML 4.01 与 HTML5之间的差异 HTML 与 XHTML 之间的差异 属性 全局属性 事件属性 尝试一下 - 实例 支持的图像格式 与 CSS 的交互 HTML5 <img> 标签 如何插入图像: 实例 HTML5 <img>标签用于向网页中添加相关图片. <img src="smiley-2.gif" alt="Smiley face&

  • HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码

  • 正则表达式与HTML5新元素

    正则表达式与HTML5新元素

    ProcessOn是一个在线协作绘图平台,为用户提供最强大.易用的作图工具! 它可以很方便的在线简单绘制一些东西,让自己去具体理解. 正则表达式 今日的正则只是学习正则的简单使用.在HTML5的标签属性的强大面前,我们已经可以不用去先学习javascript才能再去正则了,因为HTML5的input标签的pattern可以实现标签的验证,近似取代复杂的javascript使用正则验证表单,在未来一定会完全取代的. 正则的简单使用: [0-9] 查找任何从 0 至 9 的数字. [a-z] 查找任

  • js HTML5 Canvas绘制转盘抽奖

    js HTML5 Canvas绘制转盘抽奖

    本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用  •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi

  • 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一段事件的思考,绝对采用html5+socket.io来实现这个功能.首先我把该功能的实现拆分为以下几个步骤: 1.移动端前端页面+脚本逻辑实现 2.PC端前端页面+脚本逻辑实现 3.后台逻辑实现 4.加入socket.io实现长连接 5.实现移动端控制PC端逻辑 1.移动端页面脚本的实现 html页

  • jQuery Mobile和HTML5开发App推广注册页

    jQuery Mobile和HTML5的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jqueryMobile你会立刻上手. html5比html4多了很多的标签,特别是多媒体这块有了很好的支持,但是如果只是做一般的web手机页面,那么多数标签是用不上的,JqueryMobile与jquery的不同点就在一些事件名称上,当然这里封装的也是html5的原生事件,还要说一个关于html5提倡的一

  • 原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

    原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

    本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=gbk> <title>www.jb51.net 粒子效果演示</title> <meta name="description" content="HTML5/canva

随机推荐