0

بلاگ

سایت اموزشی زرین لرنبلاگمقالاتعنصر در HTML

عنصر در HTML

22 آبان 1403
ارسال شده توسط
مقالات
222 بازدید

عنصر <div> در HTML یک عنصر عمومی برای گروه‌بندی سایر عناصر است که بیشتر برای اهداف استایل‌دهی و چیدمان صفحه به کار می‌رود، بدون این که معنای خاصی به محتوای آن بدهد. تگ <div> معمولاً همراه با CSS و جاوا اسکریپت برای اعمال استایل، موقعیت‌دهی و افزودن قابلیت‌ها به بخش‌های یک صفحه وب استفاده می‌شود.

سینتکس

<div/>محتوا در اینجا قرار می‌گیرد<div>

ویژگی‌های رایج

  1. class: برای اختصاص یک یا چند کلاس به <div> که می‌توان از آنها برای استایل‌دهی با CSS استفاده کرد.

    <div class=”container“>…</div>

  2. id: برای اختصاص یک شناسه منحصربه‌فرد به <div> که می‌توان برای هدف‌گذاری در CSS یا جاوا اسکریپت از آن استفاده کرد.

<div id=”header“>…</div>

      3.style: امکان افزودن استایل داخلی (inline) را مستقیماً به <div> می‌دهد.

<div style=”background-color: lightblue;“>…</div>

       4. data-* attributes: برای جاسازی داده‌های سفارشی در <div> که می‌توان آنها را با جاوا اسکریپت فراخوانی کرد.

<div data-info=”additional data“</div>

مثال‌ها

ساختار ساده برای چیدمان صفحه

<div class=”header“>Header Content</div>

<“div class=”main-content>

<div class=”sidebar“>Sidebar Content</div>

<div class=”article“>Main Article Content</div>

</div>

<div class=”footer“>Footer Content</div>

اعمال استایل با CSS

<style>

} container.

; width: 100%           

; padding: 20px           

; background-color: #f4f4f4           

{

</style>

<div class=”container“>This is a container div</div>

تعامل با جاوا اسکریپت

استفاده از شناسه برای تعامل با یک <div> از طریق جاوا اسکریپت:

<div id=”clickableDiv” onclick=”alert(‘Div clicked!’)“>Click me</div>

<script>

} ()document.getElementById(“clickableDiv”).addEventListener(“click“, function        

; alert(“Div clicked!“)

;({

<script/>

زمان استفاده از <div>

  • گروه‌بندی محتوا: زمانی از <div> استفاده کنید که به یک ظرف برای استایل‌دهی CSS یا هدف‌گذاری جاوا اسکریپت نیاز دارید، اما محتوا معنای خاصی ندارد (مانند یک تیتر یا پاراگراف).
  • ایجاد ساختارهای چیدمان: <div> برای تعریف بخش‌های مختلف صفحه مانند هدر، فوتر، نوار کناری به کار می‌رود.

تفاوت <div> و عناصر معنایی

هر زمان ممکن است، از عناصر معنایی HTML5 مانند <header>, <footer>, <main>, <section>, و <article> استفاده کنید که مفهوم بیشتری نسبت به <div> دارند.

برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
Created by potrace 1.14, written by Peter Selinger 2001-2017
در آپارات
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید