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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。