HTML Blokk-nivå og Inline-elementer
Denne artikkelen forklarer HTML blokk-nivå og inline-elementer.
Dette forklarer forskjellene mellom blokknivåelementer og inline-elementer, samt de viktigste blokknivå- og inline-elementene.
YouTube Video
Blokknivåelementer og inline-elementer
HTML har to hovedkategorier av elementer som bestemmer hvordan de vises på skjermen: 'blokknivåelementer' og 'inline-elementer'. Disse elementene spiller en viktig rolle i sidens layout og påvirker direkte hvordan de plasseres. Her vil vi forklare i detalj egenskapene og bruken av hvert element.
Hva er et blokknivåelement?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Blokknivåelementer opptar vanligvis hele bredden av siden og vises på en separat linje fra andre elementer. Disse elementene kan inneholde andre blokknivå- eller inline-elementer og definerer den større strukturen i et dokument.
Funksjoner:
- Elementene begynner på en ny linje og utvides for å oppta så mye bredde som mulig (vanligvis hele bredden av overordnede element).
- De er adskilt fra andre blokkelementer vertikalt, med marger anvendt mellom dem.
- De kan inneholde andre blokk- eller inline-elementer i seg.
Her brukes følgende blokknivåelementer:.
<div>-taggen brukes ofte til å bygge layout.<p>-taggen brukes til å definere et avsnitt.<h1>til<h6>er elementer som brukes til å definere overskrifter.<h1>er den største overskriften, og<h6>er den minste.<ul>-taggen lager en uordnet liste.<ol>-taggen lager en ordnet liste.<section>-taggen definerer en seksjon innenfor et dokument.
Hva er et inline element?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Inline-elementer plasseres på samme linje som andre elementer og tar vanligvis bare opp så mye bredde som innholdet deres. Disse elementene behandles som en del av teksten og, i motsetning til blokknivåelementer, opptar de ikke hele linjen.
Funksjoner:
- Elementene vises på samme linje og plasseres side om side med andre inline-elementer.
- Bredden bestemmes av innholdet i elementet (tekst eller bilder).
- De kan inkluderes i blokknivåelementer, men ikke motsatt.
Her brukes følgende inline-elementer:.
<span>-taggen brukes til å fremheve en del av teksten med en spesifikk stil.<a>-taggen definerer en hyperkobling.<img>-taggen er et element som brukes til å legge inn bilder.<strong>fremhever viktig tekst (vanligvis vist i fet skrift).<em>indikerer vektlagt tekst (vanligvis vist i kursiv).
Forskjeller mellom blokknivåelementer og inline-elementer
- Visningsmetode: Blokknivåelementer vises på en ny linje og tar opp hele bredden av siden, mens inline-elementer vises på samme linje som andre elementer og bredden deres bestemmes av innholdet.
- Håndtering av interne elementer: Blokknivåelementer kan inneholde andre blokknivåelementer samt inline-elementer, men inline-elementer kan ikke inneholde blokknivåelementer.
- Layoutrolle: Blokknivåelementer brukes hovedsakelig til å lage layoutstrukturen på en side, mens inline-elementer definerer små elementer som tekst og lenker.
Viktige punkter for differensiering
Opprette layouts: Bruk blokknivåelementer som <div>, <section>, <article> for å definere store seksjoner og innholdsblokker.
Tekstdekorasjon og lenker: Bruk innebygde elementer som <span>, <a>, <strong>, <em> for å dekorere deler av teksten eller legge til lenker.
Blande blokknivåelementer og inline-elementer
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Blokknivåelementer som
<main>,<header>, og<section>brukes, og de blir vanligvis gjengitt på en ny linje, og opptar hele bredden av deres overordnede element. - Inline-elementer som
<a>,<strong>,<span>, og<img>brukes, og de plasseres innenfor linjen uten å oppta hele bredden innenfor blokknivåelementer.
Å inkludere inline-elementer i blokknivåelementer er en vanlig praksis. For eksempel er det vanlig å inkludere lenker (<a>) eller utheving (<strong>) i en paragraf (<p>). Men siden du ikke kan inkludere blokk-nivå elementer i innebygde elementer, er det viktig å bruke dem riktig.
Sammendrag
Blokk-nivå elementer og innebygde elementer er to grunnleggende typer HTML-elementer, hver med sin egen funksjon. Blokk-nivå elementer danner grunnlaget for sidelayout, mens innebygde elementer brukes til å dekorere og manipulere detaljert innhold innad i dem. Å forstå og bruke disse to typene elementer riktig muliggjør effektiv HTML-koding.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.