** 1. Line label **

  • The contents are not displayed on a separate line, are not wrapped after writing, and can be included in block-level tags.
  • Without width and height, even setting does not work, depending on the content.
  • Convert inline labels to block-level labels: display:block.
Inline tags describe
<a> The tag defines hyperlinks that are used to link from one page to another.
<span> Is used to combine inline elements in a document.
<br> A newline.

** 2. Block label **

  • All block-level tags are on a single line and wrap automatically when written.
  • Block-level labels can be set directly to their width and height.
  • Class labels convert to inline labels: display:inline.
Block-level tags describe
<div> You can define partitions or sections in a document.
<h1>-<h6> Define the title.
<p> Define a paragraph.
<ul> Define unordered lists.
<li> Define list items.
<ol> Define an ordered list.

** 3. Inner block label **

  • Features both inline and block-level tags, with width, height and alignment attributes.
Inline block label describe
<img> Embed an image into a web page. Technically speaking,<img>Tags don’t insert images into the web page, they link images from the web page,The tag creates a placeholder for the referenced image.
<input> Input box.
<textarea> Multi-line text input control.

** 4. The self-closing label **

  • It appears singly and can only define some attributes, but cannot insert other tags or content.
Self-closing label describe
<br> A newline.
<meta> Define page meta information.
<hr> A horizontal line.
<link> Links that define relationships between documents and external resources.
<img> The image.
<source> The e tag defines media resources for media elements such as and.
<input> Input fields, form elements.

** 5. Conversion mode between different elements **

  • Convert to block-level elements: disaplay: block
  • Convert to inline block elements: dispaly: inline-block
  • Convert to inline elements: display: inline