Monospace-fonter lages ved hjelp av tagger
,
og
... Resultatene av disse kodene er vanligvis de samme: en font med monospace med fast tegn og mellomrom.
stikkord
stikkord stikkord tjener til å skrive inn tekst uten formatering, det vil si å bevare alle mellomrom, tabulatorer og linjeskift. De fleste tekstformateringselementer kan brukes i dette elementet. Merk følgende: I HTML ignoreres linjeskift, påfølgende mellomrom og tabulatorer. Flere mellomrom på rad behandles som én plass. Innvendig element
- Et innebygd beholderelement som brukes til å sette inn små kodebiter i det, for eksempel i et nettdokument som presenterer en programmeringsveiledning. Nettlesere viser denne koden i en font med monospace (for eksempel Courier New). Hvis du bruker ero med et element
Eksempel: bruk av elementer og
Nettleseren dupliserer hvert mellomrom eller linjeskift den møter, og beholder den opprinnelige formateringen.
If (document.getElementsByClassName) (x = document.getElementsByClassName ("paginering") if (x.length> y) (x.style.visibility = "skjult";)
Inne i "pre"-elementet dupliserer nettleseren hvert mellomrom eller linjeskift den møter, og beholder den opprinnelige formateringen.
if (document.getElementsByClassName) (x = document.getElementsByClassName ("paginering") if (x.length> y) (x.style.visibility = "skjult";)
Tagger og
stikkord
markerer et kodestykke som skrevet av brukeren. Noen nettlesere merker slik tekst med en ekstra bakgrunn.
stikkord
brukes til å generere datamaskinutdata, for eksempel tekst som vises i et konsollvindu etter at du har skrevet inn et kontrollskript. Dette sjeldent brukte elementet viser ganske enkelt innholdet i en font med monospace
, ,
.
Eksempel: elementer og
- Prøv selv"
Teksten som brukeren må skrive inn fra tastaturet, plasser i
"kbd"-beholderelementet.
Skriv inn tekst: Dette er teksten som er skrevet inn fra tastaturet.
Dette er teksten som legges i "prøve"-beholderen
stikkord
stikkord brukes for ytterligere utheving av variabler i programkoden. Den definerer en variabel i matematisk uttrykk eller en programparameter og vises vanligvis i kursiv.
Eksempel: elementer
- Prøv selv"
Kroppens kinetiske energi:
Kroppens kinetiske energi:
WTil = mv2/2
Oppgaver
Siste oppgave
I denne leksjonen lærte du om tagger som viser innholdet deres i en font med monospace, uthever variabler i koden og en forhåndsformateringskode. Alle er viktige når du arbeider med matematiske uttrykk og programkode.
Det er på tide å gjenta det du har lært og fullføre tre enkle oppgaver:
Variabel
- Bestem selv"
Bruk html-elementer, angi y som en variabel i ligningen ovenfor.
Parabelligning y = Nx 2
Parabelligning y= Nx 2
Forhåndsformatert tekst
- Bestem selv"
Ved å bruke HTML-elementet får du teksten du plasserer i kodeelementet til å gjengi i nettleseren, mens alle mellomrom og linjeskift holdes som de er.
Introduksjon
bbCode - Bulletin Board Code, eller merkespråk som brukes til å formatere meldinger på mange BBSer og fora. Tagger som ligner på HTML-tagger brukes til å formatere tekst. I motsetning til HTML-tagger, er bbCode-tagger omsluttet av firkantede parenteser. Før siden vises, analyserer forummotoren teksten og konverterer bbCode til HTML-kode.
I mange fora er muligheten til å bruke BB-koder konfigurert av administratoren individuelt for hver del av forumet. Derfor, før du bruker BB-koder i meldinger, må du sørge for at de er tillatt.
Skriftformatering
Grunnleggende tagger for å jobbe med tekst:
[p] Vanlig innrykket avsnitt.
Et avsnitt som kan styles. tekst
* Heretter er "stil" en analog av stil i HTML.
tekst som ligner HTML
** Andre tagger kan brukes med [p]-taggene, for eksempel [b], [i], [s], osv.
Tekst som kan endres egenskaper ved hjelp av stilen.
Et avgrenset område som kan styles for å endre egenskaper (posisjon, kantlinjer, utfylling, innholdsegenskaper osv.).
* Som standard er områdegrenser ikke synlige. Det kan være flere områder på én side samtidig.
Tekstformatering:
[b] Viktig tekst, fet skrift
[Jeg] Viktig tekst, kursiv
Bare dristig
Bare kursiv
[u] Understreket tekst
[s] Gjennomstrekingstekst - lik variant
Redusert skrift
Et fotnotemerke over eller en indeks under teksten
Slettet tekst
Skriftstørrelser:
13-punkts skrift
15-punkts skrift
9px skrift
12px skrift
15 px skrift
Størrelse 0
Størrelse +1
Størrelse +2
Mulige alternativer for skriftstørrelser (visuell vurdering) er tilgjengelige.
Overskrifter:
Overskrift på 1. nivå
Nivå 2 overskrift
Overskrift på 3. nivå
Nivå 4 overskrift
Nivå 5 overskrift
Nivå 6 overskrift
Dekorere tekst med fonter:
Comic Sans Ms font
Monotype Corsiva font
Tahoma skrift
Mulige alternativer for skrifttyper (navngivning og visuell vurdering) er tilgjengelige.
Dekorere tekst med farge:
Rød tekst
* Du kan bruke standard fargeord: Rød, Grønn, Blå, etc.
Blå tekst
* Tall # 0000ff betyr blå farge i RGB-paletten.
Blå bakgrunn
* Bakgrunnsfargen kan også endres.
Blå tekst, grå bakgrunn
Noen forhåndsdefinerte farger:
Svart Hvit Rød Grønn Blå Lilla Firebrick Maroon OrangeRød Midnattsblå KornblomstBlå
Cyan Gul Magenta Mørkegrønn Mørk Gullrod Gull Orkide Blåfiolett Burlywood PeachPuff
Noen av fargene i hex-kode er intensiteten til rødt, grønt og blått (RR GG BB):
# 000000 #FFFFFF # FF0000 # 00FFF FFA500 # C71585 # 8B008B # CC33FF
Mulige alternativer for paletten av farger og deres koder / navn er tilgjengelige.
Tekstjustering og avsnittsformatering
Tekstjustering:
Juster teksten til venstre
Venstrejustert med stil
Juster et avsnitt til venstre
Sentrert tekst
Senterjuster med stil
Senterjustering i et avsnitt
Høyrejuster tekst
Høyrejuster med stil
Høyrejustering i et avsnitt
Juster tekst på begge sider
Juster på begge sider med stil
Justering i et avsnitt på begge sider
* Tekstjustering på begge sider vises for tekster som er lengre enn én linje.
Formatere fotnoter (kommentarer) med avsnittsinnrykk:
[q] Sitat på linje
Sitat i tråd med egenskaper
Tekst sitert i en egen blokk, som vil ha
liten innrykk til venstre og spesialdesign (forumstil).
Eksempler:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Formatering av avsnitt og områder:
Hei! I dette avsnittet vil første setning stå på den «røde» linjen, dvs. innrykket. Akkurat som i boktrykk. Riktignok er dette en sjelden praksis på Internett. Avsnitt skal bare skilles med et tomt mellomrom.
Den forhåndsformaterte teksten bevarer innrykk til venstre og mellom ord, og setter innrykk du angir med mellomrom. Advarsel! Taggen gjør ikke linjeskiftet automatisk!Formatering av lister
Bruk en tag eller for punktlister:
- Et av punktene på listen
- Et annet slikt element
- Et poeng til.
[*] Et annet slikt element
[*] Et poeng til.
For nummererte lister, bruk taggen:
- Et av punktene på listen
- Et annet slikt element
- Et poeng til.
[*] En av elementene i listen
[*] Et annet slikt element
[*] Et poeng til.
Den avsluttende taggen er valgfri:
- Et av punktene på listen
- Et annet slikt element
- Et poeng til.
[*] En av elementene i listen
[*] Et annet slikt element
[*] Et poeng til.
Det er også mulig å spesifisere type liste direkte:
- nummerert liste
- alfabetisk liste
- liste nummerert i romertall
Bilder
Http://img.cx/img/primer.jpg - eksempel på å sette inn et bilde.
Http://img.cx/img/primer.jpg - bilde til venstre.
Http://img.cx/img/primer.jpg - bilde til høyre.
* Denne koden ligner på HTML-koden:
Http://img.cx/img/primer.jpg - midtbilde.
* Denne koden ligner på HTML-koden:
Lignende tagger med titler og verktøytips:
Viktig! Du kan ikke bruke anførselstegn i navnet på bildet!
Http://img.cx/img/primer.jpg - eksempel på å sette inn et bilde.
Http://img.cx/img/primer.jpg - bilde til venstre.
Http://img.cx/img/primer.jpg - bilde til høyre.
Http://img.cx/img/primer.jpg - midtbilde.
Bilder med spesifiserte dimensjoner:
Http://img.cx/img/primer.jpg - eksempel på et bilde med størrelse.
* Denne koden ligner på HTML-koden:
Http://img.cx/img/primer.jpg - bilde til venstre, med størrelse.
Http://img.cx/img/primer.jpg - bilde til høyre, med størrelse.
Sette inn store bilder med rullefelt:
Http: //www..jpg - et bilde i det valgte området hvis det er større enn tilgjengelig visningsstørrelse på forumet.
Adresse - åpne bildet i et nytt vindu.
* Denne koden ligner på HTML-koden:
Adresse - åpne bildet i samme vindu.
* Denne koden ligner på HTML-koden:
I forbindelse med vedlikehold av denne bloggen må du fra tid til annen sette inn fragmenter av html- og css-kode på siden. I prosessen med å implementere en normal løsning viste det seg at det av en eller annen grunn ikke var mulig å finne en tilstrekkelig beskrivelse av ferdige løsninger på russisk, så du må fylle gapet selv.
La oss starte enkelt:
Hvordan setter jeg inn html-kode i teksten?
For å sette inn en eller to tagger i teksten på nettstedet, kan du bruke html-symboler< для вставки < и символ >å sette inn> dermed taggen
I html-kode skrives det somSette inn store kodebiter på nettstedet.
For å sette inn selve html-koden på nettstedet, er det tre tagger:
OGog
stikkord
Refererer til en blokk med forhåndsformatert tekst. Det vil si teksten der alle mellomrom og orddelinger allerede er plassert. Som standard i nettleseren, innholdet i taggenVises i monospace-skrift med alle mellomrom mellom ordene. I taggenAlle mellomrom vises og alle linjeskift telles (html ignorerer flere mellomrom som standard, og konverterer dem til ett). Inne i beholderenAlle andre tagger enn følgende kan brukes: , ,Neste merke er
spesialdesignet for skjermet visning av programkode. Som standard i nettleseren, innholdet i taggen
vises i liten tekst med monospace. Taggen tar ikke hensyn til ekstra mellomrom og tekstskift, som et resultat av at tagger må brukes for linjeskift
ogstikkord
Ikke gyldig fra html-standarden, men støttes for øyeblikket av alle nettlesere. Taggen viser innholdet i beholderen som vanlig tekst med alle mellomrom og bindestreker. Inntil merkelappen er "kanonisert", anses bruken som ikke-kosher og kjettersk. Den riktige løsningen for øyeblikket er å bruke taggen
Med tags festet til denpå steder hvor det er nødvendig. Teknisk sett, taggen
vi må unnslippe kodefragmenter som av en eller annen grunn faller ut av taggen
Hvordan dekorere html-kode pent med Jquery?
Vi bruker Snippet-skriptet på nettstedet vårt. Kodeutdraget er designet for å forenkle den visuelle utformingen av kodeeksempler. Skriptet ser slik ut:
Div.blog_right h2 (font-size: 24px; farge: # ff9933; margin-bottom: 9px; line-height: 44px; font-family: "arial", "verdana", sans-serif, "Lucida Sans"; font -vekt: 100; margin-top: 0,83em;)
Koble til kodeformateringsskriptet:
2) Vi inkluderer js- og css-filer. Du trenger også det tilkoblede Jquery-biblioteket.
3) Konfigurering av skriptet:
$ (dokument) .ready (funksjon () ($ ("pre.htmlCode"). snippet ("html", (stil: "syre")); // Leter etter tagger
Med klassen "htmlCode" // og koble syrestilen og html-behandlingen til disse elementene $ ("pre.styles"). Snippet ("css", (stil: "acid")); // Ser etter taggerMed "styles"-klassen // og koble syrestilen og CSS-kodebehandlingen til disse elementene $ ("pre.js"). Snippet ("javascript", (stil: "syre")); // Ser etter taggerMed klassen "js" // og koble syrestilen og prosessering for)) til disse elementene;4) Mer sofistikert dokumentasjon for skriptet er på utviklernettstedet. Skriptet kan endre designet i farten, markere de nødvendige kodebitene i rammer, ta ut søppelet og lage mat.
HTML spesialtegn Er korte stykker kode kalt symbolske enheter. De brukes til å vise tegn som har spesiell betydning i HTML, samt tegn som ikke er tilgjengelige på tastaturet.
HTML-spesialtegn kalles reserverte tegn. For eksempel venstre (<) и правые (>) vinkelparenteser er reservert i HTML for å definere start- og sluttkoder.
Tegn som ikke er tilgjengelige på tastaturet inkluderer tegn som copyright-symbolet (©) og den matematiske verdien pi.
Hvis vi vil bruke dem i et dokument og vise dem i en nettleser, må vi bruke HTML-tegnreferanser.
Praktisk eksempel
Anta at du vil vise en blokk med HTML-kode på en nettside slik at elementkoder vises. Du kan gjøre dette ved ganske enkelt å plassere HTML-blokken i tagger
... Men du vil finne det selv i
, vil blokkeringen fortsatt bli behandlet som HTML og gjengitt av nettleseren deretter. I dette tilfellet er det mulig å erstatte alle HTML-spesialtegn med passende symbolske lenker, slik at nettleseren ikke behandler koden:
Dette er en liste over elementer.
- Listeelement A
- Listeelement B
- Listeelement C