يضيف معيار HTML5 الكثير من العناصر الدلالية الجديدة.
هنا نقدم بشكل أساسي عناصر جديدة على بنية الصفحة.
ما هو العنصر الدلاليبعبارات بسيطة ، فإن العناصر الدلالية هي إعطاء بعض المعنى للعنصر (التسمية).
مثل <peader> يمثل الرأس ، <footh> للإشارة إلى تذييل.
خاصية① الصيانة السهلة: سيكون لاستخدام العناصر الدلالية معلومات بنية صفحة أوضح ، والتي من السهل الحفاظ على صيانة الصفحة المتابعة. لا حاجة لعرض الكود مرة أخرى: ابحث عن القسم قبل العثور على اسم الفصل المحدد.
② خزانة -خالية: من المفيد قراءة قارئ الشاشة وغيرها من الأدوات المساعدة.
③ تحسين محرك البحث الأمثل: بعد التحقق من بعض العناصر الدلالية من HTML5 ، يمكن لروبوتات البحث جمع المعلومات على صفحة الفهرس الخاصة بها.
تخطيط الواجهة الأصليةفي تخطيط الصفحة ، يكون <Div> عنصرًا شائعًا جدًا.
لتسهيل الصيانة ، غالبًا ما يعطي المصممون <Div> اسم ClassName (فئة النمط) أو معرف بأسماء خاصة.
على سبيل المثال ، يمكن أن يكون العنصر <div> الذي يمثل الرأس ، أو اسمه أو معرفه هو رأس الصفحة ، والرأس ، إلخ.
مثال:
بنية الصفحة العنصر الدلالي يوضحيتم استخدام العناصر الدلالية في بنية الصفحة في الغالب للتخطيط العام للصفحة.
وليس له نمط خاص ، لا يزال يتعين استخدامه مع CSS.
مقدمة مفصلة <Header>: تحديد منطقة رأس صفحة الويب أو المقالة. يمكن أن تحتوي على شعار ، التنقل ، شريط البحث وما إلى ذلك.أدنى نسخة من المتصفح: أي 9 ، Chrome 5
تعليمات للاستخدام:
① عند استخدامه لتسمية صفحة الويب ، يمكن أن تتضمن معلومات مثل الشعار والملاحة وشريط البحث.
② عند استخدام العنوان لتمييز المحتوى ، فقط عندما يتم إرفاق العنوان أيضًا بالمعلومات الأخرى ، يتم النظر في <header> بشكل عام.
<Main>: تحديد المحتوى الرئيسي لصفحة الويب.أدنى نسخة من المتصفح: أي لا يدعم ، Chrome 35
<Tower>: حدد مساحة الذيل في صفحة الويب أو المقالة. يمكن أن تشمل حقوق الطبع والنشر والملفات.أدنى نسخة من المتصفح: أي 9 ، Chrome 5
تعليمات للاستخدام:
① كصفحة ويب ، فإنه يتضمن عادة حقوق الطبع والنشر للمواقع والقيود القانونية والروابط.
② كحاشية للمقال ، فإنه يحتوي عادةً على المعلومات ذات الصلة للمؤلف.
<v>: حدد رابط التنقل في الصفحة. يحتوي على مناطق متعددة غير سلوطية.أدنى نسخة من المتصفح: أي 9 ، Chrome 5
تعليمات للاستخدام:
① يمكن أن تحتوي صفحة واحدة على عناصر متعددة <v> ، مثل التوصية بالملاحة والمواد ذات الصلة.
② لا يتعين إدراج معلومات الاتصال ومعلومات الشهادات في منطقة <Tower> في عنصر <v>.
<section>: عادة ما يتم تمييزه كمنطقة مستقلة على صفحة الويب.أدنى نسخة من المتصفح: أي 9 ، Chrome 5
تعليمات للاستخدام:
① يمكن استخدامها كمنطقة مستقلة في صفحة الويب ، مثل قسم في المقالة.
<Artticle>: كتل المحتوى الكاملة والمستقلة ؛ مثل الأخبار ومقالات المدونة والمحتوى المستقل الآخر (باستثناء التعليقات أو ملفات تعريف المؤلفين).أدنى نسخة من المتصفح: أي 9 ، Chrome 5
<جانب جانبا>: حدد كتل المحتوى خارج المحتوى الرئيسي للمحيط. مثل: التعليقات التوضيحية.أدنى نسخة من المتصفح: أي 9 ، Chrome 5
<GINGE>: يمثل قسمًا من المحتوى المستقل وغالبًا ما يتم استخدامه مع <GIGCAPTION> (يمثل) ، والذي يمكن استخدامه للصور والرسوم التوضيحية والنماذج وأجزاء التعليمات البرمجية وما إلى ذلك في المقالة.أدنى نسخة من المتصفح: أي 9 ، Chrome 8 <Figcaption>: تحديد عنوان عنصر <GINGE>.
أدنى نسخة من المتصفح: أي 9 ، Chrome 8
مثال مخطط
النسخة القديمة من دعم المتصفح IE8 أعلاهسيتم استخدام المتصفح كعنصر داخلي للعناصر التي لا تعرف. العناصر الدلالية ذات الصلة بالصفحة عبارة عن عناصر ذات مستوى ، لذلك تحتاج فقط إلى تعيين المتصفحات التي لا تدعم هذه العناصر لعرضها كعناصر محددة.
أضف الرمز التالي إلى النمط:
مقال ، جانبا ، التفاصيل ، الشكل ، الشكل ، تذييل ، رأس ، hgroup ، main ، nav ، القسم ، ملخص {display: block ؛} IE8 و IE8 أدناهلا تدعم المتصفحات أدناه IE8 و IE8 نمط تطبيق العنصر المفيد الذي لا يمكن الاعتراف به.
لذا ، قم بإنشاء هذه العناصر الدلالية من خلال JS وإضافة أنماط أساسية.
خذ رأسه كمثال <script> document.createelement ('header') ؛ تطبيق الملف الخارجيلقد كتبت هذه الإبداعات الشاقة بالفعل Lei Feng ، تم تحميلها للتو على النسخة القديمة من IE.
<!