Home > Article > Web Front-end > [HTML Element] Detailed explanation of markup text

[HTML Element] Detailed explanation of markup text

高洛峰Original: 2017-02-18 15:19:021034browse

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>

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;}

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML__inline elements vs. block elementsNext article：HTML__inline elements vs. block elements

See more

[HTML Element] Detailed explanation of markup text

Related articles