آموزش HTML – قسمت بیست و دوم(لیست کامل تگ های HTML)
سلام
در جلسه بیست دوم از آموزش های HTML می پردازیم به لیست کامل تگ های HTML + مثال
روی هر تگ کلیک کنید تا به صفحه آموزش تگ به همراه مثال هدایت شوید
لیست تگ های HTML برا اساس طبقه بندی:
- تگ های پایه
|
تگ |
توضیح |
|
نوع سند را تعریف می کند |
|
|
نوع سند از نوع HTML را تعریف می کند |
|
|
برای تعریف عنوان برای سند استفاده می شود |
|
|
بدنه سند را تعریف می کند |
|
|
تعریف کدهای Heading |
|
|
تعریف یک پاراگراف |
|
|
رفتن به خط بعدی |
|
|
کشیدن یک خط افقی |
|
|
برای نوشتن کامنت مورد استفاده قرار می گیرد |
- تگ های قالب بندی
| تگ | توضیح |
| <acronym> |
مخفف یک عبارت را نشان میدهد این تگ در HTML5 پشتیبانی نمیشود، برای استفاده در HTML5 از تگ <abbr> استفاده کنید |
| <abbr> | مخفف یک عبارت را نشان میدهد |
| <address> | برای درج اطلاعات تماس مورد استفاده قرار میگیرد |
| <b> | متن را Bold می کند |
| <bdi> |
از این تگ معمولا برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد ، استفاده می شود این تگ مخصوص HTML5 می باشد |
| <bdo> | برای برعکس کردن متون استفاده می شود |
| <big> | برای درشت کردن قسمتی از متن استفاده می شود |
| <blockquote> | برای ایجاد نقل قول مورد استفاده قرار میگیرد |
| <center> | برای وسط چین کردن عناصر موجود در صفحه استفاده می شود |
| <cite> | عنوان یک کار را مشخص می کند (مثلا یک کتاب، آهنگ، فیلم و …) |
| <code> | برای درج کد در صفحه استفاده می شود |
| <del> | روی متنی که بین این تگ قرار بگیرد، خط می کشد |
| <dfn> | متنی که بین این تگ قرار بگیرد به صورت مورب(کچ) خواهد بود |
| <em> | متنی هم که بین این تگ قرار بگیرد به صورت مورب خواهد بود |
| <font> |
برای انتخاب فونت دلخواه برای یک عنصر مورد استفاده قرار میگیرد این تگ در HTML5 پشتیبانی نمیشود، در HTML5 باید از طریق کدهای css اقدام کرد |
| <i> | متنی که بین این دو تگ قرار بگیرد به صورت مورب خواهد بود |
| <ins> | متنی که بین این دو تگ قرار بگیرد، به صورت زیر خط دار خواهد بود. |
| <kbd> | ورودی صفحه کلید را تعریف می کند |
| <mark> |
برای نشانه گذاری(هایلایت) کردن متون مورد استفاده قرار می گیرد |
| <meter> |
برای ایجاد نمودار اندازه گیری مورد استفاده قرار میگیرد این تگ مخصوص HTML5 می باشد |
| <pre> |
متون را به همان صورتی که در سند HTML می نویسید به همان صورت نمایش میدهد(فاصله های بین خطوط،فضاهای خالی،رفتن به خط بعد و …) |
| <progress> |
با استفاده از این تگ می توانید نمودار درصد پیشرفت درست کنید این تگ مخصوص HTML5 می باشد |
| <q> | متنی که در این تگ قرار بگیرد، بین دو علامت ” ” نمایش داده می شود |
| <rp> | برای نمایش تلفظ کاراکترهای زبان های آسیای شرقی به کار برده می شود
این تگ مخصوص HTML5 می باشد |
| <rt> |
این تگ هم مانند تگ قبلی <rp> است. این تگ مخصوص HTML5 می باشد |
| <ruby> | این تگ هم مانند تگ های قبلی <rp> , <rt> است، این سه تگ باهم استفاده می شوند. |
| <s> | کاربرد این تگ هم مانند تگ <del> است که روی متن خط |
| <samp> | کدهای نمایش خروجی یک برنامه کامپیوتری را تعریف می کند |
| <small> | متن هایی که بین این دو تگ قرار بگیرد، از مابقی متن های صفحه کوچک تر خواهد بود |
| <strike> | کاربرد این تگ هم مانند تگ <del> و <s> است
این تگ در HTML5 پشتیبانی نمی شود، در HTML5 می توانیم از تگ های <del> یا <s> استفاده کنیم |
| <strong> | متنی که بین این تگ قرار بگیرد از بقیه ی تگ ها بزرگتر و پر رنگ تر هست(برای نوشتن متن های مهم مورد استفاده قرار میگیرد.) |
| <sub> | متنی که بین این تگ قرار بگیرد از مابقی متن ها پایین تر خواهد بود. |
| <sup> | متنی که بین این تگ قرار بگیرد از مابقی متن ها بالاتر خواهد بود. |
| <time> | زمانی که بخوایم از تاریخ یا زمان استفاده کنیم، مورد استفاده قرار میگیرد |
| <tt> | برای ایجاد متن های تله تایپ(حالت تلگرافی) مورد استفاده قرار میگیرد.
این تگ مخصوص HTML5 می باشد |
| <var> | کاربرد این تگ مثل تگ <ins> هست، به این صورت که متن زیر خط دار تولید می کند. |
| <wbr> | برای جلوگیری از شکستن متن مورد استفاده قرار میگیرد(زمانی که میخواهید یک کلمه بزرگ بنویسید و نگرانید که مرور ممکن است کلمه را بشکند و به خط بعدی برود میتونید از این تگ استفاده کنید) |
- تگ های فرم و ورودی
| تگ | توضیح |
| <form> | برای ایجاد یک فرم استفاده می شود |
| <input> | برای دریافت اطلاعات کاربران مورد استفاده قرار میگیرد |
| <textarea> | تعریف یک ورودی چند خطی |
| <button> | برای ایجاد دکمه استفاده می شود |
| <select> | در منوی ها باز شو برای انتخاب یک آیتم مورد استفاده قرار میگیرد |
| <optgroup> | با استفاده از این تگ می توانیم آیتم های موجود در لیست کشویی را گروه بندی کنیم |
| <option> | یک لیست کشویی ایجاد می کند |
| <label> | برای ایجاد برچسب مورد استفاده قرار میگیرد |
| <fieldset> | با این تگ می توانیم عناصر موجود در یک فرم را گروه بندی کنیم |
| <legend> | یک عنوان برای گروه بندی عناصر(این تگ همراه با تگ <fieldset> استفاده می شود) |
| <datalist> | یک لیست از گزینه های از قبل تعریف شده برای یک عنصر <input> مشخص می کند(تکمیل خود کار فرم)
این تگ مخصوص HTML5 می باشد |
| <keygen> | این تگ یک فیلد کلید جفتی ( کلید رمز نگاری شده ) را در فرم های Html ایجاد می کند
این تگ مخصوص HTML5 می باشد |
| <output> |
این تگ میتواند خروجی یک عملیات محاسباتی را روی صفحه نشان دهد این تگ مخصوص HTML5 می باشد |
- تگ قاب ها(Frames)
|
تگ |
توضیح |
| <frame> |
یک پنجره(قاب) را در iframe تعریف می کند این تگ در HTML5 پشتیبانی نمی شود |
|
<frameset> |
با این تگ می تواین قاب را به چند قسمت تقسیم کنیم این تگ در HTML5 پشتیبانی نمی شود |
|
<noframes> |
از این تگ وقتی استفاده می شود که مرورگر کاربر از قاب ها پشتیبانی نکند(محتوای بین این تگ وقتی نمایان میشود که مرورگر کاربر از iframe ها پشتیبانی نکند) این تگ در HTML5 پشتیبانی نمی شود |
|
<iframe> |
برای ایجاد قالب درون خطی مورد استفاده قرار میگیرد
این تگ در HTML5 پشتیبانی نمی شود |
- تگ های تصاویر
|
تگ |
توضیح |
|
<img> |
از این تگ برای قرار دادن تصویر استفاده می شود |
|
<map> |
برای ایجاد یک نقشه تصویری(به این صورت که تصویر را به چند بخش تقسیم میکنیم) |
|
<area> |
برای تقسیم کردن تصویر استفاده میشود(این تگ درون تگ <map> قرار میگیرد) |
|
<canvas> |
برای طراحی اشیا و اشکال گرافیکی بصورت Run Time به کمک زبان های اسکریپتی مثل مثل جاوا اسکریپت استفاده می شود
این تگ مخصوص HTML5 می باشد |
|
<figcaption> |
با کمک این تگ میتوانیم برای تگ <figure> یک عنوان یا توضیح بنویسیم
این تگ مخصوص HTML5 می باشد |
|
<figure> |
برای تعیین یک محتوای مجزا استفاده میشود(درون این تگ میتونیم از تگهای جدول،عکس،لیست و.. استفاده کنیم)
این تگ مخصوص HTML5 می باشد |
- تگ های صدا/تصویر
|
تگ |
توضیح |
|
<audio> |
از این تگ برای قرار دادن فایل صوتی استفاده می شود
این تگ مخصوص HTML5 می باشد |
|
<source> |
برای تعیین یک آدرس استفاده می شود(آدرس دهی فایل تصویری یا صوتی)
این تگ مخصوص HTML5 می باشد |
|
<track> |
برای فراخوانی یک متن درون فایل تصویری استفاده می شود(زیرنویس)
این تگ مخصوص HTML5 می باشد |
|
<video> |
از این تگ برای قرار دادن فایل تصویری استفاده می شود این تگ مخصوص HTML5 می باشد |
- لینک
|
تگ |
توضیح |
|
<a> |
برای ایجاد یک لینک استفاده می شود |
|
<link> |
از این تگ برای ایجاد ارتباط بین یک صفحه با صفحه دیگر استفاده می شود |
|
<nav> |
از این تگ می توانیم برای دسته بندی و کنار هم قرار دادن لینک ها استفاده کنیم
این تگ مخصوص HTML5 می باشد |
- لیست ها
|
تگ |
توضیح |
| <ul> |
برای ایجاد یک لیست نا مرتب استفاده می شود |
|
<ol> |
برای ایجاد یک لیست مرتب استفاده می شود |
|
<li> |
برای تعریف آیتم های درون لیست استفاده می شود |
|
<dir> |
برای ایجاد یک دایرکتوری استفاده می شود
این تگ در HTML5 پشتیبانی نمیشود |
|
<dl> |
برای ایجاد توضیحات آیتم های درون لیست استفاده می شود |
|
<dt> |
برای ایجاد عنوان توضیحات در لیست مورد استفاده قرار میگیرد(این تگ همراه با تگ <dl> استفاده می شود) |
|
<dd> |
برای ایجاد توضیحات در لیست مورد استفاده قرار میگیرد(این تگ همراه با تگ <dd> استفاده می شود) |
|
<menu> |
برای ساخت یک منو با محتویات دلخواه استفاده می شود(محتویات منوی راست کلیک را می توانیم تعیین کنیم) |
|
<menuitem> |
محتویات داخل منو(این تگ همراه با تگ <menu> استفاده می شود)
این تگ مخصوص HTML5 می باشد |
- جدوال
|
تگ |
توضیح |
| برای ایجاد جدول مورد استفاده قرار میگیرد | |
|
<caption> |
برای گذاشتن عنوان برای جدول استفاده می شود |
|
<th> |
عنوان ستون ها را میتوانیم با این تگ بنویسیم |
|
<tr> |
یک سطر ایجاد می کند |
|
<td> |
یک ستون ایجاد می کند |
|
<thead> |
برای گروه بندی عنوان های یک جدول مورد استفاده قرار میگیرد |
| محتویات یک جدول را گروه بندی می کند | |
|
<tfoot> |
برای گروه بندی محتویات پایانی یک جدول استفادع میشود |
|
<col> |
از این تگ، داخل عنصر colgroup برای قالب بندی ستون های جدول استفاده می شود. |
|
<colgroup> |
از این تگ، برای گروه بندی یک یا چند ستون (col) در یک جدول، جهت قالب بندی استفاده می شود. |
- استایل و سبک ها
| تگ | توضیح |
| <style> | برای تعریف یک استایل استفاده می شود |
| <div> | برای تعریف یک قسمت استفاده می شود |
| <span> | برای تعریف یک قسمت استفاده می شود |
| <header> | برای تعریف هدر(سردر) برای سند یا یک قسمت استفاده می شود
این تگ مخصوص HTML5 می باشد |
| <footer> | برای تعریف یک فوتر(پاورقی) برای سند یا یک قسمت استفاده می شود
این تگ مخصوص HTML5 می باشد |
| <main> | محتوای اصلی یک سند یا یک قسمت را تعریف می کند
این تگ مخصوص HTML5 می باشد |
| <section> | برای ایجاد یک بخش در سند استفاده می شود
این تگ مخصوص HTML5 می باشد |
| <article> | یک مقاله تعریف می کند(این تگ را در آینده بیشتر توضیح خواهیم داد)
این تگ مخصوص HTML5 می باشد |
| <aside> | برای تعریف یک محتوای جدا از محتوای اصلی استفاده می شود
این تگ مخصوص HTML5 می باشد |
| <details> | برای تعریف جزئیات اضافه استفاده می شود
این تگ مخصوص HTML5 می باشد |
| <dialog> | یک پنجره محاوره ای(دیالوگ) ایجاد می کند
این تگ مخصوص HTML5 می باشد |
| <summary> | از این تگ برای اضافه کردن زیر مجموعه و توضیحات به یک تگ <details> استفاده می شود.
این تگ مخصوص HTML5 می باشد |
- اطلاعات متا
|
تگ |
توضیح |
|
<head> |
برای تعریف اطلاعات سند استفاده می شود |
|
<meta> |
این تگ زیر مجوعه تگ <head> است و برای تعریف ابرداده ها مورد استفاده قرار میگیرد |
|
<base> |
یک آدرس پایه برای کلیه لینک های موجود در صفحه تعیین می کند. |
|
<basefont> |
این تگ برای تعیین رنگ، سایز و فونت پیشفرض متون استفاده می شود.
این تگ در HTML5 پشتیبانی نمی شود |
- برنامه نویسی
|
تگ |
توضیح |
|
<script> |
برای ایجاد یک اسکریپت سمت سرویس گیرنده است استفاده می شود. |
|
<noscript> |
زمانی که مروگر از اسکریپت پشتیبانی نکند محتوایت درون این تگ نمایش داده می شود. |
|
<applet> |
برای فراخوانی برنامه های کوچک جاوا که تنها سمت کاربر اجرا می شود استفاده می شود. این تگ در HTML5 پشتیبانی نمی شود |
|
<embed> |
یک بخش برای یک برنامه خارجی و یا محتوای تعاملی (یک پلاگین) تعریف می کند. |
|
<object> |
این تگ برای پیوند یک شی خارجی ( مثل فایل های صوتی ، تصویری ، انواع فایل های برنامه و … ) به صفحه استفاده می شود. |
|
<param> |
تعیین کننده تنظیمات نمایش شی در هنگام اجرا می باشد. |
و این بود تمام تگ های HTML به همراه توضیح مختصر هر تگ، در آینده نحوه کار هر تگ آموزش داده می شود.
اگر در توضیحات هر کدام از تگ ها اشتباهی وجود داشت، اعلام کنید تا تصحیح شود.
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید