HTML <p> -elementti

Määritelmä ja käyttö

<p> tagi määrittelee kappaleen.

Selain lisää automaattisesti <p> Lisää tyhjä rivi elementin eteen ja jälkeen.

Vinkki:Käytä CSS:ää Aseta kappaletyyli。

Katso myös:

HTML -opas:HTML kappale

HTML DOM -viittausopas:Kappale-objekti

Esimerkki

Esimerkki 1

Merkitse kappaleet tällä tavalla:

<p>Tämä on joitakin tekstejä kappaleessa.</p>

Kokeile itse

Esimerkki 2

Täytä kappaleiden tekstin tasaus (käytä CSS):

<p style="text-align:right">Tämä on joitakin tekstejä kappaleessa.</p>

Kokeile itse

Esimerkki 3

Aseta kappaleiden tyylit CSS:n avulla:

<html>
<head>
<style>
p {
  color: navy;
  text-indent: 30px;
  text-transform: uppercase;
}
</style>
</head>
<body>
<p>Kiina, virallisesti Kiinan kansantasavalta (KKT), on maa Itä-Aasiassa. Se on maailman toiseksi väkirikkain maa, jossa on yli 1,4 miljardia asukasta. Kiina kattaa viisi aikavyöhykettä ja rajautuu maalla 14 maan kanssa. Alueella on noin 9,6 miljoonaa neliökilometriä (3,700,000 neliömailia), ja se on kolmanneksi suurin maa kokonaispinta-alaltaan. Maa on jaettu 22 provinssiin, viiteen autonomiseen alueeseen, neljään erityishallintokaupunkiin ja kahden puoliautonomisen erityishallintoviraston alueisiin. Peking on kansallinen pääkaupunki, kun taas Shanghai on väkirikkain kaupunki ja suurin talouskeskus.</p>
</body>
</html>

Kokeile itse

Esimerkki 4

Lisää kappaleita:

<p>
lähdekoodeissa
Tämä kappale
sisältävät monia rivejä
Mutta selaimet
Ohita se.
</p>

Kokeile itse

Esimerkki 5

HTML:n runousongelmat:

<p>
　　Aamulla lähdin Bai Diin värikkäästä pilvistä.
　　Tuhansien mailien Jiangling palaa yhdessä päivässä.
　　Kummallakin rannalla apinat huutavat eivät lopu.
　　Pieni laiva on jo ylittänyt tuhansia vuoristoja.
</p>

Kokeile itse

Globaalit ominaisuudet

<p> Tagi tukee myös HTML:n globaalit ominaisuudet。

tapahtumamäärittelyominaisuuksia

<p> Tagi tukee myös HTML:n tapahtumamäärittelyominaisuudet。

Oletusarvoiset CSS-asetukset

Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <p> Elementti：

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki