Хэрхэн Span болон Div HTML-ийн элементүүдийг хэрхэн ашиглах

Илүү загвар болон байршлын хяналтыг сайжруулахын тулд CSS болон span ашиглана.

Вэб дизайн болон HTML / CSS-д шинэ хүмүүс олон вэбсайтуудыг бий болгосноор ба

элементүүдийг хослуулан хэрэглэдэг. Гэхдээ бодит байдал нь эдгээр HTML элемент бүр өөр өөр зорилготой юм. Зорилго бүрийг ашиглахыг суралцах нь ерөнхий удирдамжийг илүү хялбар болгосон вэб хуудсыг хөгжүүлэхэд туслах болно.

Элемент ашиглан

Див элемент нь таны вэб хуудсан дээрх логик хэсгүүдийг тодорхойлдог.

Энэ нь үндсэндээ логикоор явж байгаа бусад HTML элементүүдийг байрлуулж болох хайрцаг юм. Хэсэг нь догол мөр, гарчиг, жагсаалт, холбоос, зураг гэх мэт өөр олон элементтэй байж болно. Үүнээс гадна доторх бусад хэсгүүдийг өөртөө HTML баримт бичигт нэмэлт бүтэц, зохион байгуулалтаар хангах боломжтой.

Доор элементийг ашиглахын тулд нээлттэй хуудсаа тусад нь хуваахыг хүсч байгаа хуудсынхаа өмнө нээлттэй <

div -ийн агуулгууд

Хэрвээ таны хуудасны талбар нь сүүлд CSS-тай хэв маягаар ашиглах нэмэлт нэмэлт мэдээлэл хэрэгтэй бол, та ID сонгогчийг нэмж болно (жишээ нь,

id = "myDiv">), эсвэл анги сонгогч (жишээ нь, class = "bigDiv">). Эдгээр хоёулаа хоёуланг нь CSS ашиглан эсвэл JavaScript ашиглан өөрчилж болно. Өнөөгийн шилдэг туршлагууд нь ID сонгогчдын оронд анги сонгогчдыг ашиглахад чиглэгддэг. Үнэнийг хэлэхэд, та аль нэгийг нь ашиглаж болох ба бүр ID болон ангийн сонгон шалгаруулагчийг хоёуланг нь хувааж болно.

Versus
ашиглах үед

Дивын элемент нь HTML5 хэсгийн элементээс өөр юм. Учир нь энэ нь хаалттай контентыг ямар нэг утга санааг агуулдаггүй. Хэрэв та агуулгын блок нь div эсвэл section байх эсэх нь эргэлзээтэй байгаа бол элементийн зорилго болон контент нь юуг хэрэглэхээ шийдэхэд туслах болно.

  • Хэрвээ танд элементийг хуудасны тэр хэсэгт хэв маяг нэмэх бол элементийг ашиглах хэрэгтэй.
  • Хэрвээ агуулгын агуулга онцгой анхаарал төвлөрүүлж, өөрийн гэсэн байр суурьтай байвал та хэсэг элементийг ашиглахыг хүсч болно.

Эцэст нь, divs болон хэсгүүд хоёулаа ижил төстэй үйлдэл хийдэг бөгөөд тэдгээрийн аль нэгийг нь attribute values-д өгч CSS-ээр хэвлээд хэрэгцээтэй сайтаа харах боломжтой болно. Эдгээр нь хоёулаа блок түвшний элемент юм.

Элементийг ашиглах

Ачаалал элемент нь анхдагчаар inline элемент юм. Энэ нь div болон section элементүүдээс ялгаатай. Хэсгийн элемент нь ихэвчлэн текстийн тодорхой хэсэг, ерөнхийдөө текстийг орлуулахын тулд ашигладаг. CSS-ээр хэрэглэгддэг, энэ нь тухайн текстийн загварын хэв маягийг өөрчилж болно; Гэсэн хэдий ч, ямар ч загварын шинж чанаргүй бол span span элемент нь текстэнд ямар ч нөлөө үзүүлэхгүй.

Энэ нь span болон div элементийн гол ялгаа юм. Дээр дурдсанчлан, div элемент нь догол мөрийг агуулдаг бөгөөд харин span span элемент нь зөвхөн CSS тохирох CSS загварын дүрмийг тагуудаар хаалтанд өгдөг.


Товчлуурт текст болон тодроогүй текст.

CSS-тэй текстийг хэвлүүлэхийн тулд class = "highlight" буюу бусад анги дээр span элементэд нэмэх (жишээ нь, class = "highlight">).

Сүлжээний элемент нь шаардлагагүй шинж чанарууд биш боловч хамгийн ашигтай гурван нь div элементийнхтэй адил байна:

  • хэв маяг
  • анги
  • id

Баримт дахь шинэ блок түвшний элементийг агуулаагүй контентийг тодорхойлохгүйгээр контентыг өөрчлөхийг хүсч байгаа бол ашиглах.

Жишээ нь, хэрэв та H3-ийн хоёр дахь үг улаан байхыг хүсч байгаа бол тэр үгийг улаан текст гэж хэвлэнэ. Үг одоо h3 элементийн хэсэг хэвээр байгаа боловч одоо улаанаар харуулав:

Энэ бол Миний Гайхамшигтай Тэмдэглэл

2/2/17 дээр Жереми Герард засварлав