Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Windows 8
  • Span html atributi. Korištenje span elementa

Span html atributi. Korištenje span elementa

Kao web programer, ne mogu a da ne osjećam da su sve ove smjernice nevjerovatno obmanjujuće u 2015. godini.

Naravno, oznaka "p" je u nekom trenutku bila namijenjena da se koristi za paragraf... ali u 100% mojih aplikacija, dizajna i samo svakodnevnog općeg razvoja, nismo vidjeli ništa osim ograničenja nametnuta oznakom "p" ... to ne nudi nikakvu korist na današnjem Internetu.

Rekao bih da, p je deskriptivni element, i iz tog razloga, ako se sve ovo dogodilo; "opiši nešto", ja ću biti sve za to... ali to NE opisuje samo sadržaj, već direktno zamjenjuje sadržaj, koji, budući da je sam po sebi već ograničen, nije sve što radi, već i OGRANIČAVA sadržaj. Zašto bilo ko pri zdravoj pameti namjerno prihvaća ultimativni gradivni blok kada je u pitanju razvoj weba, ne znam. Sa stanovišta dizajna, to nema smisla. Sa strukturalne tačke gledišta, ovo nema smisla. Iz bilo koje manipulacije PERIOD DOM-om, to nema smisla.

Svi smo zajedno prestali da koristimo oznaku "p" osim ako to apsolutno ne moramo (poput pritiska na rečnik na strani klijenta, takve glupe stvari). Nema opravdanja zašto ne možemo opisati skoro sve dobro imenovanim klasama i identifikatorima, tako da ne vidimo razloga da se povinujemo "standardima" koji ne donose dobro, a zapravo BROJIM svaki komadić slagalice, oznaka "p" čini ne pomaže programeru, krajnji korisnik ili moderno tražilice... Ukratko ... oznaka "p" je gotovo obeshrabrena čak i u prilično složenim implementacijama (i to iz vrlo dobrog razloga), ne dozvolite da komentari ovih standardnih nacističkih kontrola prikažu vaš sadržaj!

Čak i na ovoj stranici, fokusiranoj na programere na njoj, ima JAKO TOP vlastitu stranicu postoji mali pop dio koji bi mogao koristiti oznaku "p" jer sadrži dovoljno teksta da se pokrene do drugog reda, ali je potpuno uhvaćen u DIV-u (i samo div, ne div -> p) skoro beskonačan broj razlozi ... prije svega da je danas "p" LOŠE u poređenju sa bilo kojim dobro opisanim blokom kreiranim iz DIV-a, koji je jednako dobro opisan (više... kažem) kao paragraf "p" sa vrlo opisnim id-om = "blurb" ...

Sa Stackoverflow-a:

Ovo je stranica za pitanja i odgovore za profesionalne programere i entuzijaste. 100% je besplatno, nije potrebna registracija.

Ja razgovaram sa

i živeti dugo

I rock

I da, cijenim naše trenutne web standarde i takve stvari se još uvijek dešavaju, čak i nude mogućnosti da se stvari rade s nekim moderni pretraživačišto ne možete postići sa kontejnerom, ali to je samo to što je to konkretno pokvareni element "p" kao dio restrukturiranog i moderniziranog HTML-a...trebalo je ostaviti u grobu gdje i pripada...ovo je generacija web stranica gde paragrafi više nisu paragrafi zauvek. blokovi se bukvalno mijenjaju ... samo je zastarjelo i nepraktično.

U ovom postu ćemo pokriti dvije važne teme - korištenje elementa span i kreiranje kurzivnog i podebljanog teksta pomoću oznaka em i strong. Vjerovatno ćete naučiti nešto novo i korisno. Nakon što ste jednom zapamtili i shvatili suptilnosti, u budućnosti ćete te elemente primjenjivati ​​ispravnije.

Korištenje span elementa

Element je drugi najneshvaćeniji element u HTML rječnik, nakon elementa bloka. Može biti korisno razmišljati o ovakvim rasponima: to je umetnuta oznaka koja djeluje kao spas u HTML-u i koristi se samo nakon što su svi ostali elementi uklonjeni iz situacije. Gotovo uvijek postoje bolja rješenja.

Element raspona primjenjuje se samo kao posljednje utociste, budući da nema semantičko značenje: ne postoji način da se kaže kakav je sadržaj u njemu. Element je potpuno beskorisno bez primijenjenog CSS koda: sam po sebi nema apsolutno nikakav utjecaj na prikaz. Kombinacija ove dvije karakteristike znači da element raspona na lokaciji treba koristiti štedljivo, namjerno i pažljivo.

Tipičan primjer korištenja elementa v blok element- omotavanje sadržaja koji nije mogao biti drugačije specificiran CSS stilovi... Na primjer:

Iz nekog razloga, moramo određena reč prikazano inače u ovoj abazi.

Naravno, prvo smo morali eliminirati sve druge mogućnosti prije korištenja elementa span, kako bismo izbjegli korištenje inline markupa kao što su: (koristi se za definicije) i (koristi se za skraćenice) (koristi se za kreiranje kurzivnog teksta) i (koristi se za kreiranje podebljanog teksta), na svaki od kojih možete primijeniti CSS kod.

Napravite kurziv i podebljan tekst

HTML kod je dizajniran da bude što je moguće nezavisniji od okruženja i korisnika. Iako sa većinom web stranica obično stupate u interakciju putem njihovog prikaza na ekranu, osim ove postoje mnoge druge opcije za prikazivanje sadržaja, na primjer: štampanje, čitači teksta, prevodioci Brajevog pisma i druge.

Iz tog razloga, oznake koje se koriste za označavanje teksta u HTML kodu imaju veoma širok spektar upotrebe. Na primjer, oznaka ističe tekst. U većini slučajeva, sadržaj ove oznake se vizuelno prikazuje koso, a čitači teksta će istaknuti tekst čitajući ga glasnije.

Tag content vizuelno je prikazan podebljanim slovima, a kao iu prethodnom slučaju, ova oznaka će imati različita značenja u različitim kontekstima.

Obje oznake su namijenjene da se koriste na malim količinama teksta - jednoj ili dvije riječi ili rečenici - u paragrafu dugom nekoliko rečenica. Ako naiđete na sljedeći kod:

U takvoj situaciji, gotovo uvijek je bolje ne koristiti oznake za kreiranje kurzivnog ili podebljanog teksta, već ga stilizirati u CSS kodu.

Isto tako, upotreba oznake za kreiranje podebljanog teksta u elementima naslova nema smisla, bolje je koristiti CSS za to.

HTML5 specifikacija ponovo uvodi oznake i da kreirate podebljani i kurziv tekst, ali preporučujemo da nastavite da koristite oznake i za ove namjene, budući da imaju širu primjenjivost i prilagodljivost.

Prevod - Dužnost

Zdravo svima!

Andrey je ponovo sa vama.

Danas će vam biti ponuđene 2 verzije lekcije. Jedan u tekstualni oblik- vidite ga pred očima, a drugi VIDEO - moraćete da ga preuzmete.

Po našem mišljenju, video verzija će vam biti razumljivija.

Dakle, o dodatnom html elementi

Recimo da trebate istaknuti neku riječ u tekstu (pretpostavimo s drugom bojom i pozadinom), ili tako da slika i tekst koji se na nju odnosi budu na vrhu i desno u ćeliji tabele, a glavni sadržaj stranica, recimo, na dnu i bliže lijevom rubu... Što se tiče prvog primjera, reći ću da to možete učiniti pomoću oznake sa setom potrebnih parametara, ali pripada zabranjenim oznakama (novi pretraživači ga možda ne podržavaju) i nema svojstva zamjene pozadine.

Za takve slučajeve obezbeđuju se dve specifične oznake koje same po sebi zapravo ništa ne rade. Ali kada na njih primijenite prave stilove, možete postići sve. Općenito možete koristiti samo ove dvije oznake i primijeniti stilove na njih kako biste napravili cijelu stranicu stranice.

I tako, ovo su oznake

i .

Koja je razlika između njih ako se koriste za isto?

Div element - ovo je blok oznaka, a može sadržavati bilo koje oznake koje znamo (liste, slike, tabele...).

Element raspona je umetnuta oznaka i odnosi se isključivo na tekst (istaknite dio teksta drugom bojom).

Stilovi koji se primjenjuju na ove oznake su svi stilovi koje smo proučavali. Nema ograničenja u korištenju bilo kojeg stila.

Pogledajmo stilove koji su najtipičniji za ove oznake. Primjenjuju se i na sve druge oznake, i koriste se na isti način, samo se češće koriste sa ovim oznakama (posebno za

) .

Prva stvar s kojom bih počeo je pozicioniranje elemenata.

Ova nekretnina:

pozicija- postavlja ili određuje poziciju elementa.

vrijednosti:

statički- zadano. Položaj objekta je određen strujom HTML markup prema standardnim pravilima.

apsolutno- položaj objekta se određuje u odnosu na položaj roditeljskog objekta ili u odnosu na tijelo objekta. relativno- Položaj objekta je određen pomakom od pozicije u kojoj se pojavio po defaultu.

lijevo / vrh- postavlja ili određuje položaj elementa u odnosu na lijevu/gornju ivicu.

vrijednosti:

x- broj u procentima ili pikselima.

auto Je zadano.

Razmotrimo primjer:

XHTML

Bilo koji sadržaj bloka !!!

Ovaj primjer pokazuje da će se naš široki okvir od 300px pomjeriti dolje za 350px i ulijevo za 200px, u odnosu na mjesto gdje će se pojaviti prema zadanim postavkama.

Sljedeće važno svojstvo:

margina- iznos odstupanja od našeg bloka prema susjednim objektima na četiri strane.

vrijednosti:

margin-top- postavlja količinu gornjeg paddinga objekta

margin-left- postavlja iznos lijevog uvlaka objekta

margin-desno- postavlja iznos desne margine objekta

margin-bottom- postavlja količinu donjeg paddinga objekta

XHTML

Bilo koji sadržaj bloka !!!

Napravili smo blok sa 30px paddingom oko njega sa svih strana.

Na čemu bih još želeo da se zadržim:

padding- svojstvo specificira količinu prostora umetnutog između objekta i njegovih granica.

vrijednosti:

padding-bottom- postavlja količinu prostora umetnutu između objekta njegovom donjom ivicom.

padding-left- postavlja količinu prostora umetnutu između objekta njegovom lijevom ivicom.

padding-desno- postavlja količinu prostora umetnutu između objekta njegovom desnom ivicom.

padding-top- postavlja količinu prostora umetnutu između objekta po gornjoj ivici.

XHTML

Bilo koji sadržaj bloka !!!

Napravili smo blok sa 30px ispunom od sadržaja na sve strane.

I razmotrite primjer korištenja oznake:

Recimo da imamo ovakvu konstrukciju:

Bilo koji tekst!

Želimo napraviti tekst riječi na žutoj pozadini plava slova... Da biste to učinili, stavite ga u oznaku i primijenite odgovarajuće stilove.

Top srodni članci