Recently, in a group chat, I happened to see a guy who posted a screenshot of the front end of toutiao test question. There was only one question about HTML, as follows:

What are replaceable elements and non-replaceable elements, and what is the difference? And illustrate with examples.

The front-end interview in the HTML question is the least, and not difficult, toss and turn is that a few kinds. We’ve already talked about the most classic HTML semantization, so today we’ll take the opportunity to talk about replaceable elements.

paraphrase

What is a replaceable element? As the name suggests, it’s an element that can be replaced. 😅 (awkwardness……

For example, a typical replaceable element img:

<img src=xxx.jpg>
Copy the code

We didn’t write anything in the IMG tag, so where did its content come from?

The browser downloads the image given by the SRC attribute and replaces the img tag with the image resource. The browser does not know the width and height of the image before downloading. Therefore, a replaceable element is special in that its width and height are determined by what it is loaded with. (CSS can override styles, of course)

The sample

Here are a few more examples using the IMG tag:

<img src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
Copy the code

When the image is displayed on the page, it is the width and height of the image itself.

The img element also supports the width and height attributes:

<img width="80" height="80" src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
Copy the code

At this point, the element appears to be 80 pixels wide and high.

If we overlay the style with CSS:

img {
  width: 60px;
  height: 60px;
}
Copy the code

The representation of the element is 60 pixels.

MDN definition

It will be easier to understand the concept after seeing the examples above.

The presentation of replacement elements is not controlled by CSS. These elements are external objects, and the rendering of their appearance is CSS independent.

In short, their content is not affected by the style of the current document. CSS can affect the position of the replaceable element, but not the content of the replaceable element itself.

Typical substitutable elements are

Learn more here.

(after)