سبد (0)

تبلیغات

عناصر block و inline در HTML

عناصر HTML را می توانید به وسیله تگ های <div> و یا <span> گروه بندی نمایید.


عناصر Block

Wiki

یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.

مثال برای عناصر Block:

  • <h1>
  • <p>
  • <div>
  • <table>

عناصر Inline

Wiki

یک عنصر Inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.

مثال برای عناصر inline:

  • <span>
  • <a>
  • <img>
  • <td>

عنصر <div>

Wiki

عنصر <div> یک عنصر block می باشد که می تواند به عنوان یک ظرف برای گروه بندی دیگر عناصر HTML استفاده شود.

عنصر <div> معنی خاصی ندارد. به جز این، به دلیل اینکه یک عنصر block می باشد، مرورگر یک خط قبل و بعد از آن نمایش می دهد.

هنگامی که با CSS استفاده می شود، عنصر <div> می تواند برای تنظیم خصوصیت style برای بلاک هایی با محتوای زیاد استفاده شود.

 دیگر استفاده رایج از عنصر <div> صفحه بندی سند می باشد. استفاده از جدول برای صفحه بندی دیگر قدیمی شده است. استفاده از جدول ها برای این منظور روش مناسبی نمی باشد. هدف از عنصر <table> نمایش داده ها به صورت جدولی می باشد.

نحوه صفحه بندی با استفاده از عناصر <div>

توضیح مثال بالا: آموزش HTML-صفحه بندی


عنصر <span>

Wiki

عنصر <span> یک عنصر درون خطی (inline) است که می تواند به عنوان ظرفی برای متن استفاده شود.

عنصر <span> معنی خاصی ندارد.

هنگامی که با CSS استفاده می شود، عنصر <span> می تواند برای تنظیم خصوصیت style برای بخش های متنی شکل، استفاده شود.

استفاده از عنصر <span> برای متمایز کردن رنگ قسمتی از متن


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

تگ توضیح
<div> تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
<span> تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

دیدگاه‌ها  

+2 # نفیسه بختیاری 1396-04-28 10:46
سلام خسته نباشید
طبق مثال زیر که در پایان آموزش بالا گفتین کاربرد span و strong شبیه به هم هستش .بهتره از کدوم استفاده کنیم (برای بهتر بودن در نظر گوگل)
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_span
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1396-04-28 14:23
سلام
خیر، کاربرد عنصر sapn و strong یکسان نیست. از عنصر span برای متمایز کردن قسمتی از متن استفاده می شود اما از strong برای Bold کردن استفاده می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # نفیسه بختیاری 1396-05-06 11:03
متمایز کردن یعنی چی؟ خوب در مثال مذکور از عنصر span برای bold کردن استفاده کردید !!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1396-05-06 11:42
سلام مجدد، از عنصر Span گفته شد که برای متمایز کردن متن استفاده می شود، منظور از متمایز کردن ، تغییر رنگ، فونت، استایل و ... دادن قسمتی از متن است. البته Bold کردن نیز جزو این دسته خواهد شد.
البته از نظر SEO بهتر است که از عنصر Strong برای Bold کردن استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # آرمان 1395-11-29 09:10
سلام.من یک عنصر دایو گذاشتم که داخلش خواستم دو عکس عرض دایو رو پرکنه.برای اینکار, برای هر عکس که قراره کنارهم قرار بگیره یک span تعریف کردم.یعنی دو span داخل دایو, که داخل هر span یک تگ a و داخل هر تگa یک تگ برای همون عکس.اما مجبورم برا تگ a خاصیت display رو اینلاین تنظیم کنم! اما مگه a خودش inline نیست؟ اگه اینکارو نکنم عکسها زیر هم قرار می گیره.با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-11-30 20:27
سلام.
همین ساختاری رو که ذکر کردید، بنده در ادیتور آنلاین codepen ایجاد کردم. همون طور که در لینک زیر مشاهده می کنید، دو عکس وجود داره که داخل تگ a قرار داره، اما در زیر یکدیگر قرار نگرفته اند. به مثال زیر دقت کنید:
codepen.io/sbaloot/pen/RKmEJY
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # سیما 1395-09-10 10:14
سلام وقتتون به خیر چه طوری باید توی عنصر دیو مختصات تعیین کنیم طوری که بدنه ها تو هم نرن ؟من کد و منویسم ولی بدنه سایت میره تو بنر و یه سوال دیگه چه طوری میشه از بغل ها عرض داد که قسمتای سایت خیلی به گوشه نچسبه ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-09-11 11:11
سلام شما نیاز دارید برای این کار از CSS استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # yahoo 1395-07-21 22:45
ببخشید یه سوال . چه طور تگ های div و block و inline رو بنویسم ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1395-07-22 08:20
با سلام.
برای این کار کافیست از خصوصیت display استفاده کرده و مقدار آن را inline یا inline-block بگذارید. کد زیر رو ببینید:


<style> div{background- color:yellow;} .test{display:i nline} </style>

<div>this is a test.</div > <br> <div class="tes t">this is a inline test.</div >

پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرحسین احمدی 1395-04-28 00:38
سلام ممنون از سایت بی نظیرتون.
میخواستم بگم بنده قسمت "layout" داخل آموزش html خود سایت w3schools.com رو دیدم اما صفحه بندی رو با عناصر دیگه مثل و ... انجام داه بود و اسمی از عنصر div نیورده بود. میخواستم بدون آیا این عنصر div برای صفحه بندی دیگه منسوخ شده هستش؟ اگه نه پس چرا داخل خود دبلیو تری اسکولز نامی ازش نیورده بود؟
ممنون میشم پاسخ بدید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-22 08:22
با سلام و خسته نباشید.
خیر! تگ div منسوخ نشده است و در صفحه بندی کاربرد فراوانی دارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # رضا ww 1395-03-21 23:33
سلام خسته نباشید
چطور میتونم با استفاده از عنصر div بخشی مانند "آخرین محصولات وب سایت بیاموز" (در پایین همین صفحه) رو بنویسیم
در واقع منظورم اینه که چطور میشه 4 یا تعداد بیشتر عنصر div رو در کنار هم قرار داد حالا یا عمودی یا افقی یا هم افقی و عمودی به ترتیب چیده شوند؟؟؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1395-03-24 07:30
سلام
برای قرار دادن چند عنصر Div در یک خط باید دو کار زیر را انجام دهید:
1- برای همه ی Divها، خصوصیت float را با مقدار right یا left تنظیم نمایید.
2- برای همه ی Divها، خصوصیت width را با یک مقدار دلخواه تنظیم نمایید.<div style="style: right; width:25%"> </div>
<div style="style: right; width:25%"> </div>
<div style="style: right; width:25%"> </div>
<div style="style: right; width:25%"> </div>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # طناز پیغمبری 1394-11-13 15:27
باسلام
منظور از خصوصیت clear که برابر با both قرار داده شده چیه؟ ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیرکیان 1394-11-14 14:08
وقتی که شما عناصر صفحه رو فلوت میکنید از جریان صفحه و از نظر بقیه عناصر صفحه حذف شده و دیگه فضایی رو در صفحه نمیگیرند واگر عنصری بعد از عنصر فلوت شده قرار دهید میبینید که یا پشت عنصر فلوت شده قرار میگیرد و یا رویش و درجایی که میخواهید قرار نمیگیرد
برای اینکه جراین فلوت صفحه رو قطع کنیم از این خاصیت استفاده میکنیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1394-11-13 15:55
سلام
Clear یکی از خصوصیت های CSS است که برای فهم آن نیاز است که شما ابتدا با عناصر Block و Inlint و همچنین خصوصیت Float آشنا شوید.
عناصر Block: عناصری که تمام طول یک سطر را به خودشان اختصاص می دهند. مثل عنصر Div
عناصر Inlinr: عناصر که تنها به اندازه ای که اشغال می کنند طول یک سطر را اشغال می کنند و دیگر عناصر را در کنار خود می پذیرند، مثل عنصر Span
خصوصیت Float: با استفاده از این خصوصیت می توانید عناصر Block را Inline کرده و به سمت راست یا چپ، شناور نمود.
برای کسب اطلاعات بیشتر در مورد خصوصیت Clear به لینک زیر مراجعه فرمایید:
www.beyamooz.com/cssref/227-css-properties/851-clear
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Guest 1394-11-12 11:34
سلام خسته نباشین
میشه در مورد div و span بیشتر توضیح بدین
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-11-12 21:11
با سلام و تشکر.
دوست عزیز منظور شما از توضیح بیشتر مشخص نیست. این دو تگ جزء تگ‌های مهم هستند که به لحاظ بصری کاری روی عنصر درونشون انجام نمی‌دن. تنها تفاوت مهم اصلی این دو تگ در واقع blockLevel بودن آنهاست.
تگ span یک تگ textLevel هست، بدین معنی که در هنگام استفاده از این تگ، برای متن قبل و بعد آن اتفاق خاصی نمیفتد.
اما تگ div یک تگ blockLevel هست، بدین معنی که در هنگام استفاده از این تگ، یک خط قبل و بعد از این تگ ایجاد میشه و باعث میشه که عناصر درون این تگ از خط جدید شروع بشه.

قدرت این دو تگ بیشتر زمانی مشخص میشه که بهشون کلاس و ID بدیم و توسط CSS یا Javascript برای اون‌های رویدادهای خاصی اعمال کنیم. اگر این دو تگ رو ساده به کار ببرید، صرفا کار خاصی انجام نمیده.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # raghb 1393-12-05 11:25
سلام
وقتی تگ div را در دریم بصورت تو در تو مینویسم وخصوصیات آنرا بصورت زیر تنظیم می کنم:position:relatvie;
top: left;
آنچه که مکان عنصر در دریم ویو در دیزاین خود نشان میدهد با آنچه که با IE یا firefox نشان میدهد متفاوت هست از نظر مکان عنصر div؟
برای جلوگیری از این اشکالات چکار کنیم ؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرکیان 1393-12-06 11:11
دیزاین دریم ویور یک مرورگر نیست و کامل نیست پس هیچ وقت به آن اعتماد و اعتنا نکن.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-12-06 07:49
سلام
حدث می زنم، اگر استایل زیر را تنظیم کنید درست بشه:
html { padding: 0px; margin: 0px; }
body { padding: 0px; margin: 0px; }
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # نفیسه بختیاری 1396-04-28 10:38
سلام ببخشید خصوصیت margin چیه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-04-28 14:16
سلام، با استفاده از خصوصیت Margin می توان فاصله بین لبه ها و عناصر کناری را تعیین نمود. برای اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
http://beyamooz.com/css/86-box-model/95-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-margin-%D8%AF%D8%B1-css
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mohsen moardi 1393-11-30 09:19
سلام....زماني كه يه ديو ايجاد ميشه به شكل مستطيبه...گوشه هاشم ميشه گرد كرد اما تو بعضي از سايتا يك شكل هايي ميبينيم كه نميدونم چطور ايجاد ميشه...مثلا گوشه ي ديو يه حلت فلشه كه به يه جهتي هست.يا مثلا يه قسمتي از ديو فرو رفتگي داره كه زيباتر شه...چطور ايجاد ميشن؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-12-02 08:08
سلام
در اینجور مواقع دیگر با CSS تنها نمی توان طراحی را انجام داد و باید از فتوشاپ کمک گرفت. بعنوان مثال، قسمت تو رفتگی که فرمودید را باید در فتوشاپ آماده کرد و سپس با استفاده از خصوصیت background آنرا در محل مورد نظر نمایش داد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرکیان 1393-11-09 16:22
یک نکته:اتگ span نمی تواند طول وعرض بگیرد و طول عرض آن بستگی به محتویاتش دارد ؛درست است؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-11-09 20:44
دقیقاً حق با شماست و این بخاطر inline بودن عنصر span است، یعنی تنها به اندازه محتوایی که دارد، طول یک سطر را اشغال می کند.
اما اگر خصوصیت display:block را روی آن اعمال کنیم، از حالت استانداردش خارج می شود و دیگر می توان به آن به قول شما، طول و عرض داد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # الی جون 1393-09-04 15:23
سلام
لطفا طرز html کردن قالب با div رو هم در جوملا آموزش بدید.
در ضمن پایین سایتتون اسکرول داره برطرفش کنین.
با تشکر از سایت عالیتون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-09-05 11:08
سلام، آموزش ساخت قالب در جوملا در حال تکمیل است، می توایند روند کار را در لینک زیر مشاهده فرمایید:
http://www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D8%AF%D8%B1-%D8%AC%D9%88%D9%85%D9%84%D8%A7
اسکرول پایین: برای داشتن دیدی بهتر از سایت، عرض قالب استفاده شده در اینجا، 1120 پیکسل تنظیم شده است، بنابراین در رزولیشن های 768*1024، پایین صفحه یک اسکرول کوچیک می خورد، البته بصورت پیش فرض سمت راست صفحه که فهرست مطالب لیست شده و متن اصلی آموزش، کاملاً قابل مشاهده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mahdi99 1393-08-16 13:29
سلام ضمن تشکر از وبسایت عالیتون
چرا طرز استفاده از div و span رو نگفتین؟مثال هم نیست
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-08-16 15:40
سلام، در مطلب، برای هر کدام از عناصر div و span مثال ذکر شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # امیر پهلوان صادق 1393-02-11 09:28
به نقل از hosein:
سلام وقت بخیر ممنون از سایت مفید وخوبی که دارید
ایا میشود برای تقسیم صفحه از تگ span استفاده کرد؟
اگر نه پس تعریف span رو ویرایش کنید
span:تعریف یک ظرف برای دیگر عناصر
در صورتی که جای دیگه ای گفتید برای متن نه عناصر
با تشکر

سلام ... با نظرتون موافقم، خود من همیشه از این عنصر برای استایل دادن به متن استفاده کردم ولی ترجمه ی بالا دقیقاً چیزی است که در w3schools گفته شده. (HTML elements can be grouped together with div and span)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # hosein 1393-02-10 12:27
سلام وقت بخیر ممنون از سایت مفید وخوبی که دارید
ایا میشود برای تقسیم صفحه از تگ span استفاده کرد؟
اگر نه پس تعریف span رو ویرایش کنید
span:تعریف یک ظرف برای دیگر عناصر
در صورتی که جای دیگه ای گفتید برای متن نه عناصر
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-05-31 10:21
با سلام
ممنون از حسن نگاهتون.
در داخل این تگ میتوان هم متن و هم یک تگ دیگر را قرار داد.
از تگ span برای محتواهای کوچک تر و از تگ div برای نمایش محتواهای بزرگتر یا نمایش یک قسمت از صفحه سایت استفاده می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی