Atrybuty HTML
Atrybuty HTML dostarczają dodatkowych informacji o elementach HTML.
Atrybuty HTML
- Wszystkie elementy HTML mogą mieć atrybuty
- Atrybuty dostarczają dodatkowych informacji o elementach
- Atrybuty są zawsze określone w tagu początkowym
- Atrybuty zwykle występują w parach nazwa/wartość, np. nazwa="wartość"
Atrybut href
Znacznik <a>definiuje hiperłącze. hrefAtrybut określa adres URL strony, do której prowadzi link :
Przykład
<a href="https://www.w3schools.com">Visit W3Schools</a>
Więcej o linkach dowiesz się w naszym rozdziale Linki HTML .
Atrybut src
Tag <img>służy do osadzenia obrazu na stronie HTML. Atrybut określa ścieżkę srcdo wyświetlanego obrazu:
Przykład
<img src="img_girl.jpg">
Istnieją dwa sposoby określenia adresu URL w src
atrybucie:
1. Bezwzględny adres URL — łącza do zewnętrznego obrazu umieszczonego na innej stronie internetowej. Przykład: src="https://www.w3schools.com/images/img_girl.jpg" .
Uwagi: Obrazy zewnętrzne mogą być objęte prawami autorskimi. Jeśli nie uzyskasz pozwolenia na jego używanie, możesz naruszać prawa autorskie. Ponadto nie można kontrolować obrazów zewnętrznych; można go nagle usunąć lub zmienić.
2. Względny adres URL — linki do obrazu umieszczonego w witrynie. Tutaj adres URL nie zawiera nazwy domeny. Jeśli adres URL zaczyna się bez ukośnika, będzie on odnosił się do bieżącej strony. Przykład: src="img_girl.jpg". Jeśli adres URL zaczyna się od ukośnika, będzie powiązany z domeną. Przykład: src="/images/img_girl.jpg".
Wskazówka: prawie zawsze najlepiej jest używać względnych adresów URL. Nie zepsują się, jeśli zmienisz domenę.
Atrybuty szerokości i wysokości
Znacznik <img>powinien zawierać również
atrybuty widthi
heightokreślające szerokość i wysokość obrazu (w pikselach):
Przykład
<img src="img_girl.jpg" width="500" height="600">
Atrybut alt
Wymagany altatrybut <img>
znacznika określa tekst alternatywny dla obrazu, jeśli z jakiegoś powodu obraz nie może zostać wyświetlony. Może to być spowodowane wolnym połączeniem, błędem w srcatrybucie lub używaniem przez użytkownika czytnika ekranu.
Przykład
<img src="img_girl.jpg" alt="Girl
with a jacket">
Przykład
Zobacz, co się stanie, jeśli spróbujemy wyświetlić obraz, który nie istnieje:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Dowiesz się więcej o obrazach w naszym rozdziale Obrazy HTML .
Atrybut stylu
styleAtrybut służy do dodawania stylów do elementu, takich jak kolor, czcionka, rozmiar i inne .
Przykład
<p style="color:red;">This is a red paragraph.</p>
Więcej o stylach dowiesz się w naszym rozdziale Style HTML .
Atrybut języka
Powinieneś zawsze dołączyć langatrybut wewnątrz <html>tagu, aby zadeklarować język strony WWW. Ma to pomóc wyszukiwarkom i przeglądarkom.
Poniższy przykład określa język angielski:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Kody krajów można również dodać do kodu języka w lang
atrybucie. Tak więc pierwsze dwa znaki określają język strony HTML, a ostatnie dwa znaki określają kraj.
Poniższy przykład określa angielski jako język i Stany Zjednoczone jako kraj:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Wszystkie kody językowe można zobaczyć w naszym podręczniku HTML Language Code Reference .
Tytuł Atrybut
titleAtrybut definiuje dodatkowe informacje o elemencie .
Wartość atrybutu title zostanie wyświetlona jako podpowiedź po najechaniu myszą na element:
Przykład
<p title="I'm a tooltip">This is a paragraph.</p>
Sugerujemy: Zawsze używaj atrybutów pisanych małymi literami
Standard HTML nie wymaga nazw atrybutów pisanych małymi literami.
Atrybut tytułu (i wszystkie inne atrybuty) można zapisać wielkimi lub małymi literami, takimi jak tytuł lub TITLE .
Jednak W3C zaleca atrybuty małych liter w HTML i wymaga atrybutów małych liter dla bardziej rygorystycznych typów dokumentów, takich jak XHTML.
W W3Schools zawsze używamy nazw atrybutów pisanych małymi literami.
Sugerujemy: Zawsze cytuj wartości atrybutów
Standard HTML nie wymaga cudzysłowów wokół wartości atrybutów.
Jednak W3C zaleca cytaty w HTML i wymaga cytatów dla bardziej rygorystycznych typów dokumentów, takich jak XHTML.
Dobry:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Zły:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Czasami trzeba użyć cudzysłowów. Ten przykład nie wyświetli poprawnie atrybutu title, ponieważ zawiera spację:
Przykład
<p
title=About W3Schools>
W W3Schools zawsze używamy cudzysłowów wokół wartości atrybutów.
Cytaty pojedyncze czy podwójne?
Podwójne cudzysłowy wokół wartości atrybutów są najczęstsze w HTML, ale można również użyć pojedynczych cudzysłowów.
W niektórych sytuacjach, gdy sama wartość atrybutu zawiera cudzysłowy, konieczne jest użycie cudzysłowów pojedynczych:
<p title='John "ShotGun" Nelson'>
Lub odwrotnie:
<p title="John 'ShotGun' Nelson">
Podsumowanie rozdziału
- Wszystkie elementy HTML mogą mieć atrybuty
hrefAtrybut of określa<a>adres URL strony, do której prowadzi linksrcAtrybut of określa<img>ścieżkę do wyświetlanego obrazu- I atrybuty
widthzapewniają informacje o rozmiarze obrazówheight<img> altAtrybut of zapewnia<img>alternatywny tekst dla obrazustyleAtrybut służy do dodawania stylów do elementu, takich jak kolor, czcionka, rozmiar i innelangAtrybut tagu deklaruje język<html>strony internetowejtitleAtrybut definiuje dodatkowe informacje o elemencie
Ćwiczenia HTML
Dokumentacja atrybutów HTML
Pełna lista wszystkich atrybutów dla każdego elementu HTML znajduje się w naszym: HTML Attribute Reference .