5. lecke.
Ebben a leckében:
1. Megtanuljuk, hogyan lehet a html kódot kényelmesebbé és könnyebben olvashatóvá tenni számunkra.
2. Nézzük meg, hogyan lehet helyesen becsomagolni egy szöveges karakterláncot.
Mi html kódot kényelmessé teszünk.
Kódunk világos és könnyen olvasható, mivel kevés a szöveg és szinte nincs címke. Ha összetettebb oldalt készítünk, ott sok címke lesz, így nehéz megtalálni a megfelelőt.
A címkék rendetlenségének elkerülése érdekében először a címkéket és a sorokat úgy kell elrendezni, hogy vizuálisan megkönnyítsék őket. Amikor a böngésző információkat olvas a html oldalról, nem számít, hány szóköz és hány üres sor van a kódban.
Megváltoztattam a szöveget az oldal kódjában a létrehozotthoz viszonyítva, de ez nem számít. Ugyanaz a kód látható a bal és a jobb oldali ábrán. Mindkét opciót a böngésző a monitor képernyőjén pontosan azonos módon jeleníti meg. Egyetértek azzal, hogy a jobb oldalon látható kóddal sokkal könnyebben fog dolgozni, mint a bal oldalon.
A figyelembe vett kód nagyon egyszerű, de a vizuális észlelés különbsége már most is észrevehető. Nincsenek speciális szabályok a „rend helyreállítására”; minden egyes mester maga dönt arról, hogy miért kényelmesebb dolgozni.
Line break html. Tag & ltbr & gt.
Vigyázzon a képre. Az első verzióban a szöveg egy sorban van, a második változatban két sor.
A böngésző mindkét lehetőséget egyformán jeleníti meg. A szöveget egy sorba kell írni:
Azt kérdezed, miért? Valójában az egyik kódban a szöveg egy része egy másik sorra kerül. Logikus lenne, ha a böngészőben a szöveg egy részét is átvitték egy másik sorra, de a html-nek megvan a saját logikája ebben a tekintetben. Ha sorcsomagolást végezzünk html-kódban, akkor a böngésző esetében ez egy szóköznek felel meg (mint egy szabályos szóköz a szövegben). Ha a szöveg egy részét nem egy sorral, hanem 2 vagy 3 (bármilyen számmal) továbbítunk, akkor a böngésző továbbra is ezt a távolságot veszi szokásos szóközként a szavak között, és amikor a képernyőn megjelenik, a szöveg egy sorba kerül.
Tag & ltbr & gt
Amikor megismerkedtünk a címkékkel a harmadik leckében, megemlítettem, hogy vannak olyan címkék, amelyeket nem kell bezárni. címke & ltbr & gt egyikük vonalszakadásokra szolgál.
Alkalmazzuk a kódban:
Helyeztünk egy címkét & ltbr & gt html-kódunkban, és amikor a fájlt a böngészőn keresztül futtatjuk, a szöveg egy része átkerül a következő készletbe.
* Ne felejtse el menteni a változtatásokat a Jegyzettömbbe (Ctrl + S), és megjelenítse az oldalt a böngészőben (F5).
Nem értettél valamit ebből a leckéből? Kérdezzen!
- [email protected]
Helló, ebben a rövid leckében megmutatom, hogyan kell szöveget becsomagolni, és hogyan lehet megakadályozni a szöveg beillesztését egy új sorba.
Előfordul, hogy meg kell szüntetni a sort a bekezdés bezárása nélkül, például ugyanabban a felirattal vagy versek írására.
az HTMLlehetséges a szöveg áthelyezése új sorra a bekezdés befejezése nélkül. Általában a böngésző az ablak méretétől függően továbbítja a szavakat, és az átvitel helyének független meghatározásának képessége hasznos lehet versek írásakor vagy különféle elemek egymástól történő elválasztásakor.
A szöveg új sorra történő átviteléhez használja az elemet BR, nem igényel záró címkét, azonban javasoljuk, hogy a nyitó címkét írja ide < br/> .
Elem használatakor BRegy üres sor nem kerül hozzáadásra az átvitel után.
Egy másik elem BRakkor használják, amikor be kell állítania a szövegáramlást egy táblázat, kép vagy egy oldal bármely lebegő elem körül, vagyis egy olyan elemhez, amelyhez egy attribútum van megadva align.
Ehhez használja az attribútumot világoselem BR.
A következő értékeket veheti fel:
minden- tiltja az elem körül áramlást két oldalról.
bal- tiltja az úszó tárgy bal oldalán történő áramlást.
jobb- tiltja az úszó tárgy jobb oldala körüli áramlást.
egyik sem - törli az ingatlant.
Ha az áramlás tilos, akkor az elemet követő szöveg BRjelenik meg a sorban a lebegő objektum után
Éjszaka, utca, lámpás, gyógyszertár,
Értelmetlen és gyenge fény.
Élő még egy negyed évszázadot
Így lesz. Nincs eredmény.
Ha meghalsz, újrakezdesz
És minden megismétlődik, mint öreg:
Éjszaka, a csatorna jeges hullámai,
Gyógyszertár, utca, lámpás.
Eredmény:
A kötelező sortörésen felül néha ellenkező műveletet kell végrehajtani, azaz garantálni kell, hogy a szöveg semmiképpen ne kerüljön új sorra.
A vonalszünetek, vonalszünetek, vonalszakadások mind egy dologról szólnak. A HTML-ben gyakran használnak sortöréseket. Számos módja van: használja a címkét
új sorra történő lefordításra, vagy a CSS tulajdonságait felhasználhatja a sor becsomagolására. Vegyünk egy példát a sortörés-címke használatára:
A CSS-ben a vonalcsomagolás különféle módon történhet, például így:
Br (úszó: bal; szélesség: 100%; margin: 0 0 20px 0; / * behúzás 20 pixel sor után * /)
Osztóvonal HTML vagy CSS használatával
A HTML-ben az elválasztó vonal létrehozása nagyon egyszerű. Párosítatlan címkét is használnak.
- ez az elválasztó vonal. Az elválasztó vonal új sorral kezdődik, és utána egy behúzás található. Szabályozhatja a vízszintes vonal stílusát, és alternatívát is tehet neki. Az alábbiakban egy példa egy elválasztó vonalra egy címkével:
Most stílust (változtassunk meg stílusokat, változtassuk meg megjelenés) elválasztó vonalunk:
óra (szélesség: 80%; / * vonal szélessége * / magasság: 4 képpont; / * magasság / vonalvastagság * / háttér: # 333; / * háttér / vonal színe * / szegély: 0; / * keret az elválasztó vonal körül (távolítsa el) ő) * / margó: 5 képpont 0 5 képpont 0; / * francia bekezdés az 5 képpont sora felett és alatt * /)
És hozzon létre egy alternatívát elválasztó vonalunkra a címke használatával
Vonal (szélesség: 80%; / * vonal szélessége * / magasság: 4 képpont; / * vonal magassága / vastagsága * / háttér: # 333; / * háttér / vonal színe * / szegély: 0; / * keret az elválasztó vonal körül (távolítsa el) ő) * / margó: 5 képpont 0 5 képpont 0; / * francia bekezdés az 5 képpont sora felett és alatt * /)
Köszönöm. Természetesen html átvitel a húrokat kétféle módon lehet megtenni. Ha a WordPress-ből származó vizuális szerkesztőt használ, akkor automatikusan hozzáadja a sortöréseket, ahogy ez bekövetkezik microsoft program Word vagy bármilyen más szövegszerkesztő. De néha a szöveges kóddal kell dolgoznia. Hogyan lehet sortörni a html-kódban?
Csomagoló vonal
Van egy rövid címke ehhez a html-ben -
(röviden a szünet). Mit csinál? A címke után írt szöveg új sorban jelenik meg. Még akkor is, ha a jelenlegi vonalon még van hely a kimenet számára, akkor is tovább folytatódik.
A br
Csak akkor kell használni a címkét, ha nem kell új bekezdést elindítania, hanem a szöveget egyszerűen új sorban kell megjelenítenie. Például írnia kell egy verset. Annak elkerülése érdekében, hogy a vers minden egyes sorát egy bekezdéscímkébe ne zárja be, egyszerűen írhat egy címkét minden sor végére
majd a következő sor lefelé mozog. Ilyen egyszerű ez.
A címkét nem szabad a bekezdések alternatívájaként használni. Érdemes megjegyezni, hogy a bekezdések között behúzás alakul ki, egy magassággal megegyező üres vonallal. A br használatával történő átvitelnél a bemélyedés kisebb.
Hogyan lehet sok átutalást végrehajtani?
És mi van, ha valamilyen szöveg után meg kell tennie egy nagy francia bekezdést a további tartalomból. Kétféle módon lehet ezt megtenni. Sok br címkét írhat. Tehát végtelen számú átutalást is végrehajthat.
De jobb, ha helyesebben csináljuk. Beállíthatja a kívánt bekezdést stílusosztályba, majd a css-en keresztül alul beállíthat egy nagy francia bekezdést.
bekezdés
Abzac (
Margó alja: 100 képpont;
}
Ebben az esetben az alsó francia bekezdést 100 pixelre állítja. Ennek megfelelően bármilyen behúzás meghatározható.
A hozzászólások és oldalak HTML-tervezése nagyon fontos - elősegíti a tartalom megtervezését oly módon, hogy a felhasználó számára kényelmesen el tudja olvasni.
Majd elmondom neked a br tag-ről - ez egy sortörést okoz a HTML-ben, vagyis a vonalat két részre bontja -, és erőszakkal végzi el, és az aktuális sort a behelyezés helyén véget vet, és a második részét egy új sorra mozgatja.
Hol használják ezt a címkét, mikor merül fel sürgősen egy sor törés beillesztése a szövegbe új bekezdés létrehozása nélkül? Például hasznos lehet a tartalom megtervezésében - ha van olyan webhely, ahol versek, versek, dalszövegek vagy valami hasonló kivonatok vannak.
Mindent a vonaltörés címkéjéről
A br tag egyetlen sortörést hajt végre a HTML-ben (amit leírtak), és az összes böngésző meghatározza. Igen, szinte elfelejtettem - ha a br címkét használja, akkor ellentétben a p bekezdéssel, nem ad hozzá üres francia bekezdést (a sor előtt).
A br tag üres (üres tartalom nélkül, semmit sem tartalmaz), azaz azt nem kell bezárni. Mivel azt nem kell bezárni, egy rövid leírást találtak ki - ez kezdetben azt jelenti, hogy maga a címke nem rendelkezik záró címkével.
Képzelje el egy pillanatra, hogy nem lenne rövid leírás. Akkor mi lesz? Akkor minden alkalommal így kell bezárnunk és kinyitnunk a vonalszakadást:
. Ez legalább kényelmetlen. Ennek ellenére a szigorú XHTML formátumban be kell zárni egy címkével
.
Ha a feladat a függőleges távolság növelése - azon sorok között, amelyekbe kötőjelet helyez -, végezzen dupla kötőjelet egy címke beillesztésével
kétszer egymás után.
<br\u003e
Eredmény:
A következő mondat új sorba való átviteléhez használja a br címkét.
Hooray, második mondat egy új sorban.
Valódi példa:
A. Blokk
Éjszaka, utca, lámpás, gyógyszertár,
Értelmetlen és gyenge fény.
Élő még egy negyed évszázadot
Minden így lesz. Nincs eredmény.
És minden megismétlődik, mint öreg:
Éjszaka, a csatorna jeges hullámai,
Gyógyszertár, utca, lámpás.
Eredmény:
Éjszaka, utca, lámpás, gyógyszertár,
Értelmetlen és gyenge fény.
Élő még egy negyed évszázadot
Minden így lesz. Nincs eredmény.
Ha meghalsz, újrakezdesz
És minden megismétlődik, mint öreg:
Éjszaka, a csatorna jeges hullámai,
Gyógyszertár, utca, lámpás.
Hogyan néz ki:
Miért jött fel a br tag?
Ennek a címkének a szükségessége akkor áll fenn, ha csak azért van szükség, mert a sor áthelyezése „mint a Wordben” (ahogy ezt a tapasztalatlan felhasználók teszik) egy sor tucat szóközzel történő írása nem fog működni.
Miért nem sikerül? Mivel bármilyen számú szóközt a böngésző egyetlen szóköznek tekint, és nem egy sorszakadással - a böngésző automatikusan eltávolítja a további szóközöket. Ehhez sortörésekre van szükség.
De ne használja vissza a címkét
hogy egyre inkább növelje a sortávolságot - a legjobb, ha az alapvető HTML + CSS eszközöket használja. Új bekezdések vagy „hasonló bekezdések” létrehozása (ezt rossz megközelítésnek tekintik) elfogadhatatlan - csak egy sorszakadás!
A bekezdések létrehozásához és megjelöléséhez használja a p tagot, és a bekezdések közötti rendelkezésre álló távolság növelése érdekében változtassa meg a lépcsőzetes stíluslapokat, például:
margin-top: 40 képpont;
Bónusz - br világos
De hogyan lehet megbizonyosodni arról, hogy a szöveg, amelybe a sortörést beilleszti, nem körbevonja a lebegő elemet (ez egy kép igazítási készlettel vagy egy elem az úszó tulajdonsággal), hanem az elem alatt kezdődik? Ehhez használhatja a tiszta attribútumot.
Tegyük fel, hogy van egy képe balra igazítva (igazítás \u003d "balra"). Ha telepítjük
vagy
majd a címke utáni szöveg
(a következő sor, amelyet hordunk) a kép alatt látható módon jelenik meg. A címke tiszta attribútumának egyéb értékei
tegye a szöveget a jobb oldalon található rajz körül.
Ennek a specifikus attribútumnak a használatát nem ösztönzi a HTML-specifikáció - az ilyen kód érvénytelen lenne.
BONUS - hr elválasztó címke
címke
szintén egyetlen, de ellentétben
, vízszintes elválasztó létrehozására szolgál vonal formájában. Ezen túlmenően a vonal megjelenését attribútumokkal állíthatjuk be. De természetesen jobb, ha ezt a CSS-en keresztül bevált módszerekkel hajtjuk végre (olvassa el, mi az).
BONUS - új sorra való csomagolás tilalma a nobr címkével
Előfordul, hogy meg akarjuk tiltani a sorszakadást és elkerüljük a szöveg új sorra fordítását: akár két konkrét szó között, akár egész bekezdésként. Mit tegyek? Használjon címkét
Mit csinál egy címke?
Amint megértjük, ez nagyon kényelmetlen. De van egy címke!
Összegzés - br, nobr, hr, p használata HTML-ben
Összefoglalva összefoglalom a cikk tartalmát:
- címke
A bekezdések elválasztása érdekében
- címke
- egy sor beillesztése érdekében egy bekezdésbe (a bekezdések létrehozása ezzel a címkével vagy annak visszaélése elfogadhatatlan) - címke
- vízszintes elválasztó vonal létrehozása - címke
- a sortörések megakadályozása a HTML-ben
Számítógépes segítség Olympus