Hoe om die Span en Div HTML-elemente te gebruik

Gebruik span en div met CSS vir groter styl en uitlegbeheer.

Baie mense wat nuut is vir webontwerp en HTML / CSS, gebruik die en

elemente in wisselvallig omdat hulle webbladsye bou. Die realiteit is egter dat elk van hierdie HTML-elemente verskillende doeleindes dien. Leer om elkeen vir die beoogde doel te gebruik, sal jou help om skoner webbladsye te ontwikkel wat die kode makliker bestuur.

Gebruik die
element

Die div element definieer logiese afdelings op jou webblad.

Dit is basies 'n boks waarin u ander HTML-elemente wat logies bymekaarkom, kan plaas. 'N Afdeling kan verskeie ander elemente daarin hê, soos paragrawe, opskrifte, lyste, skakels, beelde, ens. Dit kan selfs ander afdelings binne hê om bykomende struktuur en organisasie in u HTML-dokument te voorsien.

Om die div element te gebruik, plaas 'n oop

tag voor die area van jou bladsy wat jy as 'n aparte afdeling wil hê, en 'n sluit -tag daarna:

inhoud van div

As die area van jou bladsy ekstra inligting benodig wat jy sal gebruik om later met CSS te styl, kan jy 'n id selector byvoeg (bv.

id = "myDiv">), of 'n klas selector (bv. klas = "bigDiv">). Albei hierdie eienskappe kan dan gekies word met behulp van CSS of gewysig met behulp van JavaScript. Huidige beste praktyke leun na die gebruik van klas keurders in plaas van ID's, deels as gevolg van hoe spesifieke ID keurders is. In waarheid kan jy egter een gebruik en kan selfs 'n afdeling sowel 'n ID en 'n klaskeuse gee.

Wanneer om te gebruik

Versus

Die div element verskil van die HTML5-afdeling element omdat dit nie die ingeslote inhoud enige semantiese betekenis gee nie. As jy nie seker is of die inhoudsblok 'n div of 'n afdeling moet wees nie, dink aan wat die doel van die element en die inhoud is om jou te help besluit wat om te gebruik:

  • As jy die element benodig net om style aan die gebied van die bladsy by te voeg, moet jy die div element gebruik.
  • As die inhoud wat vervat is, 'n duidelike fokus het en op sy eie kan staan, kan u die afdelingelement eerder gebruik.

Uiteindelik gedra beide afdelings en afdelings baie op dieselfde manier en jy kan een van hulle kenmerkwaardes gee en hulle met CSS ontwerp om die voorkoms van jou webwerf te kry wat jy nodig het. Albei hiervan is blokvlak elemente.

Gebruik die element

Die spanelement is standaard 'n inlyn-element. Dit stel dit apart van die div en afdeling elemente. Die spanelement word dikwels gebruik om 'n spesifieke stuk inhoud, gewoonlik teks, in te voeg, om dit 'n bykomende "haak" te gee wat later gestileer kan word. Gebruik met CSS, dit kan die styl van die teks wat dit omsluit, verander; egter, sonder enige stylkenmerke, het die spanelement alleen geen effek op teks nie.

Dit is die hoofverskil tussen die span en die div elemente. Soos hierbo genoem, sluit die div element 'n paragraafbreek in, terwyl die spanelement slegs die leser vertel om geassosieerde CSS-stylreëls toe te pas op wat deur die tags ingesluit word:


Gemerkte teks en nie-gemerkte teks.

Voeg die klas = "hoogtepunt" of ander klas by die spanelement toe om die teks met CSS te styl (bv. Klas = "hoogtepunt">).

Die spanelement het geen vereiste eienskappe nie, maar die drie wat die nuttigste is, is dieselfde as dié van die div element:

  • styl
  • klas
  • id

Gebruik span as jy die inhoudstyl wil verander sonder om daardie inhoud as 'n nuwe blokvlakelement in die dokument te definieer.

As jy byvoorbeeld die tweede woord van 'n h3-opskrif rooi wil hê, kan jy die woord omring met 'n spanelement wat die woord as rooi teks sal stoor. Die woord bly steeds deel van die h3-element, maar word nou ook in rooi vertoon:

Dit is My Awesome Headline

Geredigeer deur Jeremy Girard op 2/2/17