HTML Phrase用法及代码示例

短语标签：在HTML中，短语标签用于指示文本块的结构含义。例如，abbr标签指示短语包含缩写词。词组标签的一些示例包括abbr，strong，mark 、。。。等等。

强调文本：em标签用于强调文本，此标签在浏览器中显示斜体字体。它只是意味着em标记中写入的所有内容都将显示为强调的文本。句法：

<em> Text Content </em>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Emphasized Text</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p><em>GeeksforGeeks</em> emphasized tag</p> 
    </body>  
</html>

输出：
emphasize tag

文本缩写：要缩写HTML中的文本，请使用abbr标签。在开始和结束abbr标签内写入的文本的缩写。句法：

<abbr title = "GeeksforGeeks">GFG</abbr>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Text Abbreviation</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p><abbr title = "GeeksforGeeks">GFG</abbr> 
                               abbreviation tag</p> 
    </body>  
</html>

输出：
text abbreviation tag

首字母缩略词元素该标签用于指示写在开始和结束首字母缩略词标签内的内容是首字母缩略词。句法：

<acronym> Text Content </acronym>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Acronym tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p><acronym>GeeksforGeeks</acronym> acronym tag</p> 
    </body>  
</html>

输出：
acronym tag

文本方向：bdo标签代表Bi-directional覆盖。用于覆盖当前文本方向。默认的文字方向是从左到右。但是它可以使用bdo标记覆盖。

ltr：指定从左到右的文本方向。
rtl：指定从右到左的文本方向。
auto：在此标签中，浏览器根据内容确定文本方向(仅在文本方向未知时才建议使用)。

用法:

<bdo dir = "ltr/rtl/auto"> Text Content </bdp>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Text decoration tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p>GeeksforGeeks text decoration tag</p> 
        <p><bdo dir = "rtl">GeeksforGeeks text  
                        decoration tag</bdo></p> 
    </body>  
</html>

输出：
text decoration tag

短引用：要在句子中添加双引号，请使用q标记。写在开闭q标签内的内容将用引号打印。句法：

<q> Text Content </q>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Quotation tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p><q>GeeksforGeeks</q> quotation tag</p> 
    </body>  
</html>

输出：
short quotation tag

标记的文本：在打开和关闭标记标签中写入的内容将显示为黄色标记。本质上，它的工作方式类似于荧光笔，用于突出显示句子中的某些单词。语法：<mark>文本内容</mark>示例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Mark tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p><mark>GeeksforGeeks</mark> mark tag</p> 
    </body>  
</html>

输出：
marked tag

强文本：强标签用于显示句子中的重要单词。用打开和关闭强标签标记的内容将显示为重要单词。句法：

<strong> Text Content </strong>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>strong tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p><strong>GeeksforGeeks</strong> strong tag</p> 
    </body>  
</html>         
<head>

输出：
strong tag

引用文本：在引用语句中使用blockquote标记。这意味着在打开和关闭blockquote标签之间写入的内容将被视为引用文本。句法：

<blockquote> Text Content </blockquote>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Blockquote tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <blockquote>GeeksforGeeks is a computer science 
        portal where you can learn programming. It contains 
        well written, well thought and well explained  
        computer science and programming articles, quizzes 
        and ...</blockquote> 
    </body>  
</html>         
<head>

输出：
blockquote tag

程式码：为了表示html中的编程代码，使用了代码标签。在开始和结束代码标签中写入的内容被视为编程代码。句法：

<code> Text Content </code>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>code tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p><code>GeeksforGeeks Programming</code> code tag</p> 
    </body> 
</html>

输出：
code tag

程序输出：用samp标签编写的程序的输出。在开始和结束samp标签中写入的内容将打印样本输出。句法：

<samp> Text Content </samp>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Program output tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            p { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <p><samp>GeeksforGeeks</samp> program output tag</p> 
    </body> 
</html>

输出：
output tag

地址文本：地址标签用于在Web浏览器中显示地址。在开始和结束地址标签内编写的内容被视为HTML中的地址。句法：

<address> Text Content </address>

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Address tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
            } 
            address { 
                font-size:20px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <address>GeeksforGeeks office,  
                 sector-142, Noida,  
                 India</address> 
    </body> 
</html>

输出：
address tag
支持的浏览：支持的浏览器在下面列出。

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自Akashkumar17大神的英文原创作品 HTML | Phrase Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。