Як выкарыстоўваць Span і Div HTML Elements

Выкарыстоўвайце службы і DIV з CSS для большага стылю і кантролю макета.

Многія людзі, якія з'яўляюцца новымі для вэб-дызайну і HTML / CSS выкарыстоўваць і

у ўзаемазаменныя, як яны будуюць з вэб-старонак. У рэчаіснасці, аднак, заключаецца ў тым, што кожны з гэтых элементаў HTML служаць для розных мэтаў. Навучыцца выкарыстоўваць кожны па прызначэнні дапаможа вам распрацаваць больш чыстыя вэб-старонкі, якія код лягчэй кіраваць ў цэлым.

Выкарыстанне
Элемент

Элемент DIV вызначае лагічных частак на вэб-старонцы.

Гэта ў асноўным поле, у якім вы можаце змясціць іншыя элементы HTML, якія лагічна ідуць разам. Падраздзяленне можа мець некалькі іншых элементаў у ім, як абзацы, загалоўкі, спісы, спасылкі, малюнкі і г.д. Ён нават можа мець іншыя падраздзяленні ўнутры яго, каб забяспечыць дадатковую структуру і арганізацыю вашага HTML-дакумента.

Для таго, каб выкарыстоўваць элемент DIV, змесціце тэг адкрыты

да вобласці вашай старонкі, якую вы хочаце як асобнае падраздзяленне, і зачыніць
тэг пасля яго:

ўтрыманне DIV

Калі пляц вашай старонкі неабходная дадатковая інфармацыя, якую вы будзеце выкарыстоўваць для стылю з дапамогай CSS пазней, вы можаце дадаць селектар ідэнтыфікатара (напрыклад,

ID = "myDiv">), або селектар класа (напрыклад, клас = "bigDiv">). Абодва гэтых атрыбутаў могуць быць выбраны з дапамогай CSS або зменены з дапамогай JavaScript. У цяперашні час лепшыя практыкі нішчымнага да выкарыстання селектараў класа замест ідэнтыфікатараў, часткова з-за таго, як канкрэтныя ID селектары. У рэчаіснасці, аднак, вы можаце выкарыстоўваць любы з іх, і можа нават даць дывізіяй як ідэнтыфікатар і селектар класа.

Калі выкарыстоўваць

Versus <раздзел>

Элемент DIV адрозніваецца ад секцыі элемента HTML5, паколькі ён не дае Прыкладаемы змесце ніякага сэнсавага значэння. Калі вы не ўпэўненыя, ці з'яўляецца блок ўтрымання павінен быць DIV ці частка, падумайце аб тым, што мэта элемента і змест, каб дапамагчы вам вырашыць, які з іх выкарыстоўваць:

  • Калі вам патрэбен элемент проста дадаць стылі ў гэтай галіне старонкі, вы павінны выкарыстоўваць элемент DIV.
  • Калі ўтрыманне утрымлівацца мае выразны фокус і можа стаяць самастойна, вы можаце выкарыстоўваць раздзел элемент замест гэтага.

У канчатковым рахунку, абедзве дзівы і секцыі паводзяць сябе даволі падобным чынам, і вы можаце даць адзін з іх значэнні атрыбутаў і стыль іх з дапамогай CSS, каб атрымаць знешні выгляд вашага сайта, што вам трэба. Абодва гэтыя элементы ўзроўня блока.

Выкарыстанне Элемент

Элемент пядзі убудаваны элемент па змаўчанні. Гэта адрознівае яго ад дзіў і секцыйных элементаў. Элемент дыяпазону часта выкарыстоўваюцца, каб абгарнуць пэўную частку кантэнту, звычайна тэкст, каб надаць яму дадатковы «крук», які можа быць стылізаваны пазней. Выкарыстоўваецца з CSS, ён можа змяніць стыль тэксту яго акружае; аднак, без якіх-небудзь атрыбутаў стылю, пралёт элемента ў адзіночку не аказвае ніякага ўплыву на тэкст на ўсіх.

Гэта асноўнае адрозненне паміж адлегласцю паміж апорамі і элементамі DIV. Як ужо згадвалася вышэй, элемент DIV ўключае ў сябе разрыў абзаца, у той час як элемент дыяпазону толькі кажа браўзэру, каб прымяніць адпаведныя правілы стыляў CSS да таго, што складзеная паміж тэгамі :


<Р> Выдзелены тэкст і ня вылучаны тэкст.

Дадайце клас = «разыначку» або іншы клас да элемента дыяпазону для стылізацыі тэксту з дапамогай CSS (напрыклад, клас = «вылучэнне»>).

Элемент пядзі не мае неабходных атрыбутаў, але тры, якія з'яўляюцца найбольш карыснымі з'яўляюцца такімі ж, як элемент сну:

  • стыль
  • клас
  • ідэнтыфікатар

Выкарыстоўвайце прамежак , калі вы хочаце змяніць стыль змесціва без вызначэння , што кантэнт у якасці новага ўзроўню блока элемента ў дакуменце.

Напрыклад, калі вы хочаце, каб другое слова з h3 загалоўка быць чырвоным, вы маглі б акружыць гэтае слова з двухсхільным элементам, які б стылем гэтага слова як чырвоны тэкст. Слова па-ранейшаму застаецца часткай элемента h3, але цяпер таксама адлюстроўваецца чырвоным колерам:

Гэта мой Высокі Загаловак

Пад рэдакцыяй Джэрэмі Girard на 2/2/17