W3docs
ru
Войти

HTML-тег <blink>

Blink is a deprecated HTML tag. It was used in the HTML document to make text flash. To attain the blinking effect, you can also use CSS styles or Javascript. See examples.

Тег <blink> представлял собой элемент HTML, предназначенный для создания мигающего текста на веб-странице. Этот тег был признан устаревшим в HTML 4.0 и не поддерживается современными браузерами. Он широко считался плохим дизайнерским решением и часто ассоциировался с низким качеством пользовательского опыта.

Поскольку тег <blink> больше не используется, рекомендуется достигать аналогичных эффектов с помощью CSS или JavaScript. Однако имейте в виду, что мигающий или быстро меняющийся контент может раздражать пользователей или отвлекать их, а также может не соответствовать рекомендациям по доступности.

HTML-тег blink

danger

Тег <blink> является устаревшим HTML-тегом. Хотя некоторые браузеры всё ещё могут поддерживать <blink>, его поддержка постепенно прекращается. Не используйте этот элемент, иначе ваши страницы могут отображаться некорректно. Вместо этого вы можете использовать CSS и JavaScript для создания эффекта мигания.

Пример HTML-тега <blink>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      blink {
        color: #1c87c9;
        font-size: 20px;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>The &lt;blink&gt; Element </h1>
    <blink>The &lt;blink&gt; element is deprecated. To attain blinking effect you should use CSS or JavaScript. See examples in the next section.</blink>
  </body>
</html>
Попробуйте сами »

Эффект мигания с помощью CSS

Другой способ достижения эффекта мигания заключается в использовании CSS3 анимации с правилом @keyframes.

Пример эффекта мигания с анимацией CSS3:

Пример эффекта мигания с анимацией CSS

<!DOCTYPE html>
<html>
<head>
<style>
  .blink {
    animation: blinker 1s linear infinite;
  }

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
</style>
</head>
<body>

<h1 class="blink">Blinking Text Example</h1>

</body>
</html>
Попробуйте сами »

danger

Однако ключевое слово blink свойства text-decoration не входит в спецификацию CSS и не поддерживается в большинстве браузеров.

Альтернативный способ достижения эффекта мигания — использование ключевого слова blink свойства CSS text-decoration.

Пример эффекта мигания с помощью свойства CSS text-decoration:

Пример эффекта мигания, созданного с помощью text-decoration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blink {
        text-decoration: blink;
        color: #1c87c9;
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <p class="blink">This text may blink depending on the browser you use.</p>
  </body>
</html>
Попробуйте сами »

Эффект мигания с помощью JavaScript

Вы также можете использовать скрипты для мигания элемента.

Пример эффекта мигания с помощью JavaScript:

Пример мигания с помощью JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blink {
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
        color: #1c87c9;
        transition: 0.4s;
      }
    </style>
  </head>
  <body>
    <p id="blink">Blinking Effect with JavaScript</p>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function() {
        var blink = document.getElementById('blink');
        setInterval(function() {
          blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
        }, 1000);
      });
    </script>
  </body>
</html>
Попробуйте сами »

Практика

Практика

Каково поведение и статус HTML-тега &lt;blink&gt;?