HTML formázás. Szóköz karakterek és a kód formázása HTML-ben, valamint nem törő szóköz speciális karakterek és egyéb emlékeztető Tab címke html-ben

HTML formázás. Szóköz karakterek és a kód formázása HTML-ben, valamint nem törő szóköz speciális karakterek és egyéb emlékeztető Tab címke html-ben
HTML formázás. Szóköz karakterek és a kód formázása HTML-ben, valamint nem törő szóköz speciális karakterek és egyéb emlékeztető Tab címke html-ben
03.10.2020

Sziasztok a blogoldal kedves olvasói! Azok, akiknek legalább felületesen sikerült megismerkedniük, valószínűleg már tudomásul vették, bár általánosságban. Ez azt jelenti, hogy van elképzelésük arról, hogy általában milyen HTML karaktereket használnak a dokumentumkódban.

Mai cikkünkben megpróbáljuk kitalálni, hogy mi a szóköz a HTML-ben, mely esetekben használhatunk szóköz karaktereket magának a kódnak a formázásakor a könnyebb észlelés érdekében. Megtanuljuk, mikor kell nem törő szóközt használni, és megismerkedünk más speciális karakterekkel (vagy ahogyan más néven mnemonikával).

Valójában azt tanácsolom, hogy ne hagyja figyelmen kívül a különféle speciális karakterek használatának témáját, mivel ez egy fontos összetevő, amely lehetővé teszi a hipertext jelölőnyelv tanulmányozásának befejezését. Általánosságban elmondható, hogy az ebben a kiadványban közölt információk biztosan nem lesznek feleslegesek. Nos, most a lényegre.

Szóközök és szóközök a HTML-ben

Először is egy fontos megjegyzést kell tenni. A számítógép billentyűzetén van speciális kulcsok, amelyek lehetővé teszik a szövegfelosztás megvalósítását (erről lentebb olvashat bővebben). Azonban csak a széles szóköz biztosítja a szavak elválasztását, nemcsak a szerkesztőben, hanem a böngészőablakban is. Vannak árnyalatok a vonalak tekercselésekor és a széltől való behúzáskor.

Mint ismeretes, a webböngészőben bizonyos elemek megjelenítését a címkék határozzák meg. Szövegformázáshoz egy jól ismert , blokk alapú . Vagyis a tartalma a teljes elérhető szélességben található.

Nak nek sorok tördelése a P bekezdésen belül, használnia kell egyetlen címke BR, amellyel ezt meg lehet tenni. Tegyük fel, hogy be kell illesztenünk a szövegbe néhány sort egy versből, amibe írunk szöveg szerkesztő:

Annak ellenére, hogy a vers sorai helyesen helyezkednek el, és a kötőjelek a megfelelő helyen vannak, minden másképp fog kinézni a böngészőben:


Ha ugyanazt a megjelenítést szeretné elérni egy webböngésző ablakban, minden sortörésnél BR-t kell írni:

Most elértük a feladatot, és a böngészőben a költői sorok teljesen helyesen jelennek meg:

Így a szükséges sortörések elkészültek. Itt kell megjegyezni egy olyan tulajdonságot is, hogy több, egymás után következő szóközt egyként jelenít meg a böngésző. Ezt úgy tudja ellenőrizni, ha ugyanabban a szerkesztőben nem egy, hanem több szóközt próbál tenni két szó közé, és a "Mentés" gombra kattintva megnézi az eredményt a böngészőben.

Szóköz, tabulátor és sortörés

Alapvetően ezekkel szóköz karakterek azonnal megismerjük egymást, amint elkezdünk dolgozni a szöveggel a szerkesztőben és formázni kezdjük kívánt formát. Egy ilyen feladat végrehajtásához speciális billentyűk vannak, amelyek mindegyike megfelel a saját szóköz karakterének:

  • Space - a számítógép billentyűzetének legszélesebb billentyűje (felirat nélkül);
  • Táblázat - bal oldali gomb a "Tab" felirattal és két különböző irányba mutató nyíllal;
  • Sortörés - "Enter" billentyű.

Ahogy azonban fentebb is mondtam, nem csak szövegszerkesztőben, hanem böngészőben is csak az első billentyű használatakor kapjuk meg a kívánt végeredményt. Mindhárom billentyű (beleértve a tabulátort és a sortörést is) hasznos a HTML-kód formázásakor. Tegyük fel, hogy így néz ki egy kódrészlet a NotePad ++-ban (magyarázó anyag a szerkesztőről), ha minden szóköz karakter megjelenik:


A szóközöknek köszönhetően könnyen olvasható és érthető kódot kapunk. A narancssárga nyilak a Tab billentyűvel létrehozott behúzásokat, a CR és LF karakterek pedig az Enter billentyűvel végzett sortöréseket jelölik.

A beágyazott konténerek megtekinthetők, a nyitó és záró címkék jól kiemelkednek. Ebben a formában ez a kód könnyen szerkeszthető. Most hasonlítsa össze ugyanazzal a kóddal, amely nem rendelkezik ilyen szövegelválasztással:

Ugyanígy, szóköz karakterek használatával írhat és css szabályokat, amely vizuálisan érthetőnek és emészthetőnek tűnik:


Miután az összes stílust közös nevezőre hozta, és teljesen befejezte a stílusfájl szerkesztését, a kódból minden szóközt eltávolítva alárendelheti azt. Ezt növelni kell, ami nagyon fontos egy erőforrás népszerűsítésekor.

Speciális karakterek (vagy mnemonikák) a HTML-kódban

Most nézzük meg, hogy milyen esetekben szükséges a cikk elején említett speciális karakterek használata. A HTML speciális karaktereket, amelyeket néha mnemonikának is neveznek, azért vezették be, hogy megoldjanak egy régóta fennálló kódolási problémát a hipertext jelölőnyelvben.

