Mellanslagstecken och hur de formaterar kod i HTML, samt speciella icke-avbrytande mellanslagstecken och andra minnen. Använda blanktecken för att formatera HTML-kod, blanksteg och andra specialtecken (mnemonics) Mellanslag och blankstegstecken

Märka

Taggen anger ett tabbtecken i texten. Det liknar att använda /t escape-sekvensen.

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

Avståndet med vilket linjen kommer att flyttas när ett tabbtecken infogas i den kan ställas in godtyckligt. Taggens TABSTOPS-attribut används för detta.

Taggen är inte en standard HTML-tagg. Den lades till i Flash-markeringstaggar för att hjälpa till att formatera text på ett konsekvent sätt.

Märka...

Taggen är ansvarig för textformateringsegenskaper som marginaler, indrag och radförskjutningar. Följande attribut kan anges i den:

VÄNSTER MARGINAL. Vänstermarginalens storlek i poäng. En analog är egenskapen leftmargin för klassen TextFormat.

HÖGERMARGIN. Högermarginalens värde i poäng Analog är egenskapen rightmargin för TextFormat-klassen.

INDRAG. Dra in den första raden i ett stycke i punkter. Bland egenskaperna för klassen TextFormat liknar den egenskapen indent.

BLOCKINDENT.

Indrag av ett textstycke till vänster i punkter. Analog - blockIndent-egenskap
klass TextFormat.

LEDANDE. Avståndet mellan linjer i punkter. En liknande egenskap i klassen TextFormat leder.

TABSTOPP. Attributet anger vilken linjeförskjutning i punkter varje tabbtecken i sekvensen kommer att orsaka. Dess värde är en lista med siffror som anger avstånden med vilka linjen kommer att flyttas till fönstret om 1, 2, 3, ... n tabbtecken skrivs i en rad. En analog till attributet TABSTOPS är egenskapen tabStops för klassen TextFormat.


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

0din tabR> Två tabR>
Tre tabarer>

";

Taggen är inte en standard HTML-tagg. Det introducerades så att möjligheten att markera text med taggar liknar att använda egenskaperna för klassen Text Format.

Märka...

Märka är avsedd för att tillämpa en CSS-klassstil på ett godtyckligt textfragment.

Klassnamnet anges i dess CLASS-attribut.

This.createTextField("pol", 0, 150, 150, 200, 90);
pole.autoSize = pole.border=pole.multiline=true;
// Skapa tre klassstilar som definierar röd, grön och blå text
var style:TextField.Stylesheet = new TextField.Stylesheet();
var green_text:String = ".GREEN (färg:#00FF00)";
var red_text:String = ".RED (färg:#FF0000)";
var blue_text:String = ".BLUE (färg:#0000FF)";
style.parseCSS(grön_text+röd_text+blå_text);
pole.styleSheet=stil;
// Visa text med skapade stilar
pole.text = " 3 grön text

Röd text

Blå text ";

Hej kära läsare av bloggsidan! De som åtminstone ytligt bekantat sig med det har nog redan tagit fasta på det, om än i allmänna ordalag. Det betyder att de har en uppfattning om vilka HTML-symboler som vanligtvis används i dokumentkoden.

I dagens artikel kommer vi att försöka ta reda på vad ett mellanslag är i HTML och i vilka fall du kan använda blanksteg när du formaterar själva koden för enkel läsning. Vi kommer att ta reda på när det är nödvändigt att använda ett icke-avbrytande utrymme och också bekanta oss med andra specialtecken (eller, som de också kallas, mnemonics).

Jag skulle faktiskt råda dig att inte ignorera ämnet att använda olika specialtecken, eftersom detta är en viktig komponent som låter dig slutföra din studie av hypertextmarkeringsspråk. I allmänhet kommer informationen i denna publikation definitivt inte att vara överflödig. Nåväl, nu till saken.

Mellanslag och blanksteg i HTML

Först finns det en viktig anteckning att göra. Det finns speciella tangenter på ett datortangentbord som låter dig separera text (mer om detta nedan). Det är dock bara ett brett mellanslagstangent som ger åtskillnad mellan ord inte bara i redigeraren utan även i webbläsarfönstret. Det finns nyanser när man bryter linjer och drar in från kanter.

Som du vet bestäms visningen av vissa element i en webbläsare av taggar. För att formatera texten används den välkända , som är blockbaserad. Det vill säga att dess innehåll ligger över hela den tillgängliga bredden.

Till linda rader inom stycke P, måste du använda en enda BR-tagg, med vilken du kan göra detta. Låt oss säga att vi behöver infoga några rader från en dikt i texten som vi skriver i en textredigerare:

