HTML 5.1 الميزات الجديدة وأمثلة التطبيق للميزات والتطبيقات الجديدة

كما نعلم ، ينتمي HTML5 إلى تحالف شبكة Wanwei (W3C). في نوفمبر 2016 ، قامت W3C بتحديث Standard HTML 5 التمرين على المدى الطويل ، والذي كان أول تحديث صغير منذ عامين. تم إزالة العديد من الميزات الوظيفية المقترحة في البداية HTML 5.1 بسبب عيوب التصميم وعدم وجود دعم من مصنعي المتصفح.

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

من المتوقع إصدار W3C وبداية تطوير مسودة HTML 5.2 في نهاية عام 2017. ما نريد تقديمه هنا هو الخصائص الوظيفية الجديدة وتحسين الوظيفة المقدمة في الإصدار 5.1. لا تحتاج إلى نقل JavaScript لاستخدام هذه الميزات. لا تدعم جميع المتصفحات هذه الميزات ، لذلك يجب عليك التحقق منها للتحقق من دعم المتصفح قبل تطبيقها على بيئة الإنتاج.

معظم الأشخاص الذين يستخدمون Target = '_ فارغ "لا يعرفون حقيقة مثيرة للاهتمام-يمكن للعلامة التي تم فتحها حديثًا تغيير Window.Opener.location إلى بعض صفحات صيد الشبكة. سيمثلك على الصفحة المفتوحة لأداء بعض رمز JavaScript الضار. لأن المستخدم يعتقد أن الصفحة الافتتاحية آمنة ، فلن يشكوا.

من أجل القضاء على هذه المشكلة تمامًا ، قام HTML 5.1 بتوحيد استخدام خاصية Rel = noopner التي يتم توحيدها عن طريق عزل سياق المتصفح. يمكن استخدام Rel = noopener في علامات <a> و <rea>.

 <a href =# target = _blank roth = noopner> الرابط يريد أن يجعل المتاعب بعد الآن </a>

تمثل علامة <IGCAPTION> العنوان أو الأسطورة المرتبطة بعنصر <GINGE> ، والذي يتم استخدامه عادة كحاوية للعناصر المرئية مثل الصور والمخططات والرسوم التوضيحية. في إصدار HTML المبكر ، لا يمكن استخدام <Gigcaption> إلا كأول أو آخر <الشكل <الشكل> sub -label. قام HTML5.1 باسترخاء هذا الحد ، والآن يمكنك استخدام <Gigcaption> في أي مكان في الحاوية <GINGE>.

 <Tricle> <H1> عنوان الأخبار/الرقم اليوم <p> هذا هو الارتفاع في أسعار البنزين في شهرين والثالث في حالة الديزل في أسبوع واحد

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

element.forcespellcheck () سوف يجبر وكلاء المستخدم على الإبلاغ عن أخطاء الإملاء والقواعد المكتشفة على عنصر النص ، حتى لو لم يركز المستخدم أبدًا على الإدخال على العنصر.

 <p spellcheck = true> <label> الاسم: <input spellcheck = false id = textbox> </billy> </p>

يسمح لك الإصدار الجديد من HTML بإنشاء عنصر فارغ <Point>. يمكن أن يكون عنصرًا فرعيًا لـ <ptgroup> أو <داعش> أو <select> العنصر. ستجد أن هذه الميزة يمكن أن تساعد عند تصميم جدول مستخدم من جانب واحد.

يتيح لك الخاصية المتغير المنطقي المسموح به من أجل الإطار التحكم في ما إذا كان يمكن عرض المحتوى من خلال الشاشة باستخدام طريقة requestFullScreen (). على سبيل المثال ، نستخدم iframes المضمنة في YouTube كمثال. تحتاج إلى تعيين خاصية ALTERFULLSCREEN للسماح للمشغل بعرض الفيديو الكامل.

 <Artadicle> <header> <p> <img src =/usericons/16235> <b> fred flintstone </b> </p> <p> <a href =/posts/30934 r = bookmark> 12:44 < /a> - <a href =#a.50343951> منشور خاص </a> </p> </header> <p> تحقق من الفيديو الجديد الخاص بي! >

HTML5.1 يتيح لك تضمين رأس وتذييل في رأس آخر. يمكنك إضافة رأس أو تذييل إلى عناصر الرأس ، إذا كانت تحتوي على نفسها في محتوى الفقرة. إذا كنت ترغب في إضافة تفصيل مفصل مثل <section> و <article> العلامات إلى عناصر الفقرة الدلالية ، فستصبح هذه الميزة مفيدة للغاية.

في الكود التالي ، تحتوي التسمية <article> على علامة <Header> ، والتي تحتوي على علامة <Sidrant> مع علامة <peader>.

 <Artader> <header> <h2> الدرس: كيفية طهي الدجاج </h2> <sider> <header> <h2> حول المؤلف: توم هانك </h2> <a href =./tomhank/> اتصل به! </a/p> </header> <p> خبير في شيء ما غيره. في حقيبة الرمز البريدي مع الدجاج وتغلقها

يتيح لك الإصدار الجديد من HTML إضافة صور عرض صفرية. يمكن استخدام هذه الميزة عندما لا تحتاج الصورة إلى عرضها للمستخدم. إذا كان عنصر IMG يحتوي على استخدامات أخرى ، فهو ليس مجرد صورة ، على سبيل المثال ، كجزء من الخدمة لحساب عدد طرق عرض الصفحة ، استخدم 0 قيم في خصائص العرض والارتفاع. لصور العرض 0 ، يوصى باستخدام سمات فارغة.

 <img src = theimagefile.jpg عرض = 0 الارتفاع = 0 src = "/uploads/allimg/170217/22010q544-0.jpg"/>
 تتيح لك طريقة ReportValidity () الجديدة التحقق من النموذج وإعادة ضبط النتائج ، وإعداد الأخطاء للمستخدمين في المركز المناسب للمتصفح. يمكن لوكلاء المستخدم الإبلاغ عن أكثر من قاعدة تقييد واحدة ، إذا واجه عنصر واحد مشاكل متعددة في نفس الوقت. بالنسبة لهذا الموقف ، يكون إدخال كلمة المرور محتوى ضروريًا ولكن لا يتم ملؤه ، وسيتم تحديده كخطأ.
 <h2> التحقق من صحة النموذج </h2> <p> أدخل التفاصيل </p> <port> <blable> الإدخال الإلزامي نوع الإدخال = كلمة المرور = كلمة المرور مطلوبة/> </label > </form> <script> document.qurySelector ('form')
 6. سياق المتصفح
 في HTML 5.1 ، يمكنك استخدام علامة <MANT> لتحديد القائمة ، والتي تحتوي على عنصر واحد أو أكثر من عناصر <Menuitem> ، ثم يستخدم خاصية ContextMenu لربطها بأي عنصر. يجب أن يكون معرف العنصر <Main> متسقًا مع قيمة سمة ContextMenu للعنصر الذي نريد إضافة قائمة السياق إليها.
 يمكن أن يكون لكل <Menuitem> أحد الأشكال الثلاثة التالية:
 خيار الراديو -الحصول على مجموعة من مجموعة ؛
 مربع الاختيار -حدد أو إلغاء الخيار ؛
 الأمر -قم بإجراء إجراء عند النقر.
 <h2 contextMenu = popup-menu> انقر بزر الماوس الأيمن للحصول على عرض القائمة السياق. type = command label = command onClick = ALERT ('WARNING')> مربع الاختيار 2 </menuitem> <menuitem type = radio name = group1> زر الراديو a </menuitem t ype = radio name = group1 checked = true> زر الراديو B </menuitem> <menuitem type = checkbox upduped> تعطيل عنصر القائمة </menuitem> </main>
 5. استخدم أرقام عشوائية مشفرة على البرامج النصية والأنماط
 التشفير NonCe هو رقم تم إنشاؤه عشوائيًا ، والذي لا يمكن استخدامه إلا مرة واحدة ، وبالنسبة لكل طلب صفحة ، يجب إنشاءه. يمكن استخدام هذه السمة nonce في عناصر <script> و <style>.
 يتم استخدامه عمومًا في استراتيجية أمان المحتوى لموقع ويب لتحديد ما إذا كان ينبغي تنفيذ نمط ونص محدد على الصفحة. في الرمز الوارد أدناه ، تكون هذه القيمة صعبة ، ولكن في سيناريو الاستخدام الفعلي ، يتم إنشاء هذه القيمة بشكل عشوائي.
 <script nonce = 'd3ne7uwp43bhr0e'> رمز javaScript </script>
 4. علاقة رابط التسلسل العكسي
 يتم تعريف سمة Rev في HTML4 ، لكنها لا تظهر في HTML5. يقرر W3C إعادة تخصيص سمات Rev في <a> و <link> عناصر. العلاقة بين مستندات الارتباط الحالية والخلفية لتحديد سمة rev. تم تضمينه لدعم تنسيق علامة بنية البيانات المستخدمة على نطاق واسع ، RDFA.
 دعنا نستخدم وثيقة لإعطاء مثال.
 // المستند مع url chapple.html <link href = stesson2.html rel = next rev = prev> // documente with url chapter2.html <link href = stesson1.html = prev rev = next> <link href = stesson3 Roth = التالي Rev = Prev>
 3. عرض/إخفاء المعلومات
 تتيح لك العناصر الجديدة <message> و <summary> إضافة معلومات التمديد إلى فقرة. يمكنك عرض أو إخفاء كتلة معلومات إضافية من خلال عنصر النقر. بشكل افتراضي ، يتم إخفاء المعلومات الإضافية.
 في الكود ، يجب عليك وضع علامة <summary> في علامة <vidence> ، كما هو موضح أدناه. بعد التسمية <mummary> ، يمكنك إضافة محتوى آخر ليتم إخفاؤه.
 <section> <h3> رسالة الخطأ </h3> <celpary> <summary> لا يوجد هذا الملف تنزيل Network Network. <dt> حجم الملف: </dt> <dd> 8 kb </dd> <dt> رمز الخطأ: </dt> <dd> 342a </dd> </dl> </celpsy> </section>
 2. المزيد من أنواع عناصر الإدخال
 قام عنصر عنصر إدخال HTML بتوسيع ثلاثة أنواع مدخلات في كل أسبوع ، والشهر ، و DateTime-Local.
 كما يظهر الاسم ، يسمح العنصرين الأولين للمستخدمين باختيار قيمة أسبوع وقيمة شهر واحد. اعتمادًا على دعم المتصفح ، سيتم عرضها في تقويم رسم معروض ، مما يتيح لك اختيار أسبوع أو شهر واحد من السنة.
 يمثل Datatime-Local مجال إدخال التاريخ والوقت ، ولكن لا توجد إعدادات منطقة زمنية. يمكن تحديد بياناتها بطريقة مماثلة لعنصر إدخال الشهر أو الأسبوع ، ويمكن إدخال الوقت بمفرده.
 <Section> <h2> الأسبوع والشهر و DateTime-Local </h2> <form Action = Action_page.php> اختر أسبوعًا: <إدخال نوع = week name = year_week> <propt = submit> </form> <for action = Action_page.php> عيد ميلاد (الشهر والسنة): <type type = month name = bdaymonth> <input type = submit> </form> <form action = action_page.ph p> = dateTime-local name = bdaytime> <إدخال نوع = إرسال القيمة = إرسال> </form> </section>
 1. صورة الاستجابة
 يقدم W3C بعض الخصائص الوظيفية ، ويمكن تحقيق صورة الاستجابة دون استخدام CSS. هم ...
 سمة صورة SRCST
 تتيح لك سمة SRCSET تحديد مصادر صور اختيارية متعددة ، تقابل دقة بكسل مختلفة. سيسمح للمتصفح بعرض تطبيق الجودة المناسب وفقًا لأجهزة المستخدم المختلفة. على سبيل المثال ، من الأفضل عرض صورة منخفضة الدقة للمستخدمين الذين لديهم أجهزة محمولة بطيئة.
 يمكنك استخدام خاصية SRCSET وجلب رموز تعديل X الخاصة بها لوصف نسبة البكسل لكل صورة.
 <img src = clicks/low-res.jpg srcset = clicks/low-res.jpg 1x ، clicks/mediure-res.jpg 2x ، clicks/high-res.jpg 3x>
 بالإضافة إلى نسبة البكسل ، يمكنك أيضًا اختيار استخدام رمز التعديل W لتحديد صور بأحجام مختلفة. في المثال التالي ، يتم تعريف الصورة عالية الدقة على أنها شاشة عندما يكون العرض 1600 بكسل.
 <img src = clicks/low-res.jpg srcset = clicks/low-res.jpg 500w ، clicks/mediule-res.jpg 1000w ، clicks/high-res.jpg 1600w>
 أحجام سمة الصورة
 في معظم الوقت ، يحب المبدعون عرض صور مختلفة لحجم شاشة مختلف. يمكن تحقيق ذلك مع سمة الحجم. يتيح لك ضبط العرض لحجم المساحة الموزعة على عرض الصورة ، ثم استخدام خاصية SRCSET لتحديد الصورة المناسبة لعرضها. على سبيل المثال…
 <img src = نقرات/أحجام منخفضة الدقة. 1600W>
 هنا ، تحدد سمة الأحجام 100 ٪ من عرض الصورة للنافذة عندما تكون النافذة أكبر من 25 م ، أو 60 ٪ من عرض العرض للعرض عندما يكون أقل من 25 EM.
 عنصر الصورة
 يتيح لك عنصر الصورة إعلان الصور لحجم شاشة مختلف. يمكن تنفيذ ذلك عن طريق تغليف <img> بعنصر <Piction> ووصف عناصر <Source> الفرعية المتعددة.
 <piction> علامات وحدها لا تظهر أي شيء. لقد تم افتراض أن مصدر الصورة الافتراضي سيتم الإعلان عنه كقيمة سمة SRC ، وسيتم وضع مصدر الصورة الاختياري في سمة SCRST.
 <Piction> <Source Media = (Max-Width: 25em) SRCSET = نقرات/صغيرة/منخفضة. jpg 1x ، نقرات/صغيرة/متوسطة الدقة 2x ، Clices/Small/High-RES.JP > <source media = (max-width: 60em) srcset = نقرات/كبيرة/منخفضة res.jpg 1x ، نقرات/كبيرة/متوسطة rent.jpg 2x ، clices/كبيرة/عالية rent.jpg 3x> <img src = نقرات/افتراضي/متوسطة- res.jpg> </piction>
 لخص
 ما سبق هو جميع محتويات هذه المقالة.