9 الحيل HTML مفيدة

تحياتي يا هبر! أقدم لكم ترجمة المقال "9 خدع HTML مفيدة للغاية" لكلاوس .

يحتوي HTML على العديد من الأسرار العملية التي قد تجدها مفيدة.


فيما يلي 9 حيل HTML مفيدة للغاية.

1. علامة "الشكل"

ويمكن استخدامه للاحتفال الصور.

قد يحتوي عنصر الشكل أيضًا على figcaption :

<figure> <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%"> <figcaption>Fig.1 - SWAT Kats</figcaption> </figure> 

وهذه هي الطريقة التي سيبدو بها:


الشكل 1 - سوات كاتس

2. علامة "فيديو"

يسمح لك بتضمين مشغل وسائط لتشغيل الفيديو.

على سبيل المثال ، يمكنك تحميل الفيديو الخاص بك على AWS S3 واستخدام علامة "الفيديو" لتضمينه على موقع الويب الخاص بك.

قد يبدو استخدام YouTube لهذا غير مهني.

و Vimeo لا يسمح لك بتضمين مقاطع الفيديو الخاصة بك دون دفع.

يمكنك تحديد خصائص محددة ، مثل العرض ، الارتفاع ، التشغيل التلقائي ، الدورة ، عناصر التحكم ، إلخ.

 <video autoplay="" loop="" controls="" width="640" height="480"> <source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"> </video> 

وهذه هي الطريقة التي سيبدو بها:


يمكنك أيضًا تضمين البث المباشر باستخدام getUserMedia () أو WebRTC

3. علامة "صورة"

تساعد هذه العلامة في عرض الصور في نموذج عام ، مع عرض نسخة بديلة من الصورة لنوافذ العرض الصغيرة.

يجب أن تحتوي على علامة "source" واحدة أو أكثر وعلامة "img" واحدة.

لن يتم استخدام علامة img إلا إذا كان العارض لا يتطابق مع أي من علامات المصدر أو إذا كان المتصفح غير مدعوم.

 <picture> <source media="(min-width: 968px)" srcset="large_img.jpg"> <source media="(min-width: 360px)" srcset="small_img.jpg"> <img src="default_img.jpg" alt="avatar"> </picture> 

4. علامة "التقدم"

تعرض علامة التقدم تقدم المهمة.

يجب عدم الخلط بين هذه العلامة والعلامة "meter" (وهو جهاز استشعار).

 <progress value="63" max="100"> </progress> 

إليك ما يبدو عليه:


5. العلامة "متر"

يمكنك استخدام العلامة "meter" لقياس البيانات في نطاق معين (المستشعر).

يمكن تعيين النتيجة من خلال الحد الأدنى والحد الأقصى للقيم أو في المئة.

 <meter value="2" min="0" max="10">2 out of 10</meter> 

 <meter value="0.6">60%</meter> 

وهنا هم:

6. علامة "خريطة"

يتم استخدام علامة الخريطة لتعريف خريطة صورة العميل.

خريطة الصورة هي صورة ذات مناطق تفاعلية.

كل ما عليك فعله هو إدخال إحداثيات X و Y في العناصر من الخريطة .

هذا يعني أنك تقوم بإنشاء خريطة لنظامنا الشمسي ، وتحديد مساحة لكل كوكب ، وإعادة توجيه الزائرين إلى صفحة منفصلة لكل كوكب نقروا عليه.

 <img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth"> <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars"> <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn"> </map> 

7. سمة القناعة

تشير هذه السمة إلى ما إذا كان محتوى عنصر قابل للتحرير.

 <p contenteditable="true">This is an editable paragraph.</p> 

8. اقتراحات للمدخلات

 <input type="text" list="planets"> <datalist id="planets"> <option value="Mercury"></option> <option value="Venus"></option> <option value="Earth"></option> <option value="Mars"></option> <option value="Jupiter"></option> <option value="Saturn"></option> <option value="Uranus"></option> <option value="Neptune"></option> </datalist> 

آمل أن لا تمانع في أنني لم أضيف مجموعة متنوعة من الأساليب.

أنا أفضل تصميم أمثلة تروق لي ، جميلة بقدر الإمكان.


9. علامة "noscript"

يتم عرض المحتوى الموجود داخل عنصر noscript بواسطة المستعرض فقط إذا تم تعطيل JavaScript.

يوفر هذا آلية احتياطية للمكونات التي تتوقف عن العمل بدون جافا سكريبت.

 <noscript><h2>JavaScript is disabled in your browser.</h2></noscript> 

أعتقد أنه من الرائع حقًا أنك تبحث عن حيل HTML ، ولكن هل أنت متأكد من أن تطبيق الويب الخاص بك يعمل بشكل صحيح على جميع المتصفحات والأجهزة؟

يمكنك استخدام Endtest لإنشاء اختبارات تلقائية بسرعة وتشغيلها في سحابة متعددة المستعرضات.

لا تحتاج حتى إلى رمز لاستخدامها.

على محمل الجد ، فقط قراءة المستندات .