Html入门(2)-图片插入

1、<img/>标签简介

<img> 标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性:src 和 alt。

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>图片插入</title> 
</head>
<body>
<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
</body>
</html>

2、常用属性

(1)alt属性: 规定图像的替代文本。也就是当图片显示出问题时,就显示alt属性中的文本。

(2)src属性:规定图像的URL,也就是图像在哪个地方。

(3)width,height分别表示图像的宽度跟高度。

3、src的表示

学习图片插入最主要的是要学习路径的表示:

如何表示上级目录 

../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。 

大体思路就是,先找他们相同的目录如果html文件第一个上级目录就跟源文件或者源文件所在目录相同,说明在同一个目录下,可以直接输入要插入文件的文件名。如果html第一个上级目录跟插入文件的第二或者更高目录相同,那就从插入文件相同目录的下级目录开始写。如果html文件的上两级目录跟源文件或源文件所在目录相同,那么说明源文件比html文件高一级,那么高一级加一个../,其他的跟上面一样。以此类推。

我们用例子来表示。这个例子转载自别的地方,是超链接的,跟插入图片的效果相同。

(1)高一级的情况。

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

假设index.html路径是:c:\Inetpub\wwwroot\sites\index.html 
在info.html加入index.html超链接的代码应该这样写: 
<a href = "../index.html">index.html</a> 

(2)高两级的情况。

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html   //html文件的上面三级跟index相同,所以高两级

假设index.html路径是:c:\Inetpub\wwwroot\index.html 
在info.html加入index.html超链接的代码应该这样写: 
<a href="../../../index.html">index.html</a> 

(3)高一级且源文件在子目录下的情况。

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

假设index.html路径是:c:\Inetpub\wwwroot\sites\wowstory\index.html 
在info.html加入index.html超链接的代码应该这样写: 
<a href = "../wowstory/index.html">index.html</a> 


(4)同级且源文件在子目录下的情况。

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

假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\index.html

在info.html加入index.html超链接的代码应该这样写:

<a href = "html/index.html">index.html</a> 

(5)假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html 
在info.html加入index.html超链接的代码应该这样写: 

<a href = "html/tutorials/index.html">index.html</a>


  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java web前端开发常用技术之一,可快速构建极具客户体验度的应用。本课程由有着多年实战开发的资深web前端开发工程师朱朝兵老师为大家录制,从html5+css3基础知识,到实战案例分析,实际操作,均有详细讲解。 1.课程简介07:40 2.什么是HTML510:02 3.认识新的网页结构05:22 4.article元素的使用方法10:27 5.section元素11:16 6.aside元素06:06 7.nav元素07:46 8.time元素01:51 9.pubdate属性04:31 10.header元素合成13:11 11.hgroup元素合成05:43 12.footer元素07:04 13.address元素合成04:20 14.figure元素与figcaption元素05:14 15.details元素与summary元素05:09 16.mark元素09:47 17.progress元素05:01 18.meter元素10:45 19.html5废除的元素07:30 20.HTML5的大纲(上)17:58 21.HTML5的大纲(下)23:18 22.加强版的ol列表元素09:05 23.重新定义后的dl元素04:55 24.canvas元素创建画布06:26 25.canvas绘制矩形18:21 26.canvas绘制圆形21:20 27.canvas绘制文字30:32 28.canvas保存文件08:07 29.canvas绘制动画24:05 30.Web Storage本地储存15:40 31.简单的网页留言板26:36 32.video元素与audio元素的基础知识20:10 33.video元素与audio元素的常用属性32:18 34.HTML5拖放22:41 35.CSS3简介04:11 36.CSS3新增的属性选择器22:17 37.结构性伪类选择器上28:52 38.结构性伪类选择器下21:00 39.使用选择器在页面中插入内容34:26 40.文字阴影与自动换行20:24 41.服务器端字体和@font-face属性21:50 42.盒布局上18:03 43.盒布局下27:48 44.overflow属性30:44 45.CSS3中新增的背景属性41:59 46.CSS3中边框相关的样式29:22 47.CSS3中的变形功能25:48 48.CSS3中的动画功能36:41 49.布局相关的样式-多栏布局14:41 50.布局相关的样式-盒布局12:16 51.布局相关的样式-弹性盒布局30:26 52.Media Queries 与自适应布局36:57 53.UI元素状态伪类选择器上30:11 54.UI元素状态伪类选择器下28:56 55.集团网站建设-全局头部制作57:36 56.集团网站建设-首页新闻列表52:17 57.集团网站建设-首页集团活动制作36:28 58.集团网站建设-首页右部份制作35:57 59.集团网站制作-底部版权信息制作08:44 60.集团网站建设-图片列表页制作50:30 61.集团网站建设-文章内容页制作22:20 62.关于兼容性的问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值