Cheat Sheet HTML Essentials: etichete, atribute și multe altele

Construirea paginilor web începe cu HTML. Înfrumusețarea lor și facerea lor interactive vine mai târziu. Dar pentru a începe să creați site-uri web statice funcționale, aveți nevoie de o înțelegere a HTML. (Doriți o introducere rapidă în acest limbaj de marcare? Citiți-ne Întrebări frecvente HTML.)

Ca parte a învățării limbii, există o listă lungă de elemente pe care trebuie să le adăugați la vocabularul HTML. Și această sarcină poate părea descurajantă la început, motiv pentru care am venit cu următoarea foaie de cheat. Vă oferă o modalitate ușoară de a descoperi/înțelege/rechema elemente HTML oricând aveți nevoie de ele.

Cheat sheet acoperă etichete și atribute pentru structurarea paginilor web, formatarea textului, adăugarea de formulare, imagini, liste, linkuri și tabele. De asemenea, include etichete care au fost introduse în codurile HTML5 și HTML pentru caracterele speciale utilizate în mod obișnuit.

DESCĂRCARE GRATUITĂ: Această foaie de cheat este disponibilă ca a PDF descărcabil de la partenerul nostru de distribuție, TradePub. Va trebui să completați un scurt formular pentru a-l accesa doar pentru prima dată. Descarca

Cheat Sheet HTML Essentials.

Cheat Sheet HTML Essentials

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

...

Comandă rapidă	Acțiune
Etichete de bază
...	Prima și ultima etichetă a unui document HTML. Toate celelalte etichete se află între aceste etichete de deschidere și de închidere.
...	Specifică colecția de metadate pentru document.
	Descrie titlul paginii și apare în bara de titlu a browserului.
...	Include tot conținutul care va fi afișat pe pagina web.
Informații despre document
Menționează adresa URL de bază și toate linkurile relative către document.
Pentru informații suplimentare despre pagină, cum ar fi autorul, data publicării etc.
Legături către elemente externe, cum ar fi foile de stil.
	Conține informații despre stilul documentului, cum ar fi CSS (Cascading Style Sheets).
	Conține link-uri către scripturi externe.
Formatarea textului
... SAU ...	Face textul aldine.
...	Scrie în italice textul și îl face aldine.
...	Textul cu caractere italice, dar nu îl face aldine.
...	Text barat.
...	Citează un autor al unui citat.
...	Etichetează o porțiune ștearsă a unui text.
...	Afișează o secțiune care a fost inserată în conținut.
...	Pentru afișarea citatelor. Adesea folosit cu etichetă.
...	Pentru citate mai scurte.
...	Pentru abrevieri și forme complete.
...	Specifică detaliile de contact.
...	Pentru definiții.
...	Pentru fragmente de cod.
...	Pentru scrierea indicelor
...	Pentru scrierea superscriptelor.
...	Pentru reducerea dimensiunii textului și marcarea informațiilor redundante în HTML5.
Structura documentului
...	Niveluri diferite de titluri. H1 este cel mai mare și H6 este cel mai mic.
...	Pentru împărțirea conținutului în blocuri.
...	Include elemente inline, cum ar fi o imagine, pictogramă, emoticon, fără a strica formatarea paginii.
...	Conține text simplu.
	Creează o linie nouă.
	Desenează o bară orizontală pentru a afișa sfârșitul secțiunii.
Liste
...	Pentru lista de articole comandate.
...	Pentru o listă neordonată de articole.
...	Pentru articole individuale dintr-o listă.
...	Lista articolelor cu definiții.
...	Definiția unui singur termen în linie cu conținutul corpului.
...	Descrierea termenului definit.
Legături
...	Etichetă de ancorare pentru hyperlinkuri.
...	Etichetă pentru conectarea la adrese de e-mail.
...	Etichetă de ancorare pentru listarea numerelor de contact.
...	Etichetă de ancorare pentru conectarea la o altă parte a aceleiași pagini.
...	Navighează la o secțiune div a paginii web. (Variația etichetei de mai sus)
Imagini
	Pentru afișarea fișierelor imagine.
Atribute pentru etichetă
src="url"	Link către calea sursă a imaginii.
alt="text"	Textul afișat atunci când mouse-ul este plasat peste imagine.
inaltime=””	Înălțimea imaginii în pixeli sau procente.
lățime=””	Lățimea imaginii în pixeli sau procente.
align=""	Alinierea relativă a imaginii pe pagină.
chenar=""	Grosimea marginii imaginii.
	Link către o hartă pe care se poate face clic.
	Numele imaginii hărții.
Zona de imagine a unei hărți imagine.
Atribute pentru etichetă
forma=””	Forma zonei imaginii.
coords=""	Coordonatele zonei imaginii hărții.
Forme
...	Eticheta părinte pentru un formular HTML.
Atribute pentru etichetă
action=”url”	Adresa URL la care sunt trimise datele formularului.
metoda=””	Specifică protocolul de trimitere a formularelor (POST sau GET).
enctype=""	Schema de codificare a datelor pentru trimiterile POST.
completare automată	Specifică dacă completarea automată a formularului este activată sau dezactivată.
nuvalidate	Specifică dacă formularul trebuie validat înainte de trimitere.
accept-seturi de caractere	Specifică codificarea caracterelor pentru trimiterea formularelor.
ţintă	Afișează unde va fi afișat răspunsul la trimiterea formularului.
...	Grupează elementele asociate sub forma/
...	Specifică ce ar trebui să introducă utilizatorul în fiecare câmp al formularului.
...	O legendă pentru elementul fieldset.
Specifică ce tip de intrare să ia de la utilizator.
Atribute pentru etichetă
tip=""	Determină tipul de intrare (text, date, parolă).
nume=””	Specifică numele câmpului de intrare.
valoare=””	Specifică valoarea în câmpul de intrare.
dimensiune=””	Setează numărul de caractere pentru câmpul de introducere.
lungime maximă =””	Setează limita permisă de caractere introduse.
necesar	Face un câmp de introducere obligatoriu.
lățime=””	Setează lățimea câmpului de intrare în pixeli.
inaltime=””	Setează înălțimea câmpului de intrare în pixeli.
substituent=""	Descrie valoarea așteptată a câmpului.
model=””	Specifică o expresie regulată, care poate fi folosită pentru a căuta modele în textul utilizatorului.
min=””	Valoarea minimă permisă pentru un element de intrare.
max=""	Valoarea maximă permisă pentru un element de intrare.
dezactivat	Dezactivează elementul de intrare.
...	Pentru captarea șirurilor mai lungi de date de la utilizator.
...	Specifică o listă de opțiuni din care utilizatorul poate alege.
Atribute pentru etichetă
nume=””	Specifică numele pentru o listă derulantă.
dimensiune=””	Numărul de opțiuni oferite utilizatorului.
multiplu	Stabilește dacă utilizatorul poate alege mai multe opțiuni din listă.
necesar	Specifică dacă alegerea unei opțiuni/opțiuni este necesară pentru trimiterea formularului.
autofocus	Specifică faptul că o listă derulantă intră automat în centrul atenției după ce o pagină se încarcă.
...	Definește elemente dintr-o listă derulantă.
valoare=””	Afișează textul pentru orice opțiune dată.
selectat	Setează opțiunea implicită care este afișată.
...	Etichetă pentru crearea unui buton pentru trimiterea formularului.
Obiecte și iFrame
	Descrie tipul de fișier încorporat.
Atribute pentru
inaltime=””	Înălțimea obiectului.
lățime=””	Lățimea obiectului.
tip=""	Tipul de suport pe care îl conține obiectul.
	Un cadru inline pentru încorporarea informațiilor externe.
nume=””	Numele iFrame-ului.
src=""	Adresa URL sursă pentru conținutul din cadrul.
srcdoc=""	Conținutul HTML din cadru.
inaltime=””	Înălțimea iFrame-ului.
lățime=””	Lățimea iFrame-ului.
Adaugă parametri suplimentari pentru a personaliza iFrame.
...	Încorporează aplicație sau plugin extern.
Atribute pentru
inaltime=” “	Setează înălțimea încorporarii.
lățime=""	Setează lățimea înglobării.
tip=""	Tipul sau formatul încorporarii.
src=""	Calea sursă a fișierului încorporat.
Mese
...	Definește tot conținutul unui tabel.
O descriere a tabelului.
Anteturi pentru fiecare coloană din tabel.
Definește datele corpului pentru tabel.
Descrie conținutul subsolului tabelului.
Conținut pentru un singur rând.
	...	Datele dintr-un singur articol de antet.
	...	Conținut dintr-o singură celulă de tabel.
Grupează coloanele pentru formatare.
O singură coloană de informații.
Etichete noi HTML5
...	Specifică antetul paginii web.
	Specifică subsolul paginii web.
...	Marchează conținutul principal al paginii web.
...	Specifică un articol.
	Specifică conținutul barei laterale a unei pagini.
...	Specifică o anumită secțiune din pagina web.
...	Pentru descrierea informațiilor suplimentare.
...	Folosit ca titlu pentru eticheta de mai sus. Este întotdeauna vizibil pentru utilizator.
...	Creează o casetă de dialog.
...	Folosit pentru a include diagrame și cifre.
	Descrie a element.
...	Evidențiază o anumită parte a textului.
	Set de link-uri de navigare pe o pagină web.
...	Un anumit articol dintr-o listă sau dintr-un meniu.
...	Măsoară datele într-un interval dat.
...	Plasează o bară de progres și urmărește progresul.
...	Afișează text care nu acceptă adnotări Ruby.
...	Afișează detaliile caracterelor tipografiei din Asia de Est.
...	O adnotare Ruby pentru tipografia din Asia de Est.
...	Identifică ora și data.
O întrerupere de linie în conținut.
¹Obiecte caracter HTML5
„SAU &quot ;	Ghilimele
< SAU &lt ;	Mai mic decât semnul (
> SAU &gt ;	Mai mare decât semnul (>)
SAU &nbsp ;	Spațiu care nu se rupe
© SAU &copie ;	Simbolul dreptului de autor
™ SAU &ucirc ;	Simbolul mărcii comerciale
@ SAU &Uuml ;	simbolul „la” (@)
& SAU &amp ;	Simbol ampersand (&)
• SAU &ouml ;	Glonț mic
¹Ignorați spațiul înainte de punctul și virgulă în timp ce introduceți caracterul HTML.

Creați un site web pentru experiență practică

Odată ce ai înțeles elementele de bază ale codului HTML și să aibă cunoștințe practice de CSS și JavaScript, încercați să construiți un site web Cum să faci un site web: pentru începătoriAstăzi vă voi ghida prin procesul de realizare a unui site web complet de la zero. Nu vă faceți griji dacă acest lucru sună dificil. Te voi ghida prin ea la fiecare pas. Citeste mai mult . De asemenea, asigurați-vă că ne salvați Cheat sheet proprietăți CSS3 Esențial CSS3 Properties Cheat SheetStăpânește sintaxa CSS esențială cu fisa noastră de cheat cu proprietăți CSS3. Citeste mai mult și Cheat sheet JavaScript Ultima fișă de cheat JavaScriptObțineți o actualizare rapidă a elementelor JavaScript cu această foaie de cheat. Citeste mai mult pentru utilizare viitoare!