Атрибут border тега HTML <img>

HTML <img> тег

Пример

Ниже приведен HTML, который может генерировать изображения с разной толщиной рамки:

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

Попробуйте сами

Определение и использование

Атрибут border тега <img> определяет ширину рамки вокруг изображения, то есть позволяет увеличить или удалить рамку изображения.

Комментарии:По умолчанию изображения не имеют рамки (если только изображение не находится внутри элемента a).

Браузеры обычно показывают изображения, представляющие ссылки (например, изображения, содержащиеся в теге <a>), в рамке шириной в два пикселя, чтобы показать, что читатель может выбрать это изображение, чтобы перейти к связанному документу.

Использование атрибута border и значения ширины в пикселях позволяет удалить (border="0") или увеличить рамку изображения.

Внимание:Этот атрибут больше не рекомендуется использовать в HTML 4 и XHTML, он также должен быть заменен стилем, но все же он хорошо поддерживается популярными браузерами.

Дополнительное чтение: Удаление рамок у изображений

Поддержка браузерами

Хотя использование атрибута border не рекомендуется, все основные браузеры поддерживают этот атрибут.

Советы и комментарии

Комментарии:HTML 4.01 не рекомендует использовать атрибут "border" для изображений. В XHTML 1.0 Strict DTD и HTML 5 этот атрибут больше не поддерживается.

Совет:Используйте Атрибут border CSS Используйте CSS-рамки, чтобы изменить стиль рамки элемента. Вы можете использовать CSS-рамки в внешнем стиле, чтобы установить одинаковые рамки для всех изображений на сайте. Этот метод,无疑, более эффективен, чем настройка рамки для каждого изображения по отдельности.

Комментарии по совместимости

Не рекомендуется использовать атрибут border элемента img; в HTML 4.01 Strict и XHTML 1.0 Strict DTD不支持 атрибут border элемента img.

Используйте CSS вместо этого.

Грамматика CSS: <img style="border:5px solid black">

Пример CSS: рамка вокруг изображения

В нашем курсе CSS вы можете найти больше информации о Атрибут border подробнее.

Грамматика

<img border="value" />

Значение свойства

Значение Описание
pixels Ширина рамки в пикселях.

Пример TIY

Атрибут border тега <img>
Этот пример демонстрирует, как использовать атрибут border в теге <img> для изменения рамки изображения.

Дополнительное чтение: Удаление рамок у изображений

Используя атрибут border="0" в теге <img>, можно удалить рамку вокруг изображения гиперссылки. Для некоторых изображений, особенно для картинок-карт, отсутствие рамки может улучшить вид страницы. А для тех кнопок, которые явно указывают на другие изображения, без рамки изображение может выглядеть лучше.

Удаление рамок не снизит доступность документа, но все же стоит быть осторожным.因为没有 рамки означает, что был убран один из самых распространенных визуальных индикаторов гиперссылок, что может сделать ссылки менее легко доступными для читателей. Браузеры обычно изменяют形状 курсора при наведении на изображение гиперссылки, но нельзя ожидать, что браузеры всегда делают это, и тем более не следует позволять пользователям摸索 без рамок, чтобы найти скрытые ссылки.

Мы настоятельно рекомендуем использовать другие методы вместе с изображениями без рамок, чтобы читатели знали, что следует щелкать по этим изображениям. Даже использование простого текста сложно сделать документ более доступным для читателей.

HTML <img> тег