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

本章主旨

  介绍<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=1517410256076&di=89e1b400715d7a7173a1ac53f673eb2b&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.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元素的概念。

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

时间: 2024-10-06 19:49:24

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

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动

Web前端学习小建议

这里跟大家扯一扯学习前端的小方法,是我自己的学习方法,大家凑合看看,倒也不一定对~ 在写css前,其实html的结构要是比较合理的,这样写css也会比较顺手.在写一个网页之前,建议先琢磨几分钟,不要上来就写.多去看看别人是怎么写的,然后结合自己的项目,心中有一个大致规划.可以先把最外层轮廓写好,先不着急去写某一个具体的部分. 这里给大家分享一些css小技巧: 1.使用reset.css火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同.这种情况下,使用reset.css重置所有的基本样

WEB前端:05_scroll滚动(图片/文字滚动)

scroll滚动(图片/文字滚动) 网站常用效果之一,以下为简化版,用于学习javascript基础知识. 效果图: scroll滚动(图片/文字滚动)- 纯JS简化版 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 5

web前端学习的基础知识1

Web前端是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.目前看来,这个一个就业前景很大的职业. web前端的学习不能一蹴而就,也不是那么轻而易举就能够学会的,需要我们慢慢的去学习,去理解. 今天,给大家说的就是一些web前端学习中的一些基础知识. web前端中使用的语言不是我们人与人之间进行交流的语言,而是计算机语言.计算机的语言有很多种:C.PHP.Rudy.Java.C#.Basic.JS.....这里主要

好程序员web前端学习路线分享jQuery学习技巧

好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! 1.关于页面元素的引用 通过jquery的$引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

好程序员web前端学习路线大厂面试题详解

好程序员web前端学习路线大厂面试题详解,依赖注入原理 手动实现依赖注入实现方式 - var _global={ - ajax:function(){//申明服务,也可以说是内部类 - this.get=function(){ - //todo:get方式请求数据 - console.log(“get is success”); - }; - This.post=function(){ - //todo:post方式请求数据 - console.log(“post is success”); -