[HTML Element] Detailed explanation of markup text-HTML Tutorial-php.cn

[HTML Element] Detailed explanation of markup text

高洛峰

Release： 2017-02-18 15:19:02

Original

1085 people have browsed it

The following editor will bring you a detailed explanation of [HTML element] mark text. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

1. Use basic text elements to mark content

Let’s take a look at the display effect first:

【HTML 元素】标记文字详解

Corresponding HTML code:

XML/HTML CodeCopy content to the clipboard

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

Copy after login

Corresponding element custom style:

XML/HTML CodeCopy content to the clipboard

*一般表示关键词和产品名称*   
b{font-weight: bolder;}   
  
*一般表示加以强调*   
em {font-style: italic;}   
  
*一般表示外文词语或科技术语*   
i {font-style: italic;}   
  
*一般表示不准确或校正*   
s {text-decoration: line-through;}   
  
*一般表示重要文字*   
strong {font-weight: bolder;}   
  
*一般表示为文字添加下划线*   
u {text-decoration: underline;}   
  
*一般表示为添加小号字体内容*   
small {font-size: small;}   
  
*一般表示添加上标和下标*   
sup {vertical-align: sub; font-size: smaller;}   
sub {vertical-align: super; font-size:smaller;}

Copy after login

2. Use language elements

ruby, rt and rp elements, first look at the effect:

【HTML 元素】标记文字详解

Corresponding code:

XML/HTML CodeCopy content to clipboard

<p style=" font-size: 3em;">  
    <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>  
</p>

Copy after login

3. Use pre-formatted The content

pre element can change the way the browser handles content, preventing whitespace characters from being merged so that the formatting in the source document is preserved.

【HTML 元素】标记文字详解

XML/HTML CodeCopy content to clipboard

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

Copy after login

The above [HTML element] detailed explanation of markup text is all the content shared by the editor. I hope it can give you a reference, and I hope you will support me a lot. PHP Chinese website.

For more [HTML Elements] detailed explanation of marked text and related articles, please pay attention to the PHP Chinese website!