HTML-<body> -tagi
- Edellinen sivu <blockquote>
- Seuraava sivu <br>
Määrittely ja käyttö
<body>
Tagi määrittelee dokumentin pääosan.
HTML-dokumentin metadata ja dokumenttieto sisältyvät head-elementtiin, ja dokumentin sisältö sisältyy body-elementtiin.
body-elementti seuraa aina head-elementtiä, ja se on html-elementin toinen lapsi-elementti.
<body>
Elementti sisältää HTML-dokumentin kaikki sisällöt, kuten otsikot, kappaleet, kuvat, hyperlinkit, taulukot, luettelot jne.
Huomioitavaa:HTML-dokumentissa voi olla vain yksi <body>
Elementti.
Esimerkki
Yksinkertainen mutta täydellinen HTML-dokumentti:
<!DOCTYPE html> <html> <head> <title>Dokumentin otsikko</title> </head> <body> <h1>Tämä on otsikko</h1> <p>Tämä on kappale.</p> </body> </html>
Vinkki:Lisää esimerkkejä sivun alaosassa.
Globaalit attribuutit
<body>
Tagi tukee myös HTML:n globaalit attribuutit.
tapahtumaparametreja
<body>
Tagi tukee myös HTML:n tapahtumaparametrit.
Oletusarvoiset CSS-asetukset
Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <body>
Elementti:
body { display: block; margin: 8px; } body:focus { outline: none; }
Lisää esimerkkejä
Esimerkki 1
Lisää taustakuvaa dokumenttiin (käyttämällä CSS):
<html> <head> <style> body { background-image: url(w3s.png); } </style> </head> <body> <h1>Hello world!</h1> <p><a href="">Vierailka codew3c.com!</a></p> </body>
Esimerkki 2
Aseta dokumentin taustaväri (käyttämällä CSS):
<html> <head> <style> body { background-color: #E6E6FA; } </style> </head> <body> <h1>Hello world!</h1> <p><a href="https://www.codew3c.com">Vierailka codew3c.com!</a></p> </body>
Esimerkki 3
Aseta dokumentin tekstin väri (käyttämällä CSS):
<html> <head> <style> body { color: green; } </style> </head> <body> <h1>Hello world!</h1> <p>Tämä on tekstikappale.</p> <p><a href="">Vierailka codew3c.com!</a></p> </body> </html>
Esimerkki 4
Aseta dokumentissa vieraantuneiden linkkien väri (CSS:n avulla):
<html> <head> <style> a:link { color:#0000FF; } </style> </head> <body> <p><a href="https://www.codew3c.com">codew3c.com</a></p> <p><a href="https://www.codew3c.com/html/">HTML - oppitunnit</a></p> </body> </html>
Esimerkki 5
Aseta dokumentissa aktiivisten linkkien väri (CSS:n avulla):
<html> <head> <style> a:active { color:#00FF00; } </style> </head> <body> <p><a href="https://www.codew3c.com">codew3c.com</a></p> <p><a href="https://www.codew3c.com/html/">HTML - oppitunnit</a></p> </body> </html>
Esimerkki 6
Aseta dokumentissa vieraillut linkkien väri (CSS:n avulla):
<html> <head> <style> a:visited { color:#FF0000; } </style> </head> <body> <p><a href="https://www.codew3c.com">codew3c.com</a></p> <p><a href="https://www.codew3c.com/html/">HTML - oppitunnit</a></p> </body> </html>
Selaimen tuki
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Tuki | Tuki | Tuki | Tuki | Tuki |
- Edellinen sivu <blockquote>
- Seuraava sivu <br>