HTML5使用<mark>标签:高亮显示文本

1、<mark>标签的使用

mark 标签用于表示页面中需要突出显示或高亮的一段文本,这段文本对于当前用户具有参考作用。它通常在引用原文以引起读者注意时使用。mark 标签的作用相当于使用一支荧光笔在打印的纸张上标出一些文字。它与强调不同,对于强调,我们使用 em 标签。但是如果有一些已有的文本,并且想要让文本中没有强调的内容处于显眼的位置,可以使用 mark 标签并将其样式化为斜体等。语法如下:

<mark>文字</mark>

【实例】在页面中高亮显示关键字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>mark元素应用在网页检索时的示例</title>
</head>
<body>
    <h1>搜索"<mark>HTML 5</mark>",找到相关网页约10,210,000篇,用时0.041秒</h1>
    <section id="search-results">
        <article>
            <h2>
                <a href="http://developer.51cto.com/art/200907/133407.htm">
                    专题:<mark>HTML 5</mark> 下一代Web开发标准详解_51CTO.COM - 技术成就梦想 ...
                </a>
            </h2>
            <p><mark>HTML 5</mark>是近十年来Web开发标准最巨大的飞跃</p>
        </article>
        <article>
            <h2>
                <a href="http://paranimage.com/list-of-html-5/">
                    <mark>HTML 5</mark>一览 | 帕兰映像
                </a>
            </h2>
            <p><mark>html 5</mark>最近被讨论的越来越多,越来越烈...</p>
        </article>
        <article>
            <h2>
                <a href="http://www.chinabyte.com/keyword/HTML+5/">
                    <mark>html 5</mark>_比特网
                </a>
            </h2>
            <p><mark>HTML 5</mark>提供了一些新的元素和属性,反映典型...</p>
        </article>
        <article>
            <h2>
                <a href="http://www.slideshare.net/mienflying/html5-4921810">
                    <mark>HTML 5</mark>表单
                </a>
            </h2>
            <p>about <mark>HTML 5</mark> Form,the web form 2.0 tech</p>
        </article>
    </section>
    </body>
</html>

执行结果:

2、mark、strong、em标签的区别

<mark>标签:吸引当前用户的注意。

<strong>标签:用来强调一段文字的重要性。

<em>标签:作者为了突出文章重点而使用。

相关推荐

  1. Vim中取消显示文本

    2024-07-09 19:26:01       60 阅读
  2. HTML5音频标签

    2024-07-09 19:26:01       33 阅读
  3. qt实现文本

    2024-07-09 19:26:01       37 阅读
  4. html5的video标签在移动端的使用

    2024-07-09 19:26:01       25 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 19:26:01       99 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 19:26:01       107 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 19:26:01       90 阅读
  4. Python语言-面向对象

    2024-07-09 19:26:01       98 阅读

热门阅读

  1. 在网站存在漏洞的情况下强化安全防御

    2024-07-09 19:26:01       26 阅读
  2. 驱动开发系列-如何与硬件通信

    2024-07-09 19:26:01       30 阅读
  3. 计算机网络笔记分享(第六章 应用层)

    2024-07-09 19:26:01       39 阅读
  4. QT配置opencv

    2024-07-09 19:26:01       32 阅读
  5. 如何高效学习(二)

    2024-07-09 19:26:01       36 阅读
  6. lvs集群(一)

    2024-07-09 19:26:01       35 阅读
  7. 使用Zookeeper实现分布式锁的最佳实践

    2024-07-09 19:26:01       31 阅读
  8. 每天一个数据分析题(四百十一)- 主成分

    2024-07-09 19:26:01       31 阅读
  9. python教程---网络爬虫

    2024-07-09 19:26:01       29 阅读