Många som är nya för webbdesign och HTML / CSS använder och Div-elementet definierar logiska avdelningar på din webbsida. Det är i princip en låda där du kan placera andra HTML-element som logiskt går samman. En delning kan ha flera andra element i den, som punkter, rubriker, listor, länkar, bilder etc. Det kan även ha andra divisioner inuti det för att ge ytterligare struktur och organisation till ditt HTML-dokument. För att använda div-elementet, placera en öppen id = "myDiv">
) eller en klassväljare (t.ex. class = "bigDiv"> Div-elementet skiljer sig från HTML5-avsnittet eftersom det inte ger det bifogade innehållet någon semantisk mening. Om du inte är säker på om innehållsblokken ska vara en div eller en sektion, tänk på vad syftet med elementet och innehållet är att hjälpa dig att bestämma vilka som ska användas: I slutändan uppträder båda delarna och sektionerna ganska lika och du kan ge någon av dem attributvärden och utforma dem med CSS för att få utseendet på din webbplats som du behöver. Båda dessa är blocknivåelement. Spänningselementet är som standard ett inline-element. Detta skiljer det från div och sektionselementen. Spänningselementet används ofta för att sätta in en viss del av innehållet, normalt text, för att ge den en extra "krok" som kan stylas senare. Används med CSS, det kan ändra stilen på texten som den bifogar; emellertid, utan några stilattribut, har spanelementet inte ens någon effekt på text alls. Detta är den största skillnaden mellan span och div-elementen. Som nämnts ovan innefattar div-elementet ett styckeavbrott, medan spänningselementet endast berättar för webbläsaren att tillämpa associerade CSS-stilregler till vad som bifogas av tags: Markerad text och icke-markerad text. Lägg till class = "highlight"
eller annan klass till spännelementet för att ställa in texten med CSS (t.ex. class = "highlight">
). Spännelementet har inga nödvändiga attribut, men de tre som är mest användbara är samma som div-elementets: Använd span när du vill ändra innehållsstil utan att definiera innehållet som ett nytt blocknivåelement i dokumentet. Om du till exempel vill att det andra ordet i en h3-rubrik ska vara röd kan du omge det ordet med ett spänningselement som skulle ställa det ordet som röd text. Ordet är fortfarande en del av h3-elementet, men visas nu också i rött: Använda
). Båda dessa attribut kan sedan väljas med hjälp av CSS eller modifierad med hjälp av JavaScript. Nuvarande bästa praxis lutar mot att använda klassväljare istället för ID, delvis på grund av hur specifika ID-väljare är. I sanning kan du dock använda antingen en och kan även ge en uppdelning både ett ID och en klassväljare. När du använder
Använda Element
Detta är min fantastiska rubrik
element i utbytbart eftersom de bygger upp webbsidor. Verkligheten är emellertid att varje av dessa HTML-element har olika syften. Att lära sig att använda var och en för sitt avsedda syfte hjälper dig att utveckla renare webbsidor som kodar är enklare att hantera övergripande.
Element
tagga innan det område på din sida som du vill ha som en separat delning och ett slutet
tagga efter det:
innehållet i div
Om området på din sida behöver ytterligare information som du ska använda för att stila med CSS senare kan du lägga till en idväljare (t.ex.
Mot
