HTML Essentials-snydearket: tags, attributter og mere

Opbygning af websider begynder med HTML. At forskønne dem og gøre dem interaktive kommer senere. Men for at begynde at skabe funktionelle statiske hjemmesider, har du brug for en forståelse af HTML. (Vil du have en hurtig introduktion til dette opmærkningssprog? Læs vores HTML ofte stillede spørgsmål.)

Som en del af at lære sproget er der en lang liste af elementer, du skal tilføje til dit HTML-ordforråd. Og denne opgave kan virke skræmmende i starten, og derfor har vi fundet på følgende snydeark. Det giver dig en nem måde at opdage/forstå/genkalde HTML-elementer, når som helst du har brug for dem.

Snydearket dækker tags og attributter til strukturering af websider, formatering af tekst, tilføjelse af formularer, billeder, lister, links og tabeller. Det inkluderer også tags, der blev introduceret i HTML5 og HTML-koder for almindeligt anvendte specialtegn.

GRATIS DOWNLOAD: Dette snydeark fås som en downloadbar PDF fra vores distributionspartner, TradePub. Du skal udfylde en kort formular for kun at få adgang til den første gang. Hent HTML Essentials Cheat Sheet.

HTML Essentials Cheat Sheet

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

...

Genvej	Handling
Grundlæggende tags
...	Det første og sidste tag i et HTML-dokument. Alle andre mærker ligger mellem disse åbnings- og lukkemærker.
...	Angiver indsamlingen af ​​metadata for dokumentet.
	Beskriver titlen på siden og vises i browserens titellinje.
...	Indeholder alt indhold, der vil blive vist på websiden.
Dokumentoplysninger
Nævner basis-URL'en og alle relative links til dokumentet.
For ekstra information om siden som forfatter, udgivelsesdato osv.
Links til eksterne elementer som typografiark.
	Indeholder information om dokumentstil som CSS (Cascading Style Sheets).
	Indeholder links til eksterne scripts.
Tekstformatering
... ELLER ...	Gør tekst fed.
...	Kursivering af tekst og gør den fed.
...	Kursivering af tekst, men gør den ikke fed.
...	Gennemstreget tekst.
...	Citerer en forfatter til et citat.
...	Mærker en slettet del af en tekst.
...	Viser en sektion, der er blevet indsat i indholdet.
...	Til visning af citater. Bruges ofte sammen med tag.
...	For kortere tilbud.
...	For forkortelser og fulde formularer.
...	Angiver kontaktoplysninger.
...	Til definitioner.
...	Til kodestykker.
...	Til at skrive abonnementer
...	Til at skrive hævet skrift.
...	Til at reducere tekststørrelsen og markere overflødig information i HTML5.
Dokumentstruktur
...	Forskellige niveauer af overskrifter. H1 er den største og H6 er den mindste.
...	Til opdeling af indhold i blokke.
...	Inkluderer indlejrede elementer, såsom et billede, ikon, humørikon, uden at ødelægge formateringen af ​​siden.
...	Indeholder almindelig tekst.
	Opretter en ny linje.
	Tegner en vandret bjælke for at vise slutningen af ​​sektionen.
Lister
...	For bestilt liste over varer.
...	For uordnet liste over varer.
...	For individuelle elementer på en liste.
...	Liste over emner med definitioner.
...	Definitionen af ​​et enkelt udtryk i tråd med kropsindholdet.
...	Beskrivelsen for det definerede udtryk.
Links
...	Ankermærke til hyperlinks.
...	Tag for at linke til e-mailadresser.
...	Ankermærke til notering af kontaktnumre.
...	Ankertag til at linke til en anden del af samme side.
...	Navigerer til en div-sektion på websiden. (Variation af ovenstående tag)
Billeder
	Til visning af billedfiler.
Attributter til tag
src="url"	Link til billedets kildesti.
alt="tekst"	Teksten, der vises, når musen holdes over billedet.
højde =” ”	Billedhøjde i pixels eller procenter.
bredde = " "	Billedbredde i pixels eller procenter.
align =” ”	Relativ justering af billedet på siden.
grænse =” ”	Billedets kanttykkelse.
	Link til et klikbart kort.
	Navn på kortbilledet.
Billedområdet på et billedkort.
Attributter til tag
form =" "	Billedområdets form.
coords =” ”	Koordinater for kortbilledområdet.
Former
...	Det overordnede tag for en HTML-formular.
Attributter til tag
action="url"	Webadressen, hvor formulardata indsendes.
metode =” ”	Angiver formularindsendelsesprotokollen (POST eller GET).
enctype=""	Datakodningsskemaet for POST-indsendelser.
autofuldførelse	Angiver, om formular autofuldførelse er slået til eller fra.
ikke validere	Angiver om formularen skal valideres inden indsendelse.
accept-tegnsæt	Angiver tegnkodning for formularindsendelser.
mål	Viser, hvor formularindsendelsessvaret vil blive vist.
...	Grupper relaterede elementer i form/
...	Angiver, hvad brugeren skal indtaste i hvert formularfelt.
...	En billedtekst til feltsætelementet.
Angiver hvilken type input, der skal tages fra brugeren.
Attributter til tag
type=””	Bestemmer typen af ​​input (tekst, datoer, adgangskode).
navn =""	Angiver navnet på inputfeltet.
værdi =""	Angiver værdien i inputfeltet.
størrelse =""	Indstiller antallet af tegn for indtastningsfeltet.
maxlength=""	Indstiller grænsen for tilladte inputtegn.
påkrævet	Gør et indtastningsfelt obligatorisk.
bredde =""	Indstiller bredden af ​​inputfeltet i pixels.
højde =""	Indstiller højden af ​​inputfeltet i pixels.
pladsholder =""	Beskriver forventet feltværdi.
mønster =""	Angiver et regulært udtryk, som kan bruges til at lede efter mønstre i brugerens tekst.
min =””	Minimumsværdien tilladt for et inputelement.
max=""	Den maksimalt tilladte værdi for et inputelement.
handicappet	Deaktiverer input-elementet.
...	Til at fange længere datastrenge fra brugeren.
...	Angiver en liste over muligheder, som brugeren kan vælge imellem.
Attributter til tag
navn =""	Angiver navn til en rulleliste.
størrelse =""	Antal muligheder givet til brugeren.
mange	Indstiller, om brugeren kan vælge flere muligheder fra listen.
påkrævet	Angiver, om det er nødvendigt at vælge en eller flere muligheder for indsendelse af formularer.
autofokus	Angiver, at en rulleliste automatisk kommer i fokus, efter at en side er indlæst.
...	Definerer elementer i en rulleliste.
værdi =""	Viser teksten for en given indstilling.
valgte	Indstiller standardindstillingen, der vises.
...	Tag til oprettelse af en knap til formularindsendelse.
Objekter og iFrames
	Beskriver den indlejrede filtype.
Attributter til
højde =""	Objektets højde.
bredde =""	Objektets bredde.
type=””	Den type medie objektet indeholder.
	En inline-ramme til indlejring af ekstern information.
navn =""	Navnet på iFrame.
src=""	Kilde-URL'en for indholdet inde i rammen.
srcdoc=""	HTML-indholdet i rammen.
højde =""	Højden på iFrame.
bredde = " "	Bredden af ​​iFrame.
Tilføjer ekstra parametre for at tilpasse iFrame.
...	Integrer eksternt program eller plugin.
Attributter til
højde =" "	Indstiller højden af ​​indlejringen.
bredde =" "	Indstiller bredden af ​​indlejringen.
type=””	Indlejringens type eller format.
src=""	Kildestien til den indlejrede fil.
Tabeller
...	Definerer alt indhold for en tabel.
En beskrivelse af tabellen.
Overskrifter for hver kolonne i tabellen.
Definerer kroppens data for tabellen.
Beskriver indholdet af tabellens sidefod.
Indhold for en enkelt række.
	...	Dataene i et enkelt overskriftselement.
	...	Indhold i en enkelt tabelcelle.
Grupperer kolonner til formatering.
En enkelt kolonne med information.
HTML5 nye tags
...	Angiver sidehovedet.
	Angiver sidefoden.
...	Markerer hovedindholdet på websiden.
...	Angiver en artikel.
	Angiver sidebjælkeindhold på en side.
...	Angiver en bestemt sektion på websiden.
...	Til beskrivelse af ekstra information.
...	Brugt som overskrift til ovenstående tag. Er altid synlig for brugeren.
...	Opretter en dialogboks.
...	Bruges til at inkludere diagrammer og figurer.
	Beskriver en element.
...	Fremhæver en bestemt del af teksten.
	Sæt af navigationslinks på en webside.
...	Et bestemt punkt fra en liste eller en menu.
...	Måler data inden for et givet område.
...	Placerer en statuslinje og sporer fremskridt.
...	Viser tekst, der ikke understøtter Ruby-annoteringer.
...	Viser østasiatiske typografiske karakterdetaljer.
...	En rubinanmærkning til østasiatisk typografi.
...	Identificerer tid og dato.
Et linjeskift i indholdet.
¹HTML5-tegnobjekter
"ELLER "	Anførselstegn
< ELLER &lt ;	Mindre end tegn (
> ELLER &gt ;	Større end tegn (>)
ELLER &nbsp ;	Non-breaking plads
© ELLER &kopi ;	Copyright symbol
™ ELLER &ucirc ;	Varemærke symbol
@ ELLER &Uuml ;	"at" symbol (@)
& ELLER &amp ;	A-tegn (&)
• ELLER &ouml ;	Lille kugle
¹Ignorer mellemrum før semikolon, mens du skriver HTML-tegn.

Byg et websted til praktisk oplevelse

Når du har forstået det grundlæggende i HTML-kode og har et praktisk kendskab til CSS og JavaScript, prøv at bygge en hjemmeside Sådan laver du en hjemmeside: For begyndereI dag vil jeg guide dig gennem processen med at lave en komplet hjemmeside fra bunden. Bare rolig, hvis det lyder svært. Jeg vil guide dig igennem det hele vejen. Læs mere . Sørg også for at gemme vores CSS3-egenskaber snydeark The Essential CSS3 Properties Cheat SheetBehersk essentiel CSS-syntaks med vores CSS3-egenskabssnydeark. Læs mere og JavaScript snydeark Det ultimative JavaScript-snydearkFå en hurtig genopfriskning af JavaScript-elementer med dette snydeark. Læs mere til fremtidig brug!