سمات HTML5. سمات HTML. هيكل تخطيط صفحة HTML5

لقد اكتشفنا ذلك بالفعل. اكتشفنا أن لديهم المحتوى. ومع ذلك، هذا ليس كل شيء. تحتوي العلامات أيضًا على سمات تعمل على تحسين قدراتها، والسمات بدورها لها قيم. بمساعدتهم، يمكنك تعيين المعلمات للعنصر وتحديد نمط التصميم. على سبيل المثال، مع العلامة

لقد قمت بوضع علامة على الفقرة. ولكن كيف يمكن جعلها محاذية لليمين؟ للقيام بذلك، سوف تحتاج إلى سمة محددة مع القيمة المقابلة. كما أن بعض العلامات لا تحتوي على زوج، يمكن استخدام بعض السمات بدون قيم.

السمات هي كلمات محجوزة (مثل العلامات، فقط بدون أقواس زاوية)، لكن معانيها يمكن أن تكون مختلفة. تمامًا مثل العلامات، يوصى بكتابة السمات ذات القيم بأحرف صغيرة، على الرغم من أن المتصفحات بشكل عام لا تهتم - فهذه مجرد قاعدة للأخلاق الحميدة: باللغة الروسية، ليس من المقبول أيضًا الكتابة عند استخدام CAPS LOCK تم تمكينه. لماذا HTML أسوأ؟

تتم كتابة قيم السمات بالتنسيق التالي:

السمة = "القيمة" لانج = "ar"

يجب عليك دائمًا كتابة السمات داخل العلامة الافتتاحية، بعد الكلمة المحجوزة.

فقرة

عادةً ما تكون هناك سمات متعددة متاحة لعلامة واحدة. لا يهم في أي ترتيب تم إدراجها.

تحتوي كل علامة HTML على مجموعة من السمات الخاصة بها. قد تكون بعض السمات متاحة لعلامات متعددة، بينما قد يعمل البعض الآخر مع علامة واحدة فقط. هناك أيضًا مجموعة من السمات العامة (العالمية) التي يمكن استخدامها مع أي علامة. دعونا نلقي نظرة سريعة على سمات هذه الفئة.

• يتيح لك مفتاح الوصول تعيين اختصار لوحة المفاتيح للوصول كائن محددالصفحات. على سبيل المثال، يمكنك التأكد من أن المستخدم يستخدم مجموعة المفاتيح Alt+1 لاتباع رابط معين. وبالتالي، تطوير نظام الملاحة الرئيسي.

يمكن أن تكون قيمة السمة أرقامًا من 0 إلى 9 أو أحرف الأبجدية اللاتينية:

سيتم فتح الرابط بالضغط على مجموعة المفاتيح مع واحد