Amikor szöveget ír be a billentyűzeten, a használt nyelv karakterei kódolva vannak. A webböngészőben a beírt szöveg a fordított dekódolási művelet eredményeként kiválasztott betűtípussal jelenik meg.

Az a tény, hogy sok ilyen kódolás létezik, most nem célunk ezek részletes elemzése. Csak arról van szó, hogy mindegyikből hiányozhatnak bizonyos karakterek, amelyeket azonban meg kell jeleníteni. Tegyük fel, hogy egyszeri idézőjeleket vagy ékezetes jeleket szeretne írni, és ezek az ikonok hiányoznak a készletből.

A probléma kiküszöbölése érdekében bevezették a speciális karakterek rendszerét, amely rengeteg különféle mnemonikát tartalmaz. Mindegyik "&" jellel kezdődik, és általában pontosvesszővel ";" végződik. Eleinte minden speciális karakternek saját digitális kódja volt. Például egy nem törő szóköz esetén, amelyet az alábbiakban részletesebben megvizsgálunk, a következő bejegyzés igaz:

Egy idő után azonban a leggyakoribb szimbólumokhoz szó szerinti megfelelőket (mnemonikat) rendeltek, hogy könnyebben megjegyezhetőek legyenek. Tegyük fel, hogy ugyanarra a nem törő területre ez így néz ki:

Ennek eredményeként a böngésző megjeleníti a megfelelő karaktert. A mnemonikák listája nagyon terjedelmes, leggyakrabban használt speciális karakterek a HTML-ben az alábbi táblázatban találja:

szimbólum kód mnemonika leírás
nem törő tér
      szűk hely (az n betű szélessége)
      széles térköz (em-szélesség m betűig)
– - – em kötőjel (en-dash)
- — — em-kötőjel (em-kötőjel)
­ - ­ lágy átvitel
A ́ akcentussal, a "sokk" betű után helyezve
© © szerzői jog
® ® ® bejegyzett védjegy
™ ™ ™ védjegy jel
º º º mars lándzsája
ª ª ª a Vénusz tükre
‰ ‰ ‰ ppm
π π π pi (használd a Times New Roman-t)
¦ ¦ ¦ függőleges pontozott vonal
§ § § bekezdés
° ° ° fokozat
µ µ µ mikro jel
bekezdés jele
… … … ellipszis
‾ ‾ ‾ áthúzás
´ ´ ´ ékezetes jel
№ № számjel
🔍 🔍 Nagyító (balra döntve)
🔎 🔎 Nagyító (jobbra döntve)
számtani és matematikai műveletek jelei
× × × szaporodnak
÷ ÷ ÷ feloszt
< < Kevésbé
> > > több
± ± ± plusz minusz
¹ ¹ ¹ fokozat 1
² ² ² fokozat 2
³ ³ ³ fokozat 3
¬ ¬ ¬ tagadás
¼ ¼ ¼ egy negyed
½ ½ ½ fél
¾ ¾ ¾ háromnegyede
⁄ ⁄ ⁄ törtsáv
− − − mínusz
≤ ≤ ≤ kisebb vagy egyenlő
≥ ≥ ≥ több vagy egyenlő
≈ ≈ ≈ megközelítőleg (majdnem) egyenlő
≠ ≠ ≠ nem egyenlő
≡ ≡ ≡ azonosan
√ √ √ négyzetgyök (gyök)
∞ ∞ ∞ végtelenség
∑ ∑ ∑ összegző jel
∏ ∏ ∏ termék védjegy
∂ ∂ ∂ részleges differenciál
∫ ∫ ∫ integrál
∀ ∀ ∀ mindenkinek (csak félkövéren látható)
∃ ∃ ∃ létezik
∅ ∅ ∅ üres készlet
Ø Ø Ø átmérő
∈ ∈ ∈ tartozik
∉ ∉ ∉ nem tartozik
∋ ∋ ∗ tartalmaz
⊂ ⊂ ⊂ egy részhalmaz
⊃ ⊃ ⊃ egy szuperkészlet
⊄ ⊄ ⊄ nem egy részhalmaz
⊆ ⊆ ⊆ bármelyik részhalmaza
⊇ ⊇ ⊇ szuperhalmaz vagy egyenlő vele
⊕ ⊕ ⊕ plusz egy körben
⊗ ⊗ ⊗ szorzójel egy körben
⊥ ⊥ ⊥ merőleges
∠ ∠ ∠ sarok
∧ ∧ ∧ logikus ÉS
∨ ∨ ∨ logikai VAGY
∩ ∩ ∩ útkereszteződés
∪ ∪ ∪ Unió
valuta jelek
€ € € Euro
¢ ¢ ¢ Cent
£ £ £ Lb
¤ ¤t; ¤ Pénznem jele
¥ ¥ ¥ Jen és jüan jele
ƒ ƒ ƒ Florin jele
markerek
. egyszerű marker
○ ○ kör
· · · középső pont
† † kereszt
‡ ‡ kettős kereszt
♠ ♠ ♠ csúcsok
♣ ♣ ♣ klubok
szívek
♦ ♦ ♦ gyémántok
◊ ◊ ◊ rombusz
✏ ✏ ceruza
✎ ✎ ceruza
✐ ✐ ceruza
✍ ✍ kéz
idézetek
" " " kettős idézet
& & & és és
« « « bal tipográfiai idézőjel (halszálkás idézőjel)
» » » jobb oldali tipográfiai idézőjel (halszálkás idézőjel)
‹ ‹ egyszögű idézet nyitás
› › egyszögű idézet zárása
′ ′ ′ stroke (perc, láb)
″ ″ ″ kettős löket (másodperc, hüvelyk)
‘ ‘ ‘ bal felső egyetlen idézőjel
’ ’ ’ jobb felső egyetlen idézőjel
‚ ‚ ‚ jobb alsó egyetlen idézet
“ “ “ idézőjel-láb balra
” ” ” idézőjel-láb jobb felső
„ „ „ idézőjel-láb jobbra lent
❛ ❛ egyetlen angol idézőjeles nyitás
❜ ❜ egyetlen angol idézőjel zárása
❝ ❝ dupla angol idézőjeles nyitás
❞ ❞ dupla angol idézőjel zárása
nyilak
← ← ← bal nyíl
felfelé nyíl
→ → → jobb nyíl
↓ ↓ ↓ nyíl lefelé
↔ ↔ ↔ nyíl balra és jobbra
↕ ↕ fel és le nyíl
↵ ↵ ↵ kocsi vissza
⇐ ⇐ ⇐ dupla bal nyíl
⇑ ⇑ ⇑ dupla felfelé mutató nyíl
⇒ ⇒ ⇒ dupla jobbra nyíl
⇓ ⇓ ⇓ dupla lefelé mutató nyíl
⇔ ⇔ ⇔ dupla nyíl balra és jobbra
⇕ ⇕ dupla nyíl fel és le
▲ ▲ háromszög alakú felfelé mutató nyíl
▼ ▼ háromszög alakú lefelé mutató nyíl
háromszög jobbra nyíl
◄ ◄ háromszögű bal nyíl
csillagok, hópelyhek
☃ ☃ Hóember
❄ ❄ Hópehely
❅ ❅ Lámpa csípett hópehely
❆ ❆ Kövér éles szögű hópehely
★ ★ árnyékolt csillag
☆ ☆ árnyékolatlan csillag
✪ ✪ Töltetlen csillag kitöltött körben
✫ ✫ Töltött csillag, benne kitöltetlen körrel
✯ ✯ forgó csillag
⚝ ⚝ Rajzolt fehér csillag
⚪ ⚪ Középső kitöltetlen kör
⚫ ⚫ Közepes töltött kör
⚹ ⚹ Szextilis (hópehely típusú)
✵ ✵ Nyolcágú forgó csillag
❉ ❉ Csillag gömb alakú végződésekkel
❋ ❋ Merész nyolcágú csepp alakú légcsavarcsillag
✺ ✺ Hexadecimális csillag
✹ ✹ Tizenkétágú töltött csillag
✸ ✸ Félkövér nyolcágú, egyenes vonalú árnyékolt csillag
✶ ✶ hatágú töltött csillag
✷ ✷ Nyolcágú, egyenes vonalú árnyékolt csillag
✴ ✴ Nyolcágú árnyékolt csillag
✳ ✳ nyolcágú csillag
✲ ✲ Egy csillag üres közepével
✱ ✱ kövér csillag
✧ ✧ Hegyes, négyágú árnyékolatlan csillag
✦ ✦ Hegyes, négyágú árnyékolt csillag
⍟ ⍟ csillag egy körben
⊛ ⊛ Hópehely egy körben
óra, idő
⏰ ⏰ Néz
⌚ ⌚ Néz
⌛ ⌛ Homokóra
⏳ ⏳ Homokóra

Egyes speciális karakterek használatának esetei, beleértve a nem törő szóközt és a lágy kötőjelet

Ha már kicsit áttanulmányozta a táblázatot, akkor megerősítést kapott a fent elmondott szavakra, hogy az összes speciális karakter megjelenítéséhez numerikus kódot () vagy annak alfabetikus analógját (karaktermnemonikus) használják, ahol a () betűket írják. rács és számok kombinációja helyett.

Most nézzük meg, mikor szükséges ezeket a kódokat alkalmazni. Tegyük fel, hogy egy cikkben meg kell adnia néhány HTML címkét tájékoztató jelleggel, például

. Ha a billentyűzetről szögletes zárójeleket ír be (és van ilyen lehetőség), akkor a böngésző egy ilyen konstrukciót nyitócímkeként fog fel, nem pedig egyszerű szövegrészként.

Ezért a megfelelő kódokat ugyanabból a speciális HTML-karaktertáblázatból vesszük, és a teljes bejegyzés így fog kinézni:

Ezenkívül annak érdekében, hogy a böngészőben ne maga az "és", hanem a jelölése jelenjen meg forma

, hozzá kell adni a kódját a táblázatból:

lábléc

Ezután a böngésző pontosan megjeleníti azokat a megjegyzéseket, amelyeket alkalmazni kell a FOOTER címke megjelenítéséhez. Kicsit zavaró, de ezen az oldalon ezt a szempontot gyakorolhatja úgy, hogy beírja a megfelelő karakterek mnemonikáját a "HTML" mezőbe, és a "Futtatás" gombbal, valamint az "Eredmény" területen megkapja a megjelenítés eredményét a böngésző:


Kérjük, vegye figyelembe, hogy a már említett BR tag használatával biztosítottam a szöveg tördelését, hogy a karakterek a kényelem kedvéért ne egy sorban, hanem egy oszlopban jelenjenek meg.

Menj tovább. Néha a szövegben vannak olyan kombinációk, amelyeket nem kívánatos különböző sorokra szétválasztani. Tegyük fel, hogy "1000 rubel". logikus lesz, vagy hagyd tovább felső sor, vagy ha nincs elég hely, helyezze át a teljes konstrukciót egy sorral lejjebb.

Ez különösen igaz, ha a felhasználók különböző képernyőszélességű eszközöket használnak, beleértve a mobileszközöket is. Valóban, ebben az esetben a webböngésző formázza a szöveget, alkalmazkodva az új feltételekhez. És ha at szabványos méretek a monitor szövege helyesnek tűnik, akkor ezek megváltoztatása mindent megváltoztathat.

Ezekre az esetekre van elválaszthatatlan HTML tér amit már említettem. Hadd emlékeztesselek arra, hogy ebben az esetben a szóközkód:

És be kell illeszteni a két összekapcsolni kívánt karakterkészlet közé:

1000 dörzsölje.

Mostantól a böngésző soha nem fogja szétválasztani őket, még akkor sem, ha szövegformázásra van szükség a helyes megjelenítéshez.

Van olyan helyzet is, amikor egy nagyon hosszú szó nem fér be a szabad helyre, és át kell vinnie egy részét. Hogyan lehet előre meghatározni az átvitelt ide új sor ebben az esetben? Erre van lágy kötőjel speciális karakter-, amelyet arra a helyre kell tenni, ahol a szót törni kell:

longlonglonglonglonglongword

Ha olyan helyzet adódik, amikor egy szót el kell kötőjelezni, akkor a lágy kötőjeles emlékeztető helyén rés keletkezik, ahol egy kötőjel jelenik meg, és ennek a szónak a többi része a következő sorban lesz.

Azonban ismét hasznos lesz, ha a gyakorlatban saját szemével nyomon követheti ezt az egészet, beleértve az elválaszthatatlan és lágy átvitel példáit is:


Ennek a szerkesztőnek az ablakában módosíthatja az "Eredmény" nézet mező méretét úgy, hogy a bal egérgombbal megragadja ennek a területnek a szélét, és anélkül, hogy elengedné, balra húzva csökkentheti a szélességét. Ekkor van egy valós helyzet, amikor a böngésző elkezdi újraformázni a tartalmat, hogy helyesen jelenítse meg azt.

És megtörténik az átvitel, amelyet az általam leírt példákban leírtak. Azonban Ön maga is mozgathatja a megtekintési ablakot, bővítheti vagy szűkítheti, és ezt vizuálisan ellenőrizheti.

Különbség van aközött, hogy mi írott a HTML kódodban és az Megjelenik a böngészőben.

Ahogy láttuk, címkéket HTML tetszik<р>, csak a böngésző olvassa (hogy tudja, melyik típus tartalom meg van írva), de nem jelenik meg benne.

Azt is láttuk, hogyan kell írni Hozzászólások a HTML-kódban, hogy segítsen egy személynek elolvasni a kódot anélkül, hogy meg kellene jelenítenie a megjegyzéseket a böngészőben.

Egy másik fajta írott kód figyelmen kívül hagyva böngésző az hely, magába foglalja:

Sortörések

Sortörések és üres sorok (amelyek sortörések sorozata) a HTML-kódban figyelmen kívül hagyva böngésző. Csak alkotnak egyetlen hely.

A web eredeti ötlete az volt, hogy egy együttműködési tér legyen, ahol információcserével kommunikálhat.

Hogy igazi legyen betét sortörést elemet kell használni
:

A legjobb esetben az élet tökéletes
kiszámíthatatlan

Táblázatkészítés

Táblázatkészítés egy speciális karakter, amelyet a Tab billentyűvel kapunk. Általában a következő tabulátorhelyre viszi a kurzort, de néha két szóközre változik.

Mindenesetre, mint szabályos tér, fül láthatatlan. Ezt is figyelmen kívül hagyja a böngésző:

Nyomjuk meg ezt a szöveget egy tabulátorral.

Ha helyet szeretne bővíteni előtt Más szóval, CSS-t kell használnia.

Ha be akar zárni egy HTML-elemet, először be kell zárnia az összes alárendelt elemét.

Fa formázása

Mivel a HTML elemek egymásba ágyazhatók, vigyáznia kell sorrendben amelyben kinyitották, mivel ez befolyásolja a zárás sorrendjét.

Mivel nehéz lehet nyomon követni a HTML-elemek megnyitásának sorrendjét, javasoljuk, hogy a HTML-kódot fa:

Ez a kód be van írva néhány sorok, de továbbra is mint egy vonal.

A fa formázás lehetővé teszi vizuálisan szaporodni fészkelő szint a HTML kódod. Így könnyen belátható, hogy:

  • van ős;

  • - szülő Mert És ;

  • És - Ezt testvéri elemeket.

Írj HTML-t magadnak, hogy elolvasd

A tabulátorokat, az üres sorokat, a szóközöket és a sortöréseket a számítógép kihagyja, és ezek mindegyike egy helyet.

A HTML-dokumentumot ember írja és olvassa, de csak számítógép olvassa el. Tekintettel arra, hogy a tabulátorok, szóközök és sortörések nem befolyásolják azt, hogy a böngésző hogyan olvassa el, majd jelenítsen meg egy weboldalt, a dokumentumot a lehető legolvashatóbbá formázhatja. magamatút.

Erre vonatkozóan nincsenek konkrét szabályok HTML formázás, de vannak implicit megállapodások, különösen:

  • használat táblázatosítás hogy segítse a vizualizálást mellékleteket HTML elemek;
  • blokkelemek nyitó és záró címkéinek beszúrása rá külön sorok;
  • soron belüli elemek írása egy sorba (beleértve a nyitó és záró címkéket).
Címke

A címke egy tabulátor karaktert határoz meg a szövegben. Ez ugyanaz, mint a /t escape szekvencia használatával.

1 2 3\t\t\t4
Megjelenik:
1 2 3 4

Tetszőlegesen beállítható az a távolság, ameddig egy sor eltolódik egy tabulátor karakter beírásakor. Ezt a címke TABSTOPS attribútuma végzi.

A címke nem szabványos HTML-címke. Hozzá lett adva a Flash jelölőcímkéihez, hogy a szöveg formázása következetesen elvégezhető legyen.

Címke...

A címke felelős a szöveg formázási jellemzőiért, például a margókért, a behúzásokért és a sortörésekért. A következő attribútumok állíthatók be benne:

BAL MARGÓ. A bal margó mérete pontokban. Egy analóg a TextFormat osztály leftmargin tulajdonsága.

RIGHTMARGIN. A jobb margó értéke pontokban Az analóg a TextFormat osztály jobb margó tulajdonsága.

BEMÉLYEZÉS. A bekezdés első sorának behúzása, pontokban. A TextFormat osztály tulajdonságai közül az indent tulajdonság hasonlít hozzá.

BLOCKINDENT.

Szöveg bekezdés bal oldali behúzása pontokban. Analóg - tulajdonság blockIndent
TextFormat osztály.

VEZETŐ. A vonalak közötti távolság pontokban. A TextFormat osztály hasonló tulajdonsága vezet.

TABSTOPS. Az attribútum megadja, hogy a sorozat egyes tabulátorkarakterei milyen vonaleltolódást okoznak a pontokban. Értéke egy számlista, amely tartalmazza azokat a távolságokat, amelyeknél a sor az ablakba kerül, ha 1, 2, 3, ... n tabulátor karaktert írunk be egy sorba. A TABSTOPS attribútum analógja a TextFormat osztály tabStops tulajdonsága.


pole.html=pole.border=pole.multiline=true;
field.htmlSzöveg="

0 egy lap > Két lap >
HÁROM TABÁR>

";

A címke nem szabványos HTML-címke. Úgy vezették be, hogy a szöveg címkék segítségével történő jelölésének lehetőségei hasonlóak legyenek a Text Format osztály tulajdonságainak használatához.

Címke...

Címke osztály alkalmazására tervezték css stílusban tetszőleges szövegrészlet kapcsán.

Az osztály neve a CLASS attribútumában van megadva.

This.createTextField("pólus", 0, 150, 150, 200, 90);
pole.autoSize = pole.border=pole.multiline=true;
// Hozzon létre három osztálystílust, amelyek piros, zöld és kék szöveget határoznak meg
var style:TextField.Stylesheet = new TextField.Stylesheet();
var green_text:String = ".GREEN (szín:#00FF00)";
var red_text:String = ".PIROS (szín:#FF0000)";
var blue_text:String = ".KÉK (szín:#0000FF)";
style.parseCSS(zöld_szöveg+piros_szöveg+kék_szöveg);
pole.styleSheet=stílus;
// Szöveg megjelenítése létrehozott stílusokkal
field.text=" 3 zöld szöveg

piros szöveg
Kék szöveg ";

Sziasztok, a blogoldal kedves olvasói. Kicsit korábban már sikerült szót ejtenünk arról, hogy a dizájnt is megismertük benne. Manapság viszont megvan a HTML-ben a rés fogalma, valamint a hozzá tartozó kód formázása az írás során (a későbbi olvasás és érzékelés megkönnyítése érdekében).

Nos, mivel a szóköz és a lágy elválasztás témáját érinteni fogjuk, figyelmünket a HTML nyelvben használt úgynevezett speciális karakterekre vagy mnemonikákra kell összpontosítanunk, amelyek lehetővé teszik a kódhoz webes dokumentum sok további karakter, például a fentebb már említettek. De először a dolgok.

Szóközök és szóközök karakterek a HTML nyelvben

Mielőtt rátérnék a kifejezetten erre a célra kialakított címkék (bekezdés, címsor stb.) segítségével történő szövegformázás kérdésére, szeretnék elidőzni a szóközök, sortörések (Enter) és a táblázatok értelmezése a HTML nyelvben. , hogyan történik a lebontás szövege a böngészőablakban átméretezéskor.

Igaz, ehhez a fajta vizuális formázáshoz (ami nem lesz látható a weboldalon) legtöbbször nem magukat a szóközöket használják, hanem a táblázatos és sortörés karaktereket. Van egy ilyen szabály - amikor elkezdi írni a beágyazott html tag, Azt behúzás egy tabulátorral(Tab billentyű a billentyűzeten), és amikor bezárja ezt a címkét, távolítsa el a behúzást (Shift + Tab billentyűkombináció a billentyűzeten).

Ezt úgy kell megtenned, hogy a nyitó és záró címkék azonos függőleges szinten legyenek (a HTML-szerkesztőd lapjának jobb szélétől ugyanannyi lap, pl. Notepad ++, amit írtam ról ről). Ezenkívül azt tanácsolom, hogy a nyitó elem beírása után azonnal tegyen több sortörést, és azonnal írja be a záró elemet ugyanazon a szinten (tabulátorok száma), hogy később ne felejtse el megtenni.

Azok. a nyitó és záró elemek függőlegesen egy szinten legyenek, a belső címkéket pedig egy tabulátor karakterrel eltoljuk és a záró és nyitó elemeket ismét ugyanarra a szintre helyezzük.

Mert egyszerű web dokumentumokat, ez túlzásnak tűnhet, de ha többé-kevésbé bonyolultakat hoz létre, akkor azok a kód sokkal világosabb leszés a szóközök bősége miatt olvasható, illetve a címkék szimmetrikus elrendezése miatt sokkal könnyebben észrevehető lesz benne a hiba is.

Speciális karakterek vagy emlékeztetők a HTML-kódban

Szóval, most beszéljünk az ún speciális karakterek, melynek használhatóságát a cikk elején közöltem. A speciális karaktereket néha mnemonikának vagy helyettesítésnek is nevezik. A hipertext jelölőnyelvben régóta felmerülő, az alkalmazott kódolásokkal kapcsolatos problémát hivatottak megoldani.

Amikor szöveget ír be a billentyűzetről, az Ön nyelvének karakterei egy előre meghatározott algoritmus szerint kódolásra kerülnek, majd a dekódolás miatt az Ön által használt betűtípusok használatával jelennek meg a webhelyen (hol találhatók és hogyan telepíthetők az oldalhoz).

Nagyon sok kódolás létezik, de a HTML nyelvhez alapértelmezés szerint a kódolások kiterjesztett változata került alkalmazásra.

Ebben a szövegkódolásban csak 256 karaktert lehetett leírni - 128 karaktert ASCII-ből és további 128 karaktert orosz nyelvű betűkhöz. Ennek eredményeként probléma lépett fel az olyan karakterek webhelyeken történő használatával kapcsolatban, amelyek nem szerepelnek az ASCII-ben, és nem orosz karakterek, amelyek a Windows 1251 (CP1251) kódolás részét képezik. Nos, eszedbe jutott, hogy tildát vagy aposztrófot használj, és ennek az eredetileg használt lehetőségei HTML nyelv kódolás nincs benne.

Ilyen esetekre találták ki a helyettesítéseket, vagy más szóval a mnemonikát. Alapvetően a speciális karakterek numerikusak voltak, de aztán a legelterjedtebbeknél az ábécé szerinti megfelelőjüket adták hozzá, hogy könnyebben megjegyezzék őket.

Általánosságban elmondható, hogy az emlékeztető olyan karakter, amely "&" jellel kezdődik és pontosvesszővel ";" végződik. Ezen az alapon a böngésző a HTML-kód elemzésekor speciális karaktereket von ki belőle. A numerikus helyettesítő kódban szereplő „és” jelet közvetlenül a „#” font jelnek kell követnie, amelyet néha hash-nek is neveznek. És csak ezután következik a kívánt karakter numerikus kódja Unicode kódolásban.

Több mint 60 000 karakter írható le Unicode-ban - a lényeg az, hogy a szükséges mnemonikus szimbólumot támogassa a webhelyén használt betűtípus. Vannak olyan betűtípusok, amelyek szinte az összes Unicode karaktert támogatják, és vannak olyan opciók, amelyek csak bizonyos karakterkészlettel rendelkeznek.

A speciális karakterek teljes listája egyszerűen hatalmas lesz, de leggyakrabban használt mnemonika kölcsönözhet például ebből a táblázatból:

SzimbólumHtml kódDecimális
kód		Leírás
nem törő tér
      szűk hely (az n betű szélessége)
      széles térköz (em-szélesség m betűig)
– - – em kötőjel (en-dash)
- — — em-kötőjel (em-kötőjel)
­ - ­ lágy átvitel
A ́ akcentussal, a "sokk" betű után helyezve
© © szerzői jog
® ® ® bejegyzett védjegy
™ ™ ™ védjegy jel
º º º mars lándzsája
ª ª ª a Vénusz tükre
‰ ‰ ‰ ppm
π π π pi (használd a Times New Roman-t)
¦ ¦ ¦ függőleges pontozott vonal
§ § § bekezdés
° ° ° fokozat
µ µ µ mikro jel
bekezdés jele
… … … ellipszis
‾ ‾ ‾ áthúzás
´ ´ ´ ékezetes jel
№ № számjel
🔍 🔍 Nagyító (balra döntve)
🔎 🔎 Nagyító (jobbra döntve)
számtani és matematikai műveletek jelei
× × × szaporodnak
÷ ÷ ÷ feloszt
< < Kevésbé
> > > több
± ± ± plusz minusz
¹ ¹ ¹ fokozat 1
² ² ² fokozat 2
³ ³ ³ fokozat 3
¬ ¬ ¬ tagadás
¼ ¼ ¼ egy negyed
½ ½ ½ fél
¾ ¾ ¾ háromnegyede
⁄ ⁄ ⁄ törtsáv
− − − mínusz
≤ ≤ ≤ kisebb vagy egyenlő
≥ ≥ ≥ több vagy egyenlő
≈ ≈ ≈ megközelítőleg (majdnem) egyenlő
≠ ≠ ≠ nem egyenlő
≡ ≡ ≡ azonosan
√ √ √ négyzetgyök (gyök)
∞ ∞ ∞ végtelenség
∑ ∑ ∑ összegző jel
∏ ∏ ∏ termék védjegy
∂ ∂ ∂ részleges differenciál
∫ ∫ ∫ integrál
∀ ∀ ∀ mindenkinek (csak félkövéren látható)
∃ ∃ ∃ létezik
∅ ∅ ∅ üres készlet
Ø Ø Ø átmérő
∈ ∈ ∈ tartozik
∉ ∉ ∉ nem tartozik
∋ ∋ ∗ tartalmaz
⊂ ⊂ ⊂ egy részhalmaz
⊃ ⊃ ⊃ egy szuperkészlet
⊄ ⊄ ⊄ nem egy részhalmaz
⊆ ⊆ ⊆ bármelyik részhalmaza
⊇ ⊇ ⊇ szuperhalmaz vagy egyenlő vele
⊕ ⊕ ⊕ plusz egy körben
⊗ ⊗ ⊗ szorzójel egy körben
⊥ ⊥ ⊥ merőleges
∠ ∠ ∠ sarok
∧ ∧ ∧ logikus ÉS
∨ ∨ ∨ logikai VAGY
∩ ∩ ∩ útkereszteződés
∪ ∪ ∪ Unió
valuta jelek
₽ ₽ Rubel. A rubel jelet a számtól való töréssel kell használni. Unicode 7.0 szabvány. Ha nem látja a képet, frissítse a Unicode-betűtípusokat.
€ € € Euro
¢ ¢ ¢ Cent
£ £ £ Lb
¤ ¤ ¤ Pénznem jele
¥ ¥ ¥ Jen és jüan jele
ƒ ƒ ƒ Florin jele
markerek
. egyszerű marker
○ ○ kör
· · · középső pont
† † kereszt
‡ ‡ kettős kereszt
♠ ♠ ♠ csúcsok
♣ ♣ ♣ klubok
szívek
♦ ♦ ♦ gyémántok
◊ ◊ ◊ rombusz
✏ ✏ ceruza
✎ ✎ ceruza
✐ ✐ ceruza
✍ ✍ kéz
idézetek
" " " kettős idézet
& & & és és
« « « bal tipográfiai idézőjel (halszálkás idézőjel)
» » » jobb oldali tipográfiai idézőjel (halszálkás idézőjel)
‹ ‹ egyszögű idézet nyitás
› › egyszögű idézet zárása
′ ′ ′ stroke (perc, láb)
″ ″ ″ kettős löket (másodperc, hüvelyk)
‘ ‘ ‘ bal felső egyetlen idézőjel
’ ’ ’ jobb felső egyetlen idézőjel
‚ ‚ ‚ jobb alsó egyetlen idézet
“ “ “ idézőjel-láb balra
” ” ” idézőjel-láb jobb felső
„ „ „ idézőjel-láb jobbra lent
❛ ❛ egyetlen angol idézőjeles nyitás
❜ ❜ egyetlen angol idézőjel zárása
❝ ❝ dupla angol idézőjeles nyitás
❞ ❞ dupla angol idézőjel zárása
nyilak
← ← ← bal nyíl
felfelé nyíl
→ → → jobb nyíl
↓ ↓ ↓ nyíl lefelé
↔ ↔ ↔ nyíl balra és jobbra
↕ ↕ fel és le nyíl
↵ ↵ ↵ kocsi vissza
⇐ ⇐ ⇐ dupla bal nyíl
⇑ ⇑ ⇑ dupla felfelé mutató nyíl
⇒ ⇒ ⇒ dupla jobbra nyíl
⇓ ⇓ ⇓ dupla lefelé mutató nyíl
⇔ ⇔ ⇔ dupla nyíl balra és jobbra
⇕ ⇕ dupla nyíl fel és le
▲ ▲ háromszög alakú felfelé mutató nyíl
▼ ▼ háromszög alakú lefelé mutató nyíl
háromszög jobbra nyíl
◄ ◄ háromszögű bal nyíl
csillagok, hópelyhek
☃ ☃ Hóember
❄ ❄ Hópehely
❅ ❅ Lámpa csípett hópehely
❆ ❆ Kövér éles szögű hópehely
★ ★ árnyékolt csillag
☆ ☆ árnyékolatlan csillag
✪ ✪ Töltetlen csillag kitöltött körben
✫ ✫ Töltött csillag, benne kitöltetlen körrel
✯ ✯ forgó csillag
⚝ ⚝ Rajzolt fehér csillag
⚪ ⚪ Középső kitöltetlen kör
⚫ ⚫ Közepes töltött kör
⚹ ⚹ Szextilis (hópehely típusú)
✵ ✵ Nyolcágú forgó csillag
❉ ❉ Csillag gömb alakú végződésekkel
❋ ❋ Merész nyolcágú csepp alakú légcsavarcsillag
✺ ✺ Hexadecimális csillag
✹ ✹ Tizenkétágú töltött csillag
✸ ✸ Félkövér nyolcágú, egyenes vonalú árnyékolt csillag
✶ ✶ hatágú töltött csillag
✷ ✷ Nyolcágú, egyenes vonalú árnyékolt csillag
✴ ✴ Nyolcágú árnyékolt csillag
✳ ✳ nyolcágú csillag
✲ ✲ Egy csillag üres közepével
✱ ✱ kövér csillag
✧ ✧ Hegyes, négyágú árnyékolatlan csillag
✦ ✦ Hegyes, négyágú árnyékolt csillag
⍟ ⍟ csillag egy körben
⊛ ⊛ Hópehely egy körben
óra, idő
⏰ ⏰ Néz
⌚ ⌚ Néz
⌛ ⌛ Homokóra
⏳ ⏳ Homokóra

Van egy elég érdekes módja annak, hogy megkapja a mnemonika HTML-kódját a szükséges karakterhez. Ehhez elegendő a szerkesztő megnyitása Microsoft Word, hozzon létre új dokumentumotés válassz közülük főmenü"Beszúrás" - "Szimbólum" (én a 2003-as verziót használom, ezért nem tudom, hogyan kell hasonló műveletet végrehajtani a későbbi verziókban).

A megnyíló ablakban ki kell választania egy betűtípust, például Times New Roman (vagy bármely más, amely minden bizonnyal megtalálható a webhely látogatóinak legtöbb számítógépén - például Courier vagy Arial).

Adja hozzá a megnyíló listából az Ön számára word dokumentum az összes szükséges speciális karaktert, és mentse el ezt a Word-dokumentumot weboldalként (mentéskor a ".html" legördülő listából van kiválasztva). Nos, akkor csak meg kell nyitnia ezt a weboldalt bármelyikben Html szerkesztő(ugyanaz a Notepad ++ is megteszi), és látni fogja az összes szükséges mnemonika digitális kódját:

A módszer egy kicsit bonyolult, de ha van kedve valamilyen ritka speciális szimbólumot használni az oldaladon, akkor egyszerűbb lesz, mint a fentihez hasonló táblázatokat keresni az interneten. A kapott speciális karakterkódot a megfelelő helyre kell beillesztenie, és a weblapon helyette a böngésző megjeleníti a szükséges karaktert (például nem törő szóközt).

Törésmentes szóköz és lágy elválasztás a példákban

Ahogy fentebb említettem, és a fenti speciális karakterek táblázatából is látható, néhány HTML-beli mnemonika a digitális mellett szimbolikus jelölést is kapott a könnyebb memorizálás érdekében. Azok. karakterváltozatokban a "#" (hash) font jel helyett szavakat használnak. Például ugyanazt a megszakítás nélküli szóközt vagy mint (digitális mnemonika) vagy (karakter) írhatjuk.

