【HTML element】Detailed explanation of tag text

1. Use basic text elements to mark up content

First look at the display effect:

Corresponding HTML code:

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Learn4Font </ title >
</ head >
< body >
Element b — I am the example.
element em — I am the example.
Element i — I am the example.
Element s — < s > I am the example. </ s >
Element strong -- I am the example.
Element u — I am the example.
Element small — I am the example.
element sub — I am the example.
Element sup —— I am the example.
</ body >
</ html >

Corresponding element custom style:

XML/HTML CodeCopy content to clipboard

*Generally refers to keywords and product names*
b{font-weight: bolder;}
*Generally indicates emphasis*
em {font-style: italic;}
*Generally refers to foreign words or scientific terms*
i {font-style: italic;}
*Generally indicates inaccuracy or correction*
s {text-decoration: line-through;}
*Generally indicates important text*
strong {font-weight: bolder;}
*Generally means to underline the text*
u {text-decoration: underline;}
*Generally means adding small font content*
small {font-size: small;}
*Generally means adding superscripts and subscripts*
sup {vertical-align: sub; font-size: smaller;}
sub {vertical-align: super; font-size: smaller;}

2. Use language elements

ruby, rt and rp elements, let’s see the effects first:

Corresponding code:

XML/HTML CodeCopy content to clipboard

< ruby >魑< rp > ( </ rp > < rt > chī </ rt > < rp > ) </ rp > </ ruby >
< ruby >魅< rp > ( </ rp > < rt > mèi </ rt > < rp > ) </ rp > </ ruby >
< ruby >魍< rp > ( </ rp > < rt > wǎng </ rt > < rp > ) </ rp > </ ruby >
< ruby >魉< rp > ( </ rp > < rt > liǎng </ rt > < rp > ) </ rp > </ ruby >

3. Use pre-formatted content

The pre element can change the way the browser handles the content, preventing whitespace from being collapsed so that the formatting of the source document is preserved.

XML/HTML CodeCopy content to clipboard

< pre >
< code >
var fruits = ["apples","oranges","mangoes","cherries"];
for(var i = 0 ; i < fruits.length ; i++){
document.writeln("I like " + fruits[i]);
}
</ code >
</ pre >

The above [HTML element] detailed explanation of marking text is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/luka/archive/2016/07/23/5532134.html

<<: Example of implementing TikTok text shaking effect with CSS

>>: Detailed steps for installing ros2 in docker