من خلال الدراسة السابقة، أصبح لدينا بالفعل فهم بسيط لعلامات HTML ونعلم أنه يمكننا إضافة بعض السمات إلى العلامات، وتحتوي هذه السمات على معلومات إضافية حول العلامات، مثل:
(1) يمكن أن توفر سمة href عنوان الرابط للعلامة <a>؛
(2) يمكن أن توفر السمة src مسار الصورة للعلامة <img>؛
(3) يمكن لسمة النمط تحديد أنماط CSS لجميع العلامات تقريبًا.
في هذه المقالة، سنشرح تعريف واستخدام سمات علامة HTML.
1. ما هي السمات؟
يمكن أن توفر السمات بعض المعلومات الإضافية لعلامات HTML، أو تعديل علامات HTML. يجب إضافة السمة في علامة البداية، ويكون تنسيق بناء الجملة كما يلي:
attr=value
يمثل attr اسم السمة، وتمثل value قيمة السمة. يجب أن تكون قيم السمات محاطة بعلامات اقتباس مزدوجة أو علامات اقتباس مفردة ' '.
ملاحظة: على الرغم من أن علامات الاقتباس المزدوجة وعلامات الاقتباس المفردة يمكن أن تحيط بقيم السمات، فمن أجل التوحيد والاحترافية، يرجى استخدام علامات الاقتباس المزدوجة قدر الإمكان.
لا يمكن أن تحتوي العلامة على سمات أو سمة واحدة أو أكثر.
مثال على استخدام سمات HTML:
<pid=user-infoclass=color-red>مرحبًا <fontcolor=redsize=3>اسم المستخدم</font> في شبكة لغة C. لقد استخدمت هذا الموقع لمدة 3 سنوات. هذا هو تسجيل الدخول رقم 264 الخاص بك. <p><divclass=clearfloat><pclass=left>معلومات حساب اسم المستخدم</p><pclass=right>التوقيع المخصص لاسم المستخدم</p></div>
يظهر أدناه:
1. خصائص خاصة
هناك العديد من سمات HTML، والتي يمكن تقسيمها تقريبًا إلى فئتين:
(1) تنطبق بعض السمات على معظم أو كل علامات HTML، ونطلق على هذه السمات سمات عالمية؛
(2) تنطبق بعض السمات فقط على واحدة أو أكثر من علامات HTML المحددة، ونطلق على هذه السمات سمات خاصة.
تحتوي العلامة <img> في HTML على سمتين خاصتين، src وalt، كما تحتوي العلامة <a> أيضًا على سمتين خاصتين هما href وtarget، كما هو موضح في المثال التالي:
<img src=./logo.png alt=عرض شعار شبكة لغة C=100 الارتفاع=50>
<a href=http://c.biancheng.net/ target=_blank>شبكة لغة C</a>
وصف الكود:
يتم استخدام سمة src في علامة <img> لتحديد مسار الصورة، ويتم استخدام سمة alt لتحديد معلومات وصف الصورة. عندما تكون الصورة غير طبيعية ولا يمكن عرضها بشكل طبيعي، سيتم عرض المعلومات الموجودة في alt يتم عرضها.
يتم استخدام سمة href للعلامة <a> لتحديد عنوان الارتباط، ويتم استخدام السمة الهدف لتحديد كيفية فتح الصفحة الجديدة في المتصفح.
2. السمات المخصصة
بالإضافة إلى سماته الخاصة، يسمح لنا HTML أيضًا بتخصيص السمات، على الرغم من أنه يمكن للمتصفح التعرف على هذه السمات، إلا أنها لا تضيف أي تأثيرات خاصة. نحتاج إلى استخدام CSS وJavaScript لمعالجة السمات المخصصة وإضافة أنماط محددة إلى HTML العلامات أو السلوك.
2. سمات HTML
● يمكن لعناصر HTML تعيين السمات
● يمكن للسمات إضافة معلومات إضافية إلى العناصر
●يتم وصف السمات بشكل عام في العلامة الافتتاحية
●تظهر السمات دائمًا في شكل أزواج الاسم/القيمة، على سبيل المثال: الاسم=القيمة.
ملخص: يمكن للعناصر في HTML توفير معلومات إضافية لعناصر HTML عن طريق تعيين السمات؛ وهي خصائص تنتمي إلى العنصر.
1. السمات المشتركة
تنطبق السمات التالية على معظم عناصر HTML
(1) الطبقة
حدد واحدًا أو أكثر من أسماء الفئات (أسماء الفئات) لعناصر html (يتم تقديم أسماء الفئات من ملفات الأنماط)
يمكن استخدام سمة الفئة عدة مرات، أي class=classname1 classname2 classname3... (يمكن ملء سمات الفئة المتعددة بين علامتي الاقتباس)
(2) معرف
تحديد المعرف الفريد للعنصر
لا يمكن تعيين سمة المعرف إلا بشكل فردي، أي id=myid (يمكن ملء سمة واحدة فقط، والعديد منها غير صالح)
(3) الاسلوب
تحديد النمط المضمّن للعنصر
(4) العنوان
يصف معلومات إضافية حول العنصر (يستخدم كشريط أدوات)
2. قيم السمات المرجعية شائعة الاستخدام لسمات HTML
يجب دائمًا وضع قيم الخصائص بين علامتي اقتباس.
علامات الاقتباس المزدوجة هي الأكثر استخدامًا، ولكن لا توجد مشكلة في استخدام علامات الاقتباس المفردة.
نصيحة: في بعض الحالات الفردية، مثل أن تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة، يجب عليك استخدام علامات الاقتباس المفردة، على سبيل المثال:
الاسم = "جون شوت غون نيلسون"
3. نصيحة HTML: استخدم السمات الصغيرة
الخصائص وقيم الخصائص ليست حساسة لحالة الأحرف.
ومع ذلك، يوصي اتحاد شبكة الويب العالمية بالسمات/قيم السمات الصغيرة في توصيات HTML 4 الخاصة به.
يتطلب الإصدار الجديد من (X)HTML سمات صغيرة.
4. الدليل المرجعي لسمات HTML
راجع القائمة الكاملة لسمات HTML: قائمة علامات HTML.
السمات التي تنطبق على معظم عناصر HTML مدرجة أدناه: