html5 标签img学习(待更新)

最新推荐文章于 2024-04-30 11:03:18 发布
最新推荐文章于 2024-04-30 11:03:18 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li5685918/article/details/50256995
版权

在 HTML 4.01 中，图像的 "align", "border", "hspace" 以及 "vspace" 不赞成使用。在 HTML5 中，不再支持这些属性。


一：基本属性


二：基本用法及注意事项

src路径分为相对路径和绝对路径。

相对路径实际就是调用当前目录下面的文件，绝对路径跟相对路径一样调用文件，但绝对路径是一个固定地址。尽量使用相对路径。

一般使用“../”来表示上一级目录，“../../”表示上上级的目录

相对路径的写法：

图片和HTML文本在同一目录下：例如图片是a05.jpg


<!-- 
	img标签
	<img src="图片路径" alt="当图片无法打开时，替代的文字">
	width 和 height 高和宽 分像素和百分比
	width="100"//默认为像素px
	height="50%" //百分比-相对于浏览器的宽度。如果设置了width百分比，height百分比设置无效没有意义，只能设置px
	title="在鼠标放在图片上时提示的内容"
	-->

<img src="a05.jpg" alt="美女" width="100" height="200" title="本图片是宽高为px设置">

三：实验案例： 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>image元素练习</title>
</head>
<body bgcolor="#fff">
	<h1 align="center">美图赏析</h1>
	<hr>
	
	<img src="a05.jpg" alt="美女" width="100" height="200" title="本图片是宽高为px设置">
	<img src="a06.jpg" alt="美女" width="200" title="本图片是设置宽高度自适应">
	<img src="a07.png" alt="美女" width="5%" title="本图片演示百分比效果">
	<img src="a008.j" alt="错误" title="本图片地址错误">
	
	<img src="" 

	alt="萌宠" title="本图片演示链接网络图片，如果该图片不存在或者路径错误，提示alt中文字信息">

</body>
</html>



用的360浏览器，alt提示没有出来。。。


四：小案例。利用段落<p>标签嵌套图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>image元素练习</title>
</head>
<body bgcolor="#fff">
	<h1 align="center">美图赏析</h1>
	<hr>
	<p align="center" >


		<img src="a06.jpg" alt="" title="美女" width="200" height="200">
		<img src="a07.png" alt="" title="美女2" width="200" height="200">
		<img src="a08.jpg" alt="" title="美女三" width="200" height="200">


	</p>
	<p align="center">
		<img src="a05.jpg" alt="距离上部和下部" vspace="50">
	</p>


</body>
</html>


HTML相对路径(Relative Path)

用途：指定由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系

如果源文件和引用文件在同一个目录里，直接写引用文件名即可，这时引用文件的方式就是使用相对路径。

 

下面建立两个HTML文档info.html和index.html，用作示例，要求都是在info.html加入index.html超链接。

 

eg1：相对路径的简单应用

假设：info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html

　　　index.html路径是：c:/Inetpub/wwwroot/sites/blabla/index.html

写法：<a href = "index.html">这是超连接</a>

 

eg2：如何表示上级目录

../表示源文件所在目录的上一级目录，http://www.cnblogs.com/表示源文件所在目录的上上级目录，以此类推。

假设：info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html

　　　index.html路径是：c:/Inetpub/wwwroot/sites/index.html

写法：<a href = "../index.html">这是超连接</a>

 

eg3：如何表示上上级目录

假设：info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html

　　　index.html路径是：c:/Inetpub/wwwroot/sites/wowstory/index.html

写法：<a href = "../wowstory/index.html">index.html</a>

 

eg3：如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。

假设：info.html路径是：c:/Inetpub/wwwroot/sites/blabla/info.html

　　　index.html路径是：c:/Inetpub/wwwroot/sites/blabla/html/index.html

写法：<a href = "html/index.html">这是超连接</a>


五：绝对路径写法

HTML文件都在f盘下的test文件下，图片在在f盘下的test文件下的images文件下，写法：

<img src="f:/test/images/img.jpg">

如果来源是来自网上的 ,写法： 
<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg">


感谢：http://www.html5china.com/manual/html5/html5_img.htm





为明天
关注
专栏目录
HTML学习自检 --- HTML概念、标签、与属性
m0_50694272的博客
10-13 258
HTML学习自检 作为一个前端小白学习者，在学习前端的过程中，发现前端知识点过于庞杂，知识点细密且零碎，如果不勤于练习，很容易遗忘。于是产生了编写博客进行知识输出，形成自己的知识架构的想法。这是我在CSDN上的第一篇文章，以后也会督促自己能有更多的知识产出，如有错误，希望大家可以直接指出。 HTML的概念 Hyper Text Markup Language，超级文本标记语言 - 普通文本a:无特殊意义；超级文本<a>:超链接 - 超文本：文本具备特殊的功能 可以加入图片、声音、动画、多媒
小白前端学习日记（三）HTML基础语法与标签2
weixin_44237608的博客
03-27 2132
小白前端学习日记系列 小白前端学习日记（一）认识前端 小白前端学习日记（二）HTML基础语法与标签1 HTML基础语法与标签小白前端学习日记系列HTML基础语法与标签一、列表标签1.无序列表2.有序列表3.定义列表二、多媒体标签1.图片标签2.音频视频标签音频插入标签视频插入标签source标签3.超级链接总结 HTML基础语法与标签 这次的内容主要是列表标签，多媒体标签。这些标签在网页制作中也是不可或缺的重要知识。 一、列表标签 1.无序列表 <ul> <li>列表项1&
HTML5 img
王甲评的博客
12-06 809
一、图片自适应大小 图片设置固定大小（当然width和height至少大于200px的情况下）个人觉得就很影响响应式布局了，可能会使移动端局部发生错乱，所以图片在一个div中自适应大小，个人还是觉得挺重要的。 CSS: img{ max-width:100%; max-height:100%; width:auto; height:auto; }
HTML5之img标签
Dr___凉的博客
07-13 1458
1.语法结构 img src="图片路径" width="" height="" alt="" />  2.img的属性 src属性：必要属性，指定图片的来源和路径alt属性：当图片无法显示时替代文字width、height属性，指定图片的高度和宽度，单位是像素或者百分比。title属性：属性值是字符串。 代码示例： less07 img 扣扣头像
HTML5 之 Img 标签
热门推荐
无
09-09 1万+
概述   img 用于将图片嵌入文档。   img是行内单标签元素，同时img也是可替换元素（可修改宽高）。 可替换元素   HTML元素可分为可替换元素和不可替换元素，详细参考。   绝大多数的HTML元素都是不可替换元素，其内容由DOM内容决定。例如<p>hello world</p>，展示的内容就是文本节点hello world。   而对于可替换元素，其内容则由元素的标签和属性决定。例如<img>元素的内容实际是由src属性读取的图片的原始宽高来确定的。   典.
HTML5 img图片 标签
qq_25205059的博客
02-20 2218
HTML &lt;img&gt; 标签实例在下面的例子中，我们在页面中插入一幅 W3School 的工程师在上海鲜花港拍摄的郁金香照片：&lt;img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" /&gt;以上代码的效果： 亲自试一试（您可以在页面底部找到更多实例）浏览器支持IEFirefoxChromeSafariOpera     所有浏览器都支持 &lt;...
html5 的img新增属性,HTML中img的属性有哪些
weixin_39623716的博客
06-03 274
坐标裁剪图片需要用到HTML5的canvas表现，配合JS实现，记得把IMAGE的路径改一个可用的，就可以看到效果了，你的第二问我没看懂代码如下!doctype htmlhtmlheadstylebody {margin: 0px;padding: 0px;}#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; ...
HTML5基础-新增标签+新增属性+布局案例
web前端开发教程htmlcssjs
01-02 267
html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figcaption 定义figure元素的标题 footer 底部 dialog 对话框 使用习惯： header/section/footer > aside/article/figure/hgrou...
B站黑马程序员pink老师前端课程学习笔记_01 HTML5
PancrasG的博客
01-06 3711
本篇博客为B站对应课程的学习笔记，跟实际视频ppt内容有一定差异，欢迎一起交流学习。 课程地址：https://www.bilibili.com/video/BV14J4114768
HTML5期末大作业：旅游网页设计与实现——旅游风景区网站HTML+CSS
11-20 241
HTML：结构CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
HTML5 img 标签关键宽 高 属性
qq_25205059的博客
02-20 1429
&lt;img src="ltul.jpg" width="100" height="100" title="图片" alt="没有图片了"&gt; src:是图片的名称width:是图片的宽度height:是图片的高度title:是鼠标在上图片出现的标题内容alt：是找不到图片后在框内显示的内容...
HTML img 刷新图片的问题
thankna的博客
06-15 1万+
需要上传图片预览.但是第二次上传图片显示的时候发现之前的图片没有改变.后经过分析发现是地址相同第二次改变img src属性的时候图片未发生改变,浏览器第二次不会去请求服务器。今天在做ajax上传图片时：由于新上传的图片会处理成和原来的图片名称一样，这样就造成img标签的src看起来是没有变化的，所有就不会重新请求图片。解决方案很easy:在修改img的src属性的时候加上一个随机数即可,让浏览器以...
HTML5 文字及图片标签解析
程序员的逆袭
06-10 2926
首先创建一个.html文件，再创建一个.css文件 通过加载.css文件里的属性，来实现页面的更新，可以使代码更简洁。 1.在.html里加载css的方法   link 代表css的路径 rel 代表css的标志 type是css的类型 通过这种方式，就可以修改在内的文字或图片的属性 2.定义文字 在body中 大家好 即可输出，若想改变颜色及大小
HTML5中图片路径的几种使用方式
weixin_47311994的博客
08-25 2999
1、图片和网页文件在同一个文件夹里(相对路径） <img src="css.jpg" width="200" height="300" alt="css实战手册" title="css实战手册"/> "width"和"height"可用来调整图片大小。 “alt” 属性中指定的文本，但是仅支持文本的浏览器无法显示图像，如果无法显示图像，将显示 “alt” 属性中的文本：“css实战手册”。（注意alt属性是元素的必要属性） “title”，当鼠标放在图片上时，显示“css实战手册”。
利用HTML5/JavaScript 计算Image的MD5
小白的进化史
12-19 4217
首先我们需要导入所需的JS库 然后我们在js代码中可以使用下面的方法获取图片的MD5： var reader = new FileReader(); reader.onload = function(e) { var contents = e.target.result; // This goes here: var hash = CryptoJS.MD5(CryptoJS.
在每次打开网页自动刷新同一个链接的图片
weixin_52452288的博客
10-29 887
在每次打开网页自动刷新同一个链接的图片
HTML5 ＜img＞ 标签
thgj0006的博客
04-13 1209
img> 标签定义 HTML 页面中的图像。 标签有两个必需的属性：src 和 alt。从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。 标签的作用是为被引用的图像创建占位符。通过在 标签中嵌套 标签，给图像添加到另一个文档的链接。
图片img底部出现空白边距
最新发布
kaolagirl的博客
04-30 226
因为图片是行内元素，默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对齐方式导致图片并不是与div的真实底部对齐，而是与文基线对齐。文基线就是字母x的下边缘，即使没有文字，也会有空隙。2、给img（图片）设置vertical-align: bottom;1、给img（图片）设置display: block;
如何解决 img 标签四周出现白边的问题
yiguoxiaohai的博客
12-02 5646
如何解决 img 标签白边问题，为什么 img 会出现白边
HTML5入门学习：标签、图像与路径解析
"HTML5个人学习笔记，涵盖了基础标签、链接、注释、表格、列表、视频、音频等内容，适合初学者入门学习。" 在HTML5的学习中，首先要理解的是文档类型声明，`<!DOCTYPE html>` 用于指定文档类型为HTML5，这使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值