Atrybut border etykiety <img> HTML
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>
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.
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">
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.