HTML Essentials -huijauslehti: tunnisteet, attribuutit ja paljon muuta

Verkkosivujen rakentaminen alkaa HTML: stä. Niiden kaunistaminen ja interaktiivisuus tulee myöhemmin. Mutta jotta voit aloittaa toiminnallisten staattisten verkkosivustojen luomisen, sinun on ymmärrettävä HTML. (Haluatko nopean johdannon tähän merkintäkieleen? Lue meidän HTML UKK.)

Osana kielen oppimista on olemassa pitkä lista elementtejä, jotka sinun on lisättävä HTML-sanastoasi. Ja tämä tehtävä voi aluksi tuntua pelottavalta, minkä vuoksi olemme keksineet seuraavan huijausarkin. Se antaa sinulle helpon tavan löytää/ymmärtää/muistaa HTML-elementtejä aina kun tarvitset niitä.

Huijauslehti kattaa tunnisteet ja attribuutit verkkosivujen jäsentämiseen, tekstin muotoiluun, lomakkeiden, kuvien, luetteloiden, linkkien ja taulukoiden lisäämiseen. Se sisältää myös tunnisteita, jotka otettiin käyttöön HTML5:ssä ja HTML-koodeissa yleisesti käytettyjä erikoismerkkejä varten.

ILMAINEN LATAUS: Tämä huijauslehti on saatavana muodossa a ladattava PDF jakelukumppaniltamme TradePubilta. Sinun on täytettävä lyhyt lomake, jotta voit käyttää sitä vain ensimmäisen kerran. ladata

HTML Essentials -huijauslehti.

HTML Essentials -huijauslehti

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

...

Pikakuvake	Toiminta
Perustunnisteet
...	HTML-dokumentin ensimmäinen ja viimeinen tunniste. Kaikki muut tunnisteet sijaitsevat näiden avaus- ja sulkemistunnisteiden välissä.
...	Määrittää asiakirjan metatietojen kokoelman.
	Kuvaa sivun otsikon ja näkyy selaimen otsikkorivillä.
...	Sisältää kaiken sisällön, joka näytetään verkkosivulla.
Asiakirjan tiedot
Mainitsee perus-URL-osoitteen ja kaikki suhteelliset linkit asiakirjaan.
Lisätietoja sivusta, kuten tekijä, julkaisupäivä jne.
Linkit ulkoisiin elementteihin, kuten tyylisivuihin.
	Sisältää asiakirjatyylitietoja, kuten CSS (Cascading Style Sheets).
	Sisältää linkkejä ulkoisiin skripteihin.
Tekstin muotoilu
... TAI ...	Lihavoittaa tekstiä.
...	Kursivoi tekstin ja lihavoittaa sitä.
...	Kursivoi tekstin, mutta ei lihavoida sitä.
...	Yliviivattu teksti.
...	Lainaa lainauksen kirjoittajaa.
...	Merkitsee poistetun osan tekstistä.
...	Näyttää osion, joka on lisätty sisältöön.
...	Lainausten näyttämiseen. Käytetään usein kanssa tag.
...	Lyhyemmille lainauksille.
...	Lyhenteet ja täysmuodot.
...	Määrittää yhteystiedot.
...	Määritelmiä varten.
...	Koodinpätkiä varten.
...	Alaindeksien kirjoittamiseen
...	Yläindeksien kirjoittamiseen.
...	Tekstin koon pienentämiseen ja tarpeettomien tietojen merkitsemiseen HTML5:ssä.
Asiakirjan rakenne
...	Eri tasoisia otsikoita. H1 on suurin ja H6 pienin.
...	Sisällön jakamiseen lohkoihin.
...	Sisältää upotettuja elementtejä, kuten kuvan, kuvakkeen, hymiön, pilaamatta sivun muotoilua.
...	Sisältää pelkkää tekstiä.
	Luo uuden rivin.
	Piirtää vaakasuuntaisen palkin näyttämään osion lopun.
Luettelot
...	Tilatuille tavaroille.
...	Järjestämättömälle tuoteluettelolle.
...	Yksittäisille luettelon kohteille.
...	Luettelo kohteista määritelmillä.
...	Yhden termin määritelmä kehon sisällön mukaan.
...	Määritellyn termin kuvaus.
Linkit
...	Hyperlinkkien ankkuritunniste.
...	Tunniste sähköpostiosoitteisiin linkittämiseen.
...	Ankkuritunniste yhteysnumeroiden listaamiseen.
...	Ankkuritunniste linkin tekemiseen saman sivun toiseen osaan.
...	Siirtyy verkkosivun div-osioon. (Yllä olevan tagin muunnelma)
kuvat
	Kuvatiedostojen näyttämiseen.
Attribuutit kohteelle tag
src=”url”	Linkki kuvan lähdepolkuun.
alt=”teksti”	Teksti, joka näkyy, kun hiiri viedään kuvan päälle.
korkeus=” ”	Kuvan korkeus pikseleinä tai prosentteina.
leveys=” ”	Kuvan leveys pikseleinä tai prosentteina.
kohdista=” ”	Kuvan suhteellinen kohdistus sivulla.
raja=” ”	Kuvan reunuksen paksuus.
	Linkki napsautettavaan karttaan.
	Karttakuvan nimi.
Kuvakartan kuva-alue.
Attribuutit kohteelle tag
muoto =" "	Kuva-alueen muoto.
koordinaatit=” ”	Karttakuva-alueen koordinaatit.
Lomakkeet
...	HTML-lomakkeen ylätunniste.
Attribuutit kohteelle tag
action=”url”	URL-osoite, johon lomaketiedot lähetetään.
menetelmä=” ”	Määrittää lomakkeen lähetysprotokollan (POST tai GET).
enctype=” ”	POST-lähetysten tietojen koodausmalli.
automaattinen täydennys	Määrittää, onko lomakkeiden automaattinen täyttö päällä vai pois päältä.
novalidoida	Määrittää, tuleeko lomake vahvistaa ennen lähettämistä.
hyväksy-merkkisarjat	Määrittää lomakelähetysten merkkikoodauksen.
kohde	Näyttää, missä lomakkeen lähetyksen vastaus näytetään.
...	Ryhmittelee liittyvät elementit muodossa/
...	Määrittää, mitä käyttäjän tulee kirjoittaa kuhunkin lomakkeen kenttiin.
...	Otsikko fieldset-elementille.
Määrittää, minkä tyyppinen syöte käyttäjältä otetaan.
Attribuutit kohteelle tag
tyyppi=””	Määrittää syötetyypin (teksti, päivämäärät, salasana).
nimi =""	Määrittää syöttökentän nimen.
arvo =""	Määrittää arvon syöttökentässä.
koko =""	Asettaa syöttökentän merkkien määrän.
max pituus =""	Asettaa sallittujen syöttömerkkien rajan.
vaaditaan	Tekee syöttökentän pakollisen.
leveys =""	Asettaa syöttökentän leveyden pikseleinä.
korkeus =""	Asettaa syöttökentän korkeuden pikseleinä.
paikkamerkki=””	Kuvaa odotetun kentän arvon.
malli =""	Määrittää säännöllisen lausekkeen, jota voidaan käyttää kuvioiden etsimiseen käyttäjän tekstistä.
min=””	Syöttöelementille sallittu vähimmäisarvo.
max=””	Syöttöelementille sallittu enimmäisarvo.
liikuntarajoitteinen	Poistaa syöttöelementin käytöstä.
...	Pitkien datajonojen kaappaamiseen käyttäjältä.
...	Määrittää luettelon vaihtoehdoista, joista käyttäjä voi valita.
Attribuutit kohteelle tag
nimi =""	Määrittää avattavan luettelon nimen.
koko =""	Käyttäjälle annettujen vaihtoehtojen lukumäärä.
useita	Määrittää, voiko käyttäjä valita useita vaihtoehtoja luettelosta.
vaaditaan	Määrittää, onko vaihtoehdon valinta tarpeen lomakkeen lähettämistä varten.
automaattitarkennus	Määrittää, että avattava luettelo tulee automaattisesti esiin sivun latautumisen jälkeen.
...	Määrittää kohteet avattavassa luettelossa.
arvo =""	Näyttää minkä tahansa vaihtoehdon tekstin.
valittu	Asettaa näytettävän oletusasetuksen.
...	Tunniste painikkeen luomiseen lomakkeen lähetystä varten.
Objektit ja iFrame-kehykset
	Kuvaa upotetun tiedostotyypin.
