تقدم هذه المقالة بشكل أساسي السمات القياسية والسمات المخصصة في HTML5. تتحدث المقالة أيضًا عن بعض نقاط المعرفة ذات الصلة حول الوصول إلى السمات المخصصة عندما تعمل JavaScript DOM. ينصح جدا. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
كما هو مذكور في بناء جملة HTML5 ، يمكن أن يحتوي العنصر على سمات لتعيين خصائص مختلفة لعنصر ما.
يتم تعريف بعض الخصائص على أنها عالمية ويمكن استخدامها على أي عنصر ، بينما يتم تعريف البعض الآخر على أنه خاص عن العنصر. جميع الخصائص لها اسم وقيمة ، والتي تشبه المثال التالي.
فيما يلي مثال باستخدام سمات HTML5 التي توضح كيفية وضع علامة على عنصر DIV مع سمة ومثال على الفئة المسمى:
<div class = example> ... </div>
لا يمكن تحديد السمات إلا في علامة البدء ويجب عدم استخدامها في العلامة النهائية.
تعد سمات HTML5 غير حساسة للحالة ، ويمكن استخدامها لجميع رأس المال أو المختلط ، على الرغم من أن الاتفاقية الأكثر شيوعًا هي استخدام الأحرف الصغيرة دائمًا.
سمات قياسيةيتم دعم الخصائص المذكورة أدناه بواسطة جميع علامات HTML5 تقريبًا.
| ملكية | خيارات | وظيفة |
| AccessKey | معرفة المستخدم | يحدد اختصارات لوحة المفاتيح للوصول إلى العناصر. |
| محاذاة | اليمين ، اليسار ، الوسط | محاذاة الملصق أفقيا. |
| خلفية | عنوان URL | اضبط صورة خلفية خلف العنصر. |
| bgcolor | القيمة ، القيمة السداسية ، قيمة RGB | اضبط لون الخلفية خلف العنصر. |
| فصل | معرفة المستخدم. | تصنيف عنصر لتسهيل استخدام أوراق نمط متتالية. |
| قابلة للاستمتاع | صحيح ، خطأ | يحدد ما إذا كان يمكن للمستخدم تحرير محتوى عنصر ما. |
| ContextMenu | معرف القائمة | تحديد قائمة السياق للعنصر. |
| Data-xxxx | معرفة المستخدم. | خصائص مخصصة. يمكن لمؤلف وثيقة HTML تحديد خصائصه الخاصة. يجب أن تبدأ الخصائص المخصصة بالبيانات. |
| قابل للرسوم | صحيح ، خطأ ، تلقائي | يحدد ما إذا كان يمكن للمستخدم سحب العناصر. |
| ارتفاع | قيمة الرقم | يحدد ارتفاع الجدول أو الصورة أو خلية الجدول. |
| مختفي | مختفي | يحدد ما إذا كان يجب أن يكون العنصر مرئيًا. |
| بطاقة تعريف | معرفة المستخدم. | عناصر الاسم لسهولة الاستخدام لأوراق نمط متتالية. |
| غرض | قائمة العناصر. | تستخدم لدمج العناصر. |
| itemProp | قائمة الإدخالات. | تستخدم لدمج الإدخالات. |
| فحص الإملائي | صحيح ، خطأ | يحدد ما إذا كان يجب أن يكون لعنصر الإملاء أو التحقق من الخطأ. |
| أسلوب | ورقة الأنماط CSS. | تحديد أنماط مضمنة للعناصر. |
| موضوع | معرف المعرفة من قبل المستخدم. | يحدد الإدخال المرتبط بالعنصر. |
| Tabindex | رقم علامة التبويب | محدد إلى ترتيب مفتاح علامة التبويب للعنصر. |
| عنوان | معرفة المستخدم. | عنوان المنبثقة من العنصر. |
| فالين | أعلى ، منتصف ، أسفل | المحاذاة الرأسية للعلامات داخل عناصر HTML. |
| عرض | قيمة رقمية. | يحدد عرض الجداول والصور وخلايا الجدول. |
يقدم HTML5 أيضًا ميزة جديدة ، وهي إضافة سمات بيانات مخصصة.
تبدأ سمات البيانات المخصصة بالبيانات- ويتم تسميتها بناءً على احتياجاتنا. هنا مثال بسيط:
<div class = example data-sumject = level data level = complex
...
</div>
في المثال أعلاه ، فإن خصائصين مخصصين تسمى موضوع البيانات ومستوى البيانات صالحان تمامًا في HTML5. يمكننا أيضًا استخدام API JavaScript أو الحصول على قيمها في CSS بطريقة مماثلة للحصول على سمات قياسية.
أضف سمات مخصصة لعناصر HTML والوصول إليها من خلال JavaScript. إذا كنت قد جربتها من قبل ، فستجد أنه من السهل تجاهل التحقق من العلامة ، ويمكن أن يوفر لك HTML5 القدرة على إنشاء سمات العناصر الخاصة بك داخل صفحة ويب صالحة.
إنشاء ملفات HTML5:
إذا لم تكن قد اكتشفت أي واحد يجب استخدامه ، فيمكنك نسخ الكود التالي:
XML/HTML رمز نسخ المحتوى إلى الحافظة