„HTML Essentials“ sukčiavimo lapas: žymos, atributai ir kt

Tinklalapių kūrimas prasideda nuo HTML. Juos pagražinti ir paversti interaktyviais vėliau. Tačiau norint pradėti kurti funkcines statines svetaines, reikia suprasti HTML. (Norite greitai susipažinti su šia žymėjimo kalba? Skaitykite mūsų HTML DUK.)

Mokantis kalbos, yra ilgas sąrašas elementų, kuriuos turite įtraukti į savo HTML žodyną. Ir ši užduotis iš pradžių gali atrodyti bauginanti, todėl mes sugalvojome šį sukčiavimo lapą. Tai suteikia lengvą būdą atrasti/suprasti/atsiminti HTML elementus, kai tik jų prireikia.

Apgaulės lape yra žymos ir atributai, skirti tinklalapiams struktūrizuoti, formatuoti tekstą, pridėti formų, vaizdų, sąrašų, nuorodų ir lentelių. Tai taip pat apima žymas, kurios buvo įtrauktos į HTML5 ir HTML kodus, skirtus dažniausiai naudojamiems specialiiesiems simboliams.

NEMOKAMAS ATSISIUNTIMAS: Šį cheat sheet galima įsigyti kaip a atsisiunčiamas PDF iš mūsų platinimo partnerio „TradePub“. Turėsite užpildyti trumpą formą, kad ją pasiektumėte tik pirmą kartą. parsisiųsti „HTML Essentials“ kodų lapas.

„HTML Essentials“ kodų lapas

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

...

Trumpesnis kelias	Veiksmas
Pagrindinės žymos
...	Pirmoji ir paskutinė HTML dokumento žyma. Visos kitos žymos yra tarp šių atidarymo ir uždarymo žymų.
...	Nurodo dokumento metaduomenų rinkinį.
	Aprašomas puslapio pavadinimas ir rodomas naršyklės pavadinimo juostoje.
...	Apima visą turinį, kuris bus rodomas tinklalapyje.
Dokumento informacija
Pamini bazinį URL ir visas susijusias nuorodas į dokumentą.
Norėdami gauti papildomos informacijos apie puslapį, pvz., autorių, paskelbimo datą ir kt.
Nuorodos į išorinius elementus, pvz., stiliaus lapus.
	Sudėtyje yra dokumento stiliaus informacijos, pvz., CSS (pakopinių stiliaus lapų).
	Yra nuorodų į išorinius scenarijus.
Teksto formatavimas
... ARBA ...	Paryškina tekstą.
...	Tekstas paryškinamas kursyvu ir paryškinamas.
...	Tekstas rašomas kursyvu, bet neparyškinamas.
...	Perbrauktas tekstas.
...	Cituoja citatos autorių.
...	Pažymi ištrintą teksto dalį.
...	Rodo skyrių, kuris buvo įterptas į turinį.
...	Norėdami rodyti citatas. Dažnai naudojamas su žyma.
...	Dėl trumpesnių citatų.
...	Sutrumpinimams ir pilnoms formoms.
...	Nurodo kontaktinius duomenis.
...	Dėl apibrėžimų.
...	Dėl kodo fragmentų.
...	Pradiniams indeksams rašyti
...	Viršutiniams indeksams rašyti.
...	Norėdami sumažinti teksto dydį ir pažymėti perteklinę informaciją HTML5.
Dokumento struktūra
...	Skirtingų lygių antraštės. H1 yra didžiausias, o H6 yra mažiausias.
...	Turinio padalijimui į blokus.
...	Apima eilutinius elementus, pvz., vaizdą, piktogramą, jaustuką, nepažeidžiant puslapio formatavimo.
...	Yra paprastas tekstas.
	Sukuria naują eilutę.
	Nupiešia horizontalią juostą, kad parodytų sekcijos pabaigą.
Sąrašai
...	Užsakytų prekių sąrašui.
...	Dėl netvarkingo prekių sąrašo.
...	Atskiriems sąrašo elementams.
...	Elementų sąrašas su apibrėžimais.
...	Vieno termino apibrėžimas, atitinkantis kūno turinį.
...	Apibrėžto termino aprašymas.
Nuorodos
...	Hipersaitų inkaro žyma.
...	Žyma, skirta susieti su el. pašto adresais.
...	Inkaro žyma kontaktiniams numeriams įrašyti.
...	Inkaro žyma, skirta nuorodai į kitą to paties puslapio dalį.
...	Perkeliama į tinklalapio div skyrių. (Aukščiau pateiktos žymos variantas)
Vaizdai
	Vaizdo failams rodyti.
