آموزش صفت ها (Attributes) در HTML5

منتشرشده در آموزش HTML5
دوشنبه, 08 دی 1393 ساعت 10:47

صفت ها (Attributes ) در HTML5 :

عناصر ممکن است دارای خواص مختلفی باشد که شما می توانید با صفت ها در HTML5 این خواص را تنظیم کنید.

برخی از صفت ها در سطح عمومی تعریف شده و می توانید بر روی تمام عناصراستفاده کنید.

 سایر صفت ها که به صورت ویژه تعریف شده ، تنها برای یک عنصر استفاده می شود.

صفت ها یا همان خاصیت ها در HTML5 از یک نام و یک مقدار تشکیل می شود، که در مثال زیر نمونه آن را مشاهده می کنید.

در زیر نمونه ای از صفت ها در HTML5 قرار دارد ، که در آن عنصر div با صفت class و مقدار صفت example را مشاهده می کنید .

<div class=\"example\">...</div>

 صفت ها تنها در تگ شروع قرار می گیرند و از آنها در تگ پایان نبایداستفاده کرد.

صفت ها در  HTML5 به حروف کوچک و بزرگ حساس نیست و ممکن است تماما با حروف بزرگ و یا  ترکیبی از حروف بزرگ و کوچک نوشته شود، اگر چه معمولا با حروف کوچک نوشته می شود.
صفت ها یا خواص استاندارد در HTML5 :
صفت ها یی که در زیر لیست شده اند تقریبا توسط تمامی تگ ها در HTML5 پشتیبانی می شوند:

صفات اصلی  HTML5 :


این صفت ها توسط تمام عناصر (تگ ها) درHTML5 پشتیبانی می شوند.به غیر از عناصر <head>  ،<html>  ،<meta> ،   <param>  ،<script>  ،<style>  ، <base> و  <title> .

صفت ها مقادیر شرح عملکرد
class توسط کاربر برای طبقه بندی یک عنصر و مشخص کردن یک یا چند classname برای عنصر استفاده می شود.
id توسط کاربر برای نسبت دادن یک شناسه یکتا به عنصر استفاده می شود.
style شیوه نامه css مشخص کردن شیوه درون خطی برای یک عنصر یا نسبت دادن ویژگی های css به طور مستقیم استفتده می شود.
title توسط کاربر برای افزودن اطلاعات بیشتر و عنوان ”Pop-up” استفاده می شود.

 

صفات زبانی در HTML5 :

این صفت ها توسط تمام عناصر (تگ ها) درHTML5 پشتیبانی می شوند.به غیر از عناصر <param>  ،<iframe>  ،<hr> ،<frameset>  ،<frame>  ،<br>  ،<base>  و <script> .

صفت ها شرح عملکرد
dir برای طبقه بندی یک عنصر و مشخص کردن یک یا چند classname برای عنصر استفاده می شود.
lang برای نسبت دادن یک شناسه یکتا به عنصر استفاده می شود.

 

صفات مربوط به صفحه کلید در HTML5 :

صفت ها مقادیر شرح عملکرد
accesskey توسط کاربر برای فعالسازی و دسترسی به عنصر یک کلید میانبر به آن اختصاص می دهد.
tabindex تعداد پرش برای تعیین یک شماره پرش برای عنصر استفاده می شود.


سایر صفات استاندارد در HTML5 :

صفت ها مقادیر شرح عملکرد
align right, left, center موقعیت عنصر را تعیین می کند.
background آدرس تصویر یک تصویر در پس زمینه عنصر ایجاد می کند.
bgcolor نام رنگ RGB، مقدار هگزادیسمال یک رنگ در پس زمینه عنصر ایجاد می کند.
contenteditable true, false مشخص میکند که آیا کاربر اجازه ویرایش عنصر را دارد یا نه.
contextmenu ID منو یک منو را برای عنصر تعیین می کند.
data-XXXX توسط کاربر صفات سفارشی – نویسنده سند می توند صفات را خودش تعریف کند و باید با “data-” شروع شود.
draggable true,false, auto مشخص میکند که آیا کاربر اجازه کشیدن عنصر را دارد یا نه.
height مقدار عددی ارتفاع جداول ، تصاویر ، یا سلول های جدول را مشخص می کند.
hidden hidden مشخص میکند که آیا عنصر قابل مشاهده باشد یا خیر.
item لیست عناصر برای ایجاد گروهی از عناصر استفاده می شود.
itemprop لیست آیتم ها برای ایجاد گروهی از آیتم ها استفاده می شود.
spellcheck true, false مشخص می کند که آیا عمل بررسی واژه ها در عنصر مجاز است یا خیر.
subject Id توسط کاربر آیتم مربوط به آن عنصر را مشخص می کند.
valign top, middle, bottom موقعیت عمودی عنصر را تعیین می کند.
width مقدارعددی عرض جداول ، تصاویر ، یا سلول های جدول را مشخص می کند.


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


صفات سفارشی :

یکی از ویژگی های جدید معرفی شده در HTML5 ایجاد عناصر داده سفارشی می باشد.
یک عنصر داده سفارشی با data- شروع شده و به همراه نام موردنظر شما قرار میگیرد.
در زیر نمونه ای ازیک  صفت سفارشی در HTML5 را مشاهده می کنید:

<div class="example" data-subject="physics" data-level="complex">
...
</div>

در بالا دو صفت سفارشی معتبر در HTML5 با نام های  data-subject و data-level استفاده شده است.
شما میتوانید مقادیر این صفت هارا همانند صفت های استاندارد توسط برنامه های کاربردی جاوا اسکریپت یا css دریافت کنید.

 

با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

عضویت در وب استیودنت

در شبکه های اجتماعی همراه ما باشید

با ما در ارتباط باشید

سامانه پیامک: 50004657100

تلفن: 02122616859

دورنگار: 02189775650

ایمیل: info @ WebStudent.ir

تارنما: webstudent.ir

انجمن: forum.webstudent.ir

 

JoomShaper