Ero DIV n ja SPANin välillä

ja ovat HTML-tunnisteita, jotka määrittelevät elementit HTML-koodissa.

HTML (Hypertext Markup Language) on jäsennelty koodi, jota käytetään rakentamaan ja näyttämään verkkosivuja, joita käymme verkossa päivittäin, millä tahansa laitteella.

Muut tekniikat ja ohjelmointikielet voidaan integroida HTML: ään dynaamisten ja edistyneiden ominaisuuksien tarjoamiseksi verkkosivustolle.

HTML: n ymmärtäminen

Hypertekstin merkintäkieli (HTML) on laajalti käytetty merkintäkieli, joka viittaa verkkosivun takana olevaan rakenteeseen ja koodiin, joka näytetään selaimessa.

HTML on tekstitiedosto, joka käyttää tiettyä koodia (syntaksia) sivun tyylin, sisällön, asettelun ja muodon määrittelemiseen. markup termi tarkoittaa, että tekstiä / koodia valmistellaan käsittelyä ja esitystä varten, ts. verkkosivulla, selaimessa.

World Wide Web Consortium (W3C) [i] tunnistaa HTML: n muodollisena merkintäkielenä verkkosivujen kehittämisessä, ja siksi useimmat selaimet tukevat HTML: ää. Joten verkkosivuja voidaan kehittää tunnetulla kielellä, eri selaimet tulkitsevat niitä helposti, jotta sivu saadaan suunnittelijan suunnittelemaan suuntaan.

Nykyinen versio, jota edelleen käytetään, on HTML4, mutta sitä hitaasti poistetaan käytöstä, kun HTML5 saa enemmän tukea ja käyttöönottoa dynaamisille ja reagoiville verkkosivuille..

Reaktiivisuudesta on tulossa keskeinen osa web-kehitystä tarjoamaan helpompaa, dynaamisempaa käyttökokemusta, joka on sovitettava useisiin laitteisiin, kuten älypuhelimiin, tablet-laitteisiin ja kannettaviin tietokoneisiin.

CSS-tyylisivut on tulossa olennainen osa dynaamisten ja reagoivien sivujen rakentamista. Se on erillinen tiedosto, joka määrittelee attribuutit jokaiselle elementille, kuten fontti, väri, kohdistus - joten kehittäjällä ei ole elementin tyyliä joka kerta, kun sitä käytetään HTML-koodissa.

HTML: n perusrakenne

Jotta saat kaiken hyödyn kaikista kehityskielistä, vakiotiedostorakenteen noudattaminen ja parhaan syntaksikäytön harkitseminen ovat avaimia toimitettaessa vakaata, tarkoituksenmukaista ja visuaalisesti houkuttelevaa verkkosisältöä..

HTML-sivulla on elementtien määrittelemä rakenne (kutsutaan myös tunnisteiksi). HTML-koodia kirjoitettaessa nämä elementit esitetään pareittain - eli jokainen tunniste tarvitsee avaamisen ja sulkemisen. Alku ja pääte.

Elementti avataan syntaksilla: ja suljettu.  / vinoviiva osoittaa elementin määritelmän lopun.

Elementtimääritteet ja sisältö määritetään näiden kahden pisteen välillä.

vähimmäisosat HTML-tiedostolle vaaditaan määritelmä,, (vain HTML4) ja tunnisteet.

• DOCTYPE-määritelmä

Määritelmä (DTD) on ensin julistettava HTML-tiedoston ensimmäiseksi tunnisteeksi, joten kun sivua käsitellään, selain tietää, minkä tyyppinen tiedosto se on, ja voi siten tulkita ja näyttää sivun oikein.

HTML4: ssä on muunnelmia DTD: stä (sivun määritteistä ja elementeistä riippuen), mutta tyypillisimmät lauseet sisällytettäisiin seuraavasti:

tai

DTD HTML5: ssä on paljon yksinkertaisempaa:

· HTML, PÄÄ ja RUNA

• Tunniste osoittaa, että se on HTML-tiedosto ja tämä on HTML-elementin juuri, joka sisältää kaikki muut sen sisällä määritellyt seuraavat elementit; ja kieliominaisuuden sisällyttämistä suositellaan parhaaksi käytännöksi; esimerkiksi:

• Vaaditaan HTML4: ssä, mutta ei pakollista HTML5: ssä. Se on elementti, joka sisältää muita asiakirjan osaan liittyviä elementtejä, kuten otsikko, viiteskriptit, määrittelevät tyylit ja metatiedot. Suljettua tunnistetta on käytettävä ennen 
• Elementillä on sivun pääsisältö, mukaan lukien taulukot, kuvateksti, luettelot jne. Kun tagi on suljettu, elementti voi nyt päättyä. Uuden HTML5-elementin käyttö on valinnaista sivulle tai sisällön muulle osalle.

HTML-elementit

HTML5 on tuottanut uusia elementtejä kehityksen ja suunnittelun helpottamiseksi, ja se on myös poistanut HTML4: ssä käytetyt elementit. Luettelo HTML4: n ja HTML5: n välillä on julkaistu World Wide Web Consortiumissa (W3C) [ii].

HTML DIV TAG

Parannusten ja uusien elementtien kanssa yhdessä CSS-kehityksen kanssa, tiettyjä elementtejä voidaan käyttää erilaisilla, paremmilla tavoilla kuin ennen, ja verkkosivut muuttuvat nopeammiksi, monipuolisemmiksi ja kauniimmaksi katsottaviksi! CSS: llä, HTML5: llä käytetty voi korvata tietyt elementit, joita käytettiin liian paljon, kuten .

Tunniste on suosittu, kun sivuja erotetaan toisistaan. Kun luot tätä elementtiä, se lisää tauon automaattisesti
pitää teksti tai sisältö yhdessä, sen sijaan, että siirryttäisiin tekstiä sivulle.

Verkkosivujen saavutettavuuden ja hakukoneiden optimoinnin myötä tekniikoista on tulossa varsin tiede ja WC3 suosittelee, että ne eivät aina palaa käyttämiseen HTML5: ssä.

Esimerkiksi siististi jäsennellylle, mutta yksinkertaiselle blogimuodolle harkitse uusia HTML5-elementtejä CSS: n kanssa elementin käytön sijasta; Käytä elementtiä pääsisältöön, elementtiä korostaaksesi tai erottaaksesi kaiken sivun, otsikon tai alatunnisteen (missä tahansa!) ja elementtiä voidaan käyttää pitämään valikko- tai ryhmälinkkejä selataksesi sivulta.

Nämä uudet elementit tunnistavat sisältötyypin helposti HTML5: n avulla. Tunnistetta käytetään kuitenkin myös CSS: ssä reagoivien verkkosivustojen luomiseen.

Luomalla jokaisen elementin (jolla on oma tunnus tai luokka) CSS-tiedosto voidaan määritellä käsittelemään kutakin elementtiä.

Seuraavassa HTML-esimerkissä on esimerkki useiden elementtien käytöstä:

Omat esimerkit

Elementeillä voi olla erilaisia ​​määritteitä, erityisesti erikokoisia reagoivassa vuorovaikutuksessa käytetyn laitteen näytön koosta riippuen.

Tässä on esimerkki siitä, kuinka kukin elementti voidaan muotoilla HTML: n vastaavaan CSS-tiedostoon - viittaamalla jokaiseen tunnisteeseen.

#Header

leveys: 800px;

korkeus: auto

margin-left: auto;

margin-left: auto;

#Featured

korkeus: 150px;

Background-color: #CCC;

HTML SPAN TAG

Elementti on rivielementti, eikä se murtu viivoiksi, ellei taukoa
tunnistetta käytetään ja määritelty teksti (sisältö) avoimen ja suljetun tunnisteen välillä näytetään rivinä (oletusarvoisesti ilman muita elementtejä).

Inline-elementit ovat HTML-tiedoston tekstielementtejä ja ne voidaan määritellä toisen elementin rivillä.

Kuten elementillä ei ole merkitys optimaalinen viittaus. Periaatteessa se näyttää elementtien sisällön sellaisenaan, mutta kaikki esiintymät voidaan määritellä CSS: ssä muotoilua varten, jos ne on merkitty oikein ja rikastettu muilla määritteillä tai manipuloitu JavaScriptillä.

Oheisessa esimerkissä sinisessä tekstissä korostetaan, kuinka span-elementti voidaan upottaa sisäisiksi elementteiksi, joilla on eri määritteet kuin vanhemmalla elementillä - kappale p>:

Avaa esimerkki napsauttamalla sivun alareunassa olevaa kuvaketta.

Kun selainta tarkastellaan, yllä olevan elementin teksti näytetään kappaleella eri kirjasimella korostamaan, missä käyttäjän on napsautettava päästäkseen esimerkkiin..

Huomaa, että HTML4: n ja HTML5: n välillä ei ole eroja.