Home > Article > Web Front-end > 【HTML5】Mark text

【HTML5】Mark text

高洛峰Original: 2016-10-09 14:37:201444browse

1. Use basic text elements to mark content

First look at the display effect:

【HTML5】Mark text

Corresponding HTML code:

<!DOCTYPE html>
<html>
<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 style:

*一般表示关键词和产品名称*
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:

【HTML5】Mark text

Corresponding code:

<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 content

pre element can change the way the browser processes content, prevent the merging of whitespace characters, and allow the format in the source document to be reserve.

【HTML5】Mark text

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

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：【HTML5】Use multimediaNext article：【HTML5】Use multimedia

See more

【HTML5】Mark text

Related articles