如何在 HTML 中包含强调文本?
htmljavascriptprogramming scripts
为了强调 HTML 中的文本内容,我们使用 <em> 标签。它与 <italic> 标签相同。它有结束和开始标签,<em></em>。<em> 标签是一个短语标签。它呈现为强调文本。
<em>强调文本</em>
<em> 的开始和结束标签之间的文本以斜体形式显示。斜体 <i> 和强调标签 <em> 之间的主要区别在于,强调标签在语义上强调单词的一部分,而 <i> 标签以斜体显示文本,表示替代语气。 <em> 标签的效果可以通过使用 CSS 属性来实现。
语法
以下是 CSS 中 <em> 标签的用法 −
em { font-style: italic; }
<em> 标签支持全局属性和事件属性。
<em> 元素放置在 <body> 标签内。
它用于将文本与其余内容分开。
我们还可以通过应用 CSS 来更改 <em> 标签的行为。
<em>属性不包含值。
所有浏览器都支持 <em> 标签。
示例
以下是演示 HTML 中 <em> 标签用法的示例−
<!DOCTYPE html> <html> <body> <h1>Demonstrating em element</h1> <p>HTML stands for <em>Hyper Text Markup Language </em> created by <em>Berners-Lee </em>in late 1991 </p> <p>HTML is designed to create <em>Web Pages</em> </p> </body> </html>
示例
以下是另一个使用 title 属性的 <em> 标签来创建强调文本的示例。
<!DOCTYPE html> <html> <head> <title> Inserting Emphasized text using HTML </title> </head> <body style="text-align: center;"> <h1 style="color:red;"> HTML Tutorial </h1> <h3> Inserting Emphasized text using HTML </h3> <em title="Emphasized text"> Welcome To TutorialsPoint </em> </body> </html>
示例
以下是使用 CSS 的 <em> 标签的示例。
<!DOCTYPE html> <html> <head> <style> em { font-style: italic; background-color: yellow; text-emphasis-color: green; text-emphasis-style: "*"; } </style> </head> <body> <p>An Emphasized element can be displayed like this:</p> <em>HTML Tutorial</em> <p>To see the effects, Change the default CSS settings .</p> </body> </html>
示例
还有一个 text - accent 属性用于突出显示文本,让我们看一个使用 CSS 的 text-emphasis 示例。以下是示例,演示了 text-emphasis 属性。
<!DOCTYPE html> <html> <head> <style> p.ex1 { text-emphasis: filled; } p.ex2 { text-emphasis: open; } p.ex3 { text-emphasis: double-circle red; } p.ex4 { text-emphasis: triangle blue; } </style> </head> <body> <h1>Demonstrating text-emphasis Property</h1> <p class="ex1">Welcome To My World</p> <p class="ex2">It's a Beautiful World</p> <p class="ex3">Learn HTML with Fun</p> <p class="ex4">Door's Open</p> </body> </html>