• تتيح لك الفئة ربط علامة بعلامة محددة مسبقًا باستخدام تصميم CSS. يتيح لك استخدام إحدى السمات تقليل الكود بشكل كبير، لأنه بدلاً من إدخال نفس كتلة CSS بشكل متكرر، يمكنك ببساطة إدخال اسم الفئة المقابلة.
• باستخدام contenteditable، يمكنك السماح للمستخدم بتحرير أي عنصر في صفحة HTML: حذف النص وإدراجه وتغييره. نفس السمة تجعل من الممكن التعديل والتعطيل. لها قيمتان فقط: صحيح - السماح بالتحرير، وخطأ - تعطيل.
• باستخدام سمة قائمة السياق، يمكنك تزويد أي عنصر مستند بعناصر قائمة سياق فريدة وفقًا لتقديرك. يتم إنشاء القائمة نفسها في العلامة، ويتم تعيين معرف لسمة قائمة السياق.
• يحدد dir اتجاه النص: من اليسار إلى اليمين (ltr) أو من اليمين إلى اليسار (rtl).
• يسمح لك السحب بتعطيل (خطأ) أو السماح (صحيح) للمستخدم بسحب عنصر صفحة يتمتع بهذه السمة.
• يخبر Dropzone المتصفح بما يجب فعله بالعنصر المسقط: نسخ (نسخ القيمة)، أو نقله (نقله)، أو إنشاء رابط إليه (رابط).
• مخفي - سمة تسمح لك بإخفاء محتوى العنصر بحيث لا يتم عرضه في المتصفح. إذا تم تعيين السمة على خطأ، فسيتم عرض الكائن، وصحيح - يكون مخفيًا.
• يحدد المعرف معرف العنصر - وهو نوع من الاسم المطلوب ببساطة لتغيير نمط الكائن، وكذلك حتى تتمكن البرامج النصية من الوصول إليه. ستكون قيمة السمة هي اسمها. يجب أن يبدأ بحرف لاتيني، ويمكن أن يحتوي على أرقام وحروف من نفس الأبجدية اللاتينية (الكبيرة والصغيرة)، بالإضافة إلى الواصلات (-) والشرطات السفلية (_). لا يمكن أن تحتوي على أحرف روسية.
• تساعد اللغة lang المتصفح على فهم اللغة التي تمت كتابة المحتوى بها وتصميمه وفقًا لذلك (على سبيل المثال، قد تستخدم اللغات علامات اقتباس مختلفة). القيم هي رموز اللغة (الروسية - ru، الإنجليزية - en، وما إلى ذلك).
• يقوم التدقيق الإملائي بتمكين التدقيق الإملائي (صواب) أو تعطيله (خطأ). من المفيد بشكل خاص استخدام السمة في علامات حقول النموذج حيث سيقوم المستخدم بإدخال النص.
• يتيح لك النمط ضبط تصميم العنصر باستخدام باستخدام CSS-شفرة.
• يتيح لك tabindex تحديد عدد المرات التي يتعين على المستخدم فيها الضغط على مفتاح Tab لكائن بهذه السمة لتلقي التركيز. يحدد عدد النقرات قيمة السمة - وهو عدد صحيح موجب.
• العنوان - تلميح أداة سيظهر إذا قمت بتحريك الماوس فوق عنصر وتركته بلا حراك لفترة من الوقت. السطر في المعنى سيكون تلميحا.

• ترجمة يسمح (نعم) أو يرفض (لا) ترجمة محتويات العلامة.
• align يحدد محاذاة العنصر. على سبيل المثال، يمكنك استخدامه لمحاذاة النص إلى اليسار (يسار)، أو اليمين، أو الوسط، أو الضبط. للصور (العلامة ) من الممكن أيضًا محاذاة الحد العلوي لأعلى عنصر في السطر (أعلى)، إلى الحد السفلي (أسفل)، والقيمة الوسطى تجعل الخط الأوسط من الصورة يتطابق مع الخط الأساسي للخط.

تجدر الإشارة إلى أنه لا يُنصح باستخدام السمة align، ومن الأفضل محاذاة النص باستخدام CSS.

على سبيل المثال، فكر في سطر كود HTML:

يمكن تحرير هذا النص

يقوم السطر بأكمله بإنشاء فقرة نصية يمكن للمستخدم تحريرها في المتصفح.

دعونا نلقي نظرة على كل عنصر من عناصر الخط.

- العلامة الافتتاحية للحاوية التي تخزن الفقرة.

بين الرموز > و< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true” - هذه هي السمة وقيمتها. تذكر كيف في المدرسة: x=3. نفس الشيء هنا: contenteditable = "صحيح". تحدد السمة contenteditable ما إذا كان يمكن للمستخدم تحرير محتوى العنصر؛ القيمة true ، المكتوبة بين علامتي اقتباس مفصولتين بعلامة يساوي، تسمح بالتحرير:

السمة = "القيمة" contenteditable = "صحيح"

بالعودة إلى أيام XHTML/HTML4، لم يكن لدى المطورين سوى عدد قليل من الخيارات التي يمكنهم استخدامها لتخزين البيانات العشوائية المتعلقة بـ DOM. يمكنك اختراع السمات الخاصة بك، ولكن هذا كان محفوفًا بالمخاطر - فالرمز الخاص بك لن يكون صالحًا، وقد تتجاهل المتصفحات بياناتك، وقد يتسبب ذلك في حدوث مشكلات إذا تطابق الاسم مع سمات HTML القياسية.

لذلك، تمسك معظم المطورين بسمات الفئة أو rel لأنها كانت الطريقة الوحيدة المعقولة لتخزين صفوف إضافية. على سبيل المثال، لنفترض أننا نقوم بإنشاء عنصر واجهة مستخدم لعرض الرسائل مثل المخطط الزمني لرسائل Twitter. من الناحية المثالية، يجب أن تكون JavaScript قابلة للتكوين دون الحاجة إلى إعادة كتابة التعليمات البرمجية، لذلك نحدد معرف المستخدم في سمة الفئة، مثل هذا:

سيبحث كود JavaScript الخاص بنا عن عنصر بمعرف msglist . باستخدام البرنامج، سوف نبحث عن فئات تبدأ بـ user_، وسيكون "bob" في حالتنا هو معرف المستخدم، وسنعرض جميع رسائل هذا المستخدم.

لنفترض أننا نرغب أيضًا في تعيين الحد الأقصى لعدد الرسائل، وتخطي الرسائل الأقدم من ستة أشهر (180 يومًا):

ملكنا سمة الطبقةيصبح الأمر مزدحمًا بسرعة كبيرة - فمن الأسهل ارتكاب الأخطاء، ويصبح تحليل السلاسل في JavaScript أكثر صعوبة.

ولحسن الحظ، قدم HTML5 القدرة على استخدام السمات المخصصة. يمكنك استخدام أي اسم صغير مسبوق بـ data-، على سبيل المثال:

سمات البيانات المخصصة:

• هذه عبارة عن سلاسل - يمكنك تخزين أي معلومات فيها يمكن تمثيلها أو تشفيرها كسلسلة، مثل JSON. يجب أن يتم اختيار النوع باستخدام JavaScript
• يجب استخدامه في الحالات التي لا توجد فيها عناصر أو سمات HTML5 مناسبة
• الرجوع فقط إلى الصفحة. على عكس التنسيقات الدقيقة، يجب تجاهلها الأنظمة الخارجية، يكتب محركات البحثوروبوتات البحث

تسمح لك جميع المتصفحات بالحصول على سمات البيانات وتغييرها باستخدام طريقتي getAttribute وsetAttribute:

var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

يعمل هذا، ولكن يجب استخدامه فقط للحفاظ على التوافق مع المتصفحات الأقدم.

اعتبارًا من الإصدار jQuery 1.4.3، يتعامل التابع data() مع سمات بيانات HTML5. لا تحتاج إلى تحديد البادئة data- بشكل صريح، لذا سيعمل رمز مثل هذا:

var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size"، show+3);

ومع ذلك، انتبه إلى أن jQuery يحاول تحويل قيم هذه السمات إلى الأنواع المناسبة (منطقية أو أرقام أو كائنات أو مصفوفات أو خالية) وسيؤثر على DOM. على عكس setAttribute، لن يستبدل التابع data() فعليًا السمة data-list-size - إذا قمت بالتحقق من قيمتها خارج jQuery - فستظل 5.

أخيرًا، لدينا واجهة برمجة تطبيقات للعمل مع مجموعات بيانات HTML5 التي تُرجع كائن DOMStringMap. من المهم أن تتذكر أنه يتم تعيين سمات البيانات إلى كائن بدون بادئات بيانات، وتتم إزالة الواصلات من الأسماء، ويتم تحويل الأسماء نفسها إلى CamelCase، على سبيل المثال:

كودنا الجديد:

var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

يتم دعم واجهة برمجة التطبيقات (API) هذه بواسطة جميع المتصفحات الحديثة، ولكن ليس IE10 والإصدارات الأقدم. يوجد حل بديل لهذه المتصفحات، ولكن ربما يكون استخدام jQuery أكثر عملية إذا كنت تكتب للمتصفحات الأقدم.

توفر السمات معلومات إضافيةحول العنصر، ويتم تعريفها دائمًا في علامة البداية، بغض النظر عما إذا كانت علامة مقترنة أو علامة واحدة.

هناك عدد من السمات في HTML تعتبر عالمية ويمكن تطبيقها على أي علامة تقريبًا، لذلك تسمى السمات المضمنة في هذه المجموعة بالسمات العامة.

