العلامات في HTML تشبه الكلمات الرئيسية. كل علامة لها دلالاتها الخاصة (المعنى). على سبيل المثال، تمثل العلامة <p> فقرة وتمثل العلامة <b> الخط العريض. اعتمادًا على العلامة، سيعرض المتصفح المحتوى الموجود في العلامة بطرق مختلفة.
في التطوير الفعلي، أحيانًا نسمي علامات HTML أيضًا عناصر HTML.
ملكية
↓
<div class=foo>شبكة لغة C</div>
↑ ↑ ↑
بداية محتوى العلامة علامة النهاية
بالإضافة إلى سمة الفئة، يمكن أن تحتوي علامة البداية أيضًا على معلومات سمة أخرى، مثل المعرف والعنوان وما إلى ذلك، والتي سنشرحها لاحقًا.
ملاحظة: على الرغم من أن علامات HTML ليست حساسة لحالة الأحرف في بناء الجملة، فمن أجل التقييس والاحترافية، يوصى بشدة باستخدام الأحرف الصغيرة عند تعريف العلامات.
(١) دلالات العلامة
يعد تعلم العلامات أمرًا صعبًا، حيث ينصب التركيز على تذكر دلالات كل علامة. يشير الفهم البسيط إلى معنى الملصق، أي ما يتم استخدام الملصق من أجله. وفقا لدلالات التسمية. إن إعطاء التصنيف الأكثر منطقية في المكان المناسب يمكن أن يجعل بنية الصفحة أكثر وضوحًا.
(2) علامة العنوان h1-h6
من أجل جعل صفحات الويب أكثر دلالية، غالبًا ما نستخدم علامات العنوان في الصفحات. يوفر HTML 6 مستويات من عناوين صفحات الويب، وهي <h1> - <h6>
<h1>أنا علامة من المستوى الأول</h1>
h هو اختصار لكلمة head والتي تعني عنوان الرأس.
دلالات العلامة: تستخدم كعنوان، وبترتيب تنازلي من حيث الأهمية.
● الميزات:
1. سيصبح النص الذي يحمل العنوان غامقًا، وسيزداد حجم الخط أيضًا بالتسلسل.
2. عنوان واحد يحتل السطر الخاص به.
(3) علامات الفقرة وعلامات فاصل الأسطر
تريد عرض النص في أقسام على صفحة ويب. يتم استخدام العلامة <p> لتحديد أنماط الفقرة.
<p>أنا علامة فقرة</p>
p تعني الفقرة، مما يعني أنه يمكن تقسيم HTML إلى عدة فقرات، وسيتم تغليف الأسطر تلقائيًا وفقًا لحجم نافذة المتصفح، مع ترك فجوات بين الفقرات.
في HIML، يتم ترتيب النص الموجود في الفقرة من اليسار إلى اليمين حتى يصل إلى الطرف الأيمن من نافذة المتصفح، ثم يتم التفافه تلقائيًا. إذا كنت تريد إجبار قسم معين من النص على الالتفاف في سطر جديد، فستحتاج إلى استخدام علامة فاصل الأسطر <br/>.
يفرض الفاصل سطرًا جديدًا مع تباعد صغير بين أسطر التسمية الفردية.
حالات الأخبار:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>أخبار دولية</title></head><body><h1>أخبار دولية</h1><h4>أرسلت أوكرانيا طائرات بدون طيار لمهاجمة المطارات العسكرية في منطقتي ريازان وساراتوف في روسيا في ذلك الصباح</ h4><p> في 5 ديسمبر/كانون الأول، بالتوقيت المحلي، أصدرت وزارة الدفاع الروسية بيانا قالت فيه إن أوكرانيا أرسلت طائرات بدون طيار لمهاجمة المطارات العسكرية في منطقتي ريازان وساراتوف الروسيتين في ذلك الصباح، لكن نظام الدفاع الجوي الروسي اعترضها. وقتل ثلاثة جنود روس وأصيب أربعة آخرون في الهجوم. </p><p>إلى ذلك، أدى سقوط طائرة أوكرانية بدون طيار فوق مطار عسكري إلى إلحاق أضرار بجسدي طائرتين مقاتلتين روسيتين. وبعد ساعات قليلة، أعلنت أوكرانيا أن روسيا شنت جولة جديدة من الهجمات الصاروخية. </p><h4>من المستحيل أن تقوم روسيا بتسليم السيطرة على محطة زابوروجي للطاقة النووية</h4><p>قالت المتحدثة باسم وزارة الخارجية الروسية زاخاروفا لوكالة أنباء سبوتنيك إنه من المستحيل على روسيا تسليم السيطرة على زابوروجي مراقبة محطات الطاقة النووية في محطات الطاقة النووية الحرارية. </p><h4>لن يفكر بايدن في استخدام النفط الروسي لتجديد احتياطيات النفط الاستراتيجية</h4><p>وقال البيت الأبيض إنه لم يتفاجأ برد فعل روسيا على سقف الأسعار. ولن يفكر بايدن في استخدام النفط الروسي لتجديد الاحتياطي النفطي الاستراتيجي. وقال مبعوث أمن الطاقة الأمريكي هوشستاين إن الولايات المتحدة لا تزال لديها احتياطيات نفطية استراتيجية كافية للتعامل مع حالات الطوارئ. وستعقد إدارة بايدن اجتماعًا عبر الإنترنت مع المديرين التنفيذيين لصناعة النفط الأمريكية في 8 ديسمبر لمناقشة كيفية دعم البنية التحتية للطاقة في أوكرانيا. وسيجتمع وزير الطاقة الأمريكي مع العديد من المديرين التنفيذيين لشركات النفط في الرابع عشر من الشهر الجاري. </p><p>شبكة لغة C<br/>2022-12-6</p></body></html>
تظهر على النحو التالي:
(4) علامات تنسيق النص
في صفحات الويب، تحتاج أحيانًا إلى تعيين تأثيرات غامقة أو مائلة أو مسطرة للنص. في هذه الحالة، تحتاج إلى استخدام علامات تنسيق النص في HTML. جعل النص يظهر بطريقة خاصة.
دلالات العلامة: يعد إبراز الأهمية أكثر أهمية من النص العادي.
<strong>غامق</strong><b>غامق</b><em>مائل</em><i>مائل</i><del> يتوسطه خط</del><s> يتوسطه خط</ s><ins >تسطير</ins><u>تسطير</u>
يظهر أدناه:
(5) علامات div وspan
<div> و <span> ليس لهما دلالات، فهما مجرد مربعات تستخدم للاحتفاظ بالمحتوى.
تقسيم تقسيم تقسيم مدى مدى
● الميزات:
يتم استخدام العلامة <div> للتخطيط، ولكن الآن يمكن وضع <div> واحد فقط في صف واحد.
يتم استخدام علامة <span> للتخطيط. يمكن أن يكون هناك عدة مربعات صغيرة في سطر واحد.
(6) علامات الصور والمسارات
1. علامات الصورة
في علامات HTML، يتم استخدام العلامة <img> لتعريف الصور في صفحات HTML.
<img src=imageURL />
اختصار لكلمة الصورة. صورة المعنى.
src هي سمة مطلوبة للعلامة <img> ويتم استخدامها لتحديد المسار واسم الملف لملف الصورة.
ما يسمى بالسمات: الفهم البسيط هو خصائص علامة الصورة هذه.
<imgsrc=bg.pngalt=/>
خصائص إضافية لعلامات الصور
الأشياء التي يجب ملاحظتها عند استخدام علامات الصور
(1) يمكن أن تحتوي علامات الصورة على سمات متعددة، والتي يجب كتابتها بعد اسم العلامة.
(2) السمات ليست بترتيب معين، ويتم فصل السمات بمسافات.
(3) تأخذ السمات تنسيق أزواج القيمة الرئيسية، أي تنسيق المفتاح = "القيمة"، والسمة = قيمة السمة"
2. المسار
(1) مجلد الدليل والدليل الجذر:
في العمل الفعلي، لا يمكن وضع ملفاتنا بشكل عشوائي، وإلا سيكون من الصعب العثور عليها بسرعة، لذلك نحتاج إلى مجلد لإدارتها.
مجلد الدليل: هو مجلد عادي، يقوم فقط بتخزين المواد ذات الصلة التي نحتاجها لإنشاء الصفحات، مثل ملفات html والصور وما إلى ذلك.
الدليل الجذر: المستوى الأول لمجلد الدليل المفتوح هو الدليل الجذر.
(2) يفتح VSCode مجلد الدليل
ملف - افتح المجلد. يعد تحديد مجلد الدليل أمرًا مريحًا جدًا لإدارة الملفات لاحقًا أو اسحبه مباشرة.
سيكون هناك الكثير من الصور على الصفحة. عادةً ما نقوم بإنشاء مجلد جديد لتخزين ملفات الصور هذه (الصور)، نحتاج إلى استخدام طريقة "المسار" لتحديد موقع ملفات الصور.
يمكن تقسيم المسارات إلى:
(1) المسار النسبي، وهو مسار دليل يتم إنشاؤه بناءً على موقع الملف المشار إليه.
(2) يشير المسار المطلق إلى الموضع المطلق في الدليل، والذي يصل مباشرة إلى الموقع المستهدف، وعادةً ما يبدأ المسار من حرف محرك الأقراص.
(7) علامات الارتباط التشعبي
1. تنسيق بناء الجملة الارتباط
<ahref=jump target target=طريقة النافذة المنبثقة للنافذة المستهدفة>نص أو صورة</a>
اختصار لكلمة مرساة : مرساة
تعمل السمتان على النحو التالي
2. تصنيف الارتباط
(1) الروابط الخارجية، مثل <a href=http://www.baidu.com>baidu<a>.
(2) الروابط الداخلية، الروابط المتبادلة بين الصفحات الداخلية للموقع، يمكن ربطها مباشرة بأسماء الصفحات الداخلية، مثل <a href=index.html>الصفحة الرئيسية<a>.
(3) رابط فارغ، عندما لا يتم تحديد هدف الرابط، <a href=#>الصفحة الرئيسية<a>.
(4) رابط التنزيل، إذا كان العنوان الموجود في href عبارة عن ملف أو حزمة مضغوطة، فسيتم تنزيل الملف.
(5) روابط عناصر صفحة الويب يمكن إضافة عناصر صفحة الويب المختلفة في صفحة الويب، مثل الصور النصية والجداول والصوت والفيديو وما إلى ذلك، باستخدام الارتباطات التشعبية.