There are three different types of tag elements in HTML: block elements, inline elements, and inline block elements.
Block-level elements:
- Occupy a line, the width is as wide as the width of the parent element (default)
- You can set the width and height
- The width property set and the width of the element (width+padding2+border2+margin2) are two different things (box model)
- If the height is not set, the height is supported by the content
- Block-level elements can wrap other elements. Try not to wrap other block-level elements with the p tag
Commonly used block-level elements:
<div> </div>:
A block label at the block level, used to define a block in the effect;<p> </p>:
Paragraph tags, used to divide paragraphs in the display effect;<h1>.....<h6>:
Title tag, used to divide the title in the display effect;<ol> </ol>:
Ordered list tag, used to define an ordered list in the effect<ul> </ul>:
Unordered list tag, used to define an unordered list in the effect;<dl> </dl>:
Cause definition list;<table></table>:
Table tag, used to define a table in the effect;<form></form>：
Specify that the contained controls will function in the form.
Elements in the line:
- Can share a line with other labels, the width and height of the label are determined by the content
- The width and height cannot be set, and the outer and inner margins can be controlled (box model)
Commonly used inline elements:
<a> </a>:
Hyperlink label, used to define a link that can be clicked to jump in the effect;<span></span>
The row-level block label is used to define a block on a row in the effect and display the content;</br>:
Wrap;<i>:
Specifies that the text should be rendered in italics, if available;<em>:
Emphasized text, usually rendered in italics;<strong>:
Render the text in bold;<label>:
Specify tags for other elements on the page;<q>:
Separate the quotation in the text;<cite>:
Use italics to indicate the introduction;<code>:
Specify code example;<var>
Define programming variables. Usually rendered in italics;
In-line element:
- Can share a line with other elements, the width and height are determined by the content (default)
- You can set the width and height
- Note: When inline block-level elements are displayed side by side, there is a gap between two inline block-level elements by default
- Remove the spaces between block-level elements in the line:
(1) Set the font size of the parent element of the element in the line to 0px (the content of the element in the line cannot be displayed, and the space between the elements in the line cannot be displayed)
(2) Set a reasonable font size for the element in the line (the content of the element in the line can be shown)
Commonly used inline block elements:
<img></img>:
Picture tag, used to display a picture in the page effect;<input></input>:
Create various form input controls.