Atributai, skirti žyma
src=”url”	Nuoroda į vaizdo šaltinio kelią.
alt = "tekstas"	Tekstas, rodomas užvedus pelės žymeklį virš vaizdo.
aukštis=” ”	Vaizdo aukštis pikseliais arba procentais.
plotis=” ”	Vaizdo plotis pikseliais arba procentais.
lygiuoti=” ”	Santykinis vaizdo lygiavimas puslapyje.
border=” ”	Vaizdo kraštinės storis.
	Nuoroda į žemėlapį, kurį galima spustelėti.
	Žemėlapio vaizdo pavadinimas.
Vaizdo žemėlapio vaizdo sritis.
Atributai, skirti žyma
forma = ""	Vaizdo srities forma.
koordinatės = ""	Žemėlapio vaizdo srities koordinatės.
Formos
...	Pirminė HTML formos žyma.
Atributai, skirti žyma
action="url"	URL, kuriame pateikiami formos duomenys.
metodas = ""	Nurodo formos pateikimo protokolą (POST arba GET).
enctype=” ”	Duomenų kodavimo schema, skirta POST pateikimui.
automatinis užbaigimas	Nurodo, ar formos automatinis užbaigimas įjungtas, ar išjungtas.
patvirtinti	Nurodoma, ar forma turi būti patvirtinta prieš pateikiant.
priimti simbolių rinkinius	Nurodo formų pateikimo simbolių kodavimą.
taikinys	Rodo, kur bus rodomas formos pateikimo atsakymas.
...	Sugrupuoja susijusius elementus formoje/
...	Nurodo, ką vartotojas turi įvesti kiekviename formos lauke.
...	Laukų rinkinio elemento antraštė.
Nurodo, kokio tipo įvestį reikia priimti iš vartotojo.
Atributai, skirti žyma
tipas = ""	Nustato įvesties tipą (tekstas, datos, slaptažodis).
vardas = ""	Nurodo įvesties lauko pavadinimą.
vertė =""	Nurodo reikšmę įvesties lauke.
dydis = ""	Nustato įvesties lauko simbolių skaičių.
maksimalus ilgis = ""	Nustato leidžiamų įvesties simbolių limitą.
reikalaujama	Padaro įvesties lauką privalomą.
plotis=””	Nustato įvesties lauko plotį pikseliais.
aukštis = ""	Nustato įvesties lauko aukštį pikseliais.
vietos rezervuaras = ""	Apibūdina numatomą lauko reikšmę.
modelis = ""	Nurodo reguliariąją išraišką, kurią galima naudoti ieškant šablonų vartotojo tekste.
min=””	Mažiausia leidžiama įvesties elemento vertė.
max=””	Didžiausia leidžiama įvesties elemento vertė.
neįgalus	Išjungia įvesties elementą.
...	Norėdami užfiksuoti ilgesnes duomenų eilutes iš vartotojo.
...	Nurodomas parinkčių, kurias vartotojas gali pasirinkti, sąrašas.
Atributai, skirti žyma
vardas = ""	Nurodo išskleidžiamojo sąrašo pavadinimą.
dydis = ""	Vartotojui suteiktų parinkčių skaičius.
daugkartinis	Nustatoma, ar vartotojas gali pasirinkti kelias parinktis iš sąrašo.
reikalaujama	Nurodoma, ar norint pateikti formą būtina pasirinkti parinktį (-es).
automatinis fokusavimas	Nurodoma, kad įkėlus puslapį automatiškai paryškinamas išskleidžiamasis sąrašas.
...	Apibrėžia elementus išskleidžiamajame sąraše.
vertė =""	Rodo bet kurios parinkties tekstą.
pasirinktas	Nustato numatytąją rodomą parinktį.
...	Žyma, skirta formos pateikimo mygtuko kūrimui.
Objektai ir iFrames
	Apibūdina įdėto failo tipą.
