Medzery a spôsob, akým formátujú kód v Html, ako aj špeciálne znaky medzier a iné mnemotechnické pomôcky. Používanie bielych znakov na formátovanie HTML kódu, nedeliteľných medzier a iných špeciálnych znakov (mnemotechnických pomôcok) Medzery a medzery

Tag

Značka určuje znak tabulátora v texte. Je to podobné ako pri použití sekvencie escape /t.

1 2 3\t\t\t4
Zobrazené:
1 2 3 4

Vzdialenosť, o ktorú sa posunie riadok, keď sa do neho vloží znak tabulátora, sa dá ľubovoľne nastaviť. Používa sa na to atribút TABSTOPS značky.

Značka nie je štandardná značka HTML. Bol pridaný do značiek Flash, aby pomohol konzistentným spôsobom formátovať text.

Označiť...

Značka je zodpovedná za vlastnosti formátovania textu, ako sú okraje, odsadenia a posuny riadkov. V ňom môžu byť špecifikované nasledujúce atribúty:

ĽAVÝ OKRAJ. Veľkosť ľavého okraja v bodoch. Analóg je vlastnosť leftmargin triedy TextFormat.

RIGHT MARGIN. Hodnota pravého okraja v bodoch. Analógový je vlastnosť rightmargin triedy TextFormat.

INDENT. Odsadenie prvého riadku odseku v bodoch. Medzi vlastnosťami triedy TextFormat je podobná vlastnosti indent.

BLOCKINDENT.

Odsadenie textového odseku vľavo v bodoch. Analógová - vlastnosť blockIndent
trieda TextFormat.

VEDÚCI. Vzdialenosť medzi čiarami v bodoch. Podobná vlastnosť triedy TextFormat vedie.

TABSTOPS. Atribút určuje, aké odsadenie čiary v bodoch spôsobí každý znak tabulátora v sekvencii. Jeho hodnota je zoznam čísel, ktoré určujú vzdialenosti, o ktoré sa riadok posunie do okna, ak je za sebou napísaných 1, 2, 3, ... n znakov tabulátora. Analógom atribútu TABSTOPS je vlastnosť tabStops triedy TextFormat.


pole.html=pole.border=pole.multiline=true;
pole.htmlText="

0din tabR> Dve tabR>
Tri tabary>

";

Značka nie je štandardná značka HTML. Bol zavedený tak, že možnosť označovania textu pomocou značiek je podobná ako pri použití vlastností triedy Text Format.

Označiť...

Tag je určený na aplikáciu štýlu triedy CSS na ľubovoľný textový fragment.

Názov triedy je špecifikovaný v jej atribúte CLASS.

This.createTextField("pól", 0, 150, 150, 200, 90);
pole.autoSize = pole.border=pole.multiline=true;
// Vytvorte tri štýly triedy definujúce červený, zelený a modrý text
var style:TextField.Stylesheet = new TextField.Stylesheet();
var green_text:String = ".GREEN (color:#00FF00)";
var red_text:String = ".RED (color:#FF0000)";
var blue_text:String = ".BLUE (color:#0000FF)";
style.parseCSS(zeleny_text+cerveny_text+modry_text);
pole.styleSheet=style;
// Zobrazenie textu s vytvorenými štýlmi
pole.text = " 3zelený text

Červený text

Modrý text ";

Dobrý deň, milí čitatelia blogu! Tí, čo sa s tým aspoň povrchne zoznámili, to už zrejme vzali na vedomie, aj keď vo všeobecnosti. To znamená, že majú predstavu o tom, aké HTML symboly sa vo všeobecnosti používajú v kóde dokumentu.

V dnešnom článku sa pokúsime zistiť, čo je medzera v HTML a v akých prípadoch môžete použiť medzery pri formátovaní samotného kódu pre ľahké čítanie. Zistíme, kedy je potrebné použiť nezalomiteľnú medzeru, a zoznámime sa aj s ďalšími špeciálnymi znakmi (alebo, ako sa im hovorí, mnemotechnickými pomôckami).

V skutočnosti by som vám odporučil, aby ste neignorovali tému používania rôznych špeciálnych znakov, pretože ide o dôležitý komponent, ktorý vám umožňuje dokončiť štúdium hypertextového značkovacieho jazyka. Vo všeobecnosti informácie uvedené v tejto publikácii určite nebudú zbytočné. No a teraz k veci.

Medzery a medzery v HTML

Najprv je potrebné urobiť dôležitú poznámku. Na klávesnici počítača sú špeciálne klávesy, ktoré umožňujú oddeliť text (viac o tom nižšie). Iba široký medzerník však poskytuje oddelenie medzi slovami nielen v editore, ale aj v okne prehliadača. Pri lámaní čiar a odsadzovaní od hrán sú nuansy.

Ako viete, zobrazenie určitých prvkov vo webovom prehliadači je určené značkami. Na formátovanie textu sa používa dobre známy , ktorý je založený na blokoch. To znamená, že jeho obsah je umiestnený po celej dostupnej šírke.

Komu zalomiť riadky v rámci odseku P, musíte použiť jednu značku BR, pomocou ktorej to môžete urobiť. Povedzme, že potrebujeme do textu vložiť riadky z básne, ktorú píšeme v textovom editore:

Napriek tomu, že riadky verša sú umiestnené správne a pomlčky sú vytvorené na správnych miestach, v prehliadači bude všetko vyzerať inak:


Ak chcete dosiahnuť rovnaké zobrazenie v okne webového prehliadača, musíte na každom zlome riadku napísať BR:

Teraz sme úlohu splnili a poetické riadky sa v prehliadači zobrazia úplne správne:

Tým sa dokončia potrebné zalomenia riadkov. Ďalšou vlastnosťou, ktorú je potrebné poznamenať, je, že viaceré medzery idúce za sebou sú zobrazované webovým prehliadačom ako jeden. Môžete si to overiť, ak sa v tom istom editore pokúsite vložiť medzi dve slová nie jednu, ale niekoľko medzier a kliknutím na tlačidlo „Uložiť“ sa pozriete na výsledok v prehliadači.

Medzera, tabulátor a zalomenie riadku

V podstate s týmito medzery Poznáme sa hneď, ako začneme pracovať s textom v editore a naformátujeme ho do požadovanej podoby. Na implementáciu takejto úlohy existujú špeciálne klávesy, z ktorých každý zodpovedá svojmu vlastnému znaku medzery:

  • Medzerník je najširší kláves na klávesnici počítača (bez označenia);
  • Tab - kláves vľavo s nápisom „Tab“ a dvoma šípkami smerujúcimi rôznymi smermi;
  • Zalomenie riadku - kláves "Enter".

Ako som však uviedol vyššie, konečný požadovaný výsledok získame nielen v textovom editore, ale aj v prehliadači, až keď použijeme prvý kľúč. Všetky tri klávesy (vrátane tabulátora a zlomu riadku sú užitočné pri formátovaní kódu HTML. Povedzme, že takto vyzerá fragment kódu v programe NotePad++ (o tomto editore je veľa informácií) pri zobrazení všetkých bielych znakov:


Získame kód, ktorý je vďaka medzerám ľahko čitateľný a zrozumiteľný. Oranžové šípky označujú zarážky vytvorené pomocou klávesu Tab a symboly CR a LF označujú zlomy riadkov vytvorené pomocou klávesu Enter.

Kontajnery vnorené do seba sú zobrazené a otváracie a zatváracie značky sú jasne viditeľné. V tejto forme je možné tento kód jednoducho upravovať. Teraz ho porovnajte s rovnakým kódom, ktorý nemá takéto rozdelenie textu:

Rovnakým spôsobom pomocou prázdnych znakov môžete napísať pravidlá CSS, ktoré budú vizuálne vyzerať jasne a stráviteľne:


Po privedení všetkých štýlov do spoločného menovateľa a úplnom dokončení úprav súboru štýlov môžete vykonať úpravy odstránením všetkých medzier z kódu. Toto je potrebné zvýšiť, čo je veľmi dôležité pri propagácii zdroja.

Špeciálne znaky (alebo mnemotechnické pomôcky) v kóde HTML

Teraz sa pozrime na prípady, v ktorých je potrebné použiť špeciálne znaky, ktoré som spomenul na začiatku článku. Špeciálne znaky HTML, niekedy nazývané mnemotechnické pomôcky, boli zavedené na vyriešenie dlhodobého problému s kódovaním, ktorý vznikol v hypertextovom značkovacom jazyku.

Pri písaní textu na klávesnici sa zakódujú znaky jazyka, ktorý používate. Vo webovom prehliadači sa napísaný text zobrazí pomocou písma, ktoré ste vybrali v dôsledku operácie spätného dekódovania.

Faktom je, že existuje veľa takýchto kódovaní, teraz nemáme za cieľ ich podrobne analyzovať. Len v každom z nich môžu chýbať určité symboly, ktoré je však potrebné zobraziť. Povedzme, že máte nutkanie napísať jednoduché úvodzovky alebo zvýraznenie, ale tieto ikony jednoducho nie sú súčasťou sady.

S cieľom odstrániť tento problém bol zavedený systém špeciálnych symbolov, ktorý zahŕňa obrovské množstvo rôznych mnemotechnických pomôcok. Všetky začínajú znakom „&“ a zvyčajne končia bodkočiarkou „;“. Najprv mal každý špeciálny znak svoj vlastný digitálny kód. Napríklad pre nezalomiteľnú medzeru, ktorú podrobnejšie zvážime nižšie, bude platiť nasledujúci záznam:

Po určitom čase však boli najbežnejším symbolom priradené písmenové analógy (mnemotechnické pomôcky), aby boli ľahšie zapamätateľné. Povedzme, že pre rovnaký pevný priestor to vyzerá takto:

Výsledkom je, že prehliadač zobrazí zodpovedajúci symbol. Zoznam mnemotechnických pomôcok je veľmi rozsiahly, najčastejšie používané špeciálne znaky v HTML môžete zistiť z nasledujúcej tabuľky:

symbol kód mnemotechnické pomôcky popis
neprerušiteľný priestor
úzky priestor (šírka ako písmeno n)
široký priestor (em-šírka ako písmeno m)
- pomlčka (pomlčka)
- em pomlčka (em pomlčka)
­ - ­ mäkký prenos
A ́ stres je umiestnený za "stresovým" písmenom
© © autorské práva
® ® ® registrovaná ochranná známka
značka ochrannej známky
º º º oštep Marsu
ª ª ª zrkadlo Venuše
ppm
π π π pi (použite Times New Roman)
¦ ¦ ¦ vertikálna bodkovaná čiara
§ § § odsek
° ° ° stupňa
µ µ µ mikro znamenie
značka odseku
elipsy
prekrytie
´ ´ ´ prízvuková značka
číselný znak
🔍 🔍 Lupa (naklonená doľava)
🔎 🔎 Lupa (naklonená doprava)
znaky aritmetických a matematických operácií
× × × množiť
÷ ÷ ÷ rozdeliť
< < menej
> > > viac
± ± ± plus/mínus
¹ ¹ ¹ stupeň 1
² ² ² stupeň 2
³ ³ ³ stupeň 3
¬ ¬ ¬ negácia
¼ ¼ ¼ jedna štvrtina
½ ½ ½ polovica
¾ ¾ ¾ tri štvrtiny
desatinná čiarka
mínus
menšie alebo rovnaké
viac alebo rovné
približne (takmer) rovnaké
nerovná sa
identicky
druhá odmocnina (radikál)
nekonečno
súhrnný znak
pracovná značka
čiastočný diferenciál
integrálne
pre všetkých (viditeľné iba vtedy, ak sú vyznačené tučným písmom)
existuje
prázdna sada
Ø Ø Ø priemer
patrí
nepatrí
obsahuje
je podmnožina
je supermnožina
nie je podmnožinou
je podmnožina alebo sa rovná
je nadmnožina alebo rovná
plus v kruhu
znak násobenia v kruhu
kolmý
rohu
logické AND
logické ALEBO
križovatka
únie
menové znaky
eur
¢ ¢ ¢ Cent
£ £ £ Lb
¤ ¤t; ¤ Znak meny
¥ ¥ ¥ Znak Yen a Yuan
ƒ ƒ ƒ Florinské znamenie
značky
. jednoduchý marker
kruh
· · · stredný bod
kríž
dvojitý kríž
vrcholov
klubov
srdiečka
diamanty
kosoštvorec
ceruzka
ceruzka
ceruzka
ruka
citácie
" " " dvojitý citát
& & & ampersand
« « « ľavá typografická úvodzovka (rybia kosť)
» » » pravá typografická úvodzovka (rybia kosť)
otvorenie jednoduchého rohu
jednorohové uzatváranie citátov
prvočíslo (minúty, stopy)
dvojité prvočíslo (sekundy, palce)
ľavý horný jednoduchý citát
jediný citát vpravo hore
jediný úvodzovka vpravo dole
citát-noha vľavo
citovať nohu vpravo hore
citovať nohu vpravo dole
jediná anglická úvodná úvodzovka
jediná anglická záverečná úvodzovka
úvodná dvojitá úvodzovka
uzatváracie dvojité úvodzovky
šípky
ľavá šípka
šípka hore
pravá šípka
šípka nadol
šípka doľava a doprava
šípka hore a dole
návrat vozňa
dvojitá šípka doľava
dvojitá šípka nahor
dvojitá šípka doprava
dvojitá šípka nadol
dvojitá šípka doľava a doprava
dvojitá šípka nahor a nadol
trojuholník šípka hore
trojuholník šípka nadol
trojuholník šípka doprava
trojuholník šípka doľava
hviezdy, snehové vločky
Snehuliak
snehová vločka
Snehová vločka obložená trojlístkom
Tučná snehová vločka s ostrým uhlom
Zatienená hviezda
Prázdna hviezda
Nevyplnená hviezda vo vyplnenom kruhu
Vyplnená hviezda s otvoreným kruhom vo vnútri
Rotujúca hviezda
Kreslená biela hviezda
Stredný otvorený kruh
Stredný vyplnený kruh
Sextile (typ snehovej vločky)
Osemcípa rotujúca hviezda
Hviezda s guľovitými koncami
Odvážna osemcípa hviezdicová vrtuľa v tvare kvapky
Šestnásťcípa hviezdička
Dvanásťcípa hviezda
Tučná osemcípa rovná plná hviezda
Šesťcípa plná hviezda
Osemcípa rovná plná hviezda
Osemcípa hviezda
Osemcípa hviezda
Hviezda s prázdnym stredom
Tučná hviezda
Špicatá štvorcípa otvorená hviezda
Špicatá štvorcípa plná hviezda
Hviezda v kruhu
Snehová vločka v kruhu
hodiny, čas
Sledujte
Sledujte
Presýpacie hodiny
Presýpacie hodiny

Prípady použitia niektorých špeciálnych znakov vrátane nerozdeliteľnej medzery a mäkkého spojovníka

Ak ste si už tabuľku trochu preštudovali, dostali ste potvrdenie toho, čo som povedal vyššie, že na zobrazenie všetkých špeciálnych znakov sa používa digitálny kód () alebo jeho abecedný analóg (symbolické mnemotechnické pomôcky), kde namiesto množiny hash píšu sa značky a čísla, písmená ().

Teraz sa pozrime, kedy použiť tieto kódy. Povedzme, že v článku potrebujete uviesť nejakú značku HTML na informačné účely, napr.

. Ak na klávesnici zadáte lomené zátvorky (a existuje taká možnosť), prehliadač bude takúto konštrukciu vnímať ako otváraciu značku, a nie ako jednoduchý fragment textu.

Preto z tej istej HTML tabuľky špeciálnych znakov vezmeme zodpovedajúce kódy a celý záznam bude vyzerať takto:

Okrem toho, aby sa v prehliadači nezobrazoval samotný znak ampersand, ale jeho označenie v formulár

, musíte pridať jeho kód z tabuľky:

päta

Potom prehliadač zobrazí presne ten záznam mnemotechnických pomôcok, ktoré je potrebné použiť na zobrazenie značky FOOTER. Je to trochu mätúce, ale na tejto stránke si môžete tento aspekt precvičiť zadaním mnemotechnických pomôcok pre zodpovedajúce znaky do poľa „HTML“ a použitím tlačidla „Spustiť“ a v oblasti „Výsledok“ získaním výsledku ich zobrazenia v poli prehliadač:


Upozorňujeme, že som zabezpečil zalomenie textu pomocou už spomínaného BR tagu, takže samotné znaky sa pre pohodlie nezobrazovali v jednom riadku, ale v stĺpci.

Pokračuj. Niekedy v texte vznikajú kombinácie, ktoré je nežiaduce rozdeliť do rôznych riadkov. Povedzme „1 000 rubľov“. Logické by bolo nechať ho na hornom riadku, alebo ak nie je dostatok miesta, presunúť celú štruktúru o riadok nižšie.

Platí to najmä vtedy, ak používatelia používajú zariadenia s rôznymi šírkami obrazovky, vrátane mobilných. V tomto prípade webový prehliadač skutočne formátuje text a prispôsobuje sa novým podmienkam. A ak text vyzerá správne pri štandardných veľkostiach monitorov, potom ak sa zmenia, všetko sa môže zmeniť.

Pre tieto prípady sa poskytuje HTML neprerušiteľný priestor, ktorý som už spomínal. Dovoľte mi pripomenúť, že v tomto prípade je kód priestoru nasledujúci:

A musí byť vložený medzi dve sady znakov, ktoré je potrebné prepojiť:

1000 rub.

Teraz ich prehliadač za žiadnych okolností neoddelí, aj keď je na správne zobrazenie potrebné formátovanie textu.

Nastáva aj situácia, keď sa veľmi dlhé slovo nezmestí na voľné miesto a potrebujete časť presunúť. Ako môžem v tomto prípade preddefinovať nový riadok, ak je to potrebné? Pre toto existuje špeciálny mäkký znak pomlčky-, ktoré je potrebné umiestniť na miesto, kde je potrebné slovo zlomiť:

Dlhé dlhé dlhé dlhé dlhé slovo

Ak nastane situácia, keď je potrebné slovo rozčleniť, potom sa na mieste mnemotechnickej pomôcky mäkkého spojovníka vytvorí medzera, kde sa objaví spojovník (pomlčka) a zvyšok slova sa objaví na nasledujúcom riadku nižšie.

Opäť však bude užitočné vidieť to celé, vrátane príkladov kontinuálneho a mäkkého prenosu, v praxi:


V okne tohto editora môžete zmeniť veľkosť zobrazovacieho poľa „Výsledok“ tak, že uchopíte okraj tejto oblasti ľavým tlačidlom myši a bez toho, aby ste ho pustili, potiahnite ho doľava, aby ste zmenšili šírku. Potom nastáva reálna situácia, keď prehliadač začne obsah preformátovať, aby ho správne zobrazoval.

A uskutoční sa prenos, ktorý bol poskytnutý v príkladoch, ktoré som opísal. Sami však môžete posúvať zobrazovacie okno, rozširovať ho a zužovať a vizuálne to overiť.

Je rozdiel medzi čím napísané vo vašom HTML kóde a čo zobrazené v prehliadači.

Ako sme už videli, značky HTML ako napr<р>, číta iba prehliadač (aby ste vedeli, ktoré typu napísaný obsah), ale nezobrazuje sa v ňom.

Videli sme aj to, ako viete písať komentáre v kóde HTML, aby človeku pomohol prečítať kód bez toho, aby musel tieto komentáre zobrazovať v prehliadači.

Ďalší typ písaného kódu, ktorý ignoroval prehliadač je priestor, obsahuje:

  • zlomy riadkov;
  • prázdne riadky;
  • záložka (alebo odsadenie).

Zalomenie riadkov

Zalomenia riadkov a prázdne riadky (ktoré sú sekvenciou zalomení riadkov) v kóde HTML ignoroval prehliadač. Dosahujú iba zjednotený priestor.

Pôvodná myšlienka webu bola, že by to mal byť priestor na spoluprácu, kde môžete komunikovať zdieľaním informácií.

Aby to bolo reálne vložiť zalomenie riadku musíte použiť prvok
:

V tom najlepšom je život dokonalý
nepredvídateľné

Tabuľkovanie

Tabuľkovanie je špeciálny znak získaný pomocou klávesu Tab. Zvyčajne presunie kurzor na ďalšiu zarážku tabulátora, ale niekedy sa zmení na dve medzery.

V každom prípade, rovnako ako bežný priestor, tab neviditeľný. Prehliadač ho tiež ignoruje:

Pozrime sa na tento text.

Ak chcete pridať priestor predtým skrátka budete musieť použiť CSS.

Ak chcete zatvoriť prvok HTML, musíte najskôr zatvoriť všetky jeho podradené prvky.

Formátovanie stromu

Keďže prvky HTML môžu byť vnorené do seba, mali by ste na to dávať pozor v poriadku v akom boli otvorené, pretože to ovplyvní poradie, v akom sa zatvárajú.

Tento kód je zapísaný v jeden riadok.

Pretože môže byť ťažké sledovať poradie, v ktorom boli prvky HTML otvorené, odporúča sa napísať HTML stromová forma:

Tento kód je zapísaný v niektoré riadkov, ale stále sa bude zobrazovať ako jeden riadok.

Umožňuje vám to formátovanie stromu vizuálne reprodukovať úroveň vnorenia váš HTML kód. Vďaka tomu je ľahké vidieť, že:

  • je predok;
  • - rodič Pre A ;

  • A - Toto bratský prvkov.

Napíšte HTML, aby ste si ho mohli prečítať

Tabulátory, prázdne riadky, nastavené medzery a zlomy riadkov počítač vynechá a všetky sa premenia na jeden priestor.

HTML dokument píše a číta človek, ale číta ho iba počítač. Vzhľadom na to, že tabulátory, medzery a zlomy riadkov nemajú vplyv na to, ako bude prehliadač čítať a následne zobrazovať webovú stránku, môžete dokument naformátovať tak, aby bol ja spôsobom.

Neexistujú žiadne špecifické pravidlá týkajúce sa formátovania HTML, existujú však implicitné pravidlá dohody, najmä:

  • použitie tabelácia pomôcť vizualizovať príloh HTML prvky;
  • vložte otváracie a zatváracie značky prvkov bloku na samostatné riadky;
  • zapisovať vložené prvky na jeden riadok (vrátane otváracích a uzatváracích značiek).

Keď je dokument zobrazený na obrazovke, medzery a prázdne riadky sa nezachovajú, s výnimkou textu uzavretého v značkách PRE(vopred naformátovaný text). To znamená, že akákoľvek sekvencia medzier, tabulátorov a prázdnych riadkov je ekvivalentná jednej medzere v súbore HTML. Na druhej strane, prázdne miesto v súbore HTML môže byť znázornené pomocou ľubovoľného počtu medzier alebo nových (prázdnych) riadkov.

Termín newlin(nový riadok) slúži na TEORETICKÉ označenie konca riadku. SGML špecifikuje, že riadok (záznam) musí začínať znakom začiatku (nový riadok - posun riadku, LF, ASCII kód ​​10) a končiť znakom konca záznamu (carriage return, CR, ASCII 13). V praxi sa HTML dokumenty vykresľujú a prenášajú pomocou reprezentácie nového riadku konzistentného s danými počítačovými systémami. Prehliadače HTML preto umožňujú podporu ktorejkoľvek z troch bežných reprezentácií oddeľovania riadkov, označených sekvenciou CR LF, CR only alebo LF only, a na základe tohto predpokladu zvýrazňujú chyby v reprezentácii úvodných a koncových znakov záznamu. .

Nezáleží teda na tom, ako rozdelíte text na riadky, pretože posun riadkov je ekvivalentný medzere. Všimnite si však, že v HTML by ste nemali rozdeľovať slovo na dva riadky. Ak napríklad rozdelíte slovo medzinárodný do dvoch riadkov, ako je uvedené nižšie:

medzinárodné

toto sa bude interpretovať ako

medzinárodné

Pre logickú prezentáciu dokumentu by ste teda mali používať HTML tagy, ako napr P alebo BR v prípade potreby zabezpečiť posun riadku.

Prehliadače vo všeobecnosti nerozdeľujú slová do dvoch riadkov, pokiaľ slovo neobsahuje spojovník. Referenčné špecifikácie HTML 3.2 nie sú v súvislosti s týmto problémom veľmi presné a pri diskusii o časti s tabuľkou je uvedené nasledovné:

Pre niektorých užívateľských agentov môže byť potrebné alebo žiaduce preložiť reťazec v rámci slova. V takýchto prípadoch je vhodné vizuálne overiť, či sa tak stalo.

Dať si pozor na dĺžka linky je mimo vašu kontrolu. Závisí to od prehliadača, počítača a nastavení vykonaných ľuďmi, ktorí si prezerajú váš dokument. Vo všeobecnosti neexistuje spôsob, ako zabrániť zalomeniu riadkov medzi slovami, ale môžete sa pokúsiť zabrániť zalomeniu riadkov pomocou súvislých medzier.

Pokiaľ ide o použitie nového riadku v kombinácii so značkami HTML, existujú špeciálne pravidlá:

  • Zalomenia riadkov bezprostredne za počiatočnou značkou sa ignorujú. Napríklad linky
  • Podobne sa ignoruje zalomenie riadku pred koncovou značkou. Napríklad linky

Znak horizontálneho tabulátora (HT) možno použiť v dokumente HTML. Ale v rámci živlu PRE Znak tabulátora má špeciálnu interpretáciu, je ekvivalentný medzere a nenesie žiadne informácie o tabulátore. (Na reprezentáciu tabuľkových údajov použite prvok tabuľky.) Ak chcete formátovať zdrojový kód HTML dokumentu ako tabulátory, v praxi je lepšie vyhnúť sa zahrnutiu znakov tabulátorov do kódu HTML a namiesto toho použiť primerané množstvo medzier.

Dobrý deň, milí čitatelia blogu. O niečo skôr sme sa o tom už stihli porozprávať a dozvedeli sme sa aj o dizajne. Dnes máme zase koncept bieleho miesta v HTML, ako aj s tým spojené formátovanie kódu pri jeho písaní (pre pohodlie jeho následného čítania a vnímania).

No a vzhľadom na to, že sa dotkneme témy nedeliteľnej medzery a mäkkého delenia slov, budeme musieť zamerať svoju pozornosť na takzvané špeciálne znaky alebo mnemotechnické pomôcky používané v jazyku Html, ktoré vám umožnia pridať mnoho ďalších znakov do kódu webového dokumentu, ako sú tie, ktoré už boli spomenuté vyššie. Ale prvé veci.

Medzery a medzery v HTML

Predtým, ako prejdem k problematike formátovania textu pomocou značiek špeciálne navrhnutých na to (odsek, nadpisy atď.), chcem sa pozastaviť nad tým, ako sa v jazyku HTML interpretujú medzery, zalomenia riadkov (Enter) a tabelácia a ako sa vykonal text v okne prehliadača pri zmene veľkosti.

Pravda, pri tomto druhu vizuálneho formátovania (ktoré na webovej stránke nebude viditeľné) sa najčastejšie nepoužívajú samotné medzery, ale skôr znaky tabulátora a zlomu riadku. Existuje také pravidlo - keď začnete písať vnorenú značku Html, potom odsadenie pomocou tabulátorov(kláves Tab na klávesnici) a keď zatvoríte túto značku, odstráňte odsadenie (kombinácia kláves Shift+Tab na klávesnici).

Musí sa to urobiť tak, aby boli otváracie a zatváracie značky na rovnakej vertikálnej úrovni (na rovnakom počte kariet od pravého okraja stránky vo vašom editore Html, napríklad Notepad++, o ktorom som písal). Okrem toho vám odporúčam, aby ste ihneď po napísaní úvodného prvku urobili niekoľko zalomení riadkov a okamžite napísali záverečný na rovnakej úrovni (počet kariet), aby ste to nezabudli urobiť neskôr.

Tie. otváracie a zatváracie prvky by mali byť vertikálne na rovnakej úrovni a vnútorné štítky by mali byť posunuté o jeden znak záložky a uzatváracie a otváracie prvky by mali byť opäť umiestnené na rovnakej úrovni.

V prípade jednoduchých webových dokumentov sa to môže zdať prehnané, ale pri vytváraní viac či menej zložitých dokumentov áno kód bude oveľa prehľadnejší a čitateľné vďaka množstvu medzier a tiež bude oveľa jednoduchšie odhaliť chyby vďaka symetrickému usporiadaniu značiek.

Špeciálne znaky alebo mnemotechnické pomôcky v kóde HTML

Poďme si teda teraz niečo povedať o takzvaných špeciálnych znakoch, ktorých jednoduchosť používania som avizoval na začiatku tohto článku. Špeciálne znaky sa tiež niekedy nazývajú mnemotechnické pomôcky alebo náhrady. Sú určené na vyriešenie problému, ktorý sa v hypertextovom značkovacom jazyku vyskytoval už dlhú dobu v súvislosti s použitým kódovaním.

Keď zadávate text na klávesnici, znaky vášho jazyka sú zakódované podľa vopred určeného algoritmu a následne sú zobrazené na stránke pomocou písiem, ktoré používate (kde ich nájsť a ako ich nainštalovať) kvôli dekódovaniu.

Existuje veľa kódovaní, ale pre jazyk Html bola štandardne prijatá rozšírená verzia kódovania.

V tomto kódovaní textu bolo možné napísať iba 256 znakov - 128 z ASCII a ďalších 128 pre ruské písmená. V dôsledku toho vznikol na stránkach problém s používaním znakov, ktoré nie sú zahrnuté v ASCII a nie sú to ruské písmená, ktoré sú súčasťou kódovania Windows 1251 (CP1251). Rozhodli ste sa použiť vlnovku alebo apostrof, ale takáto možnosť pôvodne nebola zahrnutá v kódovaní používanom jazykom Html.

Práve pre takéto prípady boli vynájdené substitúcie alebo inak povedané mnemotechnické pomôcky. Na začiatku špeciálne znaky mali digitálnu podobu, ale potom pre tie najbežnejšie boli pridané ich listové náprotivky, aby boli ľahšie zapamätateľné.

Vo všeobecnosti je mnemotechnická pomôcka znak, ktorý začína znakom „&“ a končí bodkočiarkou „;“. Na základe týchto vlastností prehliadač pri analýze kódu HTML z neho extrahuje špeciálne znaky. Za ampersandom v číselnom zástupnom kóde musí bezprostredne nasledovať znak libry „#“, niekedy nazývaný aj hash. A až potom nasleduje digitálny kód požadovaného znaku v kódovaní Unicode.

V Unicode je možné napísať viac ako 60 000 znakov – hlavná vec je, že mnemotechnický symbol, ktorý potrebujete, je podporovaný fontom použitým na vašej stránke. Existujú písma, ktoré podporujú takmer všetky znaky Unicode, a existujú možnosti len s určitou sadou znakov.

Úplný zoznam špeciálnych postáv bude jednoducho obrovský, ale najčastejšie používané mnemotechnické pomôcky si môžete požičať napríklad z tejto tabuľky:

SymbolHTML kódDesatinné
kód
Popis
neprerušiteľný priestor
úzky priestor (šírka ako písmeno n)
široký priestor (em-šírka ako písmeno m)
- pomlčka (pomlčka)
- em pomlčka (em pomlčka)
­ - ­ mäkký prenos
A ́ stres je umiestnený za písmenom „stres“.
© © autorské práva
® ® ® registrovaná ochranná známka
značka ochrannej známky
º º º oštep Marsu
ª ª ª zrkadlo Venuše
ppm
π π π pi (použite Times New Roman)
¦ ¦ ¦ vertikálna bodkovaná čiara
§ § § odsek
° ° ° stupňa
µ µ µ mikro znamenie
značka odseku
elipsy
prekrytie
´ ´ ´ prízvuková značka
číselný znak
🔍 🔍 Lupa (naklonená doľava)
🔎 🔎 Lupa (naklonená doprava)
znaky aritmetických a matematických operácií
× × × množiť
÷ ÷ ÷ rozdeliť
< < menej
> > > viac
± ± ± plus/mínus
¹ ¹ ¹ stupeň 1
² ² ² stupeň 2
³ ³ ³ stupeň 3
¬ ¬ ¬ negácia
¼ ¼ ¼ jedna štvrtina
½ ½ ½ polovica
¾ ¾ ¾ tri štvrtiny
desatinná čiarka
mínus
menšie alebo rovnaké
viac alebo rovné
približne (takmer) rovnaké
nerovná sa
identicky
druhá odmocnina (radikál)
nekonečno
súhrnný znak
pracovná značka
čiastočný diferenciál
integrálne
pre všetkých (viditeľné iba vtedy, ak sú vyznačené tučným písmom)
existuje
prázdna sada
Ø Ø Ø priemer
patrí
nepatrí
obsahuje
je podmnožina
je supermnožina
nie je podmnožinou
je podmnožina alebo sa rovná
je nadmnožina alebo rovná
plus v kruhu
znak násobenia v kruhu
kolmý
rohu
logické AND
logické ALEBO
križovatka
únie
menové znaky
rubeľ. Znak rubľa musí byť použitý v spojení s číslom. Štandard Unicode 7.0. Ak sa obrázok nezobrazuje, aktualizujte písma Unicode.
eur
¢ ¢ ¢ Cent
£ £ £ Lb
¤ ¤ ¤ Znak meny
¥ ¥ ¥ Znak Yen a Yuan
ƒ ƒ ƒ Florinské znamenie
značky
. jednoduchý marker
kruh
· · · stredný bod
kríž
dvojitý kríž
vrcholov
klubov
srdiečka
diamanty
kosoštvorec
ceruzka
ceruzka
ceruzka
ruka
citácie
" " " dvojitý citát
& & & ampersand
« « « ľavá typografická úvodzovka (rybia kosť)
» » » pravá typografická úvodzovka (rybia kosť)
otvorenie jednoduchého rohu
jednorohové uzatváranie citátov
prvočíslo (minúty, stopy)
dvojité prvočíslo (sekundy, palce)
ľavý horný jednoduchý citát
jediný citát vpravo hore
jediný úvodzovka vpravo dole
citát-noha vľavo
citovať nohu vpravo hore
citovať nohu vpravo dole
jediná anglická úvodná úvodzovka
jediná anglická záverečná úvodzovka
úvodná dvojitá úvodzovka
uzatváracie dvojité úvodzovky
šípky
ľavá šípka
šípka hore
pravá šípka
šípka nadol
šípka doľava a doprava
šípka hore a dole
návrat vozňa
dvojitá šípka doľava
dvojitá šípka nahor
dvojitá šípka doprava
dvojitá šípka nadol
dvojitá šípka doľava a doprava
dvojitá šípka nahor a nadol
trojuholník šípka hore
trojuholník šípka nadol
trojuholník šípka doprava
trojuholník šípka doľava
hviezdy, snehové vločky
Snehuliak
snehová vločka
Snehová vločka obložená trojlístkom
Tučná snehová vločka s ostrým uhlom
Zatienená hviezda
Prázdna hviezda
Nevyplnená hviezda vo vyplnenom kruhu
Vyplnená hviezda s otvoreným kruhom vo vnútri
Rotujúca hviezda
Kreslená biela hviezda
Stredný otvorený kruh
Stredný vyplnený kruh
Sextile (typ snehovej vločky)
Osemcípa rotujúca hviezda
Hviezda s guľovitými koncami
Odvážna osemcípa hviezdicová vrtuľa v tvare kvapky
Šestnásťcípa hviezdička
Dvanásťcípa hviezda
Tučná osemcípa rovná plná hviezda
Šesťcípa plná hviezda
Osemcípa rovná plná hviezda
Osemcípa hviezda
Osemcípa hviezda
Hviezda s prázdnym stredom
Tučná hviezda
Špicatá štvorcípa otvorená hviezda
Špicatá štvorcípa plná hviezda
Hviezda v kruhu
Snehová vločka v kruhu
hodiny, čas
Sledujte
Sledujte
Presýpacie hodiny
Presýpacie hodiny

Je tam celkom zaujímavé spôsob, ako získať mnemotechnický kód HTML pre znamenie, ktoré potrebujete. Ak to chcete urobiť, stačí otvoriť editor Microsoft Word, vytvoriť nový dokument a z horného menu vybrať „Vložiť“ - „Symbol“ (používam verziu 2003, takže neviem, ako urobiť podobnú operáciu v neskorších verziách ).

V okne, ktoré sa otvorí, musíte vybrať písmo, napríklad Times New Roman (alebo akékoľvek iné, ktoré bude zrejme prítomné na väčšine počítačov návštevníkov vašej stránky – napríklad Courier alebo Arial).

Pridajte všetky špeciálne znaky, ktoré potrebujete, zo zoznamu, ktorý sa otvorí do vášho dokumentu programu Word, a uložte tento dokument programu Word ako webovú stránku (vybratú z rozbaľovacieho zoznamu „.html“ pri ukladaní). Potom všetko, čo musíte urobiť, je otvoriť túto webovú stránku v akomkoľvek HTML editore (rovnako ako Notepad++) a uvidíte všetky digitálne kódy mnemotechnických pomôcok, ktoré potrebujete:

Metóda je trochu komplikovaná, ale ak chcete na svojej webovej stránke použiť nejaký vzácny špeciálny znak, bude to jednoduchšie ako hľadať na internete tabuľky, ako je tá, ktorá je zobrazená vyššie. Výsledný kód špeciálneho znaku budete musieť prilepiť na správne miesto a namiesto neho na webovej stránke prehliadač zobrazí znak, ktorý potrebujete (napríklad nezalomiteľnú medzeru).

Nedeliteľná medzera a mäkká pomlčka v príkladoch

Ako som už spomenul vyššie a ako môžete vidieť z tabuľky špeciálnych znakov uvedenej hneď vyššie, niektoré mnemotechnické pomôcky v Html dostali okrem digitálneho aj symbolické označenie pre ľahšie zapamätanie. Tie. Namiesto znaku hash „#“ (hash) sa slová používajú v symbolických variantoch. Napríklad tá istá medzera môže byť napísaná buď ako (digitálna mnemotechnická pomôcka) alebo ako (znak).

Ak pri písaní článkov potrebujete vložiť ampersand (&) alebo otvorenú hranatú zátvorku (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Teda ak píšete článok, v ktorom budete musieť do textu vložiť napríklad zobrazenie tagu< body>alebo stačí vložiť znamienko menšie ako (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Preto na vyriešenie podobného problému budete musieť vložiť nasledujúcu konštrukciu:

To isté platí pre zobrazenie kódu samotných mnemotechnických pomôcok, pretože začínajú znakom ampersand. Budete musieť vložiť kód do textu a nahradiť znak ampersand jeho náhradou (špeciálny znak):

Toto bude potrebné urobiť, aby ste sa dostali na stránku<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

S najväčšou pravdepodobnosťou použijete aj nezalomiteľnú medzeru, ktorá bude vyzerať ako bežná medzera na webovej stránke, ale prehliadač ju vôbec nebude považovať za medzeru a nebude na ňom vykonávať prevody(napríklad to bude vhodné pre frázy ako 1400 GB atď., ktoré by nebolo vhodné deliť cez rôzne riadky):

1400 GB.

Niekedy môže nastať opačná situácia, keď text obsahuje veľmi dlhé slová a chcete sa uistiť, že v prípade potreby prehliadač Tieto slová by som mohol zlomiť delením slov. Na tieto účely sa poskytuje špeciálny symbol „soft transfer“ -

Dlhé, dlhé slovo;

Keď bude potrebné prejsť na iný riadok, prehliadač použije spojovník namiesto mnemotechnického znaku mäkkého spojovníka a zvyšok slova odošle na ďalší riadok. Ak je dostatok miesta na umiestnenie celého tohto slova na jeden riadok, prehliadač nenakreslí žiadny riadok. Je to také jednoduché.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Mohlo by vás zaujímať

MailTo - čo to je a ako vytvoriť odkaz v Html na odoslanie e-mailu
Značky a atribúty nadpisov H1-H6, vodorovný riadok Hr, zalomenie riadka Br a odsek P podľa normy Html 4.01
Ako vložiť odkaz a obrázok (fotku) do HTML - IMG a A tagy
Čo je hypertextový značkovací jazyk Html a ako zobraziť zoznam všetkých značiek vo validátore W3C
Písmo (tvár, veľkosť a farba), blockquote a pred tagy – staršie formátovanie textu v čistom HTML (bez použitia CSS)
Ako sa nastavujú farby v Html a CSS kóde, výber odtieňov RGB v tabuľkách, výstup Yandex a iné programy
Direktívy komentárov a Doctype v kóde Html, ako aj koncept blokových a vložených prvkov (tagov)
Zoznamy v Html kóde - značky UL, OL, LI a DL