3.html 5 text elements,

3.html 5 text elements,

If you read the first article, you will find that my code is like this:

Text <span> text </span> <scolia> text </scolia> <scolia abcd = 123> text </scolia>

 

However, the result is as follows:

It is strange that my code is written in four lines, but why are all displayed in the browser within one line and there is a space between them?

Because the browser does not rely on the layout when we write code, but on specific labels, such as dedicatedLine feed label <br/>Or implicitly wrapGroup elements, such as <div> <div/>.

These elements with the line feed function are not used in our code. The span element is a text element.

The so-called text element is to set a piece of text to a matched structure and meaning. A reference table is listed below:

Element name	Description
A	Generate hyperlink
Br	Force line feed
Wbr	Safe line feed
B	Mark a text but not emphasize it
Strong	Important
I	Foreign or scientific terms
Em	Emphasize
Code	Computer code
Var	Program output
Samp	Variable
Kdb	Indicates user input
Abbr	Abbreviation
Cite	The title of other works.
Del	Indicates the deleted text.
S	Indicates that the text is no longer confirmed
Dfn	Glossary
Mark	Content related to another context
Q	Indicates the content from another place.
Rq	Used in combination with ruby elements to mark parentheses
Rt	Used in combination with ruby elements to mark parentheses
Ruby	Indicates the phonetic symbol located above the ideographic text or on the right.
Bdo	Control the direction of Text
Small	Indicates the small font content
Sub	Subscript font
Sup	Indicates the upper font
Time	Time or date
U	Mark a text but not emphasize it
Span	Common Element with no semantics. CSS Modifier

From the above table, we found that there are still many text elements. But in fact, in practical applications, there are actually a few commonly used ones, most of which are for English.

 

Text element Parsing

1. <B> indicates the keyword and product name.

<b>HTML5</b> 

 

Explanation: <B> the actual function of an element isBold. In terms of semantics, it is to mark a piece of text, but it is not particularly emphasized or important. For example, some keywords or product names in a text segment.

2. <strong> indicates important text

<strong>HTML5</strong> 

 

Explanation: the actual function of the <strong> element is the same as that of the <B> element.Bold. In terms of semantics, it is to emphasize an important piece of text.

 

Conclusion: Why are two elements separated while achieving the same effect? Isn't that unnecessary? In fact, this is the characteristic of html5. html5 emphasizes semantic tags. Here, the semantic tag is intended for people to know what the text in the tag is. For browsers, you can use the <span> common element and css style to achieve various effects. Only one element is enough. But the readability of the code will be very low. Of course, there is actually no need to place any content in a specific tag. The specific usage habits are based on the individual.

3. <br> force line breaks and <wbr> secure line breaks

<Br> // I personally think that writing <br/> this type of self-closing tag is more compliant with the specification, but it can also be written Thisabc <wbr> dkedkslakdj <wbr> fkdlsakd is apple.

Note: If you type <br> in any text field, the new line is wrapped. If you use <wbr> when the English word is too long, the new line is cropped Based on the browser width.

4. <I> foreign words or technical terms

<i>HTML5</i>

 

Explanation: <I> the actual function of an element is skew. In terms of semantics, it indicates that the surrounding content is not particularly emphasized or important.

5. <em> emphasize

<em>HTML5</em>

 

Explanation: <em> elements play the same role as <I> in terms of semantics.

 

　　Different elements achieve the same effect. The above explains why, and I will not explain it anymore.

6. <s> indicates inaccuracy or correction

<s>HTML5</s>

 

Explanation: the actual function of the <s> element is to delete the line. In terms of semantics, it indicates inaccurate deletion.

 

7. <del> indicates deleting text

<del>HTML5</del> 

 

Explanation: The <del> element has the same effect as the <s> element, that is, strikethrough. In terms of semantics, it indicates that the relevant text is deleted.

 

8. <u> indicates to underline the text.

<u>HTML5</u> 

 

Explanation: <u> the actual function of an element is to add an underline. In terms of semantics, this text section is not emphasized.

 

9. <ins> Add a piece of text

<ins>HTML5</ins> 

 

Explanation: the actual function of the <ins> element is the same as that of the <u> element. In terms of semantics, it is to add a piece of text and emphasize it.

10. <small> Add a small font

<small>HTML5</small>

 

Explanation: the actual function of the <small> element is to put the text in the small one. In terms of semantics, it is used for disclaimer and clarification statements.

11. <sub> <sup> Add superscripts and subscripts

<sub>5</sub><sup>5</sup>

 

Explanation: the elements of <sub> and <sup> actually act as mathematical superscripts and subscripts. The same is true for semantics.

12. <code> and so on indicate Input and Output

<code>HTML5</code> <var>HTML5</var><samp>HTML5</samp><kdb>HTML5</kdb>

 

Explanation: <code> indicates a computer code segment; <var> indicates a variable in a programming language; <samp> indicates a program or computer output; <kdb> indicates a user input. Because this is an English field, lang = "en" must be used to reflect the effect.

 

13. <abbr> stands for abbreviations

<abbr>HTML5</abbr>

 

Explanation: <abbr> elements have no practical effect. In terms of semantics, they are short for a piece of text.

14. <dfn> indicates Defining Terms

<dfn>HTML5</dfn>

 

Explanation: The <dfn> element is a general skew. In terms of semantics, it indicates a piece of text that interprets a word or phrase.

15. <q> reference content from another location

<q>HTML5</q> 

 

Explanation: <q> the actual function of an element is to add a pair of double quotation marks. In terms of semantics, it indicates that content from other places is referenced.

 

16. <cite> reference titles of other works

<cite>HTML5</cite> 

 

Explanation: the actual function of <cite> elements is to bold. In terms of semantics, the title of other works is referenced.

17. <ruby> language elements

<Ruby> protocol <rp> (</rp> <rt> t o </rt> <rp>) </rp> protocol <rp> (</rp> <rt> tiè </rt> <rp>) </rp> </ruby>

 

Explanation: <ruby> it is used to provide support for non-Western languages. <Rp> <rt> helps readers understand the correct pronunciation of ideographic words. For example, Chinese Pinyin is above the text.

 

18. <bdo> set the text direction

<bdo dir="rtl">HTML5</bdo> 

 

Explanation: <bdo> the attribute dir must be used for setting. Two values are available: rtl (from right to left) and ltr (from left to right ). The default value is ltr. Another <bdi> element is the processing direction. Because it is the special effect of a special language, you must test the support level yourself.

19. <mark> highlight text

<mark>HTML5</mark> 

 

Explanation: <mark> the actual function is to add a yellow background and a black word. In terms of semantics, the highlighted text related to the context is used as a mark.

20. <time> indicates the date and time.

<time>2015-10-10</time> 

 

Explanation: The <time> element has no practical effect. In terms of semantics, it indicates the date and time.

 

21. <span> indicates general text

<span>HTML5</span>

 

Explanation: The <span> element has no practical effect. It is a semantic representation of a piece of text. We often use it to set CSS and other operations.

　　Summary: in fact, these elements seem to have a large number, but they have very little effect in the browser.

1. Bold

2. Disposition

3. strikethrough

4. Underline

5. small font

6. Upper and Lower mark in Mathematics

7. Effect of computer code snippets in English

8. Double quotation marks

9. Pronunciation Annotation

10. Text direction

11. Yellow background, black font

12. line feed

In these effects, most of them can be implemented through css, and some of them are rarely used, so there is no need to memorize them. You probably know what the results are. You can check the corresponding table when you use it.