Atrybut border etykiety <img> HTML

Tag HTML <img>

Przykład

Poniższy HTML może wygenerować różne grubości krawędzi obrazu:

<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>

Spróbuj sam

Definicja i użycie

Atrybut border znacznika <img> określa szerokość ramki wokół obrazu, co oznacza, że można zwiększyć lub usunąć ramkę obrazu.

Komentarz:Domyślnie, obrazy nie mają ramki (oprócz tych znajdujących się wewnątrz elementu a).

Przeglądarki zazwyczaj wyświetlają obrazy reprezentujące hiperłącza (np. obrazy zawarte w znaczniku <a>) w ramce szerokości dwóch pikseli, aby oznaczyć, że czytelnik może wybrać ten obraz, aby uzyskać dostęp do powiązanego dokumentu.

Użycie atrybutu border i wartości szerokości wyrażonej w pikselach można usunąć (border="0") lub rozszerzyć ramkę obrazu.

Uwaga:Atrybut ten nie jest już zalecany w HTML 4 i XHTML, powinien być zastąpiony przez styl, ale wciąż jest dobrze wspierany przez popularne przeglądarki.

Czytaj więcej: Usunięcie ram obrazu

Zgodność przeglądarki

Chociaż atrybut border nie jest zalecany, wszystkie główne przeglądarki wspierają ten atrybut.

Wskazówki i komentarze

Komentarz:HTML 4.01 nie zaleca używania atrybutu "border" dla obrazów. W XHTML 1.0 Strict DTD i HTML 5, atrybut ten już nie jest wspierany.

Wskazówka:Używaj Atrybuty ramki CSS Aby zmienić styl ramki elementu. Możesz użyć atrybutu ramki CSS w zewnętrznej tablicy stylów, aby ustawić jednolitą ramkę dla wszystkich obrazów na stronie. W porównaniu do ustawiania ramki dla pojedynczego obrazu, ten sposób jest zdecydowanie bardziej efektywny.

Komentarze dotyczące zgodności

Nie zaleca się używania atrybutu border elementu img; w HTML 4.01 Strict oraz XHTML 1.0 Strict DTD, atrybut border elementu img nie jest wspierany.

Używaj CSS zamiast tego.

Gramatyka CSS: <img style="border:5px solid black">

Przykład CSS: ramka obrazu

W naszej lekcji CSS, znajdziesz więcej informacji o Atrybut border szczegóły.

Gramatyka

<img border="value" />

Wartość atrybutu

Wartość Opis
pixels Szerokość ramki, wyrażona w pikselach.

Przykład TIY

Atrybut border znacznika <img>
Ten przykład pokazuje, jak używać atrybutu border w tagu <img> do zmiany ram obrazu.

Czytaj więcej: Usunięcie ram obrazu

Użycie atrybutu border="0" w tagu <img> pozwala na usunięcie ram wokół hiperłączy obrazu. Dla niektórych obrazów, zwłaszcza tych, które są mapami obrazowymi, brak ram może poprawić wygląd strony. Dla tych, które jasno wskazują, że są linkami do innych obrazów, brak ram może sprawić, że obraz wygląda lepiej.

Chociaż usunięcie ram nie obniży dostępności dokumentu, warto być ostrożnym. Bez ram oznacza, że zniknął bardzo powszechny wizualny wskaźnik hiperłączy, co może sprawić, że czytelnicy nie znajdą tych linków tak łatwo, jak wcześniej. Przeglądarki zazwyczaj zmieniają kształt wskaźnika myszy, gdy przesuwa się nad obrazem hiperłącza, ale nie można oczekiwać, że przeglądarki zawsze to robią, a tym bardziej nie można pozwolić, aby użytkownicy szukali ukrytych linków bez ram.

Zdecydowanie polecamy, aby podczas używania obrazów bez ram, jednocześnie stosować inne metody, aby czytelnicy wiedzieli, że powinni kliknąć na tych obrazach. Nawet przy prostym tekście, trudno jest uczynić dokument bardziej dostępny dla czytelników.

Tag HTML <img>