Web Front End Learning (4): Displaying pictures, URLs, and file paths

The theme of this chapter

Introduction to tags and their basic properties; Introduction URL and file path

In the previous chapter, I briefly introduced some basic HTML tags and basic properties, for example, we use <p> tags to mark paragraphs of text,

How to display a picture in a webpage

The HTML document is a plain text document, so the picture cannot be inserted directly into the file like a Word document. So how do we show the pictures on the page? Obviously the HTML tag should be used to solve this problem. To display a picture in a webpage, use the tag. Similar to the <a> tag needs to use the HREF attribute to indicate the location of the linked object, tag also needs to explain the source of the inserted picture, and the tag is described by the SRC attribute (src, source).

<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 ">

In the example above, I specify an address for the image on the internet for the SRC tag, the browser will request this image from the server, and the server will find this image back to the browser so that the browser can be in the The picture specified by its SRC attribute is displayed at the label. If you're careful enough, you should see the difference between : it doesn't have an end tag . This is because the meaning of the tag is to tell the browser "there is a picture", it is actually just a "placeholder" function, so it is not a label to modify the text, there is no need to end the tag. A label like this, we call it an empty tag (more precisely called an "empty element", the difference between a label and an element we'll talk about later).

Second, URL and file path

We previously used in the HREF and src "network resource" address, commonly known as the URL, that is, uniform Resource Locator, Chinese is called the Uniform Resource Locator, it is used to describe a network resources (Web pages, pictures, documents, etc.) on the Internet address. But sometimes we need to cite resources on our own site, such as other pages already on our site. Although we can also use URLs to "reference" the resources on their own sites, but that is not only troublesome, and there may be security risks, so we generally are through the file path to "reference" the resources on their own site.

The file path is divided into two, absolute and relative, like "file:///C:/Users/Administrator/Desktop/home. html", which shows that the path of the resource relative to the root of the entire host is the absolute path. Because an absolute path can only correspond to one resource, it is called an absolute path. The relative path refers to: the location of the current document as the starting point to explain the path, for example, one of my Web page in the XXXX folder, a picture yy.jpg also in the folder, then I want to insert this image in the page, only need to do this:

<src= "yy.jpg">

If the picture is in the zzz folder in the XXXX folder, you need to refer to this:

<src= "zzz/yy.jpg">

where '/' means ' in this folder ', so '/zzz/yy.jpg ' represents the Yy.jpg picture in the Zzz folder in the folder where the current document is located. And if the picture (Resource) is in the "Top level folder" of the current document, we need to use the '.. /' to illustrate, for example, Yy.jpg is located in a level file on the current document, we write:

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

In general, we will use relative paths, because the absolute path is not only long, and the server may not allow users to use absolute path, in addition, with the relative path allows us to better organize our own sites on the location of the resources, because we can put the various types of resources on the site to be sorted out for faster search.

Like what:

In the next chapter, we continue to learn some common text-related tags, as well as the concept of HTML elements.

Web Front End Learning (4): Displaying pictures, URLs, and file paths