Trots att versens rader är korrekt placerade och bindestreck är gjorda på rätt ställen, kommer allt att se annorlunda ut i webbläsaren:


För att få samma visning i ett webbläsarfönster måste du skriva BR vid varje radbrytning:

Nu har vi uppnått uppgiften och de poetiska raderna kommer att visas helt korrekt i webbläsaren:

Därmed är de nödvändiga radbrytningarna klara. En annan funktion som måste noteras här är att flera utrymmen som kommer efter varandra visas av webbläsaren som ett. Du kan verifiera detta om du i samma editor försöker sätta inte ett, utan flera mellanslag mellan två ord och, genom att klicka på "Spara"-knappen, titta på resultatet i webbläsaren.

Mellanslag, tabb och radbrytning

I grund och botten med dessa blanksteg Vi lär känna varandra så fort vi börjar arbeta med texten i editorn och formaterar den i önskad form. För att implementera en sådan uppgift finns det speciella nycklar, som var och en motsvarar sitt eget mellanslagstecken:

  • Mellanslag är den bredaste tangenten på ett datortangentbord (utan etikett);
  • Tab - en tangent till vänster med inskriptionen "Tab" och två pilar som pekar i olika riktningar;
  • Radbrytning - "Enter"-tangenten.

Men, som jag sa ovan, får vi det slutliga önskade resultatet inte bara i en textredigerare, utan också i en webbläsare, bara när vi använder den första nyckeln. Alla tre nycklar (inklusive tabb- och radbrytning är användbara vid formatering av HTML-kod. Låt oss säga att det är så här ett kodfragment ser ut i NotePad++ (det finns mycket information om den här redigeraren) när alla blanktecken visas:


Vi får kod som är lätt att läsa och förstå tack vare mellanslag. Orange pilar indikerar indrag skapade med Tab-tangenten, och CR- och LF-symboler indikerar radbrytningar som skapats med Enter-tangenten.

Behållare som är kapslade i varandra visas och öppnings- och stängningstaggar är tydligt synliga. I det här formuläret kan denna kod enkelt redigeras. Jämför det nu med samma kod, som inte har en sådan textdelning:

På samma sätt, med blankstegstecken, kan du skriva CSS-regler som visuellt ser tydliga och lättsmälta ut:


När du har fört alla stilar till en gemensam nämnare och helt avslutat redigeringen av stilfilen, kan du utföra redigeringen genom att ta bort alla mellanslag från koden. Detta är nödvändigt för att öka, vilket är mycket viktigt när man marknadsför en resurs.

Specialtecken (eller mnemonics) i HTML-kod

Låt oss nu titta på de fall där det är nödvändigt att använda specialtecken som jag nämnde i början av artikeln. HTML-specialtecken, ibland kallade mnemonics, introducerades för att lösa ett långvarigt problem med kodningar som uppstod i hypertextmarkeringsspråk.

När du skriver text på tangentbordet, kodas tecknen i språket du använder. I webbläsaren kommer den inskrivna texten att visas med de teckensnitt du valde som ett resultat av den omvända avkodningsoperationen.

Faktum är att det finns många sådana kodningar, nu har vi inget mål att analysera dem i detalj. Det är bara det att var och en av dem kan sakna vissa symboler, som dock måste visas. Låt oss säga att du känner lust att skriva enstaka citattecken eller ett accenttecken, men dessa ikoner ingår helt enkelt inte i uppsättningen.

För att eliminera detta problem introducerades ett system med speciella symboler, som inkluderar ett stort antal olika mnemonics. De börjar alla med et-tecken "&" och slutar vanligtvis med semikolon ";". Till en början hade varje specialtecken sin egen digitala kod. Till exempel, för ett icke-brytande utrymme, som vi kommer att överväga mer i detalj nedan, kommer följande post att vara giltig:

Men efter en tid tilldelades de vanligaste symbolerna bokstavsanaloger (mnemonics) för att göra dem lättare att komma ihåg. Låt oss säga att för samma icke-brytande utrymme ser det ut så här:

Som ett resultat visar webbläsaren motsvarande symbol. Listan över mnemonics är mycket omfattande, mest använda specialtecken i HTML du kan upptäcka nedanstående tabell:

symbol koda mnemonics beskrivning
icke-brytande utrymme
smalt utrymme (en-bredd som bokstaven n)
brett utrymme (em-bredd som bokstaven m)
- en streck (en-dash)
- em streck (em streck)
­ - ­ mjuk överföring
A ́ stress placeras efter "stress"-bokstaven
© © upphovsrätt
® ® ® registrerat varumärke
varumärke tecken
º º º Mars spjut
ª ª ª Venus spegel
ppm
π π π pi (använd Times New Roman)
¦ ¦ ¦ vertikal streckad linje
§ § § paragraf
° ° ° grad
µ µ µ mikrotecken
styckemärke
ellips
överstrykning
´ ´ ´ accentmärke
nummertecken
🔍 🔍 Förstoringsglas (lutat åt vänster)
🔎 🔎 Förstoringsglas (lutat åt höger)
tecken på aritmetiska och matematiska operationer
× × × multiplicera
÷ ÷ ÷ dela upp
< < mindre
> > > Mer
± ± ± plus minus
¹ ¹ ¹ grad 1
² ² ² grad 2
³ ³ ³ grad 3
¬ ¬ ¬ negation
¼ ¼ ¼ fjärdedel
½ ½ ½ en halv
¾ ¾ ¾ trekvart
decimalpunkt
minus
mindre eller lika
mer eller lika
ungefär (nästan) lika
inte jämnlikt
identiskt
kvadratrot (radikal)
oändlighet
summeringstecken
arbetsmärke
partiell differential
väsentlig
för alla (endast synligt om i fetstil)
existerar
tom uppsättning
Ø Ø Ø diameter
tillhör
tillhör inte
innehåller
är en delmängd
är en superset
är inte en delmängd
är en delmängd eller lika med
är en superuppsättning eller lika
plus i en cirkel
multiplikationstecken i en cirkel
vinkelrät
hörn
logiskt OCH
logiskt ELLER
genomskärning
Union
valuta tecken
Euro
¢ ¢ ¢ Cent
£ £ £ Lb
¤ ¤t; ¤ Valuta tecken
¥ ¥ ¥ Yen och Yuan tecken
ƒ ƒ ƒ Florin tecken
markörer
. enkel markör
cirkel
· · · mittpunkt
korsa
dubbel kors
toppar
klubbar
hjärtan
ruter
romb
penna
penna
penna
hand
citat
" " " dubbelt citat
& & & och-tecken
« « « vänster typografiska citattecken (fiskbenscitattecken)
» » » höger typografiska citattecken (fiskbenscitattecken)
enstaka hörn offertöppning
enda hörn offert stängning
prime (minuter, fot)
dubbelt primtal (sekunder, tum)
enstaka citat uppe till vänster
enstaka citat uppe till höger
nedre högra enstaka citat
citat-fot kvar
citat fot uppe till höger
citat fot nedre höger
enda engelska inledande citattecken
enda engelska avslutande citattecken
inledande dubbla citattecken
avslutande dubbla citattecken
pilar
vänster pil
uppåtpil
höger pil
pil nedåt
vänster och höger pil
upp och ner pil
vagnretur
dubbel vänsterpil
dubbel uppåtpil
dubbel högerpil
dubbel nedåtpil
dubbelpil vänster och höger
dubbel upp- och nedpil
triangel upp pil
triangel nedåtpil
triangel högerpil
triangel vänster pil
stjärnor, snöflingor
Snögubbe
Snöflinga
Snöflinga inklämd av shamrocks
Fet skarpvinklad snöflinga
Skuggad stjärna
Tom stjärna
Ofylld stjärna i en fylld cirkel
Fylld stjärna med en öppen cirkel inuti
Roterande stjärna
Ritad vit stjärna
Mellan öppen cirkel
Mellanfylld cirkel
Sextil (typ snöflingor)
Åttauddig roterande stjärna
Stjärna med sfäriska ändar
Djärv åttauddig droppformad stjärnpropeller
Sextonuddig asterisk
Tolvuddig stjärna
Fet åttauddig rak fylld stjärna
Sexuddig fylld stjärna
Åttauddig rak fylld stjärna
Åttauddig stjärna
Åttauddig stjärna
Stjärna med tom mitt
Fet stjärna
Spetsad fyruddig öppen stjärna
Spetsig fyruddig fylld stjärna
Stjärna i en cirkel
Snöflinga i en cirkel
klock tid
Kolla på
Kolla på
Timglas
Timglas

Fall av användning av vissa specialtecken, inklusive oavbrutet mellanslag och mjukt bindestreck

Om du redan har studerat tabellen lite så har du fått bekräftelse på det jag sa ovan, att för att visa alla specialtecken används en digital kod () eller dess alfabetiska analog (symbolisk mnemonics), där istället för en uppsättning hash märken och siffror, bokstäver () skrivs.

Låt oss nu se när vi ska använda dessa koder. Låt oss säga att du i en artikel måste ange en HTML-tagg i informationssyfte, t.ex.

. Om du skriver vinkelparenteser från tangentbordet (och det finns ett sådant alternativ), kommer webbläsaren att uppfatta en sådan konstruktion som en öppningstagg, och inte som ett enkelt fragment av text.

Därför tar vi från samma HTML-tabell med specialtecken motsvarande koder och hela posten kommer att se ut så här:

Dessutom, för att visa i webbläsaren inte själva et-tecken, utan dess beteckning i form

måste du lägga till dess kod från tabellen:

sidfot

Sedan kommer webbläsaren att visa exakt posten för de minnesminnen som måste appliceras för att visa FOOTER-taggen. Det är lite förvirrande, men på den här sidan kan du öva på den här aspekten genom att ange mnemonics för motsvarande tecken i "HTML"-fältet och använda "Kör"-knappen, och i "Resultat"-området för att få resultatet av deras visning i webbläsare:


Observera att jag såg till att texten slogs in med den redan nämnda BR-taggen så att själva tecknen inte visades på en rad, utan i en kolumn för enkelhetens skull.

Varsågod. Ibland uppstår kombinationer i texten som inte är önskvärda att delas upp i olika rader. Låt oss säga, "1000 rubel." Det skulle vara logiskt att antingen lämna det på den översta raden, eller om det inte finns tillräckligt med utrymme, flytta hela strukturen till en linje under.

Detta gäller särskilt om användare använder enheter med olika skärmbredder, inklusive mobila. I det här fallet formaterar webbläsaren texten och anpassar sig till nya förhållanden. Och om texten ser korrekt ut vid standardbildskärmsstorlekar kan allt förändras om de ändras.

För dessa fall tillhandahålls det HTML-fri utrymme, som jag redan nämnt. Låt mig påminna dig om att i det här fallet är mellanslagskoden följande:

Och det måste infogas mellan två uppsättningar tecken som måste länkas:

1000 rub.

Nu kommer webbläsaren under inga omständigheter att skilja dem åt, även om textformatering krävs för att visa den korrekt.

Det finns också en situation när ett mycket långt ord inte passar in i det fria utrymmet och du behöver flytta en del av det. Hur kan jag fördefiniera en ny rad i detta fall om det behövs? För detta finns speciellt mjukt bindestreck-, som måste placeras på den plats där ordet måste brytas:

Långt långt långt långt långt ord

Om det uppstår en situation när ett ord behöver avstavas, bildas en lucka vid platsen för det mjuka bindestreckets minnesmärke, där ett bindestreck (bindestreck) visas och resten av ordet visas på nästa rad nedan.

Men återigen kommer det att vara användbart att se det hela, inklusive exempel på kontinuerlig och mjuk överföring, i praktiken:


I fönstret i den här redigeraren kan du ändra storleken på visningsfältet "Resultat" genom att ta tag i kanten av detta område med vänster musknapp och dra det till vänster för att minska bredden utan att släppa det. Sedan uppstår en verklig situation när webbläsaren börjar formatera om innehållet för att visa det korrekt.

Och överföringen genomförs, vilket föreskrevs i de exempel jag beskrev. Däremot kan du själv flytta visningsfönstret, utöka och begränsa det och visuellt verifiera detta.

Det är skillnad på vad skriven i din HTML-kod och vad visas i webbläsaren.

Som vi redan har sett, taggar HTML som t.ex<р>, läses endast av webbläsaren (för att veta vilken typ innehåll skrivet), men visas inte i honom.

Vi såg också hur man kan skriva kommentarer i HTML-koden för att hjälpa en människa att läsa koden utan att behöva visa dessa kommentarer i webbläsaren.

En annan typ av skriven kod som ignoreras webbläsare är Plats, det inkluderar:

  • radbrytningar;
  • tomma rader;
  • flik (eller indrag).

Radbrytningar

Radbrytningar och tomma rader (som är en sekvens av radbrytningar) i HTML-kod ignoreras webbläsare. De uppgår bara till enat Plats.

Den ursprungliga idén med webben var att det skulle vara ett samarbetsutrymme där man kunde kommunicera genom att dela information.

För att göra det verkligt Föra in radbrytning måste du använda element
:

När det är som bäst är livet perfekt
oförutsägbar

Tabulering

Tabuleringär ett specialtecken som erhålls med Tab-tangenten. Den flyttar vanligtvis markören till nästa tabbstopp, men ibland förvandlas den till två mellanslag.

I alla fall, precis som ett vanligt utrymme, tab osynlig. Det ignoreras också av webbläsaren:

Låt oss ta den här texten.

Om du vill lägga till utrymme innan kort sagt, du måste använda CSS.

Om du vill stänga ett HTML-element måste du först stänga alla dess underordnade element.

Trädformatering

Eftersom HTML-element kan kapslas in i varandra bör du hålla ett öga på i ordning där de öppnades, eftersom detta kommer att påverka i vilken ordning de stängs.

Denna kod är skriven i ett linje.

Eftersom det kan vara svårt att hålla reda på i vilken ordning HTML-element öppnades, rekommenderas att skriva HTML i trädform:

Denna kod är skriven i några rader, men kommer fortfarande att visas som ett linje.

Trädformatering låter dig visuellt reproducera häckningsnivå din HTML-kod. Detta gör det lätt att se att:

  • är förfader;
  • - förälder För Och ;

  • Och - Det här broderlig element.

Skriv HTML för dig själv att läsa

Tabbar, tomma rader, inställda mellanslag och radbrytningar utelämnas av datorn och de blir alla till ett utrymme.

Ett HTML-dokument skrivs och läses av en människa, men läses bara av en dator. Med tanke på att tabbar, blanksteg och radbrytningar inte påverkar hur webbläsaren läser och sedan visar webbsidan, kan du formatera ditt dokument på ett sätt som är mest läsbart för jag själv sätt.

Det finns inga specifika regler för HTML-formatering, men det finns implicita sådana avtal, särskilt:

  • använda sig av tabulering för att hjälpa till att visualisera bilagor HTML-element;
  • sätt in öppnings- och stängningstaggar av blockelement på separata rader;
  • skriv inline-element på en rad (inklusive öppnings- och stängningstaggar).

När dokumentet visas på skärmen bevaras inte mellanslag och tomma rader, förutom text som är innesluten i taggar PRE(förformaterad text). Det vill säga att varje sekvens av mellanslag, tabbar och tomma rader motsvarar ett enda blanksteg i en HTML-fil. Å andra sidan kan vitt utrymme i en HTML-fil representeras med valfritt antal mellanslag eller nya (tomma) rader.

Termin newlin(ny rad) används för att TEORETISKT markera slutet på en rad. SGML specificerar att en rad (post) måste börja med ett starttecken (nyrad - radmatning, LF, ASCII-kod 10) och sluta med ett slutet på post-tecken (carriage return, CR, ASCII 13). I praktiken renderas och överförs HTML-dokument med hjälp av en nyradsrepresentation som överensstämmer med de givna datorsystemen. Därför tillåter HTML-webbläsare stöd för någon av de tre gemensammana, betecknade med sekvensen CR LF, CR only, eller LF only, och baserat på detta antagande framhäver de fel i representationen av de inledande och efterföljande tecknen i en post .

Det spelar alltså ingen roll hur du delar upp texten i rader, eftersom en radmatning motsvarar ett mellanslag. Observera dock att du inte ska dela upp ett ord i två rader i HTML. Om du till exempel delar upp ordet internationell i två rader, som visas nedan:

internationell

detta kommer att tolkas som

internationell

För att presentera ditt dokument logiskt bör du alltså använda HTML-taggar som t.ex P eller BR att tillhandahålla en radmatning vid behov.

Webbläsare delar vanligtvis inte upp ord i två rader om inte ordet innehåller ett bindestreck. HTML 3.2-referensspecifikationerna är inte särskilt exakta när det gäller denna fråga och när man diskuterar tabellsektionen ges följande:

För vissa användaragenter kan det vara nödvändigt eller önskvärt att översätta en sträng i ett ord. I sådana fall är det lämpligt att visuellt verifiera att detta har hänt.

Akta dig för linjelängden är bortom din kontroll. Detta beror på webbläsaren, datorn och de inställningar som gjorts av personerna som tittar på ditt dokument. Generellt sett finns det inget sätt att förhindra radbrytningar mellan ord, men du kan försöka förhindra radbrytningar genom att använda kontinuerliga mellanslag.

När det gäller användningen av newline i kombination med HTML-taggar finns det särskilda regler:

  • Radbrytningar omedelbart efter starttaggen ignoreras. Till exempel linjerna
  • På samma sätt ignoreras radbrytningen som föregår sluttaggen. Till exempel linjerna

Tecknet horisontell tab (HT) kan användas i ett HTML-dokument. Men inom elementet PRE Tab-tecknet har en speciell tolkning, motsvarar ett mellanslag och innehåller inte tabulatorinformation av något slag. (För att representera data i tabellform, använd elementet tabell.) I praktiken är det bättre att undvika att ta med tabbtecken i HTML-kod och använda en lämplig mängd mellanslag istället om du vill formatera dokumentets HTML-källkod som tabbar.

Hej kära läsare av bloggsidan. Lite tidigare har vi redan hunnit prata om det och också lärt oss om designen i det. Idag har vi i sin tur konceptet med vitt utrymme i HTML, såväl som tillhörande kodformatering när vi skriver det (för att underlätta dess efterföljande läsning och uppfattning).

Tja, på grund av det faktum att vi kommer att beröra ämnet icke-brytande utrymme och mjuk avstavning, måste vi fokusera vår uppmärksamhet på de så kallade specialtecken eller mnemonics som används i HTML-språket, vilket gör att du kan lägga till många ytterligare tecken till webbdokumentkoden, som de som redan nämnts ovan . Men först till kvarn.

Mellanslag och blanksteg i HTML

Innan jag går vidare till frågan om att formatera text med taggar speciellt utformade för detta (stycke, rubriker etc.), vill jag uppehålla mig vid hur mellanslag, radbrytningar (Enter) och tabulering tolkas i HTML-språket, och hur brytning är utfört text i webbläsarfönstret när den ändras storlek.

Det är sant att för den här typen av visuell formatering (som inte kommer att synas på webbsidan) är det oftast inte själva mellanslagen som används, utan snarare tabb- och radbrytningstecknen. Det finns en sådan regel - när du börjar skriva en kapslad HTML-tagg, då dra in med tabbar(Tabbtangenten på tangentbordet), och när du stänger taggen tar du bort indraget (tangentkombinationen Skift+Tab på tangentbordet).

Detta måste göras så att öppnings- och stängningstaggarna är på samma vertikala nivå (på samma antal flikar från högerkanten på sidan i din HTML-editor, till exempel Notepad++, som jag skrev om). Dessutom råder jag dig att omedelbart efter att ha skrivit öppningselementet gör flera radbrytningar och omedelbart skriva den avslutande på samma nivå (antal flikar), så att du inte glömmer att göra detta senare.

De där. öppnings- och stängningselementen ska vara på samma nivå vertikalt, och de interna taggarna ska flyttas med ett fliktecken och stängnings- och öppningselementen ska placeras igen på samma nivå.

För enkla webbdokument kan detta tyckas vara överdrivet, men när man skapar mer eller mindre komplicerade sådana gör de koden blir mycket tydligare och läsbar på grund av överflöd av utrymmen, och det blir också mycket lättare att upptäcka fel på grund av det symmetriska arrangemanget av taggar.

Specialtecken eller mnemonics i HTML-kod

Så låt oss nu prata om de så kallade specialtecken, vars användarvänlighet jag tillkännagav i början av den här artikeln. Specialtecken kallas också ibland mnemonics eller substitutioner. De är avsedda att lösa ett problem som har uppstått i hypertextmarkeringsspråk under lång tid, relaterat till de använda kodningarna.

När du skriver text på tangentbordet kodas tecknen i ditt språk enligt en förutbestämd algoritm, och sedan visas de på webbplatsen med de teckensnitt du använder (var du hittar och hur du installerar för webbplatsen) på grund av avkodning.

Det finns många kodningar, men för HTML-språket antogs den utökade versionen av kodningar som standard.

I denna textkodning var det möjligt att skriva endast 256 tecken - 128 från ASCII och ytterligare 128 för ryska bokstäver. Som ett resultat uppstod ett problem med användningen på webbplatser av tecken som inte ingår i ASCII och inte är ryska bokstäver som ingår i Windows-kodningen 1251 (CP1251). Tja, du bestämde dig för att använda en tilde eller en apostrof, men en sådan möjlighet ingick från början inte i kodningen som användes av HTML-språket.

Det är för sådana fall som substitutioner eller, med andra ord, mnemonics uppfanns. Initialt specialtecken hade en digital form, men för de vanligaste lades deras brevmotsvarigheter till för att göra dem lättare att komma ihåg.

Generellt sett är en mnemonik ett tecken som börjar med och-tecken "&" och slutar med semikolon ";". Det är baserat på dessa egenskaper att webbläsaren, när den analyserar HTML-kod, extraherar specialtecken från den. Et-tecken i den numeriska jokerteckenkoden måste omedelbart följas av ett pundtecken "#", ibland kallat en hash. Och först därefter följer den digitala koden för önskat tecken i Unicode-kodning.

Mer än 60 000 tecken kan skrivas i Unicode - huvudsaken är att den mnemoniska symbolen du behöver stöds av typsnittet som används på din webbplats. Det finns typsnitt som stöder nästan alla Unicode-tecken, och det finns alternativ endast med en viss uppsättning tecken.

Den fullständiga listan över specialtecken kommer att vara enorm, men mest använda mnemonics du kan till exempel låna från denna tabell:

SymbolHTML-kodDecimal
koda
Beskrivning
icke-brytande utrymme
smalt utrymme (en-bredd som bokstaven n)
brett utrymme (em-bredd som bokstaven m)
- en streck (en-dash)
- em streck (em streck)
­ - ­ mjuk överföring
A ́ stress placeras efter bokstaven "stress".
© © upphovsrätt
® ® ® registrerat varumärke
varumärke tecken
º º º Mars spjut
ª ª ª Venus spegel
ppm
π π π pi (använd Times New Roman)
¦ ¦ ¦ vertikal streckad linje
§ § § paragraf
° ° ° grad
µ µ µ mikrotecken
styckemärke
ellips
överstrykning
´ ´ ´ accentmärke
nummertecken
🔍 🔍 Förstoringsglas (lutat åt vänster)
🔎 🔎 Förstoringsglas (lutat åt höger)
tecken på aritmetiska och matematiska operationer
× × × multiplicera
÷ ÷ ÷ dela upp
< < mindre
> > > Mer
± ± ± plus minus
¹ ¹ ¹ grad 1
² ² ² grad 2
³ ³ ³ grad 3
¬ ¬ ¬ negation
¼ ¼ ¼ fjärdedel
½ ½ ½ en halv
¾ ¾ ¾ trekvart
decimalpunkt
minus
mindre eller lika
mer eller lika
ungefär (nästan) lika
inte jämnlikt
identiskt
kvadratrot (radikal)
oändlighet
summeringstecken
arbetsmärke
partiell differential
väsentlig
för alla (endast synligt om i fetstil)
existerar
tom uppsättning
Ø Ø Ø diameter
tillhör
tillhör inte
innehåller
är en delmängd
är en superset
är inte en delmängd
är en delmängd eller lika med
är en superuppsättning eller lika
plus i en cirkel
multiplikationstecken i en cirkel
vinkelrät
hörn
logiskt OCH
logiskt ELLER
genomskärning
Union
valuta tecken
Rubel. Rubeltecknet måste användas tillsammans med numret. Unicode 7.0 standard. Om du inte ser bilden, uppdatera dina Unicode-teckensnitt.
Euro
¢ ¢ ¢ Cent
£ £ £ Lb
¤ ¤ ¤ Valuta tecken
¥ ¥ ¥ Yen och Yuan tecken
ƒ ƒ ƒ Florin tecken
markörer
. enkel markör
cirkel
· · · mittpunkt
korsa
dubbel kors
toppar
klubbar
hjärtan
ruter
romb
penna
penna
penna
hand
citat
" " " dubbelt citat
& & & och-tecken
« « « vänster typografiska citattecken (fiskbenscitattecken)
» » » höger typografiska citattecken (fiskbenscitattecken)
enstaka hörn offertöppning
enda hörn offert stängning
prime (minuter, fot)
dubbelt primtal (sekunder, tum)
enstaka citat uppe till vänster
enstaka citat uppe till höger
nedre högra enstaka citat
citat-fot kvar
citat fot uppe till höger
citat fot nedre höger
enda engelska inledande citattecken
enda engelska avslutande citattecken
inledande dubbla citattecken
avslutande dubbla citattecken
pilar
vänster pil
uppåtpil
höger pil
pil nedåt
vänster och höger pil
upp och ner pil
vagnretur
dubbel vänsterpil
dubbel uppåtpil
dubbel högerpil
dubbel nedåtpil
dubbelpil vänster och höger
dubbel upp- och nedpil
triangel upp pil
triangel nedåtpil
triangel högerpil
triangel vänster pil
stjärnor, snöflingor
Snögubbe
Snöflinga
Snöflinga inklämd av shamrocks
Fet skarpvinklad snöflinga
Skuggad stjärna
Tom stjärna
Ofylld stjärna i en fylld cirkel
Fylld stjärna med en öppen cirkel inuti
Roterande stjärna
Ritad vit stjärna
Mellan öppen cirkel
Mellanfylld cirkel
Sextil (typ snöflingor)
Åttauddig roterande stjärna
Stjärna med sfäriska ändar
Djärv åttauddig droppformad stjärnpropeller
Sextonuddig asterisk
Tolvuddig stjärna
Fet åttauddig rak fylld stjärna
Sexuddig fylld stjärna
Åttauddig rak fylld stjärna
Åttauddig stjärna
Åttauddig stjärna
Stjärna med tom mitt
Fet stjärna
Spetsad fyruddig öppen stjärna
Spetsig fyruddig fylld stjärna
Stjärna i en cirkel
Snöflinga i en cirkel
klock tid
Kolla på
Kolla på
Timglas
Timglas

Det finns ganska intressant sätt att få HTML mnemonisk kod för den skylt du behöver. För att göra detta, öppna bara Microsoft Word-redigeraren, skapa ett nytt dokument och välj "Infoga" - "Symbol" från toppmenyn (jag använder 2003-versionen, så jag vet inte hur man gör en liknande operation i senare versioner ).

I fönstret som öppnas måste du välja ett typsnitt, till exempel Times New Roman (eller något annat som uppenbarligen kommer att finnas på de flesta datorer för dina webbplatsbesökare - Courier eller Arial, till exempel).

Lägg till alla specialtecken du behöver från listan som öppnas i ditt Word-dokument och spara detta Word-dokument som en webbsida (väljs från rullgardinsmenyn ".html" när du sparar). Nåväl, allt du behöver göra är att öppna den här webbsidan i valfri HTML-redigerare (samma Notepad++ kommer att göra) och du kommer att se alla digitala koder för minnesminnen du behöver:

Metoden är lite komplicerad, men om du vill använda något sällsynt specialtecken på din webbsida så blir det enklare än att söka på Internet efter tabeller som den som visas precis ovan. Du måste klistra in den resulterande specialteckenkoden på rätt plats och istället för den på webbsidan kommer webbläsaren att visa det tecken du behöver (till exempel ett icke-avbrytande mellanslag).

Non-breaking space och mjukt bindestreck i exempel

Som jag redan nämnt ovan och som du kan se från tabellen över specialtecken som ges precis ovan, fick vissa mnemonics i Html, förutom digitalt, också en symbolisk beteckning för enklare memorering. De där. Istället för hash-tecknet "#" (hash) används ord i symboliska varianter. Till exempel kan samma icke-avbrytande mellanslag skrivas antingen som (digital mnemonic) eller som (tecken).

När du skriver artiklar, om du behöver infoga ett et-tecken (&) eller öppen vinkelparentes (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Det vill säga om du skriver en artikel där du till exempel måste infoga en taggvisning i texten< body>eller så behöver du bara infoga ett mindre än-tecken (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Därför måste du infoga följande konstruktion för att lösa ett liknande problem:

Detsamma gäller för att visa koden för själva mnemonics, eftersom de börjar med ett och-tecken. Du måste infoga koden i texten och ersätta et-tecken med dess ersättning (specialtecken):

Detta måste göras för att komma in på sidan<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

Du kommer också med största sannolikhet att använda ett icke-avbrytande utrymme, som kommer att se ut som ett vanligt utrymme på en webbsida, men webbläsaren kommer inte att behandla det som ett mellanslag alls och kommer inte att genomföra överföringar på den(det här kommer till exempel att vara lämpligt för fraser som 1400 GB, etc., som det inte skulle vara tillrådligt att avstava över olika rader):

1400 GB.

Ibland kan den motsatta situationen uppstå, när texten innehåller mycket långa ord och du vill försäkra dig om att webbläsaren vid behov Jag skulle kunna bryta dessa ord med avstavning. För sådana ändamål tillhandahålls en speciell symbol "mjuk överföring" -

Långt, långt ord;

När det blir nödvändigt att flytta till en annan rad kommer webbläsaren att använda ett bindestreck istället för det mjuka bindestrecket mnemonika och skicka resten av ordet till nästa rad. Om det finns tillräckligt med utrymme för att placera hela ordet på en rad, kommer webbläsaren inte att rita någon radmatning. Det är så enkelt.

Lycka till! Vi ses snart på bloggsidans sidor

Du kanske är intresserad

MailTo - vad är det och hur man skapar en länk i HTML för att skicka ett e-postmeddelande
Taggar och attribut för rubrikerna H1-H6, horisontell linje Hr, radbrytning Br och stycke P enligt Html 4.01-standarden
Hur man infogar en länk och en bild (foto) i HTML - IMG och A-taggar
Vad är hypertext markup language HTML och hur man visar en lista över alla taggar i W3C validator
Teckensnitt (ansikte, storlek och färg), Blockquote och Pre-taggar - äldre textformatering i ren HTML (ingen CSS används)
Hur färger ställs in i HTML- och CSS-kod, urval av RGB-nyanser i tabeller, Yandex-utgång och andra program
Kommentardirektiv och Doctype i HTML-kod, såväl som konceptet med block och inline-element (taggar)
Listor i HTML-kod - UL, OL, LI och DL-taggar