Check out the basics and see what you can learn from them.

1. Contents in the head tag

Knowledge overview

  • As the name suggests, the DOCTYPE is used to tell the browser what document standard is used to parse this document
  • The contents of the head tag (not visible to the user)
    • Define document character encoding
    • Search engine – oriented keywords
    • Page description
    • CSS styles

Meta tags can do the first three

  • Define document character encoding
  • Search engine – oriented keywords
  • Page description

It is a powerful ~

Now listen to the question

This section refers to the article Doctype function? How to distinguish strict mode from promiscuous mode? How are they different?

Doctype? What is the difference between standard mode and compatible mode?

[1] Doctype function?

declaration called a file Type definition (DTD) must be on the first line of the HTML document, before the < HTML > tag.

  • A:

Purpose: [1] Tell the browser the type of the file and let the browser’s parser know which specification to use to parse the document.

【 2 】
can also specify the HTML version as HTML5

[3] In addition, DOCTYPE does not exist or is incorrectly formatted, resulting in the document being rendered in compatible mode.

So the question is again —

[2] What is the difference between strict presentation (standard) mode and compatibility mode?

  • A:

Standards mode (also known as strict rendering mode) is used to render web pages that comply with the latest Standards

In compatibility mode, pages are displayed in a loosely backward compatible manner, mimicking the behavior of older browsers in case the site doesn’t work. The short answer is to show the user as much as possible.

2. Common elements (HTML tags)

Knowledge overview

There are inline elements, block elements, and inline block elements with the characteristics of both

Display: block; display: block; display: block;

Now imagine if you were asked in an interview, “What are the inline elements, block-level elements?

[1] What are the inline elements and block-level elements? What are the void elements?

This kind of question is possible to answer more!

This is a reference to a very comprehensive article on block elements, inline elements, and inline block elements

First of all, according to the CSS specification, every element has a display attribute, which determines the type of the element. Each element has a default display value. For example, if the default display value of div is “block”, it is a “block-level” element. The default value of the span display attribute is “inline”, which is the “inline” element.

  • A:

Common inline elements are:

  • Span is one of the more common inline elements. The other inline element tags are only used for certain functions
  • A anchor
  • B (set bold but not recommended) I modify the font
  • Img Input Yes, img and input have the property of inline block elements, but if you ask them what they are, they are inline elements! This will be explained below
  • Textarea multi-line text input box
  • Select Creates a set of drop-down lists where option defines the available options in the list
  • Strong

Common block-level elements are:

  • Div is a familiar representation of block elements
  • Ul OL LI ordered and unordered list
  • Dl dt DD Custom list – Start with dl tag, custom list items start with DT tag DD is used to define list items
  • H1 h2, h3 h4… You’re familiar with the title and it’s got to be a line
  • P paragraph tag

Note that special semantic tags are often used to make code readable and error-prone for programmers to interpret

Finally, there is the little-heard concept of “empty elements.

As the name implies, empty elements have no content and they are closed directly at the start tag like

Common empty elements are:

  • <br> <hr> <img> <input> <link> <meta>

[2] Can you describe the characteristics of inline elements and block elements? What about inline block elements?

This in the development process or need to pay attention to the next!

The first step is to make it clear that you can convert all three using the display attribute

(1)display:inline; Convert to inline elements

(2)display:block; Convert to block elements

(3)display:inline-block; Convert to inline block elements

Characteristics of inline elements:

  • Setting width height (which can be set by setting line-height) is not the same as the width and height of the content

  • For margin, only the left and right direction is valid, but the upper and lower direction is invalid. The padding Settings are valid for both top, bottom, left, and right, which means more padding

  • There is no automatic line wrapping so the default arrangement is left to right

  • Inline elements can only hold text or other inline elements

Notice an in-line element spacing problem here!

Spacing problem: The border, padding, and margin are all set to zero when two inline elements are together. How do you remove the spacing?

  • Reset font: Set the immediate parent of the inline element font =0px; Set font sizes for inline elements.

  • It is also possible to use HTML comments to add HTML comments between two inline elements, telling the browser that the middle is not a line break or a space, but rather a concatenation.

Block element characteristics:

  • Set width and height to a valid default width of 100% of its parent element

  • Margin, padding, top, bottom, left, and right are both valid

  • It can wrap itself so the default arrangement is top to bottom

  • Can hold other inline elements or other block elements

Characteristics of inline block elements:

The combination of the characteristics of the above two elements will be explained below

  • Setting width and height is valid
  • There is no automatic line wrapping so the default arrangement is left to right

Similarly in H5 programmers can customize the semantic tags that you want them to be and you can set them with display, okay

Inline element, block element, inline block element? It’s OK to set whatever features you want!

[3] Is img input a line element or a block element?

Refer to the article whether the IMG tag is an inline or block-level element

All img input tags are inline elements

The interviewer may ask again (and I wish I could), “No, why can you set the width and height of these labels?”

Yeah, yeah. Why?

Take a look at the authoritative content alternative elements given in this MDN document

Elements are divided into non-replaceable elements & replaceable elements

  • Nonsubstitutable element

(X) Most elements of HTML are non-replaceable, that is, their content is represented directly to the user (for example, a browser)

I’m the title

  • Replaceable element

The browser determines the content of an element based on its tags and attributes. Similarly, setting the width and height of the elements is not a problem

The browser reads and displays the image information based on the value of the SRC attribute of the tag

The type attribute of the tag also determines whether to display input fields, radio buttons, and so on

See that the IMG input is an inline replaceable element

In short, and are inline substitutions.

Can set the width, height/width/padding/margin are available. Effect equals block element