Как да използвате HTML елементите Span и Div

Използвайте Span и div с CSS за по-голям стил и оформление.

Много хора, които са нови в уеб дизайна и HTML / CSS, използват елементите и

за взаимозаменяемо, когато изграждат уеб страници. Реалността обаче е, че всеки един от тези HTML елементи служи за различни цели. Да се ​​научите да използвате всеки от тях по предназначение ще ви помогне да разработите по-чисти уеб страници, чийто код е по-лесен за цялостно управление.

Използване на елемента

Елементът div дефинира логически разделения на вашата уеб страница.

Това е основно кутия, в която можете да поставите други HTML елементи, които логично се съчетават. Разделянето може да има множество други елементи в него, като параграфи, заглавия, списъци, връзки, изображения и т.н. Тя дори може да има и други разделяния вътре в него, за да осигури допълнителна структура и организация на вашия HTML документ.

За да използвате елемента div, поставете отворен

маркер пред зоната на вашата страница, която искате като отделен участък, и след това :

съдържанието на раздел

Ако областта на страницата Ви се нуждае от допълнителна информация, която ще използвате, за да я използвате с CSS по-късно, можете да добавите id selector (напр.

id = "myDiv">) или класов селектор (напр. клас = "bigDiv">). И двата атрибута могат да бъдат избрани чрез CSS или модифицирани чрез JavaScript. Текущите най-добри практики са насочени към използването на селектори за класове вместо идентификационни номера, отчасти заради това, колко специфични селектори за идентификация са. В действителност, обаче, можете да използвате едно от двете и дори да дадете разделение както на ID, така и на класа селектор.

Кога да използвате

Versus

Елементът div е различен от елемента на секцията HTML5, тъй като той не придава на приложеното съдържание никакъв семантичен смисъл. Ако не сте сигурни дали блокът със съдържание трябва да е div или раздел, помислете какво е целта на елемента и съдържанието, за да ви помогне да решите кои да използвате:

  • Ако имате нужда от елемента, за да добавите стилове към тази част на страницата, трябва да използвате елемента div.
  • Ако съдържанието, което трябва да се съдържа, има отделен фокус и може да остане самостоятелно, вместо това може да искате да използвате елемента на секцията.

В крайна сметка двата дивизии и секции се държат доста подобно и можете да дадете на някой от тях стойности на атрибутите и да ги оформите с CSS, за да получите вида на вашия сайт, от който се нуждаете. И двата елемента са елементи на ниво блок.

Използване на елемента

Елементът за хоризонтален интервал е по подразбиране инлайн елемент. Това го отличава от елементите div и section. Елементът за честота често се използва за обвиване на конкретно парче съдържание, обикновено текст, за да му даде допълнителна "кука", която може да бъде оформена по-късно. Използван с CSS, той може да променя стила на текста, който го включва; обаче, без никакви атрибути на стила, само елементът за дублиране няма никакъв ефект върху текста изобщо.

Това е основната разлика между елементите span и div. Както бе споменато по-горе, елементът div включва прекъсване на параграфа, докато елементът span само казва на браузъра да прилага асоциирани правила за стила на CSS към това, което е оградено от маркерите :


Осветени текстове и несветен текст.

Добавете класа = "highlight" или друг клас към елемента "span", за да оформите текста с CSS (напр. Клас = "highlight">).

Функционалният елемент няма задължителни атрибути, но трите, които са най-полезни, са същите като тези на елемента div:

  • стил
  • клас
  • документ за самоличност

Използвайте интервал, когато искате да промените стила на съдържанието, без да дефинирате това съдържание като нов елемент на ниво блок в документа.

Например, ако искате втората дума от заглавието на h3 да бъде червена, можете да заобиколите тази дума с елемент от тип "span", който би описал тази дума като червен текст. Думата все още остава част от елемента h3, но сега също се показва в червено:

Това е моето страхотно заглавие

Редактиран от Jeremy Girard на 2/2/17