HTML Academy · Oppitunti

br, hr, blockquote ja pre

Hallinnoi rivinvaihtoja, temaattisia vaihtoja, lainauksia ja esimuotoiltua tekstiä.

Oppitunti 3/413 vaihetta

br, hr, blockquote ja pre on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

br-elementti

 -elementti lisää tekstisisältöön rivinvaihdon:

<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->

Milloin br-elementtiä käytetään

Käyttäkää  -elementtiä vain silloin, kun rivinvaihdot kuuluvat sisältöön:

Postiosoitteet
Runot, joissa on tietyt rivinvaihdot
Laulujen sanat

Älkää käyttäkö  -elementtiä kappaleiden välistä visuaalista tyhjää tilaa varten — siihen käytetään CSS:ää.

hr-elementti

<hr>-elementti edustaa sisällön välistä temaattista katkoa:

<p>Chapter One begins here and introduces the characters.</p>

<hr>

<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->

hr-elementin tyylittely CSS:llä

<hr>-elementin voi tyylitellä täysin:

<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">

<!-- Or in CSS: -->
<!--
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5rem 0;
}
-->

blockquote-elementti

<blockquote> merkitsee toisesta lähteestä lainatun sisältöosion:

<blockquote cite="https://example.com/article">
  <p>The best time to plant a tree was 20 years ago.
     The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->

Rivinsisäiset lainaukset q-elementillä

Käyttäkää lyhyissä rivinsisäisissä lainauksissa <q>-elementtiä <blockquote>-elementin sijaan:

<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->

pre-elementti

<pre> näyttää tekstin tasalevyisellä fontilla ja säilyttää tyhjätilan täsmälleen ennallaan:

<pre>
function hello() {
    console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->

pre ja code yhdessä

Yhdistäkää <pre> ja <code> koodilohkoja varten:

<pre><code>
const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->

Escapointi pre-elementissä

<pre>-elementin sisällä olevat HTML:n erikoismerkit on silti suojattava:

<pre><code>
<!-- These must be escaped: -->
&lt;div class="box"&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
<!-- &lt; = <   &gt; = >   &amp; = & -->
</code></pre>

Tyhjätilan tiivistyminen

Normaali HTML tiivistää tyhjätilan — useista välilyönneistä ja rivinvaihdoista tulee yksi välilyönti:

<p>This    has    extra    spaces.</p>
<!-- Renders as: "This has extra spaces." -->

<pre>This    keeps    all    spaces.</pre>
<!-- Renders exactly as written -->

<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved&#10;newlines</p>

Tyhjätilaelementtien yhteenveto

Lyhyt hakemisto:

  — rivinsisäinen rivinvaihto (osoitteet, runot)
<hr> — temaattinen osioiden välinen katkos
<blockquote> — lohkotason lainaus
<q> — rivinsisäinen lainaus
<pre> — esimuotoiltu teksti, säilyttää tyhjätilan
<code> — rivinsisäinen koodikatkelma

Pikatarkistus

Mikä elementti säilyttää kaiken tyhjätilan, mukaan lukien välilyönnit ja rivinvaihdot, täsmälleen kirjoitetussa muodossa?

Vastaa interaktiivisessa oppitunnissa

Kertaus: br, hr, blockquote ja pre

Tyhjätila- ja lainauselementit:

  — sisällön sisäinen rivinvaihto (ei tyhjän tilan lisäämiseen)
<hr> — temaattinen sisällön katkos (semanttinen, ei vain visuaalinen)
<blockquote cite> — lähteen sisältävä lohkotason lainaus
<q> — rivinsisäinen lainaus
<pre><code> — muotoillut koodilohkot

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”br, hr, blockquote ja pre” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “br, hr, blockquote ja pre”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”br, hr, blockquote ja pre”?

Hallinnoi rivinvaihtoja, temaattisia vaihtoja, lainauksia ja esimuotoiltua tekstiä. Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”br, hr, blockquote ja pre”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: HTML Academy