This is the 12th day of my participation in Gwen Challenge

One, foreword

Just to be clear, this is a series, but to document some of the front-end trivia I’ve collected or some of my friends have mentioned.

This is a list of attributes that you might consider using in a particular situation.

HTML: <meta /> Attribute introduction

MDN is introduced here

Abstract: Specifies the base URL for all relative urls contained in a document. There can be only one <base> element in a copy.

Href: Base URL used for relative URL addresses in the document. If the attribute is specified, the element must precede any other element whose attribute value is the URL.

use

</head> </head> in HTML markup language set some properties, in addition to the common title set title, link introduced CSS stylesheet unexpected, is meta set page zoom these bar.

The first step in this article is to change the default root path by setting <base /> in the head tag.

Take a look at some sample code

<body>
    <img url="FM = https://t7.baidu.com/it/u=1831846009, 1460005090 & 193 & f = GIF" />
</body>
Copy the code

In the above sample code, a material from Baidu pictures was introduced.

Nothing seems out of the ordinary.

However, in real projects, we often introduce a large number of pictures, and for the sake of the project, they are introduced through CDN.

So the question is, if you have to type in the address every time, is it too tedious?

So we came up with the idea of concatenating addresses

<img  :url="baseURL + imgURL"/>
Copy the code

The above concatenated address notation is often used when developing frameworks. But you have to splice it every time.

So now, here it comes, an out-of-favor property. Look at the sample

<head>
    <base href="https://img.url.com" />
</head>
<body>
    <img :url="imgURL" />
</body>
Copy the code

As shown above, an href attribute is set in base and the image address is normally configured, but no address concatenation is done.

The effect is shown below.

The address was automatically concatenated. To make code writing easier, if you change the address, go directly to the root file and change <base />.

disadvantages

This attribute, is not perfect, seemingly easy to use behind, but also has a huge defect, that is, can only set one.

If a CDN address is set for importing images, as mentioned above, then other places will use this address by default.

But it is not all so, if it is the splicing of all the domain name, the default is to set the address jump or introduction.

In addition, it is worth mentioning that although the image distance is used in the article, the default address of A, IMG,form and link will be introduced preferentially as the default address

However, if the import is by full address, the import is normal.

If you can properly select a heavily used address, you can still consider using this attribute for unified management.

Also, if you’re developing through a framework, it doesn’t apply at all.

Because using the framework, it is necessary to use routing, which will cause the jump route to reference the changed domain name. And it leads to uncontrollable results.

Summary.

Cold knowledge, brings a new perspective, and some really cold, even nearby eliminated stats.

But if you think about the principles behind these attributes, isn’t it possible to implement a domain name interception manually and have a similar effect?

Or, after you read it, think back to your previous projects and see if there was a place where this attribute applied?