HTML Essentials-juksearket: koder, attributter og mer

Å bygge nettsider begynner med HTML. Å forskjønne dem og gjøre dem interaktive kommer senere. Men for å begynne å lage funksjonelle statiske nettsteder, trenger du en forståelse av HTML. (Vil du ha en rask introduksjon til dette markup-språket? Les vår HTML vanlige spørsmål.)

Som en del av å lære språket, er det en lang liste over elementer du må legge til i HTML-vokabularet ditt. Og denne oppgaven kan virke skremmende i starten, og det er derfor vi har kommet opp med følgende jukseark. Det gir deg en enkel måte å oppdage/forstå/gjenkalle HTML-elementer når du trenger dem.

Juksearket dekker tagger og attributter for å strukturere nettsider, formatere tekst, legge til skjemaer, bilder, lister, lenker og tabeller. Den inkluderer også tagger som ble introdusert i HTML5 og HTML-koder for vanlig brukte spesialtegn.

GRATIS NEDLASTING: Dette juksearket er tilgjengelig som en nedlastbar PDF fra vår distribusjonspartner, TradePub. Du må fylle ut et kort skjema for kun å få tilgang til det for første gang. nedlasting HTML Essentials Cheat Sheet.

HTML Essentials Cheat Sheet

... ... ... ... ...

...

Snarvei	Handling
Grunnleggende tagger
...	Den første og siste taggen i et HTML-dokument. Alle andre tagger ligger mellom disse åpnings- og lukkebrikkene.
...	Angir innsamlingen av metadata for dokumentet.
	Beskriver tittelen for siden og vises i nettleserens tittellinje.
...	Inkluderer alt innhold som vil bli vist på nettsiden.
Dokumentinformasjon
Nevner basis-URLen og alle relative lenker til dokumentet.
For ekstra informasjon om siden som forfatter, publiseringsdato osv.
Lenker til eksterne elementer som stilark.
	Inneholder dokumentstilinformasjon som CSS (Cascading Style Sheets).
	Inneholder lenker til eksterne skript.
Tekstformatering
... ELLER ...	Gjør tekst fet.
...	Kursiverer tekst og gjør den fet.
...	Kursiverer tekst, men gjør den ikke fet.
...	Gjennomstrekingstekst.
...	Siterer en forfatter av et sitat.
...	Merker en slettet del av en tekst.
...	Viser en del som er satt inn i innholdet.
...	For å vise sitater. Brukes ofte sammen med stikkord.
...	For kortere sitater.
...	For forkortelser og fullstendige skjemaer.
...	Angir kontaktinformasjon.
...	For definisjoner.
...	For kodebiter.
...	For å skrive abonnementer
...	For å skrive hevet skrift.
...	For å redusere tekststørrelsen og merke overflødig informasjon i HTML5.
Dokumentstruktur
...	Ulike nivåer av overskrifter. H1 er størst og H6 er minste.
...	For å dele innhold i blokker.
...	Inkluderer innebygde elementer, som et bilde, ikon, uttrykksikon, uten å ødelegge formateringen av siden.
...	Inneholder ren tekst.
	Oppretter en ny linje.
	Tegner en horisontal stolpe for å vise slutten av delen.
Lister
...	For bestilt liste over varer.
...	For uordnet liste over varer.
...	For individuelle elementer i en liste.
...	Liste over elementer med definisjoner.
...	Definisjonen av et enkelt begrep i tråd med kroppens innhold.
...	Beskrivelsen for det definerte begrepet.
Lenker
...	Ankertag for hyperkoblinger.
...	Tag for kobling til e-postadresser.
...	Ankermerke for oppføring av kontaktnumre.
...	Ankertag for kobling til en annen del av samme side.
...	Navigerer til en div-del av nettsiden. (Variasjon av taggen ovenfor)
Bilder
	For visning av bildefiler.
Attributter for stikkord
src="url"	Link til kildebanen til bildet.
alt="tekst"	Teksten som vises når musen holdes over bildet.
høyde=” ”	Bildehøyde i piksler eller prosenter.
bredde = " "	Bildebredde i piksler eller prosenter.
align = " "	Relativ justering av bildet på siden.
border=” ”	Kanttykkelse på bildet.
	Link til et klikkbart kart.
	Navn på kartbildet.
Bildeområdet til et bildekart.
Attributter for stikkord
form = " "	Formen på bildeområdet.
coords = " "	Koordinater for kartbildeområdet.
Skjemaer
...	Overordnet tag for et HTML-skjema.
Attributter for stikkord
action="url"	Nettadressen der skjemadata sendes inn.
metode=” ”	Spesifiserer skjemainnsendingsprotokollen (POST eller GET).
enctype=" "	Datakodingsskjemaet for POST-innleveringer.
autofullfør	Angir om autofullføring av skjema er på eller av.
novalidate	Angir om skjemaet skal valideres før innsending.
aksept-tegnsett	Angir tegnkoding for skjemainnsendinger.
mål	Viser hvor skjemainnsendingssvaret vil vises.
...	Grupper relaterte elementer i skjemaet/
...	Angir hva brukeren skal skrive inn i hvert skjemafelt.
...	En bildetekst for feltsettelementet.
Spesifiserer hvilken type input som skal tas fra brukeren.
Attributter for stikkord
type=””	Bestemmer typen inndata (tekst, datoer, passord).
navn=””	Angir navnet på inndatafeltet.
verdi=””	Angir verdien i inndatafeltet.
størrelse =""	Angir antall tegn for inndatafeltet.
maxlength=""	Angir grensen for tillatte inndatategn.
nødvendig	Gjør et inntastingsfelt obligatorisk.
width=""	Angir bredden på inndatafeltet i piksler.
høyde=””	Angir høyden på inndatafeltet i piksler.
plassholder=""	Beskriver forventet feltverdi.
mønster=""	Angir et regulært uttrykk, som kan brukes til å se etter mønstre i brukerens tekst.
min=””	Minimumsverdien som er tillatt for et inngangselement.
max=""	Den maksimale verdien som er tillatt for et inngangselement.
funksjonshemmet	Deaktiverer inngangselementet.
...	For å fange opp lengre datastrenger fra brukeren.
...	Angir en liste over alternativer som brukeren kan velge fra.
Attributter for stikkord
navn=””	Angir navn for en rullegardinliste.
størrelse =""	Antall alternativer gitt til brukeren.
flere	Angir om brukeren kan velge flere alternativer fra listen.
nødvendig	Angir om valg av alternativ(er) er nødvendig for innsending av skjema.
autofokus	Angir at en rullegardinliste automatisk kommer i fokus etter at en side er lastet inn.
...	Definerer elementer i en rullegardinliste.
verdi=””	Viser teksten for et gitt alternativ.
valgt	Angir standardalternativet som vises.
...	Tag for å lage en knapp for innsending av skjema.
Objekter og iFrames
	Beskriver den innebygde filtypen.
Attributter for
høyde=””	Høyden på objektet.
width=""	Bredden på objektet.
type=””	Typen media objektet inneholder.
	En innebygd ramme for å bygge inn ekstern informasjon.
navn=””	Navnet på iFrame.
src=""	Kilde-URL for innholdet i rammen.
srcdoc=""	HTML-innholdet i rammen.
høyde=””	Høyden på iFrame.
bredde = " "	Bredden på iFrame.
Legger til ekstra parametere for å tilpasse iFrame.
...	Bygger inn ekstern applikasjon eller plugin.
Attributter for
høyde = " "	Angir høyden på innebyggingen.
width=" "	Angir bredden på innebyggingen.
type=””	Type eller format for innebyggingen.
src=""	Kildebanen til den innebygde filen.
Tabeller
...	Definerer alt innhold for en tabell.
En beskrivelse av tabellen.
Overskrifter for hver kolonne i tabellen.
Definerer kroppsdata for tabellen.
Beskriver innholdet for tabellens bunntekst.
Innhold for en enkelt rad.
	...	Dataene i ett enkelt overskriftselement.
	...	Innhold i én enkelt tabellcelle.
Grupperer kolonner for formatering.
En enkelt kolonne med informasjon.
HTML5 Nye koder
...	Spesifiserer overskriften på nettsiden.
	Angir bunnteksten på nettsiden.
...	Markerer hovedinnholdet på nettsiden.
...	Spesifiserer en artikkel.
	Spesifiserer sidefeltinnholdet på en side.
...	Spesifiserer en bestemt del på nettsiden.
...	For å beskrive ekstra informasjon.
...	Brukes som overskrift for taggen ovenfor. Er alltid synlig for brukeren.
...	Oppretter en dialogboks.
...	Brukes for å inkludere diagrammer og figurer.
	Beskriver en element.
...	Fremhever en bestemt del av teksten.
	Sett med navigasjonslenker på en nettside.
...	Et bestemt element fra en liste eller en meny.
...	Måler data innenfor et gitt område.
...	Plasserer en fremdriftslinje og sporer fremdriften.
...	Viser tekst som ikke støtter Ruby-kommentarer.
...	Viser øst-asiatiske typografikarakterdetaljer.
...	En rubinkommentar for østasiatisk typografi.
...	Identifiserer tid og dato.
Et linjeskift i innholdet.
¹HTML5-karakterobjekter
"ELLER "	Anførselstegn
< ELLER &lt ;	Mindre enn tegn (
> ELLER &gt ;	Større enn tegn (>)
ELLER &nbsp ;	Non-breaking plass
© ELLER &kopi ;	Copyright-symbol
™ ELLER &ucirc ;	Varemerkesymbol
@ ELLER &Uuml ;	«at»-symbol (@)
& ELLER &amp ;	Ampsand-symbol (&)
• ELLER &ouml ;	Liten kule
¹Ignorer mellomrom før semikolon mens du skriver HTML-tegn.

Bygg et nettsted for praktisk opplevelse

Når du har forstått det grunnleggende om HTML-kode og har praktisk kunnskap om CSS og JavaScript, prøve deg på å bygge et nettsted Hvordan lage et nettsted: For nybegynnereI dag skal jeg veilede deg gjennom prosessen med å lage en komplett nettside fra bunnen av. Ikke bekymre deg hvis dette høres vanskelig ut. Jeg vil veilede deg gjennom det hvert trinn på veien. Les mer . Husk også å lagre vår CSS3 egenskaper jukseark Cheat Sheet for Essential CSS3 PropertiesBehersk essensiell CSS-syntaks med jukseark for CSS3-egenskaper. Les mer og JavaScript jukseark The Ultimate JavaScript Cheat SheetFå en rask oppfriskning av JavaScript-elementer med dette juksearket. Les mer for fremtidig bruk!