Atributai, skirti
aukštis = ""	Objekto aukštis.
plotis=””	Objekto plotis.
tipas = ""	Objekto laikmenos tipas.
	Vidinis rėmelis išorinei informacijai įterpti.
vardas = ""	iFrame pavadinimas.
src=””	Turinio, esančio rėmelyje, šaltinio URL.
srcdoc=""	HTML turinys rėmelyje.
aukštis = ""	iFrame aukštis.
plotis=” ”	iFrame plotis.
Prideda papildomų parametrų, kad būtų galima tinkinti „iFrame“.
...	Įterpiama išorinė programa arba papildinys.
Atributai, skirti
aukštis = ""	Nustato įterpimo aukštį.
plotis = ""	Nustato įterpimo plotį.
tipas = ""	Įterpimo tipas arba formatas.
src=””	Įterptojo failo šaltinio kelias.
Lentelės
...	Apibrėžia visą lentelės turinį.
Lentelės aprašymas.
Kiekvieno lentelės stulpelio antraštės.
Apibrėžia lentelės kūno duomenis.
Aprašomas lentelės poraštės turinys.
Turinys vienai eilutei.
	...	Duomenys viename antraštės elemente.
	...	Turinys vienoje lentelės langelyje.
Sugrupuoja stulpelius formatavimui.
Vienas informacijos stulpelis.
HTML5 naujos žymos
...	Nurodo tinklalapio antraštę.
	Nurodo tinklalapio poraštę.
...	Pažymi pagrindinį tinklalapio turinį.
...	Nurodo straipsnį.
	Nurodo puslapio šoninės juostos turinį.
...	Nurodo tam tikrą tinklalapio skiltį.
...	Papildomos informacijos aprašymui.
...	Naudojama kaip aukščiau nurodytos žymos antraštė. Visada matomas vartotojui.
...	Sukuria dialogo langą.
...	Naudojamas diagramoms ir skaičiams įtraukti.
	Apibūdina a elementas.
...	Paryškina tam tikrą teksto dalį.
	Naršymo nuorodų rinkinys tinklalapyje.
...	Tam tikras elementas iš sąrašo arba meniu.
...	Matuoja duomenis tam tikrame diapazone.
...	Įdeda eigos juostą ir seka eigą.
...	Rodo tekstą, kuris nepalaiko rubino komentarų.
...	Rodo Rytų Azijos tipografijos simbolių detales.
...	Rubino anotacija Rytų Azijos tipografijai.
...	Nurodo laiką ir datą.
Eilučių lūžis turinyje.
¹HTML5 simbolių objektai
"ARBA &quot ;	Kabutės
< ARBA &lt ;	Mažiau nei ženklas (
> ARBA &gt ;	Didesnis už ženklą (>)
ARBA &nbsp ;	Nelūžtanti erdvė
© ARBA &kopijuoti ;	Autorių teisių simbolis
™ ARBA &ucirc ;	Prekės ženklo simbolis
@ ARBA &Uuml ;	simbolis „prie“ (@)
IR ARBA &amp ;	Ampersando simbolis (&)
• ARBA &ouml ;	Maža kulka
¹ Įvesdami HTML simbolį, nepaisykite tarpo prieš kabliataškį.

Sukurkite praktinės patirties svetainę

Kai tik supratai HTML kodo pagrindus ir turėti darbo CSS ir JavaScript žinių, išbandykite savo jėgas kurdami svetainę Kaip sukurti svetainę: pradedantiesiemsŠiandien aš jums paaiškinsiu, kaip sukurti visą svetainę nuo nulio. Nesijaudinkite, jei tai skamba sunkiai. Aš jums padėsiu kiekviename žingsnyje. Skaityti daugiau . Be to, būtinai išsaugokite mūsų CSS3 ypatybių apgaulės lapas Essential CSS3 Properties Cheat SheetĮvaldykite esminę CSS sintaksę naudodami mūsų CSS3 ypatybių apgaudinėjimo lapą. Skaityti daugiau ir JavaScript sukčiavimo lapas Ultimate JavaScript Cheat SheetGreitai atnaujinkite „JavaScript“ elementus naudodami šį „cheat sheet“. Skaityti daugiau naudojimui ateityje!