الاتفاقيات الترميز HTML التمهيد
قواعد
- مع مسافتين بدلا من علامات (علامة التبويب) - وهذا هو السبيل الوحيد لضمان اتباع نهج ثابت لإظهارها في جميع البيئات.
- يجب بادئة العناصر المتداخلة مرة واحدة (أي مسافتين).
- لتعريف الملكية، تأكد من أن كل استخدام علامات الاقتباس المزدوجة، أبدا استخدام علامات الاقتباس المفردة.
- لا (ذاتية الإغلاق) ذيل عنصر ذاتية الإغلاق إضافة خط مائل - مواصفات HTML5 بوضوح أن هذا هو اختياري.
- لا حذف اختياري (علامة الإغلاق) علامة النهاية (على سبيل المثال،
</li>أو</body>).
على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
HTML5 DOCTYPE
لكل من السطر الأول من صفحات HTML إضافة الوضع العادي (الوضع العادي) بيان، وهذا يمكن التأكد من أن لديك عرض ثابت في كل متصفح.
على سبيل المثال:
<!DOCTYPE html> <html> <head> </head> </html>
الملكية لغة
وفقا لمواصفات HTML5:
فمن المستحسن لتحديد خاصية lang العنصر الجذر HTML، وذلك لتعيين اللغة الصحيحة للمستند. وهذا سوف يساعد على أدوات تركيب الكلام ينبغي أن تستخدم لتحديد النطق، وسوف أدوات الترجمة تساعد في تحديد ترجمتها يجب أن يتوافق مع القواعد وهلم جرا.
أكثر على lang السمة المعرفة من هذه المواصفات فهم.
هنا الجدول رمز اللغة .
<html lang="zh-CN"> <!-- ... --> </html>
وضع التوافق IE
IE الدعم من خلال محددة <meta> يجب استخدام كلمة دلالية لتحديد الإصدار الحالي من آي إي صفحة التقديم. إلا إذا كان هناك احتياجات خاصة قوية، وإلا فمن الأفضل لضبط وضع الحافة، وبالتالي إخطار IE باستخدام أحدث الموديلات التي يدعمها.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
ترميز الأحرف
التي تعلن صراحة ترميز الأحرف، ومتصفح يمكن تأمينها بسرعة وسهولة تحديد محتوى الصفحة التقديم. وميزة هذا هو تجنب استخدام علامة الكيانات حرف (كيان شخصية) في HTML، وهو ما يتسق مع ترميز المستند بأكمله (عموما استخدام ترميز UTF-8).
<head> <meta charset="UTF-8"> </head>
إدخال ملفات CSS وجافا سكريبت
وفقا لمواصفات HTML5، في وقت إدخال ملفات CSS وجافا سكريبت عموما لا تحتاج إلى تحديد type السمة كما text/css و text/javascript هي القيم الافتراضية.
الروابط المواصفات HTML5
<!-- External CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* ... */ </style> <!-- JavaScript --> <script src="code-guide.js"></script>
عملي هو الملك
في محاولة لتتبع معايير HTML وعلم الدلالة، ولكن ليس على حساب التطبيق العملي للسعر. أي وقت ممكن مع الحد الأدنى من تسمية والحفاظ على الحد الأدنى من التعقيد.
السمة ترتيب
وينبغي أن يكون سمة HTML في ترتيب الأولوية في الترتيب الواردة أدناه، لضمان سهولة قراءة التعليمات البرمجية.
-
class -
id،name -
data-* -
src،for،type،href -
title،alt -
aria-*،role
يستخدم فئة لتحديد مكونات قابلة لإعادة الاستخدام للغاية، وبالتالي يجب أن تكون في الأعلى. يستخدم id لتحديد مكونات محددة، يجب أن تستخدم بحذر (مثل الإشارات المرجعية في الصفحة)، وجاء في المركز الثاني.
<a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <input class="form-control" type="text"> <img src="..." alt="...">
منطقية (منطقي) نوع السمة
لا يجوز التنازل سمة منطقية في وقت الإعلان. مواصفات XHTML لمهمتها، ولكن مواصفات HTML5 غير مطلوب.
لمزيد من المعلومات، يرجى الرجوع إلى وWHATWG sectionTop على منطقية سمات :
منطقية سمة عنصر إذا كانت القيمة الحقيقية، إذا لا قيمة غير صحيحة.
إذا كان يجب تعيين قيمة، يرجى الرجوع مواصفات WHATWG:
في حالة وجود السمة، يجب أن تكون قيمته سلسلة فارغة أو [...] السمة الاسم المقبول، ولا تضيف بيضاء في بداية ونهاية.
ببساطة، لا يتم تعيينه.
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
تقليل عدد التسميات
عند كتابة كود HTML لتجنب العنصر الأصل لا لزوم له. في كثير من الحالات، وهذا يتطلب وجود تكرار وإعادة الإعمار لتحقيقه. النظر في الحالة التالية:
<!-- Not so great --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="...">
جافا سكريبت التسمية ولدت
الكلمات التي تولدها جافا سكريبت بحيث يصبح المحتوى من الصعب العثور عليها، وتحرير، وتقليل الأداء. في محاولة لتجنب لتجنب.