Ang HTML Essentials Cheat Sheet: Mga Tags, Katangian, at Higit Pa

Ang pagbuo ng mga webpage ay nagsisimula sa HTML. Ang pagpapaganda sa kanila at paggawa ng mga ito interactive ay sa paglaon. Ngunit upang simulang lumikha ng mga gumaganang static na website, kailangan mo ng pag-unawa sa HTML. (Nais ng isang mabilis na pagpapakilala sa wikang markup na ito? Basahin ang aming FAQ sa HTML.)

Bilang bahagi ng pag-aaral ng wika, mayroong isang mahabang listahan ng mga elemento na kailangan mong idagdag sa iyong bokabularyo sa HTML. At ang gawaing ito ay maaaring mukhang nakakatakot sa una, na ang dahilan kung bakit nakagawa kami ng sumusunod na cheat sheet. Nagbibigay ito sa iyo ng isang madaling paraan upang matuklasan / maunawaan / maalala ang mga elemento ng HTML anumang oras na kailangan mo sila.

---

---

Saklaw ng cheat sheet ang mga tag at katangian para sa pagbubuo ng mga webpage, pag-format ng teksto, pagdaragdag ng mga form, imahe, listahan, link, at talahanayan. Nagsasama rin ito ng mga tag na ipinakilala sa HTML5 at HTML code para sa karaniwang ginagamit na mga espesyal na character.

kung paano mapanatili ang pag-flash sa chrome

LIBRENG PAG-DOWNLOAD: Ang cheat sheet na ito ay magagamit bilang isang maida-download na PDF mula sa aming kasosyo sa pamamahagi, ang TradePub. Kailangan mong makumpleto ang isang maikling form upang ma-access ito sa unang pagkakataon lamang. Mag-download Ang HTML Essentials Cheat Sheet .

kung paano itakda ang gif bilang wallpaper

Ang HTML Essentials Cheat Sheet

......

Shortcut	Kilos
Pangunahing Mga Tag
...	Ang una at huling tag ng isang dokumentong HTML. Ang lahat ng iba pang mga tag ay nasa pagitan ng mga pambungad at pagsasara na tag na ito.
...	Tinutukoy ang koleksyon ng metadata para sa dokumento.
...	Inilalarawan ang pamagat para sa pahina at lalabas sa pamagat ng browser.
...	May kasamang lahat ng nilalaman na ipapakita sa webpage.
Impormasyon sa Dokumento
	Nabanggit ang batayang URL at lahat ng mga kamag-anak na link sa dokumento.
	Para sa karagdagang impormasyon tungkol sa pahina tulad ng may-akda, petsa ng pag-publish, atbp.
	Ang mga link sa mga panlabas na elemento tulad ng mga sheet ng estilo.
...	Naglalaman ng impormasyon ng istilo ng dokumento tulad ng CSS (Cascading Style Sheets).
...	Naglalaman ng mga link sa mga panlabas na script.
Pag-format ng Teksto
... O kaya ...	Ginagawang matapang ang teksto.
...	Italicalis ang teksto at ginagawa itong naka-bold.
...	Italicalis ang teksto ngunit hindi ito ginagawang naka-bold.
...	Strikethrough text.
...	Binanggit ang isang may-akda ng isang quote.
...	Label ng isang tinanggal na bahagi ng isang teksto.
...	Nagpapakita ng isang seksyon na naipasok sa nilalaman.
...	Para sa pagpapakita ng mga quote. Kadalasang ginagamit gamit ang tag.
...	Para sa mas maiikling quote.
...	Para sa mga pagpapaikli at full-form.
...	Tinutukoy ang mga detalye ng contact.
...	Para sa mga kahulugan.
...	Para sa mga snippet ng code.
...	Para sa pagsusulat ng mga subscripts
...	Para sa pagsusulat ng mga superscripts.
...	Para sa pagbabawas ng laki ng teksto at pagmamarka ng labis na impormasyon sa HTML5.
Istraktura ng Dokumento
...	Iba't ibang antas ng mga heading. Ang H1 ang pinakamalaki at ang H6 ang pinakamaliit.
...	Para sa paghahati ng nilalaman sa mga bloke.
...	May kasamang mga elemento ng inline, tulad ng isang imahe, icon, emoticon, nang hindi sinisira ang pag-format ng pahina.
...	Naglalaman ng payak na teksto.
	Lumilikha ng isang bagong linya.
	Gumuhit ng isang pahalang na bar upang ipakita ang pagtatapos ng seksyon.
Mga Listahan
...	Para sa order ng listahan ng mga item.
...	Para sa hindi naayos na listahan ng mga item.
...	Para sa mga indibidwal na item sa isang listahan.
...	Listahan ng mga item na may mga kahulugan.
...	Ang kahulugan ng isang solong term na nakahanay sa nilalaman ng katawan.
...	Ang paglalarawan para sa tinukoy na term.
Mga link
...	Anchor tag para sa mga hyperlink.
...	I-tag para sa pag-link sa mga email address.
...	Anchor tag para sa listahan ng mga numero ng contact.
...	I-angkla ang tag para sa pag-link sa isa pang bahagi ng parehong pahina.
...	Nagna-navigate sa isang seksyon ng div ng webpage. (Pagkakaiba-iba ng tag sa itaas)
Mga imahe
	Para sa pagpapakita ng mga file ng imahe.
Mga Katangian para sa tag
src = url	Mag-link sa pinagmulang landas ng imahe.
alt = teksto	Ipinapakita ang teksto kapag ang isang mouse ay nai-hover sa imahe.
taas =	Taas ng imahe sa mga pixel o porsyento.
lapad =	Ang lapad ng imahe sa mga pixel o porsyento.
ihanay =	Kamag-anak na pagkakahanay ng imahe sa pahina.
hangganan =	Ang kapal ng border ng imahe.
...	Mag-link sa isang mapa na naki-click.
...	Pangalan ng imahe ng mapa.
	Ang lugar ng imahe ng isang mapa ng imahe.
Mga Katangian para sa tag
hugis = '	Hugis ng lugar ng imahe.
coords =	Mga Coordinate ng lugar ng imahe ng mapa.
Mga form
...	Ang parent tag para sa isang form na HTML.
Mga Katangian para sa tag
aksyon = url	Ang URL kung saan isinumite ang data ng form.
paraan =	Tinutukoy ang form ng pagsumite ng proteksyon (POST o GET).
enctype =	Ang scheme ng pag-encode ng data para sa mga pagsumite ng POST.
awtomatikong kumpleto	Tinutukoy kung ang form na autocomplete ay naka-on o naka-off.
walang bisa	Tinutukoy kung ang form ay dapat na patunayan bago isumite.
accept-charset	Tinutukoy ang pag-encode ng character para sa mga pagsumite ng form.
target	Ipinapakita kung saan ipapakita ang tugon sa pagsumite ng form.
...	Mga elemento na nauugnay sa pangkat sa form /
...	Tinutukoy kung ano ang dapat ipasok ng gumagamit sa bawat form na form.
...	Isang caption para sa elemento ng fieldset.
	Tinutukoy kung anong uri ng pag-input ang kukuha mula sa gumagamit.
Mga Katangian para sa tag
uri =	Natutukoy ang uri ng pag-input (teksto, mga petsa, password).
pangalan =	Tinutukoy ang pangalan ng input na patlang.
halaga =	Tinutukoy ang halaga sa patlang ng pag-input.
laki =	Itinatakda ang bilang ng mga character para sa input na patlang.
haba =	Itinatakda ang limitasyon ng mga pinapasok na character na pinapayagan.
kailangan	Gumagawa ng isang input na patlang na sapilitan.
lapad =	Itinatakda ang lapad ng input field sa mga pixel.
taas =	Itinatakda ang taas ng patlang ng pag-input sa mga pixel.
placeholder =	Inilalarawan ang inaasahang halaga ng patlang.
pattern =	Tumutukoy ng isang regular na expression, na maaaring magamit upang maghanap ng mga pattern sa teksto ng gumagamit.
min =	Pinapayagan ang minimum na halaga para sa isang elemento ng pag-input.
max =	Pinapayagan ang maximum na halaga para sa isang elemento ng pag-input.
may kapansanan	Hindi pinagagana ang elemento ng pag-input.
...	Para sa pagkuha ng mas mahabang mga string ng data mula sa gumagamit.
...	Tumutukoy ng isang listahan ng mga pagpipilian na mapagpipilian ng gumagamit.
Mga Katangian para sa tag
pangalan =	Tumutukoy ng pangalan para sa isang listahan ng dropdown.
laki =	Bilang ng mga pagpipilian na ibinigay sa gumagamit.
maramihang	Itinakda kung maaaring pumili ang gumagamit ng maraming mga pagpipilian mula sa listahan.
kailangan	Tinutukoy kung ang pagpili ng isang pagpipilian / s ay kinakailangan para sa pagsumite ng form.
autofocus	Tinutukoy na ang isang drop-down na listahan ay awtomatikong nakatuon pagkatapos mag-load ang isang pahina.
...	Tinutukoy ang mga item sa isang listahan ng dropdown.
halaga =	Ipinapakita ang teksto para sa anumang naibigay na pagpipilian.
napili	Itinatakda ang default na pagpipilian na ipinapakita.
...	I-tag para sa paglikha ng isang pindutan para sa pagsusumite ng form.
Mga Bagay at iFrames
...	Inilalarawan ang naka-embed na filetype.
Mga Katangian para sa tag
taas =	Ang taas ng object.
lapad =	Ang lapad ng bagay.
uri =	Ang uri ng media na naglalaman ng bagay.
	Isang inline frame para sa pag-embed ng panlabas na impormasyon.
pangalan =	Ang pangalan ng iFrame.
src =	Ang pinagmulang URL para sa nilalaman sa loob ng frame.
srcdoc =	Ang nilalaman ng HTML sa loob ng frame.
taas =	Ang taas ng iFrame.
lapad =	Ang lapad ng iFrame.
	Nagdaragdag ng labis na mga parameter upang ipasadya ang iFrame.
...	Nag-embed ng panlabas na application o plugin.
Mga Katangian para sa tag
taas =	Itinatakda ang taas ng embed.
lapad =	Itinatakda ang lapad ng embed.
uri =	Ang uri o format ng embed.
src =	Ang pinagmulang landas ng naka-embed na file.
Mga mesa
...	Tinutukoy ang lahat ng nilalaman para sa isang talahanayan.
...	Isang paglalarawan ng talahanayan.
...	Mga header para sa bawat haligi sa talahanayan.
Tinutukoy ang data ng katawan para sa talahanayan.
...	Inilalarawan ang nilalaman para sa footer ng talahanayan.
Nilalaman para sa isang solong hilera.
	...	Ang data sa isang solong item ng header.
	...	Nilalaman sa loob ng isang solong cell ng talahanayan.
...	Mga haligi ng mga pangkat para sa pag-format.
	Isang solong haligi ng impormasyon.
Mga Bagong Tag ng HTML5
...	Tinutukoy ang header ng webpage.
...	Tinutukoy ang footage ng webpage.
...	Minarkahan ang pangunahing nilalaman ng webpage.
...	Tumutukoy ng isang artikulo.
...	Tinutukoy ang nilalaman ng sidebar ng isang pahina.
...	Tumutukoy ng isang partikular na seksyon sa webpage.
...	Para sa paglalarawan ng labis na impormasyon.
...	Ginamit bilang isang heading para sa tag sa itaas. Palaging nakikita ng gumagamit.
...	Lumilikha ng isang dialog box.
...	Ginamit para sa pagsasama ng mga tsart at numero.
...	Naglalarawan ng isang elemento.
...	Nagha-highlight ng isang tukoy na bahagi ng teksto.
...	Itakda ng mga link sa pag-navigate sa isang webpage.
...	Ang isang partikular na item mula sa isang listahan o isang menu.
...	Sinusukat ang data sa loob ng isang naibigay na saklaw.
...	Naglalagay ng isang bar ng pag-unlad at sinusubaybayan ang pag-unlad.
...	Nagpapakita ng teksto na hindi sumusuporta sa mga anotasyon ni Ruby.
...	Ipinapakita ang mga detalye ng karakter ng typography ng Silangang Asya.
...	Isang tala ni Ruby para sa typography ng Silangang Asya.
...	Kinikilala ang oras at petsa.
	Isang linya ng break sa loob ng nilalaman.
¹HTML5 Mga Bagay na Character
& # 34; O kaya & quot;	Mga marka ng sipi
& # 60; O kaya & lt;	Mas kaunti kaysa sa pag-sign (<)
& # 62; O kaya & gt;	Mas malaki kaysa sa pag-sign (>)
& # 160; O kaya ;	Non-break space
& # 169; O kaya &kopya ;	Simbolo ng copyright
& # 8482; O kaya & ucirc;	Simbolo ng trademark
& # 64; O kaya & Uuml;	at symbol (@)
& # 38; O kaya & amp;	Simbolo ng ampersand (&)
& # 8226; O kaya & ouml;	Maliit na bala
¹ Huwag pansinin ang puwang bago ang semicolon habang nagta-type ng character na HTML.

Bumuo ng isang Website para sa Karanasan sa Kamay

Kapag naintindihan mo na ang mga pangunahing kaalaman sa HTML code at may gumaganang kaalaman ng CSS at JavaScript, subukan ang iyong kamay sa pagbuo ng isang website . Gayundin, tiyaking i-save ang aming CSS3 mga katangian ng cheat sheet at JavaScript cheat sheet para magamit sa hinaharap!

---

---

Magbahagi Magbahagi Mag-tweet Email Paano i-access ang Built-In na Bubble Level ng Google sa Android

Kung sakaling kailanganin mong tiyakin na may antas sa isang kurot, maaari ka na ngayong makakuha ng antas ng bubble sa iyong telepono sa ilang segundo.

ano ang ibig sabihin ng koneksyon na walang internet

Basahin Susunod Mga Kaugnay na Paksa

• Pagiging produktibo
• Programming
• HTML
• Sheet ng Pandaraya

Tungkol sa May-akda Akshata Shanbhag(404 Mga Artikulo Nai-publish)

Sinanay ang Akshata sa manu-manong pagsusuri, animasyon, at disenyo ng UX bago tumuon sa teknolohiya at pagsulat. Pinagsama nito ang dalawa sa kanyang mga paboritong aktibidad - pagbibigay kahulugan ng mga system at pagpapasimple ng jargon. Sa MakeUseOf, nagsusulat si Akshata tungkol sa paggawa ng pinakamahusay sa iyong mga aparatong Apple.

---

---

Higit Pa Mula sa Akshata Shanbhag

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe