عناصر block و inline در HTML
عناصر HTML را می توانید به وسیله تگ های <div> و یا <span> گروه بندی نمایید.
عناصر Block
یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.
مثال برای عناصر Block:
- <h1>
- <p>
- <div>
- <table>
عناصر Inline
یک عنصر Inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.
مثال برای عناصر inline:
- <span>
- <a>
- <img>
- <td>
عنصر <div>
عنصر <div> یک عنصر block می باشد که می تواند به عنوان یک ظرف برای گروه بندی دیگر عناصر HTML استفاده شود.
عنصر <div> معنی خاصی ندارد. به جز این، به دلیل اینکه یک عنصر block می باشد، مرورگر یک خط قبل و بعد از آن نمایش می دهد.
هنگامی که با CSS استفاده می شود، عنصر <div> می تواند برای تنظیم خصوصیت style برای بلاک هایی با محتوای زیاد استفاده شود.
دیگر استفاده رایج از عنصر <div> صفحه بندی سند می باشد. استفاده از جدول برای صفحه بندی دیگر قدیمی شده است. استفاده از جدول ها برای این منظور روش مناسبی نمی باشد. هدف از عنصر <table> نمایش داده ها به صورت جدولی می باشد.
نحوه صفحه بندی با استفاده از عناصر <div>
توضیح مثال بالا: آموزش HTML-صفحه بندی
عنصر <span>
عنصر <span> یک عنصر درون خطی (inline) است که می تواند به عنوان ظرفی برای متن استفاده شود.
عنصر <span> معنی خاصی ندارد.
هنگامی که با CSS استفاده می شود، عنصر <span> می تواند برای تنظیم خصوصیت style برای بخش های متنی شکل، استفاده شود.
استفاده از عنصر <span> برای متمایز کردن رنگ قسمتی از متن
تگ های گروه بندی
| تگ | توضیح |
|---|---|
| <div> | تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است) |
| <span> | تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 63923
دیدگاه‌ها
[*]سلام مرسی از سایت خوبتون یه سوال داشتم
من فیلم آموزشیتون گرفتم تو این صفحه در قسمت آموزش نحوه صفحه بندی با استفاده از عناصر ( http://beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_layout_divs)
توی آموزش در فیلم هیچ توضیحی درباره ای کد style="backgrou nd-color:#FFA50 0 داده نشده و حتی اشاره نشده که در آموزش های بعدی باهاش آشنا می شود (منظورم بک گراند کالر نیست کدیه که ازش استفاده شده است یعنی #FFA500 چون طبق آموزش بتریب که امدم حتی فیلم بعدی آموزشم دیدم تاحالا همچین کدی نبوده و نمیدونم باید از کجا این کدرنگی رو وارد کنیم) لطفا توضیح بدین شیوه وارد کردن این کدهای رنگی و انواع مختلفشون چه کدهایی هستند...
سلام و درود
خصوصیت background-colo r و نحوه تنظیم اون مربوط به CSS است و در فیلم آموزش HTML فقط اشاره ای به آن شده است اما در CSS رنگ به یکی از روش های زیر مشخص می شود:
name: نام رنگ باید مشخص شود مانند "red"
RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #
اما در روش سوم که مورد سوال شما هم بوده است برای بدست آوردن ff0000 می تونیم از فتوشاپ استفاده کنیم و در پلن رنگ می تونیم بصورت ویژوال از بین رنگ های نمایش داده شده، رنگ مورد نظرمان را انتخاب و سپس فتوشاپ بصورت اتوماتیک نوع HEX رنگ را تولید می کنه که فقط کافی است آنرا کپی و در صفحات وب استفاده کنیم.
سلام خسته نباشید
طبق مثال زیر که در پایان آموزش بالا گفتین کاربرد span و strong شبیه به هم هستش .بهتره از کدوم استفاده کنیم (برای بهتر بودن در نظر گوگل)
beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_span
سلام
خیر، کاربرد عنصر sapn و strong یکسان نیست. از عنصر span برای متمایز کردن قسمتی از متن استفاده می شود اما از strong برای Bold کردن استفاده می شود.
متمایز کردن یعنی چی؟ خوب در مثال مذکور از عنصر span برای bold کردن استفاده کردید !!!!
سلام مجدد، از عنصر Span گفته شد که برای متمایز کردن متن استفاده می شود، منظور از متمایز کردن ، تغییر رنگ، فونت، استایل و ... دادن قسمتی از متن است. البته Bold کردن نیز جزو این دسته خواهد شد.
البته از نظر SEO بهتر است که از عنصر Strong برای Bold کردن استفاده کنید.
سلام.من یک عنصر دایو گذاشتم که داخلش خواستم دو عکس عرض دایو رو پرکنه.برای اینکار, برای هر عکس که قراره کنارهم قرار بگیره یک span تعریف کردم.یعنی دو span داخل دایو, که داخل هر span یک تگ a و داخل هر تگa یک تگ برای همون عکس.اما مجبورم برا تگ a خاصیت display رو اینلاین تنظیم کنم! اما مگه a خودش inline نیست؟ اگه اینکارو نکنم عکسها زیر هم قرار می گیره.با تشکر
سلام.
همین ساختاری رو که ذکر کردید، بنده در ادیتور آنلاین codepen ایجاد کردم. همون طور که در لینک زیر مشاهده می کنید، دو عکس وجود داره که داخل تگ a قرار داره، اما در زیر یکدیگر قرار نگرفته اند. به مثال زیر دقت کنید:
codepen.io/sbaloot/pen/RKmEJY
سلام وقتتون به خیر چه طوری باید توی عنصر دیو مختصات تعیین کنیم طوری که بدنه ها تو هم نرن ؟من کد و منویسم ولی بدنه سایت میره تو بنر و یه سوال دیگه چه طوری میشه از بغل ها عرض داد که قسمتای سایت خیلی به گوشه نچسبه ؟
سلام شما نیاز دارید برای این کار از CSS استفاده کنید.
ببخشید یه سوال . چه طور تگ های div و block و inline رو بنویسم ؟
با سلام.
برای این کار کافیست از خصوصیت 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 >
سلام ممنون از سایت بی نظیرتون.
میخواستم بگم بنده قسمت "layout" داخل آموزش html خود سایت w3schools.com رو دیدم اما صفحه بندی رو با عناصر دیگه مثل و ... انجام داه بود و اسمی از عنصر div نیورده بود. میخواستم بدون آیا این عنصر div برای صفحه بندی دیگه منسوخ شده هستش؟ اگه نه پس چرا داخل خود دبلیو تری اسکولز نامی ازش نیورده بود؟
ممنون میشم پاسخ بدید
با سلام و خسته نباشید.
خیر! تگ div منسوخ نشده است و در صفحه بندی کاربرد فراوانی دارد.
سلام خسته نباشید
چطور میتونم با استفاده از عنصر div بخشی مانند "آخرین محصولات وب سایت بیاموز" (در پایین همین صفحه) رو بنویسیم
در واقع منظورم اینه که چطور میشه 4 یا تعداد بیشتر عنصر div رو در کنار هم قرار داد حالا یا عمودی یا افقی یا هم افقی و عمودی به ترتیب چیده شوند؟؟؟
با تشکر
سلام
برای قرار دادن چند عنصر 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>
باسلام
منظور از خصوصیت clear که برابر با both قرار داده شده چیه؟ ممنون
وقتی که شما عناصر صفحه رو فلوت میکنید از جریان صفحه و از نظر بقیه عناصر صفحه حذف شده و دیگه فضایی رو در صفحه نمیگیرند واگر عنصری بعد از عنصر فلوت شده قرار دهید میبینید که یا پشت عنصر فلوت شده قرار میگیرد و یا رویش و درجایی که میخواهید قرار نمیگیرد
برای اینکه جراین فلوت صفحه رو قطع کنیم از این خاصیت استفاده میکنیم
سلام
Clear یکی از خصوصیت های CSS است که برای فهم آن نیاز است که شما ابتدا با عناصر Block و Inlint و همچنین خصوصیت Float آشنا شوید.
عناصر Block: عناصری که تمام طول یک سطر را به خودشان اختصاص می دهند. مثل عنصر Div
عناصر Inlinr: عناصر که تنها به اندازه ای که اشغال می کنند طول یک سطر را اشغال می کنند و دیگر عناصر را در کنار خود می پذیرند، مثل عنصر Span
خصوصیت Float: با استفاده از این خصوصیت می توانید عناصر Block را Inline کرده و به سمت راست یا چپ، شناور نمود.
برای کسب اطلاعات بیشتر در مورد خصوصیت Clear به لینک زیر مراجعه فرمایید:
www.beyamooz.com/cssref/227-css-properties/851-clear
سلام خسته نباشین
میشه در مورد div و span بیشتر توضیح بدین
ممنون
با سلام و تشکر.
دوست عزیز منظور شما از توضیح بیشتر مشخص نیست. این دو تگ جزء تگ‌های مهم هستند که به لحاظ بصری کاری روی عنصر درونشون انجام نمی‌دن. تنها تفاوت مهم اصلی این دو تگ در واقع blockLevel بودن آنهاست.
تگ span یک تگ textLevel هست، بدین معنی که در هنگام استفاده از این تگ، برای متن قبل و بعد آن اتفاق خاصی نمیفتد.
اما تگ div یک تگ blockLevel هست، بدین معنی که در هنگام استفاده از این تگ، یک خط قبل و بعد از این تگ ایجاد میشه و باعث میشه که عناصر درون این تگ از خط جدید شروع بشه.
قدرت این دو تگ بیشتر زمانی مشخص میشه که بهشون کلاس و ID بدیم و توسط CSS یا Javascript برای اون‌های رویدادهای خاصی اعمال کنیم. اگر این دو تگ رو ساده به کار ببرید، صرفا کار خاصی انجام نمیده.
سلام
وقتی تگ div را در دریم بصورت تو در تو مینویسم وخصوصیات آنرا بصورت زیر تنظیم می کنم:position:relatvie;
top: left;آنچه که مکان عنصر در دریم ویو در دیزاین خود نشان میدهد با آنچه که با IE یا firefox نشان میدهد متفاوت هست از نظر مکان عنصر div؟
برای جلوگیری از این اشکالات چکار کنیم ؟
ممنون
دیزاین دریم ویور یک مرورگر نیست و کامل نیست پس هیچ وقت به آن اعتماد و اعتنا نکن.
سلام
حدث می زنم، اگر استایل زیر را تنظیم کنید درست بشه:
html { padding: 0px; margin: 0px; }
body { padding: 0px; margin: 0px; }
سلام ببخشید خصوصیت margin چیه؟
سلام، با استفاده از خصوصیت Margin می توان فاصله بین لبه ها و عناصر کناری را تعیین نمود. برای اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
beyamooz.com/css/86-box-model/95-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-margin-%D8%AF%D8%B1-css
سلام....زماني كه يه ديو ايجاد ميشه به شكل مستطيبه...گوشه هاشم ميشه گرد كرد اما تو بعضي از سايتا يك شكل هايي ميبينيم كه نميدونم چطور ايجاد ميشه...مثلا گوشه ي ديو يه حلت فلشه كه به يه جهتي هست.يا مثلا يه قسمتي از ديو فرو رفتگي داره كه زيباتر شه...چطور ايجاد ميشن؟
سلام
در اینجور مواقع دیگر با CSS تنها نمی توان طراحی را انجام داد و باید از فتوشاپ کمک گرفت. بعنوان مثال، قسمت تو رفتگی که فرمودید را باید در فتوشاپ آماده کرد و سپس با استفاده از خصوصیت background آنرا در محل مورد نظر نمایش داد.
یک نکته:اتگ span نمی تواند طول وعرض بگیرد و طول عرض آن بستگی به محتویاتش دارد ؛درست است؟!
دقیقاً حق با شماست و این بخاطر inline بودن عنصر span است، یعنی تنها به اندازه محتوایی که دارد، طول یک سطر را اشغال می کند.
اما اگر خصوصیت display:block را روی آن اعمال کنیم، از حالت استانداردش خارج می شود و دیگر می توان به آن به قول شما، طول و عرض داد.
سلام
لطفا طرز html کردن قالب با div رو هم در جوملا آموزش بدید.
در ضمن پایین سایتتون اسکرول داره برطرفش کنین.
با تشکر از سایت عالیتون.
سلام، آموزش ساخت قالب در جوملا در حال تکمیل است، می توایند روند کار را در لینک زیر مشاهده فرمایید:
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، پایین صفحه یک اسکرول کوچیک می خورد، البته بصورت پیش فرض سمت راست صفحه که فهرست مطالب لیست شده و متن اصلی آموزش، کاملاً قابل مشاهده است.
سلام ضمن تشکر از وبسایت عالیتون
چرا طرز استفاده از div و span رو نگفتین؟مثال هم نیست
سلام، در مطلب، برای هر کدام از عناصر div و span مثال ذکر شد.
به نقل از hosein:
سلام ... با نظرتون موافقم، خود من همیشه از این عنصر برای استایل دادن به متن استفاده کردم ولی ترجمه ی بالا دقیقاً چیزی است که در w3schools گفته شده. (HTML elements can be grouped together with div and span)
سلام وقت بخیر ممنون از سایت مفید وخوبی که دارید
ایا میشود برای تقسیم صفحه از تگ span استفاده کرد؟
اگر نه پس تعریف span رو ویرایش کنید
span:تعریف یک ظرف برای دیگر عناصر
در صورتی که جای دیگه ای گفتید برای متن نه عناصر
با تشکر
با سلام
ممنون از حسن نگاهتون.
در داخل این تگ میتوان هم متن و هم یک تگ دیگر را قرار داد.
از تگ span برای محتواهای کوچک تر و از تگ div برای نمایش محتواهای بزرگتر یا نمایش یک قسمت از صفحه سایت استفاده می شود.