Text elements

HTML5 supported elements: THE HTML5 periodic table

H elements

H1 ~ H6 1-6 title quick input

< h1 > 1 title < / h1 > < h2 > 2 title < / h2 > < h3 > 3 title < / h3 > < h4 > level 4 title < / h4 > < h5 > 5 title < / h5 > < h6 > 6 title < h6 >Copy the code

P element

Paragraphs and paragraphs

<p> This is a paragraph </p> <p> this is still a paragraph </p>Copy the code

With the Emmet plugin installed, typing in Lorem produces a jumble of fake words, meaning nothing

<! -- Generate six paragraphs, content is arbitrary false text --> p*6> LoremCopy the code

Span element (no semantics)

For style Settings only

<span style="color: red;" "> < p style=" max-width: 100%; clear: both; min-height: 1em; "> < p style=" max-width: 100%; clear: both; min-height: 1em; > blue < / span >Copy the code

Some elements are displayed on a single row (block-level elements), while others are not (inline elements). In HTML5, there are more complex content categories. ‘block-level’ is equivalent to streaming content categories, while ‘inline’ is equivalent to worded content categories. HTML5 has strict semantics, each element represents a semantics, so presentation effects cannot be expressed as elements

The pre element

Preformatted text elements

The essence of pre element functionality is that Pre has a default CSS property.

White space fold: Successive white space characters (Spaces, newlines, tabs) in source code that are folded into a single space when displayed on the page

Exception: There is no white space folding in the Pre element, which means that in the Pre element, the content of the source code is the same as the content displayed on the page. This element is usually used to display the source code on the web page.

Such as:

<pre> this is an exercise for the pre element this is also an exercise for the pre element </pre>Copy the code

HTML entities

Entity (reference: www.w3school.com.cn/html/html_e…

Entity characters are usually used to display special characters on a page

Usage:

1. & words;

2. & # Numbers;

Such as:

Space & have spent , & # 160;

Less than symbol (<) < , & # 60;

Greater than symbol (>) > , & # 62;

practice

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > element < / title > < / head > < body > < h1 > grade 1 title < / h1 > < h2 > 2 title < / h2 > < h3 > 3 title < / h3 > < h4 > level 4 title < / h4 > < h5 > 5 title < / h5 > < h6 > 6 title < h6 > < p > this is a paragraph < / p > < p > this is a paragraph < / p > <! Lorem Ipsum Dolor sit amet consectetur adipisicing elit. Itaque Culpa recusandae optio incidunt soluta voluptatibus quasi iure? Repellat repellendus, debitis quis labore nihil assumenda maiores, placeat quod minus laboriosam tempora.</p> <! <p style=" max-width: 100%; clear: both; min-height: 1em; "> < p style=" max-width: 100%; clear: both; min-height: 1em; "> < p style=" max-width: 100%; clear: both; min-height: 1em; > blue </span></p> <pre> </pre> </body> </ HTML >Copy the code

Practice effect