عناصر سطری (inline element) در html
عناصر html با توجه به خصیصه های زیادی دسته بندی میشوند یکی از این دسته بندی ها که در طراحی سایت مطرح میباشد و لذا طراحان باید توجه ویژه ای به این دسته بندی داشته باشند دسته بندی با توجه به رفتار عناصر نسبت به بقیه عناصر html می باشد در این دسته بندی عناصر html را به دو دسته تقسیم میکنیم و این دو دسته عبارتند از :عناصر بلوکی و سطری
تا جایی که در یک سطر فضا و جود دارد عناصر سطری (inline element) در کنار هم دیگر قرار میگیرند و به سطر بعدی منتقل نمیشن
مقدار دهی برخی خواص این عناصر با استفاده از css تاثیری در نمایش این عناصر ندارند این خواص عبارتند از:
- margin-top
- margin-bottom
- width
اگر بخواهیم با تغییر این خواص در ظاهر عناصر سطری تغییر ایجاد بشه باید خاصیت display این عناصر را با blcok و یا inline-block مقدار دهی نماییم.
عناصر سطری عبارتند از :
<a>عنصر ناوبری :این عنصر برای لینک دادن به صفحات دیگر به کار می رود.
<b>:متن داخل این تگ ضخیم میشود.این تگ فقط ظاهر متن را تغییر میدهد از این رو صفحه خوانها و دیگر نرم افزارها ضخیم بودن متن را تشخیص نمی دهند.
<big>:متن داخل این تگ یک سایز بزرگتر از اندازه پیش فرض براوزر نمایش داده میشه.
<i>:متن داخل این تگ ایتالیک نمایش داده میشه.این تگ نیز همانند تگ <b> فقط ظاهر متن را تغییر میدهد.
<small>:اندازه متن را یک ساز کوچکتر از اندازه پیشفرض نمایش میدهد.
<tt>:هر چیزی که داخل این عنصر قرار میگیرد حروف آن به یک اندازه نمایش داده میشوند.که به این نحوه نمایش monospace گفته میشود.
<abbr>:این عنصر برای اختصار نویسی استفاده میشود و نشان میدهد که محتوای قرار گرفته بین این تگ یک عبارت اختصاری میباشد.
<acronym>:به شما امکان میدهد که مشخص کنید محتوای بین این تگها یک سرواژه است.
<cite>:اگر متنی را نقل قول میکنید میتوانید منبع نقل قول را بین این تگ بنویسید.
<code>:برای نمایش کدهای برنامه نویسی استفاده میشود
<dfn>:این عنصر به شما این امکان را میدهد که مشخص کنید در حال معرفی یک اصطلاح یا عبارت خاص هستید.
<em>:این عنصر برای تاکید روی قسمتی از متن به کار می رود و معمولا به صورت ایتالیک نمایش داده میشود.اگر میخواهید متن فقط ایتالیک نمایش داده شود بهترین راه استفاده از css میباشد.
<kbd>:اگر میخواهید به خواننده بگیید که متنی با استفاده از صفه کلید وارد کند میتوانید از این عنصر استفاده کنید.محتوای این عنصر با فونت ماشین تحریر نمایش داده میشود.
<strong>:این عنصر برای تاکید بیشتر به کار میرود و برای تاکید بیشتر برروی محتوایی که داخل آن قرار دارد به کار میرود.بسیاری از مرورگرها این عنصر را به صورت bold نمایش میهند.
<samp>:عنصر <samp> خروجی نمنه از یک کد اسکریپت یا موارد مشابه را نشان میدهد.این عنصر موقع مستند سازی مفاهیم برنامه نویسی کاربرد دارد.
<time>:از این عنصر برای مشخص کردن تاریخ رویداد محتوای عنصر با استفاده خصیصه datetime استفاده میشود.
<var>:برای نمایش متغیرهای برنامه نویسی استفاده میشود.
<bdo>:از این عنصر برای تغییر جهت متن استفاده میشود.
<br>:هر چیزی که بعد از این عنصر میآید از خط بعد شروع می شود.
<img>:برای نمایش فایلهای تصویری به استفاده میشود.
<map>:از این عنصر برای ایجاد تصاویر و ناحیه های قابل کلیک استفاده میشود.
<object>:با استفاده از این عنصر میتوانید فایلهای مختلی (pdf,انواع فایلهای صوتی و تصویری ,acitvexها,جاوا اپلت و …)را در سند html خود بگنجانید.
<q>:این عنصر برای نمایش نقل قولهای با حجم کم به کار میرود که میخواهید در یک جمله جا دهید نه در یک بلوک تو رفته جداگانه.
<script>:اسکریپتهای سمت کاربر در این عنصر قرار میگیرند.
<span>:پر کاربردترین عنصر سطری <span> است و برای استایل دادن به قسمتی از متن یا هر چیزی به کار میرود.
<sub>:محتویات این عنصر به صورت اندیس پایینن نوشته میشوند.
<sup>:محتوای این عنصر به صورت اندیس بالا نوشته میشوند.این محتویان در فاصله نصف ارتفاع یک کاراکتر و در بالای آن قرار میگیرند و از اندازه متن اطراف خودشان کوچکتر هستند.
<button>:برای ایجاد دکمههای قابل کلیک به کار میرود.
<input>:برای دریافت انواع داده به کار میرود
<label>:برای نمایش عنوان یک عنصر دیگر
<select>:برای نمایش لیستی از انتخابها به صورت لیست پایین افتادنی که کار میتواند فقط یکی از آنها را انتخاب کند.
<textarea>:برای دریافت و نمایش متن های طولانی