Speciální znaky html css. Použití bílých znaků k formátování HTML kódu, nezalomitelných mezer a dalších speciálních znaků (mnemotechnické prostředky)
Dobrý den, milí čtenáři tohoto blogu. O něco dříve jsme o tom již stihli mluvit a také jsme se v něm dozvěděli o designu. Dnes máme zase koncept bílého místa v HTML a také související formátování kódu při jeho psaní (pro pohodlí jeho následného čtení a vnímání).
No a vzhledem k tomu, že se dotkneme tématu nezlomitelné mezery a měkkého dělení slov, budeme muset zaměřit svou pozornost na tzv. speciální znaky neboli mnemotechnické pomůcky používané v jazyce Html, které vám umožní přidat webový kód sada dokumentů další znaky, jako je již zmíněný výše. Ale nejdřív.
Mezery a mezery v HTML
Než přejdu k problematice formátování textu pomocí značek speciálně k tomu určených (odstavce, nadpisy atd.), chci se pozastavit nad tím, jak jsou v jazyce HTML interpretovány mezery, zalomení řádků (Enter) a tabelování a jak se provedl text v okně prohlížeče při změně velikosti.
Pravda pro tento druh vizuální formátování(které nebudou na webové stránce vidět) nejčastěji se nepoužívají samotné mezery, ale tabulátory a zalomení řádků. Existuje takové pravidlo - když začnete psát vnořené HTML tag, Že odsazení pomocí tabulátorů(klávesa Tab na klávesnici) a když zavřete tuto značku, odstraňte odsazení (kombinace kláves Shift+Tab na klávesnici).
To musí být provedeno tak, aby úvodní a závěrečné značky byly na stejné vertikální úrovni (na stejném počtu karet od pravého okraje stránky ve vašem Html editoru, například Notepad++, o kterém jsem psal). Kromě toho vám doporučuji, abyste ihned po napsání úvodního prvku udělali několik zalomení řádků a okamžitě napsali závěrečný na stejné úrovni (počet tabulátorů), abyste na to nezapomněli později.
Tito. otevírací a uzavírací prvky by měly být vertikálně na stejné úrovni a vnitřní štítky by měly být posunuty o jeden znak tabulátoru a uzavírací a otevírací štítky by měly být opět umístěny na stejnou úroveň.
Pro jednoduchý web dokumentů se to může zdát přehnané, ale při vytváření více či méně složitých dokumentů ano kód bude mnohem přehlednější a čitelné díky velkému množství mezer a také bude mnohem snazší odhalit chyby díky symetrickému uspořádání značek.
Speciální znaky nebo mnemotechnické pomůcky v HTML kódu
Nyní si tedy povíme něco o tzv speciální znaky, o jehož snadném používání jsem informoval na začátku tohoto článku. Speciální znaky se také někdy nazývají mnemotechnické pomůcky nebo substituce. Jsou určeny k vyřešení problému, který se v hypertextovém značkovacím jazyce vyskytoval již dlouhou dobu v souvislosti s použitým kódováním.
Když píšete text z klávesnice, znaky vašeho jazyka jsou předem zakódovány zavedený algoritmus a poté se na webu zobrazí pomocí písem, která používáte (kde je najít a jak je nainstalovat) kvůli dekódování.
Existuje mnoho kódování, ale pro jazyk Html byla standardně přijata rozšířená verze kódování.
V tomto kódování textu bylo možné zaznamenat pouze 256 znaků - 128 z ASCII a dalších 128 pro ruská písmena. V důsledku toho vznikl problém s použitím na stránkách znaků, které nejsou zahrnuty v ASCII a nejsou součástí ruských písmen. Kódování Windows 1251 (CP1251). No, rozhodli jste se použít vlnovku nebo apostrof, ale takové možnosti jsou vlastní použitému jazyku HTML kódování není zastaveno.
Právě pro takové případy byly vynalezeny substituce nebo jinými slovy mnemotechnické pomůcky. Zpočátku zvláštní znaky měly digitální pohled evidence, ale pak u těch nejběžnějších byly přidány jejich dopisové protějšky, aby byly lépe zapamatovatelné.
V obecné porozumění, mnemotechnická pomůcka je znak, který začíná ampersandem „&“ a končí středníkem „;“. Právě z těchto důvodů prohlížeč Analýza HTML kód z něj extrahuje speciální znaky. Za ampersandem v číselném zástupném kódu musí bezprostředně následovat znak libry „#“, někdy nazývaný hash. A teprve potom následuje digitální kód požadovaného znaku v kódování Unicode.
V Unicode lze napsat více než 60 000 znaků – hlavní věc je, že mnemotechnický symbol, který potřebujete, je podporován fontem použitým na vašem webu. Existují písma, která podporují téměř všechny znaky Unicode, a existují možnosti pouze s určitou sadou znaků.
Úplný seznam speciálních postav bude prostě obrovský, ale nejpoužívanější mnemotechnické pomůcky můžete si půjčit například z této tabulky:
Symbol | HTML kód | Desetinný kód | Popis |
---|---|---|---|
nepřerušitelný prostor | |||
úzký prostor (na šířku jako písmeno n) | |||
široký prostor (em-šířka jako písmeno m) | |||
– | - | – | en pomlčka (en-dash) |
- | — | — | em pomlčka (em pomlčka) |
| - | | měkký přenos |
A | ́ | stres je umístěn za písmenem „stres“. | |
© | © | autorská práva | |
® | ® | ® | registrovaná ochranná známka |
™ | ™ | ™ | značka ochranné známky |
º | º | º | kopí Marsu |
ª | ª | ª | zrcadlo Venuše |
‰ | ‰ | ‰ | ppm |
π | π | π | pi (použijte Times New Roman) |
¦ | ¦ | ¦ | svislá tečkovaná čára |
§ | § | § | odstavec |
° | ° | ° | stupeň |
µ | µ | µ | mikro znamení |
¶ | ¶ | ¶ | značka odstavce |
… | … | … | elipsy |
‾ | ‾ | ‾ | překrytí |
´ | ´ | ´ | znak přízvuku |
№ | № | znak čísla | |
🔍 | 🔍 | Lupa (nakloněná doleva) | |
🔎 | 🔎 | Lupa (nakloněná doprava) | |
znaky aritmetických a matematických operací | |||
× | × | × | násobit |
÷ | ÷ | ÷ | rozdělit |
< | < | méně | |
> | > | > | více |
± | ± | ± | Plus mínus |
¹ | ¹ | ¹ | stupeň 1 |
² | ² | ² | stupeň 2 |
³ | ³ | ³ | stupeň 3 |
¬ | ¬ | ¬ | negace |
¼ | ¼ | ¼ | jedna čtvrtina |
½ | ½ | ½ | půlka |
¾ | ¾ | ¾ | tři čtvrtiny |
⁄ | ⁄ | ⁄ | desetinná čárka |
− | − | − | mínus |
≤ | ≤ | ≤ | menší nebo stejný |
≥ | ≥ | ≥ | více nebo stejné |
≈ | ≈ | ≈ | přibližně (téměř) stejné |
≠ | ≠ | ≠ | ne rovné |
≡ | ≡ | ≡ | identický |
√ | √ | √ | odmocnina (radikál) |
∞ | ∞ | ∞ | nekonečno |
∑ | ∑ | ∑ | sumační znak |
∏ | ∏ | ∏ | pracovní značka |
∂ | ∂ | ∂ | částečný diferenciál |
∫ | ∫ | ∫ | integrální |
∀ | ∀ | ∀ | pro všechny (viditelné pouze v případě, že je uvedeno tučně) |
∃ | ∃ | ∃ | existuje |
∅ | ∅ | ∅ | prázdná sada |
Ø | Ø | Ø | průměr |
∈ | ∈ | ∈ | patří |
∉ | ∉ | ∉ | nepatří |
∋ | ∋ | ∗ | obsahuje |
⊂ | ⊂ | ⊂ | je podmnožinou |
⊃ | ⊃ | ⊃ | je supermnožina |
⊄ | ⊄ | ⊄ | není podmnožinou |
⊆ | ⊆ | ⊆ | je podmnožina nebo rovno |
⊇ | ⊇ | ⊇ | je nadmnožina nebo se rovná |
⊕ | ⊕ | ⊕ | navíc v kruhu |
⊗ | ⊗ | ⊗ | znak násobení v kruhu |
⊥ | ⊥ | ⊥ | kolmý |
∠ | ∠ | ∠ | roh |
∧ | ∧ | ∧ | logické AND |
∨ | ∨ | ∨ | logické NEBO |
∩ | ∩ | ∩ | průsečík |
∪ | ∪ | ∪ | svaz |
znaky měny | |||
₽ | ₽ | Rubl. Znak rublu musí být použit ve spojení s číslem. Standard Unicode 7.0. Pokud obrázek nevidíte, aktualizujte svá písma Unicode. | |
€ | € | € | Euro |
¢ | ¢ | ¢ | Cent |
£ | £ | £ | Lb |
¤ | ¤ | ¤ | Znak měny |
¥ | ¥ | ¥ | Yen a Yuan znamení |
ƒ | ƒ | ƒ | Znamení Florin |
markery | |||
. | jednoduchá značka | ||
○ | ○ | kruh | |
· | · | · | střed |
† | † | přejít | |
‡ | ‡ | dvojitý kříž | |
♠ | ♠ | ♠ | vrcholy |
♣ | ♣ | ♣ | kluby |
srdce | |||
♦ | ♦ | ♦ | diamanty |
◊ | ◊ | ◊ | kosočtverec |
✏ | ✏ | tužka | |
✎ | ✎ | tužka | |
✐ | ✐ | tužka | |
✍ | ✍ | ruka | |
citáty | |||
" | " | " | dvojitá citace |
& | & | & | ampersand |
« | « | « | levá typografická uvozovka (rybí uvozovka) |
» | » | » | pravá typografická uvozovka (rybí uvozovka) |
‹ | ‹ | otevření jednoho rohu nabídky | |
› | › | uzavření nabídky jednoho rohu | |
′ | ′ | ′ | prvočíslo (minuty, stopy) |
″ | ″ | ″ | dvojité prvočíslo (sekundy, palce) |
‘ | ‘ | ‘ | jednoduchá uvozovka vlevo nahoře |
’ | ’ | ’ | jeden citát vpravo nahoře |
‚ | ‚ | ‚ | jediná citace vpravo dole |
“ | “ | “ | citace-noha vlevo |
” | ” | ” | citovat nohu vpravo nahoře |
„ | „ | „ | citace noha vpravo dole |
❛ | ❛ | jedna anglická úvodní uvozovka | |
❜ | ❜ | jediná anglická závěrečná uvozovka | |
❝ | ❝ | otevírání dvojitých uvozovek | |
❞ | ❞ | uzavírací dvojité uvozovky | |
šipky | |||
← | ← | ← | šipka vlevo |
šipka nahoru | |||
→ | → | → | šipka vpravo |
↓ | ↓ | ↓ | šipka dolů |
↔ | ↔ | ↔ | šipka doleva a doprava |
↕ | ↕ | šipka nahoru a dolů | |
↵ | ↵ | ↵ | návrat vozíku |
⇐ | ⇐ | ⇐ | dvojitá šipka doleva |
⇑ | ⇑ | ⇑ | dvojitá šipka nahoru |
⇒ | ⇒ | ⇒ | dvojitá šipka vpravo |
⇓ | ⇓ | ⇓ | dvojitá šipka dolů |
⇔ | ⇔ | ⇔ | dvojitá šipka doleva a doprava |
⇕ | ⇕ | dvojitá šipka nahoru a dolů | |
▲ | ▲ | trojúhelník šipka nahoru | |
▼ | ▼ | trojúhelník šipka dolů | |
trojúhelníková šipka vpravo | |||
◄ | ◄ | trojúhelník šipka vlevo | |
hvězdy, sněhové vločky | |||
☃ | ☃ | Sněhulák | |
❄ | ❄ | Sněhová vločka | |
❅ | ❅ | Sněhová vločka sevřená jetele | |
❆ | ❆ | Tlustá sněhová vločka s ostrým úhlem | |
★ | ★ | Stínovaná hvězda | |
☆ | ☆ | Prázdná hvězda | |
✪ | ✪ | Nevyplněná hvězda v plném kruhu | |
✫ | ✫ | Vyplněná hvězda s otevřeným kruhem uvnitř | |
✯ | ✯ | Rotující hvězda | |
⚝ | ⚝ | Nakreslená bílá hvězda | |
⚪ | ⚪ | Střední otevřený kruh | |
⚫ | ⚫ | Střední vyplněný kruh | |
⚹ | ⚹ | Sextile (typ sněhové vločky) | |
✵ | ✵ | Osmicípá rotující hvězda | |
❉ | ❉ | Hvězda s kulovitými konci | |
❋ | ❋ | Odvážná osmicípá hvězdicová vrtule ve tvaru kapky | |
✺ | ✺ | Šestnácticípá hvězdička | |
✹ | ✹ | Dvanácticípá hvězda | |
✸ | ✸ | Tučná osmicípá rovná plná hvězda | |
✶ | ✶ | Šesticípá plná hvězda | |
✷ | ✷ | Osmicípá rovná plná hvězda | |
✴ | ✴ | Osmicípá hvězda | |
✳ | ✳ | Osmicípá hvězda | |
✲ | ✲ | Hvězda s prázdným středem | |
✱ | ✱ | Tlustá hvězda | |
✧ | ✧ | Špičatá čtyřcípá otevřená hvězda | |
✦ | ✦ | Špičatá čtyřcípá plná hvězda | |
⍟ | ⍟ | Hvězda v kruhu | |
⊛ | ⊛ | Sněhová vločka v kruhu | |
hodiny, čas | |||
⏰ | ⏰ | Hodinky | |
⌚ | ⌚ | Hodinky | |
⌛ | ⌛ | Přesýpací hodiny | |
⏳ | ⏳ | Přesýpací hodiny |
Je tam docela zajímavé způsob, jak získat kód HTML mnemotechnická pomůcka pro znamení, které potřebujete. K tomu bude stačit otevřít Microsoft editor Slovo, tvoř nový dokument a vybrat si z horní menu"Vložit" - "Symbol" (používám verzi 2003, takže nevím, jak provést podobnou operaci v pozdějších verzích).
V okně, které se otevře, musíte vybrat písmo, například Times New Roman (nebo jakékoli jiné, které bude zjevně přítomno na většině počítačů návštěvníků vašeho webu - například Courier nebo Arial).
Přidejte ze seznamu, který se otevře, k vašemu Word dokument všechny speciální znaky, které potřebujete, a uložte tento dokument aplikace Word jako webovou stránku (při ukládání vyberte z rozevíracího seznamu „.html“). Pak už stačí jen otevřít tuto webovou stránku v libovolném HTML editor(stejný Notepad++ udělá) a uvidíte vše digitální kódy mnemotechnické pomůcky, které potřebujete:
Metoda je trochu komplikovaná, ale pokud chcete na své webové stránce použít nějaký vzácný speciální znak, bude to jednodušší než hledat na internetu tabulky, jako je ta, která je zobrazena výše. Výsledný kód speciálního znaku budete muset vložit do Správné místo a místo něj na webové stránce prohlížeč zobrazí znak, který potřebujete (například nezlomitelnou mezeru).
Nedělitelná mezera a měkká pomlčka v příkladech
Jak jsem již uvedl výše a jak můžete vidět z tabulky speciálních znaků uvedené výše, některé mnemotechnické pomůcky v Html obdržely kromě digitálních také symbolické označení pro jejich více jednoduché zapamatování. Tito. Místo znaku hash „#“ (hash) jsou slova použita v symbolických variantách. Stejná nezlomitelná mezera může být například zapsána buď jako (digitální mnemotechnická pomůcka) nebo jako (znak).
Pokud při psaní článků potřebujete vložit ampersand (&) nebo otevřenou lomenou závorku (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.
Tedy pokud píšete článek, ve kterém budete potřebovat do textu vložit např. zobrazení tagu< body>nebo stačí vložit znaménko menší než (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.
K vyřešení podobného problému tedy budete muset vložit následující konstrukci:
Totéž platí pro zobrazení kódu mnemotechnických pomůcek, protože začínají znakem ampersand. Budete muset vložit kód do textu a nahradit znak ampersand jeho náhradou (speciální znak):
To bude nutné udělat, abyste se dostali na stránku<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.
S největší pravděpodobností také využijete nezlomitelnou mezeru, která bude vypadat jako běžná mezera na webové stránce, ale prohlížeč s ní nebude vůbec zacházet jako s mezerou a nebude na něm provádět převody(toto bude například vhodné pro fráze jako 1400 GB atd., které by nebylo vhodné dělit na různé řádky):
1400 GB.
Někdy může nastat opačná situace, kdy text obsahuje velmi dlouhá slova a chcete se ujistit, že v případě potřeby prohlížeč Mohl bych tato slova přerušit dělením slov. Pro tyto účely je poskytován speciální symbol „soft transfer“ -
Dlouhé, dlouhé slovo;
Když bude nutné přejít na jiný řádek, prohlížeč použije pomlčku místo mnemotechnické pomůcky měkké pomlčky a odešle zbytek slova na další řádek. Pokud je dostatek místa pro umístění celého tohoto slova na jeden řádek, prohlížeč nenakreslí žádný řádek. Je to tak jednoduché.
Hodně štěstí! Brzy se uvidíme na stránkách blogu
Na další videa se můžete podívat na");">
![](https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/video/image/zhidkost-dorogo.jpg)
Mohlo by vás to zajímat
MailTo - co to je a jak vytvořit odkaz v Html pro odeslání e-mailu
Tagy a atributy nadpisů H1-H6, vodorovný řádek Hr, zalomení řádku Br a odstavec P podle standardu Html 4.01
Jak vložit odkaz a obrázek (fotku) do HTML - IMG a A tagy
Ne všechny znaky, které vidíte na klávesnici, lze použít v textu dokumentu HTML. To je však logické. Pokud každá značka začíná znakem (<) и заканчивается символом (>), pak je celkem logické, že tyto znaky nelze specifikovat uvnitř běžného textu. Tyto znaky mají v dokumentech HTML zvláštní význam. Když je prohlížeč uvidí, myslí si, že jde o značky HTML, a snaží se je jako takové interpretovat.
Pro vyřešení problému přidávání znaků, které je zakázáno vkládat do textu HTML dokumentu, byla vyvinuta sada speciálních znaků - sekvencí, které nahrazují znaky, které je zakázáno vkládat z klávesnice. Znaky, které nejsou na vaší klávesnici, lze také nahradit speciálními znaky. Každá taková sekvence (mnemotechnický odkaz) musí začínat znakem ampersand (&) a končit středníkem (;). Mezi (&) a (;) můžete zadat:
- jméno speciálního znaku (&name;);
- číselný kód, který se zadává za znakem (), to znamená, že když zadáváte speciální znak zadáním jeho číselného kódu, musíte použít následující záznam: (&code;);
Chcete-li například zobrazit znaménko menší než (<) мы должны написать: < (název symbolu) popř &60;(číselný kód v desítkové soustavě) popř &x0003C;(číselný kód v šestnáctkové soustavě).
Nepřerušitelný prostor
Hlavním účelem nepřetržitého prostoru () (z nezlomného prostoru) — oddělte slova, ale v tomto bodě zakažte nový řádek. Protože velikost okna prohlížeče není konstantní, nový řádek v odstavci se objeví automaticky. V tomto případě prohlížeč přeruší řádek na jakémkoli místě, kde je mezera nebo pomlčka. Podle pravidel pravopisu existují jazykové struktury, které nelze porušit. Mezi konstrukce s pevným prostorem patří například:
- příjmení s iniciálami;
- em pomlčky, před kterými je slovo;
- jednoslabičná slova následovaná slovem;
- čísla následovaná jednotkami měření.
- 15 m/s
- 100 km/h
Jak již víte, v HTML je několik po sobě jdoucích pravidelných mezer nahrazeno jednou mezerou. Pokud v textu napíšete 10 mezer, prohlížeč jich 9 odstraní. Chcete-li do textu přidat skutečné mezery, můžete použít pevnou mezeru () .
Citáty.
V tisku existují tři typy uvozovek: dvojité rohové uvozovky nebo uvozovky „rybí kost“ („ “), typografické uvozovky („ “) a ručně psané uvozovky „nohy“ („ “). Při práci s programovými kódy budete používat dvojité rovné uvozovky (" ") a jednoduché uvozovky (" ").
Podle tradice jsou hlavním typem uvozovek v ruském jazyce „vánoční stromky“. V HTML odpovídají vánoční stromky symbolům «
A »
. V mnoha publikacích se místo rybích kostí používají také typografické uvozovky a dvojité rovné uvozovky.
Levé a pravé typografické uvozovky odpovídají symbolům “
A ”
podle toho a levá dolní uvozovka - „
.
Přímé dvojité uvozovky odpovídají speciálnímu znaku "
.
Použití speciálních znaků uvozovek je znázorněno v následujícím příkladu:
Příklad: Použití nabídek
Spojovník a pomlčka.
V tisku existují tři velmi podobné znaky: em pomlčka, en pomlčka a spojovník. Z nich je na klávesnici počítače pouze jeden – pomlčka. To se obvykle používá ve všech případech, kdy je třeba do textu vložit pomlčku nebo pomlčku. Je však třeba dodržovat určitá pravidla interpunkce týkající se používání těchto znaků.
Pomlčka (-) se tedy používá pouze ve slovech nebo mezi čísly. Em pomlčka (—) je umístěna mezi slovy ve větě a je od těchto slov oddělena mezerami. Pomlčka em odpovídá mnemotechnickému odkazu —
. Pomlčka (-) se používá mezi čísly bez písmen nebo mezi slovy, která jsou velkými písmeny, a používá se také jako znaménko mínus v matematických vzorcích. Mezi pomlčkou a slovy není mezera. Koncová pomlčka odpovídá mnemotechnickému odkazu -
.
Použití pomlčky a pomlčky je znázorněno v následujícím příkladu:
Příklad: Speciální znaky - a -
- Zkus to sám "
Čas jsou peníze...
Otevření webové stránky trvá příliš dlouho.
Mělo by se načíst za 2-4 sekundy.
Čas jsou peníze...
Symbol | Popis | Mnemotechnické jméno | Číselný kód |
---|---|---|---|
nepřerušitelný prostor | < | méně než | < |
> | více než | > | > |
& | ampersand | & | & |
" | rovnou dvojitou citaci | " | " |
" | apostrof | " | " |
« | levý dvojitý roh citace | « | « |
» | pravý dvojitý roh citace | » | » |
‘ | levý jediný citát | ‘ | ‘ |
’ | správná jediná citace | ’ | ’ |
‚ | spodní jednoduchá citace | ‚ | ‚ |
“ | levá dvojitá uvozovka | “ | “ |
” | pravá dvojitá citace | ” | ” |
„ | spodní dvojitá uvozovka | „ | „ |
€ | euro | € | € |
autorská práva | © | ||
® | registrovaná ochranná známka | ® | ® |
Typy speciálních znaků
Na běžné klávesnici nenajdete většinu matematických, technických, geometrických a dalších speciálních znaků.
Chcete-li použít takové symboly na stránce HTML, můžete použít jejich odpovídající mnemotechnické názvy.
Následující příklad ukazuje, jak může být stejný symbol zobrazen pomocí různých kódů.
Dobrý den, milí čtenáři tohoto blogu! Ti, kteří se s tím alespoň povrchně seznámili, už pravděpodobně vzali na vědomí, i když obecně. To znamená, že mají představu o tom, jaké HTML symboly se obecně používají v kódu dokumentu.
V dnešním článku se pokusíme přijít na to, co je mezera v HTML a v jakých případech ji lze použít prázdné znaky při formátování samotného kódu pro snadné čtení. Zjistíme, kdy je potřeba použít nezlomitelnou mezeru, a také se seznámíme s dalšími speciálními znaky (nebo, jak se jim také říká, mnemotechnickými pomůckami).
Ve skutečnosti bych vám doporučil, abyste téma používání různých speciálních znaků neignorovali, protože jde o důležitou součást, která vám umožní dokončit studium hypertextového značkovacího jazyka. Obecně platí, že informace uvedené v této publikaci rozhodně nebudou nadbytečné. No a teď k věci.
Mezery a mezery v HTML
Nejprve je třeba udělat důležitou poznámku. Na klávesnici počítače jsou speciální klávesy, které umožňují oddělovat text (více o tom níže). Pouze široký mezerník však poskytuje oddělení mezi slovy nejen v editoru, ale také v okně prohlížeče. Při přerušení čar a odsazení od hran dochází k nuancím.
Jak víte, zobrazení určitých prvků ve webovém prohlížeči je určeno značkami. Pro formátování textu se používá dobře známý , který je založen na blokech. To znamená, že jeho obsah je umístěn po celé dostupné šířce.
Na zalomit řádky v odstavci P, musíte použít jednu značku BR, se kterou to můžete udělat. Řekněme, že potřebujeme do textu vložit řádky z básně, kterou píšeme v textovém editoru:
Navzdory skutečnosti, že řádky verše jsou umístěny správně a pomlčky jsou vytvořeny na správných místech, vše bude v prohlížeči vypadat jinak:
Chcete-li dosáhnout stejného zobrazení v okně webového prohlížeče, musíte na každém zalomení řádku napsat BR:
Nyní jsme úkol splnili a poetické řádky se v prohlížeči zobrazí zcela správně:
Tím jsou dokončeny nezbytné konce řádků. Další funkcí, kterou je zde třeba poznamenat, je, že více mezer po sobě jdoucích webový prohlížeč zobrazuje jako jeden. Můžete si to ověřit, pokud se ve stejném editoru pokusíte vložit mezi dvě slova ne jednu, ale několik mezer a kliknutím na tlačítko „Uložit“ se na výsledek podíváte v prohlížeči.
Mezera, tabulátor a zalomení řádku
V podstatě s těmito prázdné znaky Seznámíme se, jakmile začneme pracovat s textem v editoru a naformátujeme jej do požadované podoby. Pro realizaci takového úkolu existují speciální klíče, z nichž každý odpovídá svému vlastnímu znaku mezery:
- Mezerník je nejširší klávesa na klávesnici počítače (bez popisku);
- Tab - klávesa vlevo s nápisem „Tab“ a dvěma šipkami směřujícími různými směry;
- Zalomení řádku - klávesa "Enter".
Jak jsem však uvedl výše, konečný požadovaný výsledek získáme nejen v textovém editoru, ale také v prohlížeči, pouze když použijeme první klíč. Všechny tři klávesy (včetně tabulátoru a zalomení řádku jsou užitečné při formátování kódu HTML. Řekněme, že takto vypadá fragment kódu v programu NotePad++ (o tomto editoru je mnoho informací) při zobrazení všech bílých znaků:
Získáváme kód, který je snadno čitelný a srozumitelný díky mezerám. Oranžové šipky označují odsazení vytvořené pomocí klávesy Tab a symboly CR a LF označují zalomení řádků vytvořené pomocí klávesy Enter.
Jsou zobrazeny kontejnery vnořené do sebe a otevírací a uzavírací značky jsou jasně viditelné. V této podobě lze tento kód snadno upravovat. Nyní jej porovnejte se stejným kódem, který nemá takové rozdělení textu:
Stejným způsobem můžete pomocí bílých znaků psát pravidla CSS, která budou vizuálně vypadat jasně a srozumitelně:
Po převedení všech stylů do společného jmenovatele a úplném dokončení úprav souboru stylů můžete úpravy provést odstraněním všech mezer z kódu. To je nutné zvýšit, což je velmi důležité při propagaci zdroje.
Speciální znaky (nebo mnemotechnické pomůcky) v kódu HTML
Nyní se podívejme na případy, kdy je nutné použít speciální znaky, které jsem zmínil na začátku článku. Speciální znaky HTML, někdy nazývané mnemotechnické pomůcky, byly zavedeny k vyřešení dlouhodobého problému s kódováním, který vznikl v hypertextovém značkovacím jazyce.
Při psaní textu na klávesnici jsou zakódovány znaky jazyka, který používáte. Ve webovém prohlížeči se zadaný text zobrazí pomocí písem, které jste vybrali v důsledku operace zpětného dekódování.
Faktem je, že existuje mnoho takových kódování, nyní nemáme za cíl je podrobně analyzovat. Jen u každého z nich mohou chybět určité symboly, které je však potřeba zobrazit. Řekněme, že máte nutkání napsat jednoduché uvozovky nebo diakritiku, ale tyto ikony prostě nejsou součástí sady.
Aby se tento problém odstranil, byl zaveden systém speciálních symbolů, který zahrnuje obrovské množství různých mnemotechnických pomůcek. Všechny začínají ampersandem "&" a obvykle končí středníkem ";". Nejprve měl každý speciální znak svůj vlastní digitální kód. Například pro nezalomitelnou mezeru, kterou budeme podrobněji zvažovat níže, bude platit následující záznam:
Ale po nějaké době byly nejběžnějším symbolům přiřazeny písmenné analogy (mnemotechnické prostředky), aby byly snadněji zapamatovatelné. Řekněme, že pro stejný pevný prostor to vypadá takto:
V důsledku toho prohlížeč zobrazí odpovídající symbol. Seznam mnemotechnických pomůcek je velmi obsáhlý, nejčastěji používané speciální znaky v HTML můžete zjistit z následující tabulky:
symbol | kód | mnemotechnické pomůcky | popis |
---|---|---|---|
nepřerušitelný prostor | |||
úzký prostor (na šířku jako písmeno n) | |||
široký prostor (em-šířka jako písmeno m) | |||
– | - | – | en pomlčka (en-dash) |
- | — | — | em pomlčka (em pomlčka) |
| - | | měkký přenos |
A | ́ | stres je umístěn za "stresovým" písmenem | |
© | © | autorská práva | |
® | ® | ® | registrovaná ochranná známka |
™ | ™ | ™ | značka ochranné známky |
º | º | º | kopí Marsu |
ª | ª | ª | zrcadlo Venuše |
‰ | ‰ | ‰ | ppm |
π | π | π | pi (použijte Times New Roman) |
¦ | ¦ | ¦ | svislá tečkovaná čára |
§ | § | § | odstavec |
° | ° | ° | stupeň |
µ | µ | µ | mikro znamení |
¶ | ¶ | ¶ | značka odstavce |
… | … | … | elipsy |
‾ | ‾ | ‾ | překrytí |
´ | ´ | ´ | znak přízvuku |
№ | № | znak čísla | |
🔍 | 🔍 | Lupa (nakloněná doleva) | |
🔎 | 🔎 | Lupa (nakloněná doprava) | |
znaky aritmetických a matematických operací | |||
× | × | × | násobit |
÷ | ÷ | ÷ | rozdělit |
< | < | méně | |
> | > | > | více |
± | ± | ± | Plus mínus |
¹ | ¹ | ¹ | stupeň 1 |
² | ² | ² | stupeň 2 |
³ | ³ | ³ | stupeň 3 |
¬ | ¬ | ¬ | negace |
¼ | ¼ | ¼ | jedna čtvrtina |
½ | ½ | ½ | půlka |
¾ | ¾ | ¾ | tři čtvrtiny |
⁄ | ⁄ | ⁄ | desetinná čárka |
− | − | − | mínus |
≤ | ≤ | ≤ | menší nebo stejný |
≥ | ≥ | ≥ | více nebo stejné |
≈ | ≈ | ≈ | přibližně (téměř) stejné |
≠ | ≠ | ≠ | ne rovné |
≡ | ≡ | ≡ | identický |
√ | √ | √ | odmocnina (radikál) |
∞ | ∞ | ∞ | nekonečno |
∑ | ∑ | ∑ | sumační znak |
∏ | ∏ | ∏ | pracovní značka |
∂ | ∂ | ∂ | částečný diferenciál |
∫ | ∫ | ∫ | integrální |
∀ | ∀ | ∀ | pro všechny (viditelné pouze v případě, že je uvedeno tučně) |
∃ | ∃ | ∃ | existuje |
∅ | ∅ | ∅ | prázdná sada |
Ø | Ø | Ø | průměr |
∈ | ∈ | ∈ | patří |
∉ | ∉ | ∉ | nepatří |
∋ | ∋ | ∗ | obsahuje |
⊂ | ⊂ | ⊂ | je podmnožinou |
⊃ | ⊃ | ⊃ | je supermnožina |
⊄ | ⊄ | ⊄ | není podmnožinou |
⊆ | ⊆ | ⊆ | je podmnožina nebo rovno |
⊇ | ⊇ | ⊇ | je nadmnožina nebo se rovná |
⊕ | ⊕ | ⊕ | navíc v kruhu |
⊗ | ⊗ | ⊗ | znak násobení v kruhu |
⊥ | ⊥ | ⊥ | kolmý |
∠ | ∠ | ∠ | roh |
∧ | ∧ | ∧ | logické AND |
∨ | ∨ | ∨ | logické NEBO |
∩ | ∩ | ∩ | průsečík |
∪ | ∪ | ∪ | svaz |
znaky měny | |||
€ | € | € | Euro |
¢ | ¢ | ¢ | Cent |
£ | £ | £ | Lb |
¤ | ¤t; | ¤ | Znak měny |
¥ | ¥ | ¥ | Yen a Yuan znamení |
ƒ | ƒ | ƒ | Znamení Florin |
markery | |||
. | jednoduchá značka | ||
○ | ○ | kruh | |
· | · | · | střed |
† | † | přejít | |
‡ | ‡ | dvojitý kříž | |
♠ | ♠ | ♠ | vrcholy |
♣ | ♣ | ♣ | kluby |
srdce | |||
♦ | ♦ | ♦ | diamanty |
◊ | ◊ | ◊ | kosočtverec |
✏ | ✏ | tužka | |
✎ | ✎ | tužka | |
✐ | ✐ | tužka | |
✍ | ✍ | ruka | |
citáty | |||
" | " | " | dvojitá citace |
& | & | & | ampersand |
« | « | « | levá typografická uvozovka (rybí uvozovka) |
» | » | » | pravá typografická uvozovka (rybí uvozovka) |
‹ | ‹ | otevření jednoho rohu nabídky | |
› | › | uzavření nabídky jednoho rohu | |
′ | ′ | ′ | prvočíslo (minuty, stopy) |
″ | ″ | ″ | dvojité prvočíslo (sekundy, palce) |
‘ | ‘ | ‘ | jednoduchá uvozovka vlevo nahoře |
’ | ’ | ’ | jeden citát vpravo nahoře |
‚ | ‚ | ‚ | jediná citace vpravo dole |
“ | “ | “ | citace-noha vlevo |
” | ” | ” | citovat nohu vpravo nahoře |
„ | „ | „ | citace noha vpravo dole |
❛ | ❛ | jedna anglická úvodní uvozovka | |
❜ | ❜ | jediná anglická závěrečná uvozovka | |
❝ | ❝ | otevírání dvojitých uvozovek | |
❞ | ❞ | uzavírací dvojité uvozovky | |
šipky | |||
← | ← | ← | šipka vlevo |
šipka nahoru | |||
→ | → | → | šipka vpravo |
↓ | ↓ | ↓ | šipka dolů |
↔ | ↔ | ↔ | šipka doleva a doprava |
↕ | ↕ | šipka nahoru a dolů | |
↵ | ↵ | ↵ | návrat vozíku |
⇐ | ⇐ | ⇐ | dvojitá šipka doleva |
⇑ | ⇑ | ⇑ | dvojitá šipka nahoru |
⇒ | ⇒ | ⇒ | dvojitá šipka vpravo |
⇓ | ⇓ | ⇓ | dvojitá šipka dolů |
⇔ | ⇔ | ⇔ | dvojitá šipka doleva a doprava |
⇕ | ⇕ | dvojitá šipka nahoru a dolů | |
▲ | ▲ | trojúhelník šipka nahoru | |
▼ | ▼ | trojúhelník šipka dolů | |
trojúhelníková šipka vpravo | |||
◄ | ◄ | trojúhelník šipka vlevo | |
hvězdy, sněhové vločky | |||
☃ | ☃ | Sněhulák | |
❄ | ❄ | Sněhová vločka | |
❅ | ❅ | Sněhová vločka sevřená jetele | |
❆ | ❆ | Tlustá sněhová vločka s ostrým úhlem | |
★ | ★ | Stínovaná hvězda | |
☆ | ☆ | Prázdná hvězda | |
✪ | ✪ | Nevyplněná hvězda v plném kruhu | |
✫ | ✫ | Vyplněná hvězda s otevřeným kruhem uvnitř | |
✯ | ✯ | Rotující hvězda | |
⚝ | ⚝ | Nakreslená bílá hvězda | |
⚪ | ⚪ | Střední otevřený kruh | |
⚫ | ⚫ | Střední vyplněný kruh | |
⚹ | ⚹ | Sextile (typ sněhové vločky) | |
✵ | ✵ | Osmicípá rotující hvězda | |
❉ | ❉ | Hvězda s kulovitými konci | |
❋ | ❋ | Odvážná osmicípá hvězdicová vrtule ve tvaru kapky | |
✺ | ✺ | Šestnácticípá hvězdička | |
✹ | ✹ | Dvanácticípá hvězda | |
✸ | ✸ | Tučná osmicípá rovná plná hvězda | |
✶ | ✶ | Šesticípá plná hvězda | |
✷ | ✷ | Osmicípá rovná plná hvězda | |
✴ | ✴ | Osmicípá hvězda | |
✳ | ✳ | Osmicípá hvězda | |
✲ | ✲ | Hvězda s prázdným středem | |
✱ | ✱ | Tlustá hvězda | |
✧ | ✧ | Špičatá čtyřcípá otevřená hvězda | |
✦ | ✦ | Špičatá čtyřcípá plná hvězda | |
⍟ | ⍟ | Hvězda v kruhu | |
⊛ | ⊛ | Sněhová vločka v kruhu | |
hodiny, čas | |||
⏰ | ⏰ | Hodinky | |
⌚ | ⌚ | Hodinky | |
⌛ | ⌛ | Přesýpací hodiny | |
⏳ | ⏳ | Přesýpací hodiny |
Případy použití některých speciálních znaků, včetně pevné mezery a měkké pomlčky
Pokud jste si již tabulku trochu prostudovali, obdrželi jste potvrzení toho, co jsem řekl výše, že k zobrazení všech speciálních znaků se používá digitální kód () nebo jeho abecední analog (symbolická mnemotechnická pomůcka), kde místo sady hash píší se značky a čísla, písmena ().
Nyní se podívejme, kdy tyto kódy použít. Řekněme, že v článku potřebujete uvést nějakou značku HTML pro informační účely, např.
Proto ze stejné HTML tabulky speciálních znaků vezmeme odpovídající kódy a celý záznam bude vypadat takto:
Kromě toho, aby se v prohlížeči nezobrazoval samotný znak ampersand, ale jeho označení v formulář , musíte přidat jeho kód z tabulky:
zápatí
Poté prohlížeč zobrazí přesně záznam mnemotechnických pomůcek, které je třeba použít pro zobrazení značky FOOTER. Je to trochu matoucí, ale na této stránce si můžete tento aspekt procvičit zadáním mnemotechnických pomůcek pro odpovídající znaky do pole „HTML“ a pomocí tlačítka „Spustit“ a v oblasti „Výsledek“ získáte výsledek jejich zobrazení v prohlížeč:
Upozorňuji, že jsem zajistil zalomení textu pomocí již zmíněného BR tagu tak, aby se samotné znaky nezobrazovaly v jednom řádku, ale pro pohodlí ve sloupci.
Pokračuj. Někdy se v textu objevují kombinace, které je nežádoucí oddělovat do různých řádků. Řekněme „1000 rublů“. Logické by bylo buď nechat na horním řádku, nebo pokud není dostatek místa, přesunout celou strukturu o řádek níže.
To platí zejména v případě, že uživatelé používají zařízení s různou šířkou obrazovky, včetně mobilních. Ve skutečnosti v tomto případě webový prohlížeč formátuje text a přizpůsobuje se novým podmínkám. A pokud text vypadá správně na standardních velikostech monitorů, pak pokud se změní, může se změnit vše.
Pro tyto případy se poskytuje Nerozdělitelný prostor HTML, o kterém jsem se již zmínil. Dovolte mi připomenout, že v tomto případě je kód prostoru následující:
A musí být vložen mezi dvě sady znaků, které je třeba propojit:
1000 rublů.
Nyní je prohlížeč za žádných okolností neoddělí, i když je ke správnému zobrazení vyžadováno formátování textu.
Nastává i situace, kdy se velmi dlouhé slovo nevejde do volného prostoru a potřebujete jeho část přesunout. Jak mohu v tomto případě v případě potřeby předdefinovat nový řádek? Pro toto existuje speciální znak měkké pomlčky-, které je třeba umístit na místo, kde je třeba slovo zlomit:
Dlouhé dlouhé dlouhé dlouhé dlouhé slovo
Pokud nastane situace, kdy je potřeba slovo rozdělit, pak se v místě mnemotechnické pomůcky měkkého spojovníku vytvoří mezera, kde se objeví spojovník (pomlčka) a zbytek slova se objeví na dalším řádku níže.
Opět se však bude hodit vidět to celé včetně příkladů kontinuálního a měkkého přenosu v praxi:
V okně tohoto editoru můžete změnit velikost zobrazovacího pole „Výsledek“ tak, že uchopíte okraj této oblasti levým tlačítkem myši a bez uvolnění jej přetáhnete doleva, abyste zkrátili šířku. Pak nastává reálná situace, kdy prohlížeč začne obsah přeformátovat, aby jej správně zobrazoval.
A přenos je proveden, což bylo zajištěno v příkladech, které jsem popsal. Vy sami však můžete posunout zobrazovací okno, rozšířit ho a zúžit a vizuálně to ověřit.