Cikk írásakor, ha „és” jelet (&) vagy nyitott szögletes zárójelet (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Vagyis ha olyan cikket ír, amelyben be kell illesztenie a szövegbe, például a megjelenítési címkét< body>vagy csak egy kisebb, mint jelet kell beszúrni (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Ezért egy ilyen probléma megoldásához be kell illesztenie a következő konstrukciót:

Ugyanez vonatkozik maguknak a mnemonikák kódjának megjelenítésére is, mivel azok és jellel kezdődnek. Kódot kell beszúrnia a szövegbe, az "és" jel helyettesítésével (speciális karakter):

Ezt meg kell tenni, hogy felkerüljön az oldalra<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

Ezenkívül nagy valószínűséggel nem törő szóközt fog használni, amely úgy néz ki, mint egy normál szóköz a weboldalon, de a böngésző egyáltalán nem kezeli szóközként, és nem fog átmenni rajta(Például ez olyan kifejezésekre lenne megfelelő, mint 1400 GB stb., amelyeknél nem lenne kívánatos kötőjelet vinni a különböző sorok fölé):

1400 GB.

Néha az ellenkező helyzet adódhat, amikor nagyon hosszú szavak vannak a szövegben, és meg akar győződni arról, hogy szükség esetén a böngésző áthelyezéssel megtörhetné ezeket a szavakat. Ilyen célokra egy speciális "soft transfer" szimbólum található -

Hosszú, hosszú szó;

Amikor szükségessé válik egy másik sorra váltás, a böngésző kötőjelet helyez el a lágy tördelésű emlékeztető helyett, és a szó többi részét a következő sorba küldi. Ha van elég hely ahhoz, hogy egy sorban elférjen ez a szó, akkor a böngésző nem húz új sort. Ennyi, egyszerű.

Sok szerencsét! Hamarosan találkozunk a blogoldalak oldalán

Lehet, hogy érdekel

MailTo - mi ez, és hogyan lehet e-mail hivatkozást létrehozni HTML-ben
A H1-H6 címsorok, a Hr vízszintes vonal, a Br sortörés és a P bekezdés címkéi és attribútumai a Html 4.01 szabvány szerint
Hivatkozás és kép (fotó) beszúrása HTML-be - IMG és A címkék
Mi az a HTML hiperszöveg jelölőnyelv, és hogyan kell felsorolni az összes címkét a W3C érvényesítőben
Betűtípus (arc, méret és szín), Blockquote és előcímkék – elavult szövegformázás tiszta HTML-ben (CSS használata nélkül)
A színek beállítása a HTML- és CSS-kódban, az RGB-árnyalatok kiválasztása a táblázatokban, a Yandex eredmények és más programok
Megjegyzés direktívák és Doctype a HTML kódban, valamint a blokk és a soron belüli elemek (címkék) fogalma
Listák Html kódban – UL, OL, LI és DL címkék

Egy dokumentum megjelenítésekor a szóközök és az üres sorok nem maradnak meg, kivéve a címkékbe zárt szövegeket. ELŐ(előre formázott szöveg). Vagyis a szóközök, tabulátorok és üres sorok bármely sorozata egyenértékű egyetlen szóközzel egy HTML-fájlban. Másrészt a HTML-fájlban lévő szóközök tetszőleges számú szóközzel vagy új (üres) sorokkal ábrázolhatók.

Term newlin(újsor) a sor végének ELMÉLETI jelölésére szolgál. Az SGML meghatározza, hogy egy sornak (rekordnak) egy kezdő karakterrel kell kezdődnie (újsor – soremelés, LF, ASCII-kód 10), és egy rekordvég karakterrel kell végződnie (carriage return, CR, ASCII 13). A gyakorlatban a HTML dokumentumok bemutatása és továbbítása az adott számítógépes rendszerekkel konzisztens újsoros ábrázolással történik. Ezért a HTML-böngészők lehetővé teszik a három általános sorfelosztás bármelyikének támogatását, amelyeket a CR LF, csak CR vagy csak LF sorozattal jelölnek, és ezen a feltételezésen alapulnak, és kiemelik a hibákat a kezdő és záró karakterek megjelenítésében. rekord.

Így nem mindegy, hogyan bontja sorokra a szöveget, mivel az újsor szóközzel egyenértékű. Ne feledje azonban, hogy a HTML-ben nem kell egy szót két sorra osztania. Ha például az International szót két sorra osztja, a következőképpen:

nemzetközi

úgy lesz értelmezve

nemzetközi

Így a dokumentum logikus bemutatásához használjon HTML címkéket, mint pl P vagy BR hogy szükség esetén újsort adjunk.

A böngészők általában nem osztják két sorra a szavakat, hacsak a szó nem tartalmaz kötőjelet. A hivatkozott HTML 3.2 specifikációk nem túl pontosak ebben a kérdésben, és a táblázat szakasz tárgyalásakor a következőket adjuk meg:

Egyes felhasználói ügynököknél szükséges vagy kívánatos lehet egy karakterlánc lefordítása a szóban. Ilyen esetekben kívánatos vizuálisan ellenőrizni, hogy ez megtörtént.

Vigyázz a vonal hosszát nem befolyásolhatja. Ez a böngészőtől, a számítógéptől és a dokumentumot megtekintő személyek beállításaitól függ. Általánosságban elmondható, hogy a szavak közötti sortörést nem lehet megakadályozni, de folyamatos szóközök használatával megpróbálhatja megakadályozni a sortörést.

Az újsorok HTML címkékkel kombinált használatára vonatkozóan speciális szabályok vonatkoznak:

  • A kezdőcímkét közvetlenül követő újsort figyelmen kívül hagyja. Például a vonalak
  • Hasonlóképpen, a zárócímke előtti újsort figyelmen kívül hagyja. Például a vonalak

A vízszintes tabulátor karakter (HT) használható HTML dokumentumban. De az elemen belül ELŐ a tabulátor karakternek speciális értelmezése van, szóközzel egyenértékű, és nem hordoz semmilyen információt a tabulátorokról. (A táblázatos adatok megjelenítéséhez használja az elemet asztal.) A gyakorlatban a legjobb elkerülni a tabulátor karakterek használatát a HTML-kódban, helyette megfelelő számú szóközt kell használni, ha egy HTML-dokumentum forráskódját tabulátorként szeretné formázni.