Použití bílých znaků k formátování HTML kódu, nezalomitelných mezer a dalších speciálních znaků (mnemotechnických pomůcek). Oddělování řádků, mezery a tabulátory v HTML dokumentech Html karta
Značka určuje znak tabulátoru v textu. Je to podobné jako při použití escape sekvence /t.
1 2 3\t\t\t4
Zobrazeno:
1 2 3 4
Vzdálenost, o kterou se čára posune, když se do ní vloží znak tabulátoru, lze nastavit libovolně. K tomu slouží atribut TABSTOPS tagu.
Značka není standardní HTML značka. Byl přidán do značek Flash markup, aby pomohl formátovat text konzistentním způsobem.
Štítek...
Značka je zodpovědná za vlastnosti formátování textu, jako jsou okraje, odsazení a posuny řádků. Lze v něm zadat následující atributy:
LEVÝ OKRAJ. Velikost levého okraje v bodech. Analog je vlastnost leftmargin třídy TextFormat.
RIGHT MARGIN. Hodnota pravého okraje v bodech.Analogový je vlastnost rightmargin třídy TextFormat.
ODRÁŽKA. Odsazení prvního řádku odstavce v bodech. Mezi vlastnostmi třídy TextFormat je podobná vlastnosti indent.
BLOCKINDENT.
Odsazení odstavce textu vlevo v bodech. Analogová - vlastnost blockIndent
třída TextFormat.
VEDOUCÍ. Vzdálenost mezi čarami v bodech. Podobná vlastnost třídy TextFormat je vedoucí.
STOPKY. Atribut určuje, jaké posunutí čáry v bodech způsobí každý znak tabulátoru v sekvenci. Jeho hodnota je seznam čísel určujících vzdálenosti, o které se čára posune do okna, pokud je napsáno 1, 2, 3, ... n znaků tabulátoru za sebou. Analogem atributu TABSTOPS je vlastnost tabStops třídy TextFormat.
0din tabR> Dvě kartyR>
pole.html=pole.border=pole.multiline=true;
pole.htmlText="
Tři Tabarové>
Značka není standardní HTML značka. Byla zavedena proto, že možnost označit text pomocí značek je podobná použití vlastností třídy Text Format.
Štítek...
Štítek navržený pro třídní aplikaci CSS styling ve vztahu k libovolnému fragmentu textu.
Název třídy je uveden v atributu CLASS.
This.createTextField("pól", 0, 150, 150, 200, 90);
pole.autoSize = pole.border=pole.multiline=true;
// Vytvořte tři styly třídy definující č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(zelený_text+červený_text+modrý_text);
pole.styleSheet=style;
// Zobrazení textu s vytvořenými styly
pole.text = " 3zelený text
Červený text
Modrý text ";
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 ke kódu webový dokument mnoho dalších symbolů, 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ího formátování (které na webové stránce nebude vidět) se nejčastěji nepoužívají samotné mezery, ale spíše znaky tabulátoru a zalomení řádku. 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 radím, abyste ihned po napsání úvodního prvku udělali několik zalomení řádku a okamžitě napsali závěrečný na stejné úrovni (počet tabulátorů), abyste to nezapomněli udělat později.
Tito. otevírací a zaví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í prvky by měly být umístěny opět na stejné úrovni.
U jednoduchých webových dokumentů se to může zdát přehnané, ale při vytváření více či méně složitých 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
Pojďme si tedy nyní povědět něco o tzv. speciálních znacích, jejichž snadnost použití jsem avizoval 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 na klávesnici, znaky vašeho jazyka jsou zakódovány podle předem určeného algoritmu a poté jsou zobrazeny na webu pomocí písem, která používáte (kde je najít a jak na web 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é napsat 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 to ruská písmena obsažená v Kódování Windows 1251 (CP1251). Rozhodli jste se použít vlnovku nebo apostrof, ale takové možnosti jsou zpočátku používány jazyk HTML kódování není zahrnuto.
Právě pro takové případy byly vynalezeny substituce nebo jinými slovy mnemotechnické pomůcky. Zpočátku speciální znaky měly digitální podobu, ale pak u těch nejběžnějších byly přidány jejich dopisové protějšky, aby byly lépe zapamatovatelné.
Obecně řečeno, mnemotechnická pomůcka je znak, který začíná ampersandem „&“ a končí středníkem „;“. Na základě těchto vlastností z něj prohlížeč při analýze HTML kódu 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 nejčastěji používané 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 „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 |
… | … | … | elipsa |
‾ | ‾ | ‾ | 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 |
„ | „ | „ | citovat nohu 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 | |
⚪ | ⚪ | Prostř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 získání HTML kód mnemotechnická pomůcka pro znamení, které potřebujete. Chcete-li to provést, stačí otevřít editor Microsoft Word, vytvořte nový dokument a vyberte 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“). No, pak už stačí jen otevřít tuto webovou stránku v libovolném HTML editoru (totéž udělá Notepad++) a vše uvidíte 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 na správné místo a místo něj na webové stránce prohlížeč zobrazí znak, který potřebujete (například nezalomitelnou 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 dostaly kromě digitálního také symbolické označení pro snadnější 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
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
Co je hypertextový značkovací jazyk Html a jak zobrazit seznam všech značek ve validátoru W3C
Písmo (obličej, velikost a barva), Blockquote a Pre tagy – starší formátování textu v čistém HTML (bez použití CSS)
Jak se nastavují barvy v Html a CSS kódu, výběr odstínů RGB v tabulkách, výstup Yandex a další programy
Direktivy komentářů a Doctype v Html kódu, stejně jako koncept blokových a vkládaných prvků (tagů)
Seznamy v Html kódu - značky UL, OL, LI a DL
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 můžete pro snadné čtení použít bílé znaky při formátování samotného kódu. 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 stravitelně:
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 |
… | … | … | elipsa |
‾ | ‾ | ‾ | 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 |
„ | „ | „ | citovat nohu 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 | |
⚪ | ⚪ | Prostř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 nechat ji buď na horním řádku, nebo v případě nedostatku 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 Nedě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í pomlčka (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.
Když je dokument zobrazen na obrazovce, mezery a prázdné řádky se nezachovají, s výjimkou textu uzavřeného ve značkách PŘED(předformátovaný text). To znamená, že jakákoli sekvence mezer, tabulátorů a prázdných řádků je ekvivalentní jedné mezerě v souboru HTML. Na druhou stranu lze prázdné místo v souboru HTML reprezentovat pomocí libovolného počtu mezer nebo nových (prázdných) řádků.
Období newlin(nový řádek) slouží k TEORETICKÉMU označení konce řádku. SGML určuje, že řádek (záznam) musí začínat počátečním znakem (nový řádek - posun řádku, LF, ASCII kód 10) a končit znakem konce záznamu (carriage return, CR, ASCII 13). V praxi jsou HTML dokumenty vykreslovány a přenášeny pomocí reprezentace nového řádku konzistentní s danými počítačovými systémy. Prohlížeče HTML proto umožňují podporu libovolné ze tří běžných reprezentací separace řádků, označovaných sekvencí CR LF, CR only nebo LF only, a na základě tohoto předpokladu zvýrazňují chyby v reprezentaci úvodních a koncových znaků záznamu. .
Nezáleží tedy na tom, jak rozdělíte text na řádky, protože odřádkování odpovídá mezerě. Všimněte si však, že byste v HTML neměli rozdělovat slovo na dva řádky. Pokud například rozdělíte slovo mezinárodní na dva řádky, jak je uvedeno níže:
mezinárodní |
to bude interpretováno jako
mezinárodní |
Chcete-li tedy dokument logicky prezentovat, měli byste používat značky HTML, jako např P nebo BR v případě potřeby zajistit posun řádku.
Prohlížeče obecně nerozdělují slova do dvou řádků, pokud slovo neobsahuje spojovník. Referenční specifikace HTML 3.2 nejsou v tomto ohledu příliš přesné a při projednávání části tabulky je uvedeno následující:
Pro některé uživatelské agenty může být nutné nebo žádoucí přeložit řetězec ve slově. V takových případech je vhodné vizuálně ověřit, že se tak stalo.
Pozor na délka čáry je mimo vaši kontrolu. To závisí na prohlížeči, počítači a nastaveních provedených lidmi, kteří si dokument prohlížejí. Obecně řečeno, neexistuje způsob, jak zabránit zalomení řádků mezi slovy, ale můžete se pokusit zabránit zalomení řádků pomocí souvislých mezer.
Pokud jde o použití nového řádku v kombinaci se značkami HTML, existují zvláštní pravidla:
- Konce řádků bezprostředně za počáteční značkou jsou ignorovány. Například čáry
- Podobně je ignorován konec řádku před koncovým tagem. Například čáry
Znak vodorovného tabulátoru (HT) lze použít v dokumentu HTML. Ale v rámci živlu PŘED Znak tabulátoru má zvláštní interpretaci, je ekvivalentní k mezeře a nenese žádné informace o tabulátoru. (Pro reprezentaci tabulkových dat použijte prvek stůl.) V praxi je lepší vyhnout se zahrnutí znaků tabulátoru do kódu HTML a místo toho použít přiměřené množství mezer, pokud chcete formátovat zdrojový kód HTML dokumentu jako tabulátory.
Je rozdíl mezi čím psaný ve vašem HTML kódu a co zobrazeno v prohlížeči.
Jak jsme již viděli, značky HTML jako např<р>, jsou čteny pouze prohlížečem (abyste věděli, které typ obsah napsaný), ale nezobrazeno v něm.
Také jsme viděli, jak umíte psát komentáře v kódu HTML, aby člověku pomohl přečíst kód, aniž by musel tyto komentáře zobrazovat v prohlížeči.
Další typ psaného kódu, který ignoroval prohlížeč je prostor, to zahrnuje:
- zalomení řádků;
- prázdné řádky;
- ouško (nebo odsazení).
Konce řádků
Konce řádků a prázdné řádky (což jsou sekvence zalomení řádků) v kódu HTML ignoroval prohlížeč. Dosahují pouze sjednocený prostor.
Původní myšlenka webu byla, že by to měl být prostor pro spolupráci, kde můžete komunikovat sdílením informací.
Aby to bylo reálné vložit zalomení řádku musíte použít element
:
Ve své nejlepší podobě je život dokonalý
nepředvídatelné
Tabulování
Tabulování je speciální znak získaný pomocí klávesy Tab. Obvykle přesune kurzor na další zarážku tabulátoru, ale někdy se změní na dvě mezery.
V každém případě, stejně jako běžná mezera, tab neviditelný. Prohlížeč jej také ignoruje:
Pojďme tento text tabulátorem.
Pokud chcete přidat prostor před zkrátka budete muset použít CSS.
Pokud chcete zavřít prvek HTML, musíte nejprve zavřít všechny jeho podřízené prvky.
Formátování stromu
Vzhledem k tomu, že prvky HTML mohou být vnořeny do sebe, měli byste si je dávat pozor v pořádku ve kterém byly otevřeny, protože to ovlivní pořadí, v jakém jsou uzavřeny.
Tento kód je zapsán v jedenčára.
Protože může být obtížné sledovat pořadí, ve kterém byly prvky HTML otevřeny, doporučuje se psát HTML stromová podoba:
Tento kód je zapsán v nějakýřádků, ale stále se bude zobrazovat jako jedenčára.
Umožňuje vám to formátování stromu vizuálně reprodukovat úroveň vnoření váš HTML kód. Díky tomu snadno zjistíte, že:
je předek; - rodič Pro A ;
- A - Tento bratrský Prvky.
Napište si HTML pro čtení
Tabulátory, prázdné řádky, nastavené mezery a zalomení řádků jsou počítačem vynechány a všechny se změní na jeden prostor.
HTML dokument píše a čte člověk, ale čte ho pouze počítač. Vzhledem k tomu, že tabulátory, mezery a zalomení řádků nemají vliv na to, jak bude prohlížeč číst a následně zobrazovat webovou stránku, můžete dokument naformátovat způsobem, který je pro moje maličkost cesta.
Neexistují žádná konkrétní pravidla týkající se formátování HTML, ale existují implicitní dohody, zejména:
- použití tabelování pomoci vizualizovat přílohy HTML prvky;
- vložte otevírací a uzavírací štítky prvků bloku na samostatné řádky;
- zapisovat vložené prvky na jeden řádek (včetně otevíracích a zavíracích značek).