码迷,mamicode.com
首页 > Web开发 > 详细

Web前端学习(4):显示图片、url与文件路径

时间:2018-01-31 22:04:23      阅读:3044      评论:0      收藏:0      [点我收藏+]

标签:文件   image   tor   元素   img   不能   ini   文本   des   

本章主旨

  介绍<img>标签及其基本属性;介绍URL和文件路径

  在上一章中,我简单地介绍了HTML的一些基本标签及基本属性,例如,我们用<p>标签来标记文本段落,用<h1>~<h6>来设置多级标题,用<a>标签及其href属性来设置超链接。而在这章我将介绍如何在网页中显示图片图片,同时也会介绍有关于文件路径的知识。

 

一、如何在网页中显示图片

  HTML文档是纯文本文档,所以图片不能像WORD文档那样直接插到文件中。那么我们该如何在网页上显示图片呢?显然应该用HTML标签来解决这个问题。要想在网页中显示图片,就要使用<img>标签。类似于<a>标签需要用href属性来说明链接对象的位置,<img>标签也需要说明插入图片的来源,而<img>标签则是通过src属性(src即source)来说明的。

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=151741025
6076&di=89e1b400715d7a7173a1ac53f673eb2b&imgtype=0&src=http%3A%2F%2Fimg5q.du
itang.com%2Fuploads%2Fitem%2F201411%2F15%2F20141115235751_dfEEj.jpeg"
>

技术分享图片

  在上面的例子中,我为<img>标签的src指定了一个互联网上的图片的地址,浏览器将向服务器请求这张图片,服务器则会找到这张图片返还给浏览器,这样浏览器就能在<img>标签处显示其src属性所指定的图片。如果你够细心的话,应该可以看到<img>的不同之处:它没有结束标签。这是因为<img>标签的意义就是告诉浏览器“这里有张图片”,它其实只是起到了一个“占位符”的作用,所以它不是一个用于修饰文本的标签,也就不需要结束标签。像这样的标签,我们称之为空标签(更准确地说是叫“空元素”,关于标签与元素的区别我们日后再谈)。

 

二、url与文件路径

  我们之前在href与src中所使用的“网络资源”地址,一般称为URL,即Uniform Resource Locator,中文叫统一资源定位符,它用于说明一个网络资源(网页、图片、文档等)在互联网上的地址。但是有的时候,我们需要引用我们自己网站上的资源,比如自己网站上已有的其他页面。虽然我们也可以用URL来“引用”自己网站上的资源,但是那样不仅麻烦,而且有可能存在安全隐患,所以一般情况下我们都是通过文件路径来“引用”自己网站上的资源。

  文件路径分为两种,绝对路径和相对路径,像“file:///C:/Users/Administrator/Desktop/首页.html”这样说明了资源相对于整个主机的根目录的路径即绝对路径,因为一个绝对路径只可能对应一个资源,所以称之为绝对路径。而相对路径则是指:以当前文档所处位置为起点来说明的路径,比如说我的某个网页放在xxxx文件夹下,一张图片yy.jpg也在该文件夹下,那么我在该网页中要插入这张图片的话,只需要这样即可:

 

<img src="yy.jpg">

  而如果该图片在xxxx文件夹中的zzz文件夹中,则需要通过这样来引用:

 

<img src="zzz/yy.jpg">

  其中‘/‘表示“该文件夹中的”,所以“/zzz/yy.jpg”就表示(当前文档所处)文件夹中的zzz文件夹中的yy.jpg图片。而如果图片(资源)在当前文档的“上一级文件夹”中,我们就需要用‘../‘来说明,比如yy.jpg位于当前文档上一级文件中,我们这样写:

 

<img src="../yy.jpg">

  一般情况下我们都会使用相对路径,因为绝对路径不仅长,而且服务器也有可能不允许用户使用绝对路径,此外,用相对路径可以让我们更好地组织自己网站上的各资源位置,因为我们可以将网站上的各类资源分门别类的放好,以便更快的查找。

  比如:

技术分享图片

 

 

  下一章我们继续学习一些常用的文本相关标签,以及HTML元素的概念。

Web前端学习(4):显示图片、url与文件路径

标签:文件   image   tor   元素   img   不能   ini   文本   des   

原文地址:https://www.cnblogs.com/shixizhi/p/8394741.html

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!