شرح مفصل لتجربة وتحليل رمز CSS الدلالي لـ HTML5

ذات مرة ، نشر رجل مسودة تصميم. بعد نشر مسودة التصميم ، فتح DW وسحب صفحة. بعد أن عمل بجد ، كان عليه أن يكتب خلفية. رجل فنون القتال يسمى "الفنان".

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

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

لذا تم إحضار Div+CSS إلى مرحلة عصر الإنترنت ، وقد ولد أكثر من كتاب "Div+CSS" عباد الشمس بين عشية وضحاها. في ذلك الوقت ، عشنا في عصر Div+CSS ، وفي ذلك الوقت ، استخدمناها.

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

شرح Ghost ذات مرة الدلالات في مقالة "Devantization in page refactoring" قبل عامين ، وأيضًا قفص الاتهام "ما هي فوائد هياكل HTML الدلالية؟》

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

يمكن تقسيم الدلالات في إعادة الإعمار إلى جزأين: (X) دلالات علامات HTML ودلالات تسمية CSS.

(س) دلالات علامات HTML

لا معنى:

(الشكل 1)

الشكل 1 طريقة تنفيذ عدم الديمقراطية: no_emants_html طريقة تنفيذ الدلالة: eMantic_HTML

أنت على حق

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

استخدم علامات HTML المعقولة وخصائصها الفريدة لتنسيق محتوى المستند - هذا هو شرح Shuke للعلامات الدلالية ، لذلك غير ممكن

ليست هناك حاجة لاستخدام المكان الذي يتم فيه تنظيم HTML ، لأنه علامة دلالية. الكلمة الأصلية هي التقسيم ، مما يعني الفصل والكتل. لا يتم استخدامه بشكل عام إلا في المكان الذي يتم فيه تنظيم HTML ، في الإصدار السابق من (X) HTML.

ولكن كيف يمكننا كتابة الملصقات الدلالية؟ ابدأ بالأساسيات. تلك التي نتعامل معها كل يوم هي علامات مثل Div H1-H6 UL-LI P. أتساءل عما إذا كان لديك أي فهم متعمق لهذه الملصقات. دعونا نلقي نظرة على الجدول أدناه.

ما سبق يسرد فقط بعض العلامات التي نستخدمها عادة. لمزيد من العلامات ، يرجى الرجوع إلى W3C. في الأساس جميع علامات HTML هي اختصارات لكلمة أو عبارة ، مما يعني في الواقع أنها أكثر ملاءمة لفهمنا للدلالات. في الواقع ، من بين جميع علامات (X) HTML ، باستثناء

و 2 ملصقات خالية من الدلالات ، والعلامات الأخرى لها معاني. فقط من خلال معرفة الملصقات الموجودة هناك وفهم المعنى الأصلي لكل تسمية ، هل يمكنك معرفة كيفية استخدامه. أنت لا تعرف متى تستخدمه

تحديد علامات القائمة؟ وماذا لو كنت لا تعرف أن هناك ^{علامة؟ إذا رأيت جميع divs أساسًا على صفحة ما ، فهذا يعني أنك لا تفهم استخدام العلامات الدلالية جيدًا: من الواضح أنه عنوان ، يمكن تنفيذه مع العلامات ، ولكن يجب تنفيذه بدون علامات دلالية ، أو فقرة ، هل من الدلالي استخدام العلامات؟}

^{الجميع يعرف مهرجان CSS العاري السنوي ، أليس كذلك؟ إذا كانت العلامات المحددة جميعها تقريبًا بدون دلالات ، فلا توجد معلومات هيكلية تقريبًا في صفحة الويب بعد إلغاء الإطارات ، وقابلية القراءة سيئة للغاية ؛ إذا كانت العلامات المحددة مناسبة للدلالات ، فلا تزال صفحة الويب لديها قابلية للقراءة جيدة جدًا بعد الإزالة ؛ لكل متصفح نمطه الافتراضي الخاص ، والنمط الافتراضي يعطي شاشات مختلفة لكل علامة. يمكن أن تعكس صحة العلامة قابلية استخدام الموقع ، والتي تعد أيضًا واحدة من أسهل الطرق لاختبار قابلية استخدام موقع الويب.}

^{ينصح هذا للجميع بالتحقق من استخدام علامات الويب الرسمية لـ W3C ، واستخدم مطور الويب لتعطيل CSS لمعرفة كيفية رؤيته؟}

^{دلالات تسمية CSS}

^{تشير تسمية CSS الدلالية إلى اسم الفصل أو المعرف المرفق بعلامة HTML مع اسم سهل الفهم. التسمية الدلالية تنطوي على مواصفات تسمية الفريق. فقط من خلال تسمية دلالية أفضل بناءً على مواصفات الفريق هو الملك.}

^{في فهمي ، يجب أن يتوافق تسمية CSS الدلالية على الأقل للاتفاقيات التالية:}

^{حاول تجنب تسمية Pinyin واستخدام الكلمات الإنجليزية لتسمية ذلك}

^{هناك ثلاث طرق لتوصيل الكلمات: Underscore_ ، رمز الفاصل ، وتسمية الجمال . يرجى الرجوع إلى مواصفات الفريق للاستخدام المحدد ، لكنني شخصياً أوصي بعدم استخدام أكثر من طريقتين اتصال في نفس الوقت.}

^{لا تتبع أرقامًا لا معنى لها بعد الكلمات ، مثل Logo1234 (باستثناء اتفاق الفريق)}

^{لتسمية الاتصال بالكلمات الطويلة المفرطة ، يمكنك استخدام الاختصار ، ولكن ينبغي التأكد من أنه يمكن لجميع الأعضاء فهمها.}

^{بعض الكلمات المتفق عليها يمكن أن تساعدك في تسميةها بسرعة:}

头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column登录条：loginbar标志：logo广告：banner轮转：promo页面主体：main热点：hot新闻：news 下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink版权copyright

^{هناك الكثير من هذا ، لذلك لن أدرجهم واحدًا تلو الآخر هنا. إذا واجهت كلمات لا تعرفها ، فيرجى إضافة بعض اللغة الإنجليزية إليها!}

[1] [2] الصفحة التالية