HTML Essentials Cheat Sheet: Taggar, attribut och mer

Att bygga webbsidor börjar med HTML. Att försköna dem och göra dem interaktiva kommer senare. Men för att börja skapa funktionella statiska webbplatser behöver du förståelse för HTML. (Vill du ha en snabb introduktion till detta märkningsspråk? Läs vår HTML FAQ.)

Som en del av att lära dig språket finns det en lång lista med element du behöver lägga till i ditt HTML-ordförråd. Och den här uppgiften kan verka skrämmande till en början, och det är därför vi har tagit fram följande cheat sheet. Det ger dig ett enkelt sätt att upptäcka/förstå/återkalla HTML-element när du behöver dem.

Fuskbladet täcker taggar och attribut för att strukturera webbsidor, formatera text, lägga till formulär, bilder, listor, länkar och tabeller. Den innehåller också taggar som introducerades i HTML5 och HTML-koder för vanliga specialtecken.

GRATIS NEDLADDNING: Detta fuskblad finns som ett nedladdningsbar PDF från vår distributionspartner, TradePub. Du måste fylla i ett kort formulär för att bara få tillgång till det för första gången. Ladda ner HTML Essentials-fuskbladet.

HTML Essentials-fuskbladet

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

...

Genväg	Handling
Grundläggande taggar
...	Den första och sista taggen i ett HTML-dokument. Alla andra taggar ligger mellan dessa öppnings- och stängningstaggar.
...	Anger insamlingen av metadata för dokumentet.
	Beskriver sidans titel och visas i webbläsarens namnlist.
...	Inkluderar allt innehåll som kommer att visas på webbsidan.
Dokumentinformation
Nämner bas-URL och alla relativa länkar till dokumentet.
För extra information om sidan som författare, publiceringsdatum, etc.
Länkar till externa element som stilmallar.
	Innehåller dokumentstilsinformation som CSS (Cascading Style Sheets).
	Innehåller länkar till externa skript.
Textformatering
... ELLER ...	Gör text fet.
...	Kursiverar text och gör den fet.
...	Kursiverar text men gör den inte fet.
...	Genomstruken text.
...	Citerar en författare till ett citat.
...	Märker en raderad del av en text.
...	Visar ett avsnitt som har infogats i innehållet.
...	För att visa citat. Används ofta med märka.
...	För kortare offerter.
...	För förkortningar och fullständiga formulär.
...	Anger kontaktuppgifter.
...	För definitioner.
...	För kodsnuttar.
...	För att skriva prenumerationer
...	För att skriva upphöjda texter.
...	För att minska textstorleken och markera redundant information i HTML5.
Dokumentstruktur
...	Olika nivåer av rubriker. H1 är störst och H6 är minst.
...	För att dela upp innehåll i block.
...	Innehåller inline-element, som en bild, ikon, uttryckssymbol, utan att förstöra sidans formatering.
...	Innehåller vanlig text.
	Skapar en ny rad.
	Ritar en horisontell stapel för att visa slutet av avsnittet.
Listor
...	För beställd lista med varor.
...	För oordnad lista med artiklar.
...	För enskilda objekt i en lista.
...	Lista över objekt med definitioner.
...	Definitionen av en enskild term i linje med kroppens innehåll.
...	Beskrivningen för den definierade termen.
Länkar
...	Ankartagg för hyperlänkar.
...	Tagga för länkning till e-postadresser.
...	Ankartagg för listning av kontaktnummer.
...	Ankartagg för att länka till en annan del av samma sida.
...	Navigerar till en div-sektion på webbsidan. (Variation av taggen ovan)
Bilder
	För att visa bildfiler.
Attribut för märka
src="url"	Länk till bildens källsökväg.
alt="text"	Texten som visas när en mus hålls över bilden.
höjd =” ”	Bildhöjd i pixlar eller procent.
bredd =” ”	Bildbredd i pixlar eller procent.
align =” ”	Relativ justering av bilden på sidan.
gräns =” ”	Bildens kanttjocklek.
	Länk till en klickbar karta.
	Namn på kartbilden.
Bildytan för en bildkarta.
Attribut för märka
form =" "	Bildytans form.
coords =” ”	Koordinater för kartbildsområdet.
Blanketter
...	Den överordnade taggen för ett HTML-formulär.
Attribut för märka
action="url"	Webbadressen där formulärdata skickas.
metod =” ”	Anger protokollet för inlämning av formulär (POST eller GET).
enctype=""	Datakodningsschemat för POST-inlämningar.
autoslutförande	Anger om formulärautofyll är på eller av.
novalidate	Anger om formuläret ska valideras innan inlämning.
acceptera-teckenuppsättningar	Anger teckenkodning för formulärinlämningar.
mål	Visar var formulärsvaret kommer att visas.
...	Gruppera relaterade element i formuläret/
...	Anger vad användaren ska ange i varje formulärfält.
...	En bildtext för elementet fieldset.
Anger vilken typ av input som ska tas från användaren.
Attribut för märka
typ =””	Bestämmer typen av inmatning (text, datum, lösenord).
namn =””	Anger namnet på inmatningsfältet.
värde =””	Anger värdet i inmatningsfältet.
storlek =""	Ställer in antalet tecken för inmatningsfältet.
maxlength=""	Ställer in gränsen för tillåtna inmatningstecken.
nödvändig	Gör ett inmatningsfält obligatoriskt.
bredd =""	Ställer in bredden på inmatningsfältet i pixlar.
höjd=””	Ställer in höjden på inmatningsfältet i pixlar.
platshållare =""	Beskriver förväntat fältvärde.
mönster =””	Anger ett reguljärt uttryck som kan användas för att leta efter mönster i användarens text.
min=””	Minsta tillåtna värde för ett inmatningselement.
max=””	Det högsta tillåtna värdet för ett inmatningselement.
Inaktiverad	Inaktiverar inmatningselementet.
...	För att fånga längre datasträngar från användaren.
...	Anger en lista med alternativ som användaren kan välja mellan.
Attribut för märka
namn =””	Anger namn för en rullgardinslista.
storlek =""	Antalet alternativ som ges till användaren.
flera olika	Anger om användaren kan välja flera alternativ från listan.
nödvändig	Anger om det är nödvändigt att välja ett eller flera alternativ för att skicka in formulär.
autofokus	Anger att en rullgardinslista automatiskt hamnar i fokus efter att en sida har laddats.
...	Definierar objekt i en rullgardinslista.
värde =””	Visar texten för ett givet alternativ.
vald	Ställer in standardalternativ som visas.
...	Tagg för att skapa en knapp för inlämning av formulär.
Objekt och iFrames
	Beskriver den inbäddade filtypen.
Attribut för
höjd=””	Objektets höjd.
bredd =""	Objektets bredd.
typ =””	Den typ av media som objektet innehåller.
	En inline ram för inbäddning av extern information.
namn =””	Namnet på iFrame.
src=""	Käll-URL för innehållet inuti ramen.
srcdoc=""	HTML-innehållet inom ramen.
höjd=””	Höjden på iFrame.
bredd =” ”	Bredden på iFrame.
Lägger till extra parametrar för att anpassa iFrame.
...	Bäddar in extern applikation eller plugin.
Attribut för
höjd =" "	Ställer in höjden på inbäddningen.
bredd =" "	Ställer in bredden på inbäddningen.
typ =””	Typen eller formatet för inbäddningen.
src=""	Källsökvägen för den inbäddade filen.
Tabeller
...	Definierar allt innehåll för en tabell.
En beskrivning av tabellen.
Rubriker för varje kolumn i tabellen.
Definierar kroppens data för tabellen.
Beskriver innehållet för tabellens sidfot.
Innehåll för en enda rad.
	...	Data i ett enda rubrikobjekt.
	...	Innehåll i en enda tabellcell.
Grupperar kolumner för formatering.
En enda kolumn med information.
HTML5 Nya taggar
...	Anger webbsidans rubrik.
	Anger sidfoten på webbsidan.
...	Markerar huvudinnehållet på webbsidan.
...	Anger en artikel.
	Anger sidofältets innehåll på en sida.
...	Anger ett särskilt avsnitt på webbsidan.
...	För att beskriva extra information.
...	Används som rubrik för taggen ovan. Är alltid synlig för användaren.
...	Skapar en dialogruta.
...	Används för att inkludera diagram och figurer.
	Beskriver en element.
...	Markerar en specifik del av texten.
	Uppsättning av navigeringslänkar på en webbsida.
...	Ett särskilt objekt från en lista eller en meny.
...	Mäter data inom ett givet intervall.
...	Placerar en förloppsindikator och spårar framsteg.
...	Visar text som inte stöder Ruby-kommentarer.
...	Visar östasiatisk typografikaraktärsdetaljer.
...	En rubinkommentar för östasiatisk typografi.
...	Identifierar tid och datum.
En radbrytning i innehållet.
¹HTML5-teckenobjekt
"ELLER "	Citattecken
< ELLER &lt ;	Mindre än tecken (
> ELLER &gt ;	Större än tecknet (>)
ELLER &nbsp ;	Icke-brytande utrymme
© ELLER &copy ;	Copyright symbol
™ ELLER &ucirc ;	Varumärkessymbol
@ ELLER &Uuml ;	"at"-symbol (@)
& ELLER &amp ;	Ampersand-symbol (&)
• ELLER &ouml ;	Liten kula
¹Ignorera blanksteg före semikolon när du skriver HTML-tecken.

Bygg en webbplats för praktisk upplevelse

När du väl har förstått grunderna i HTML-kod och har praktiska kunskaper om CSS och JavaScript, prova dig fram med att bygga en webbplats Hur man gör en webbplats: För nybörjareIdag kommer jag att guida dig genom processen att göra en komplett webbplats från grunden. Oroa dig inte om detta låter svårt. Jag guidar dig genom det varje steg på vägen. Läs mer . Se också till att spara vår CSS3 egenskaper fuskblad Fuskbladet för Essential CSS3 PropertiesBemästra viktig CSS-syntax med vårt fuskblad för CSS3-egenskaper. Läs mer och JavaScript fuskblad The Ultimate JavaScript Cheat SheetFå en snabb uppdatering av JavaScript-element med det här fuskbladet. Läs mer för framtida bruk!