<base> يحدد URL الأساسي لكل الروابط النسبية في الصفحة.
كيف يعمل: • href: الـ URL الأساسي الذي تُبنى عليه الروابط النسبية • target: الهدف الافتراضي لكل الروابط (يمكن تجاوزه لكل رابط) • يجب أن يكون وحيداً في الصفحة • يوضع في head دائماً
مثال: بدون base: <a href="about.html"> يشير لـ example.com/about.html مع <base href="https://example.com/docs/">: <a href="about.html"> يشير لـ example.com/docs/about.html
استخدامات عملية: - الصفحات المُضمَّنة في iframe - أنظمة template server-side - بعض Single Page Applications
⚠️ تحذيرات مهمة: - روابط المرساة (#id) تتأثر بـ base - قد يسبب مشاكل مع الروابط الداخلية',
| 1 | <head> |
| 2 | <meta charset="UTF-8"> |
| 3 | |
| 4 | <!-- base: كل الروابط النسبية تبدأ من هنا --> |
| 5 | <base href="https://nouvil.com/docs/" target="_blank"> |
| 6 | |
| 7 | <title>التوثيق</title> |
| 8 | </head> |
| 9 | <body> |
| 10 | <!-- هذا الرابط يصبح: https://nouvil.com/docs/html.html --> |
| 11 | <a href="html.html">صفحة HTML</a> |
| 12 | |
| 13 | <!-- هذا يصبح: https://nouvil.com/docs/css/selectors.html --> |
| 14 | <a href="css/selectors.html">محددات CSS</a> |
| 15 | |
| 16 | <!-- رابط مطلق - لا يتأثر بـ base --> |
| 17 | <a href="https://google.com" target="_self">جوجل (يفتح في نفس التاب)</a> |
| 18 | |
| 19 | <!-- مرساة تحتاج رابط مطلق مع base --> |
| 20 | <a href="https://nouvil.com/docs/html.html#section1">قسم 1</a> |
| 21 | </body> |
مثال 1: استخدام base في توثيق
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | |
| 6 | <!-- كل روابط التوثيق تبدأ من هذا المسار --> |
| 7 | <base href="/docs/v2/"> |
| 8 | |
| 9 | <title>توثيق نوفيل v2.0</title> |
| 10 | </head> |
| 11 | <body> |
| 12 | <nav> |
| 13 | <!-- الروابط النسبية تستفيد من base --> |
| 14 | <a href="getting-started.html">البدء</a> |
| 15 | <a href="api/endpoints.html">الـ API</a> |
| 16 | <a href="guides/html.html">دليل HTML</a> |
| 17 | </nav> |
| 18 | |
| 19 | <main> |
| 20 | <p> |
| 21 | راجع <a href="changelog.html">سجل التغييرات</a> |
| 22 | أو |
| 23 | <a href="https://nouvil.com/support">الدعم الفني</a> (رابط مطلق) |
| 24 | </p> |
| 25 | </main> |
| 26 | </body> |
| 27 | </html> |