Attribuutit kohteelle
korkeus =""	Objektin korkeus.
leveys =""	Objektin leveys.
tyyppi=””	Objektin sisältämän median tyyppi.
	Sisäinen kehys ulkoisen tiedon upottamiseen.
nimi =""	iFramen nimi.
src=””	Kehyksen sisällä olevan sisällön lähde-URL-osoite.
srcdoc=””	HTML-sisältö kehyksen sisällä.
korkeus =""	iFramen korkeus.
leveys=” ”	iFramen leveys.
Lisää ylimääräisiä parametreja iFramen mukauttamiseen.
...	Upottaa ulkoisen sovelluksen tai laajennuksen.
Attribuutit kohteelle
korkeus =" "	Asettaa upotuksen korkeuden.
leveys=” ”	Asettaa upotuksen leveyden.
tyyppi=””	Upotuksen tyyppi tai muoto.
src=””	Upotetun tiedoston lähdepolku.
Taulukot
...	Määrittää taulukon kaiken sisällön.
Taulukon kuvaus.
Taulukon jokaisen sarakkeen otsikot.
Määrittää taulukon runkotiedot.
Kuvaa taulukon alatunnisteen sisältöä.
Sisältö yhdelle riville.
	...	Tiedot yhdessä otsikkokohdassa.
	...	Sisältö yhdessä taulukon solussa.
Ryhmittelee sarakkeet muotoilua varten.
Yksi sarake tietoa.
Uudet HTML5-tunnisteet
...	Määrittää verkkosivun otsikon.
	Määrittää verkkosivun alatunnisteen.
...	Merkitsee verkkosivun pääsisällön.
...	Määrittää artikkelin.
	Määrittää sivun sivupalkin sisällön.
...	Määrittää tietyn osion verkkosivulla.
...	Lisätietojen kuvaamiseen.
...	Käytetään yllä olevan tagin otsikkona. Näkyy aina käyttäjälle.
...	Luo valintaikkunan.
...	Käytetään kaavioiden ja kuvien sisällyttämiseen.
	Kuvaa a elementti.
...	Korostaa tietyn osan tekstistä.
	Joukko navigointilinkkejä verkkosivulla.
...	Tietty kohde luettelosta tai valikosta.
...	Mittaa tiedot tietyllä alueella.
...	Asettaa edistymispalkin ja seuraa edistymistä.
...	Näyttää tekstin, joka ei tue Ruby-merkintöjä.
...	Näyttää Itä-Aasian typografian merkkitiedot.
...	Rubiinimerkintä Itä-Aasian typografiaan.
...	Tunnistaa ajan ja päivämäärän.
Rivinvaihto sisällön sisällä.
¹HTML5-merkkiobjektit
"TAI &quot ;	Lainausmerkit
< TAI &lt ;	Pienempi kuin merkki (
> TAI &gt ;	Suurempi kuin merkki (>)
TAI &nbsp ;	Murtumaton tila
© TAI &kopio ;	Tekijänoikeussymboli
™ TAI &ucirc ;	Tavaramerkin symboli
@ TAI &Uuml ;	"at"-symboli (@)
& TAI &amp ;	Et-symboli (&)
• TAI &ouml ;	Pieni luoti
¹ Ohita välilyönti ennen puolipistettä, kun kirjoitat HTML-merkkiä.

Rakenna verkkosivusto käytännön kokemusta varten

Kun olet ymmärtänyt HTML-koodin perusteet ja sinulla on CSS- ja JavaScript-taidot, kokeile käsiäsi verkkosivuston rakentamisessa Verkkosivuston luominen: aloittelijoilleTänään opastan sinut täydellisen verkkosivuston tekemiseen tyhjästä. Älä huoli, jos tämä kuulostaa vaikealta. Ohjaan sinut sen läpi joka vaiheessa. Lue lisää . Muista myös säästää meidän CSS3-ominaisuuksien huijauslehti Essential CSS3 Properties -huijauslehtiHallitse olennainen CSS-syntaksi CSS3-ominaisuuksien huijausarkkimme avulla. Lue lisää ja JavaScript-huijauslehti Ultimate JavaScript-huijauslehtiHanki nopea päivitys JavaScript-elementeistä tällä huijausarkin avulla. Lue lisää tulevaa käyttöä varten!