أعلاه: لغة الترميز - عناصر العبارة
المصدر الأصلي الفصل 7 مرساة نقطة
يجب أن تسمى الطريقة الصحيحة لقول الروابط في HTML المرساة. لا تسمح لنا فقط بالإشارة إلى المستندات ، ولكن أيضًا إلى فقرات محددة في الصفحة ، ويمكن أيضًا استخدامها كأداة مريحة للروابط الدقيقة. دع كائن الرابط يقترب من التركيز. في هذا الفصل ، سنرى أربع ممارسات مرساة مختلفة ، وشرحت مزايا كل طريقة ، وكذلك تقديم كيف يمكن لسمات العنوان تحسين سهولة استخدام الروابط. بالإضافة إلى ذلك ، سوف نستخدم أيضًا CSS لتصميم أنماط للروابط. عندما تحتاج إلى تحديد جزء معين من الصفحة ، فإن وضع علامة على المراس هو أفضل طريقة للقيام بذلك.
هذا موقف شائع عند تصميم موقع ويب. تريد ربط جزء معين من صفحة معينة ، ولكن قد يقرأ المستخدم في صفحة أخرى. اختر أيًا من الطرق الأربع التي تمت مناقشتها بجانب تمكينك من تحقيق هدفك.
في المثال ، لنفترض أننا نعتزم الارتباط بعنوان معين في نفس الصفحة: الطريقة أ: اسم الثقب
<p> <a href =#orgees> حول البرتقال </a> </p>
... بعض النص ...
<a name = Oranges> </a>
<H2> البرتقال لذيذ </h2>
... المزيد من النص ...
استخدم علامة مرساة مع محتوى فارغ وسمة اسم لتمييز نقطة ارتباط محددة. ربما هذه هي الطريقة التي تعرفها. ضع محتوى فارغًا <a> أمام العنوان وقم بتوصيله (باستخدام الرمز # ، تليها قيمة سمة الاسم) ، والتي تسمح لنا بالاتصال بجزء معين من الصفحة. عندما تحتوي الصفحة على قائمة طويلة من العناصر التي تحتاج إلى تمريرها ، يمكننا بسهولة الاتصال بمشروع معين من خلال هذه الطريقة.
يوضح الشكل 7-1 النتيجة بعد النقر على رابط About Oranges ، مما يعني القفز إلى المكان الذي نحدده <a name = oranges> </a> ، وهو بالضبط على العنوان.
الشكل 7-1. مثال على النقر للاتصال برابط مرساة محدد
التأثير جيد ، ولكن إهدار علامة فارغة لتحديد موقع الارتباط لا يتناسب قليلاً مع الدلالات. الطريقة ب يمكن تحسين هذا. الطريقة ب: كل ما في داخل الاسم
<p> <a href =#orgees> حول البرتقال </a> </p>
... بعض النص ...
<h2> <a name = Oranges> البرتقال لذيذ </a> </h2>
... المزيد من النص ...
مثل الطريقة A ، ما زلنا نستخدم علامة <a> مع سمة الاسم ، لكن هذه المرة نلتفها خارج العنوان الذي أريد ربطه به. هذا يبدو أكثر دلالية. في الطريقة A ، فإن كائن الاتصال الخاص بنا هو ... حسنًا ، لا يوجد شيء ، ولكن في الطريقة B ، لا نوضح فقط أن هذا النص هو جزء من علامة العنوان ، ولكن أيضًا أحد مراسك في هذه الصفحة. كن حذرًا من النمط العالمي لـ <a>
إذا تم استخدام الطريقة B ، فهناك مكان يجب أن تنتبه إليه. إذا قمت بتحديد أنماط CSS العالمية لجميع عناصر <A> (اللون ، حجم النص ، زخرفة النص ، إلخ) ، فإن هذه الأنماط ستجاوز الأنماط التي تحددها لعناصر <h2>. والسبب في ذلك هو أنه في هذا المثال ، فإن العلامة <a> هي عنصر طفل يقع داخل علامة <H2> التي تحيط بها.
على سبيل المثال ، إذا كان لديك بيان مثل هذا في CSS الخاص بك:
أ {
اللون: أخضر.
خط الرصيف: جريئة ؛
تدمير النص: تسطير ؛
}
سيجعل الطريقة B و CSS هذا العنوان يتحول إلى اللون الأخضر والجرائم ويطوي عليه مثل <a> في صفحات أخرى ، وربما يختلف عن نمط <H2> الذي تتوقعه.
يمكننا استخدام: رابط الفئة الزائفة من <a> لتجنب هذه الظاهرة (وكذلك الحصول على مزايا أخرى) ، والتي ستتم مناقشتها بالتفصيل لاحقًا في هذا الفصل. سمات الاسم الأكثر ثراء
واحدة من فوائد استخدام الطريقة B (والطريقة أ) هي أن سمة الاسم يمكن أن تتعامل مع أسماء مرساة أكثر وفرة. على وجه التحديد ، إنها القدرة على استخدام الرموز داخل الاسم
على سبيل المثال ، إذا كنت تستخدم الطريقة B ، فيمكنك القيام بذلك (هنا يمثل الرمز E):
<p> <a href =#resum é ؛> استئناف بلدي é ؛ </a> </p>
... بعض النص ...
<h2> <a name = resum é ؛> dan's resum é ؛ </a> </h2>
... المزيد من النص ...
هذه الوظيفة مهمة جدًا عند التعامل مع الشخصيات التي لا تنتمي إلى الحروف الإنجليزية.
ولكن هناك عدة طرق تستحق الذكر. لا تتطلب الطريقة التالية استخدام <a> لتعيين نقطة المرساة. لنلقي نظرة على الطريقة C.
الطريقة ج: تجاهل الاسم
<p> <a href =#orgees> حول البرتقال </a> </p>
... بعض النص ...
<H2 ID = Oranges> البرتقال لذيذ </h2>
... المزيد من النص ...
آه ، تشبه وظيفة سمة المعرف سمة الاسم ، والتي يمكنها أيضًا تحديد نقاط المرساة للصفحة. بالإضافة إلى ذلك ، تقوم الطريقة C أيضًا بإزالة الطريقة A و B تستخدم سمة الاسم كعلامة إضافية <A>. لقد قللنا رمز المصدر ، الذي كان دائمًا شيئًا جيدًا.
نظرًا لأنه يمكن إضافة سمة المعرف إلى أي علامة ، يمكننا بسهولة إضافة المراسي إلى أي عنصر في الصفحة. في هذا المثال ، نختار إضافة مرساة إلى العنوان ، ولكن يمكننا أيضًا إضافة المراسي بسهولة إلى <viv> و <parm> و <p> و <ul> ... وجميع العلامات الأخرى. قتل واحد ، عصفورين مع طائر واحد
في الواقع ، في معظم الحالات ، يمكننا إضافة أنماط أو البرمجة النصية إلى سمة المعرف الموجود مسبقًا ، وهي فائدة أخرى من الطريقة C. بسبب هذا ، لا نحتاج إلى إضافة رمز إضافي لتعيين المرساة.
على سبيل المثال ، لنفترض أن لديك نموذجًا لترك التعليقات في أسفل صفحة طويلة ، وتريد إضافة رابط إلى أعلى الصفحة. لقد حدد هذا النموذج معرف = تعليقات لتحديد نمط فريد. هذه هي الطريقة التي يمكننا من خلالها توصيل معرفات مباشرة كرسومات دون إضافة علامة <a> مع سمة الاسم.
الرمز يشبه هذا:
<p> <a href =#comments> أضف تعليقًا! </a> </p>
... العديد من النص ...
<form id = التعليقات الإجراء =/path/to/script>
... شكل عناصر ...
</form>
أيضًا ، إذا كانت صفحتك طويلة ، فستضيف رابطًا إلى المرساة العلوية في الأسفل حتى يتمكن المستخدم من العودة إلى الأعلى.
تجدر الإشارة إلى أنه على الرغم من أنه يبدو مناسبًا للغاية ، فمن الأفضل تجنب استخدام Top عند تحديد أسماء المرساة. تحتفظ بعض المتصفحات بهذا الاسم لأغراض خاصة. قد يسبب استخدام هذا الاسم نتائج غير متسقة. من الأفضل اختيار اسم مشابه ولكن لا يسبب مشاكل. ربما تستخدم #gemesis؟ أو #UT؟ لديك فكرتك الخاصة.
المتصفح القديم مع سمات الهوية
عند استخدام سمة المعرف فقط كمرساة ، هناك عيب مهم جدير بالذكر ، أي أن بعض المتصفحات القديمة لا تدعم هذه الطريقة. أوه ، هذا بالفعل أمر لا بد منه عند تحديد المرساة الخاصة بك ، وهو أيضًا مثال مؤسف على التوافق الأمامي. دعونا نلقي نظرة على المثال الأخير ، الطريقة D. الطريقة D: معا
<p> <a href =#orgees> حول البرتقال </a> </p>
... بعض النص ...
<h2> <a id = oranges name = Oranges> البرتقال لذيذ </a> </h2>
... المزيد من النص ...
إذا كنت ترغب في تحقيق التوافق إلى الأمام والتوافق المتخلف عند وضع علامات على المراسي ، فمن المحتمل أن تحب هذه الطريقة. يمكن لكل من المتصفحات القديمة والمستقبلية تحديد علامات المرساة المسماة بشكل صحيح ، ولكن نظرًا لأن W3C لا توصي بسمات الاسم (http://www.w3
مثل الطريقة B ، يجب أن نولي اهتمامًا للأسلوب العالمي الذي يؤثر على علامة <A>.
الاسم المشترك
إذا اخترت استخدام الطريقة D ، فمن المقبول اختيار نفس الاسم لسمات المعرف والاسم (قد تكون مريحة للغاية) ، ولكن هذا ممكن فقط إذا كانت على نفس العلامة. بالإضافة إلى ذلك ، لا يوجد سوى عدد قليل من العلامات المحددة التي تسمح بذلك ، والتي ، لتكون دقيقة ، تتضمن <a> ، <Applet> ، <rame> ، <img> ، <map>. لذلك ، ننقل المعرف = البرتقال من <h2> إلى علامة المرساة.
الآن بعد أن رأينا أربع طرق لإنشاء نقاط مرساة ، دعونا نلخص مزايا وعيوب كل طريقة.
الصفحة السابقة 1 2 3 الصفحة التالية اقرأ النص الكامل