سيتم مصادفة السمات العالمية غالبًا في أمثلة هذا البرنامج التعليمي؛ أقترح عليك مراجعة السمات التي قمنا بمراجعتها بالفعل والتعرف على السمات العامة التي ستتم مناقشتها في المقالات القادمة:

قبل الانتقال إلى الموضوع التالي، أكمل التدريب العملي:

نصيحة: لا تنس تحديد لغة محتوى الصفحة وعناصرها عند الحاجة. بعد إكمال التمرين، قم بفحص رمز الصفحة عن طريق فتح المثال في نافذة منفصلة للتأكد من إكماله بشكل صحيح.

على HTML5، على الرغم من أن جميع المتصفحات الحديثة تدعم بالفعل هذا المعيار. اعتبارًا من ديسمبر 2011، لا يزال المعيار قيد التطوير.

يضيف HTML5 العديد من الميزات النحوية الجديدة - و و و. تم تصميم هذه العناصر لتسهيل تضمين وإدارة الرسومات والوسائط على الويب دون الحاجة إلى اللجوء إلى المكونات الإضافية وواجهات برمجة التطبيقات الأصلية. تم تصميم عناصر جديدة أخرى مثل و و و لإثراء المحتوى الدلالي للمستند (الصفحة).

• 1. علامات القسم (مقال، جانبا، تذييل، رأس، hgroup، التنقل، القسم)
• 2. علامات تجميع المحتوى (الشكل، الشكل التوضيحي)
• 3. علامات تمييز النص الدلالي (bdo، mark، time، Ruby، rt، rp، wbr)
• 4. علامات لإدراج المحتوى (الصوت والفيديو والقماش والتضمين والمصدر)
• 5. العلامات الخاصة بعناصر النموذج (datalist، keygen، Output، التقدم، Meter)
• 6. العناصر التفاعلية (التفاصيل، الملخص، الأمر، القائمة)

عند استخدام البنية المعتادة لصفحة موقع الويب، يمكنك تحديد العديد من الكتل النموذجية، الموصوفة بواسطة علامة div مع الفئة المقابلة (،،،،، وما إلى ذلك).

عند استخدامها باستخدام HTML5، يتم وصف هذه الكتل بواسطة العلامات الهيكلية، و، و، وما إلى ذلك، مما يجعل الحياة سهلة للغاية للمطورين. هذه العلامات عبارة عن مكافئات هيكلية وتجعل العلامات أكثر وضوحًا وأسهل للفهم. أيضًا، بشكل افتراضي تكون مضمنة، لذا يجب جعلها كتلة باستخدام العرض:كتلة.

من المهم استخدام هذه العلامات بشكل صحيح. لكي لا تحتار عند استخدام أي منها، يوجد مورد رائع على الإنترنت، ويمكنك أيضًا استخدام الخوارزمية التالية:

جميع المتصفحات الحديثة (Opera وSafari وChrome وMozilla وIE9+) تدعم بالفعل HTML5. بالنسبة للمتصفحات IE8 والإصدارات الأقل، يجب عليك توصيل جافا سكريبت، والذي "سيعلمهم" كيفية فهم العلامات الجديدة. رمز توصيله أدناه:

عند إنشاء التخطيطات، تحولنا إلى استخدام معيار HTML5 الجديد. إذا كنت ترغب في طلب موقع إلكتروني أو بشكل منفصل، يمكنك ترك الطلب عن طريق الكتابة إلى أي من العناوين الموضحة في الصفحة أو من خلال النموذج تعليق. ونحن نتطلع إلى التعاون!

إلى جانب السمات الخاصة بعلامات محددة، يوجد في HTML5 عدد من السمات التي يمكن إضافتها إلى أي علامات، وبالتالي فإن السمات المضمنة في هذه المجموعة تسمى عمومية أو عالمية. وهي مدرجة أدناه مع وصف مختصر. متاح عبر الرابط وصف تفصيلييصف.

تسمح لك سمة مفتاح الوصول بتنشيط رابط باستخدام مجموعة مفاتيح معينة بحرف أو رقم محدد في رمز الرابط. تستخدم المتصفحات مجموعات مفاتيح مختلفة. على سبيل المثال، بالنسبة لمفتاح الوصول = "s" تعمل المجموعات التالية.

• إنترنت إكسبلورر: Alt + S
• كروم: البديل + S
• الأوبرا: Shift + Esc، S
• سفاري: Alt+S
• فايرفوكس: Shift + Alt + S

يحدد فئة نمط تسمح لك بربط علامة محددة بورقة أنماط. من الممكن تحديد عدة فئات في القيمة مرة واحدة، وفصلها بمسافة.

يُعلم أن العنصر متاح للتحرير من قبل المستخدم - يُسمح بحذف النص وإدخال نص جديد. تعمل أيضًا الأوامر القياسية مثل التراجع ولصق النص من المخزن المؤقت وما إلى ذلك.

يضبط قائمة السياق لعنصر ما. القيمة هي معرف القائمة التي تم إنشاؤها باستخدام العلامة.

يضبط اتجاه النص وعرضه - من اليسار إلى اليمين أو من اليمين إلى اليسار. تقوم المتصفحات عادةً بتمييز اتجاه النص إذا كان بتنسيق Unicode، ولكن يمكنك استخدام السمة dir لتحديد الاتجاه الذي سيتم عرض النص فيه. بالنسبة للأحرف العربية والعبرية، يكون لاتجاه Unicode الأسبقية، وبالتالي فإن السمة dir لن تؤثر عليها.

يسمح لك بسحب عنصر لمزيد من المعالجة.

يحدد ما يجب فعله بالعنصر الذي يتم سحبه.

إخفاء محتويات عنصر من العرض. لا يتم عرض مثل هذا العنصر على الصفحة، ولكن يمكن الوصول إليه من خلال البرامج النصية.

يعين معرفًا - اسمًا فريدًا للعنصر، يُستخدم لتغيير نمطه والوصول إليه من خلال البرامج النصية. يجب أن يكون المعرف الموجود في رمز المستند في نسخة واحدة، بمعنى آخر، يظهر مرة واحدة فقط.

مجموعة من السمات المصممة للعمل مع البيانات الجزئية.

يمكن كتابة نص المستند بلغة واحدة أو أن يحتوي على إدراجات بلغات أخرى، والتي قد تختلف في قواعد تنسيق النص الخاصة بها. على سبيل المثال، بالنسبة للروسية والألمانية و باللغة الإنجليزيةالسمة هي علامات الاقتباس المختلفة التي تم أخذ الاقتباس فيها. لتحديد اللغة التي سيتم بها كتابة النص الموجود داخل العنصر الحالي ويتم تطبيق سمة lang. يستخدم المتصفح قيمته لعرض أحرف معينة بشكل صحيح.

يخبر المتصفح بالتحقق مما إذا كانت التهجئة والنحو في النص صحيحة أم لا. على الرغم من أنه يمكن تعيين السمة على جميع العناصر تقريبًا، إلا أن التأثير سيكون ملحوظًا فقط في حقول النموذج ( , ) والعناصر القابلة للتحرير (التي تحتوي على مجموعة السمات القابلة للتحرير).

يستخدم لتصميم عنصر باستخدام قواعد CSS.

تقوم سمة tabindex بتعيين الترتيب الذي يتم به تلقي التركيز عند التنقل بين العناصر باستخدام مفتاح Tab. ويحدث الانتقال من قيمة أصغر إلى قيمة أكبر، على سبيل المثال من 1 إلى 2، ثم إلى 3 وهكذا. في هذه الحالة، التسلسل الصارم ليس مهما، يُسمح بتخطي بعض الأرقام والبدء من أي رقم. إذا كانت قيم tabindex للعناصر هي نفسها، فسيتم أخذ ترتيب ظهورها في الكود في الاعتبار.

ينشئ تلميح أداة نصيًا يظهر عند المرور فوق عنصر ما. يعتمد نوع هذا التلميح على المتصفح والإعدادات نظام التشغيلولا يمكن تغييرها باستخدام تعليمات برمجية أو أنماط HTML.