ميزات جديدة من HTML5 ضرورية للمقابلة الأمامية

ما هو HTML5: HTML5 هو الجيل التالي من HTML ، والذي سيصبح معايير جديدة لـ HTML و XHTML و HTML DOM. اليوم ، دعنا نتحدث عن سؤال سيتم طرحه في كل مرة تكون فيها مقابلة الأمامية ، وهي الميزة الجديدة لـ HTML5. هذه هي المعرفة الأساسية التي يجب إتقانها في الواجهة الأمامية للتعلم.

يضيف HTML5 بعض عناصر التسمية الدلالية الأفضل.

1. يمثل عنصر المقال محتوى مستقلًا غير مرتبط بالسياق ، مثل مقال في المدونة.
2. يمثل العنصر جانباً محتوى غير محتوى المقالة والمعلومات المساعدة.
3. يمثل عنصر الرأس كتلة محتوى أو رأس الصفحة بأكملها في الصفحة.
4. يتم استخدام عنصر HGROUP لدمج عنوان كتلة أو الصفحة بأكملها في الصفحة.
5. يشير عنصر تذييل إلى كتلة محتوى أو صفحة كاملة في الصفحة.
6. يمثل عنصر الشكل تجميع محتوى الوسائط وعنوانها.
7. يمثل عنصر القسم كتلة محتوى في الصفحة ، مثل الفصول.
8. تشير عناصر NAV إلى رابط التنقل في الصفحة.

1. يستخدم عنصر الفيديو لتحديد الفيديو.
2. يتم استخدام عنصر الصوت لتحديد الصوت.
3. يتم استخدام عنصر القماش لعرض الرسومات ، والتي لا يوجد بها سلوك وحد ذاته قطعة واحدة فقط من القماش.
4. تُستخدم عناصر التضمين لإدخال مختلف الوسائط المتعددة.
5. يستخدم عنصر علامة لإظهار النقاط البارزة.
6. يتم استخدام عنصر التقدم لإظهار تقدم أي نوع من المهام.
7. تشير عناصر العداد إلى تدابير وتحديد القياس ضمن النطاق المحدد مسبقًا.
8. يتم استخدام عنصر الوقت لعرض التاريخ أو الوقت.
9. عنصر الأوامر ، يشير إلى زر الأمر.
10. يتم استخدام عناصر التفاصيل لإظهار معلومات التفاصيل التي يتطلبها المستخدم ويمكن الحصول عليها.
11. يتم استخدام العنصر الموجز لتحديد العناوين المرئية للحصول على عناصر التفاصيل.
12. يتم استخدام عنصر Datalist لعرض قوائم بيانات اختيارية.
13. يتم استخدام عنصر DataGrid أيضًا لعرض قائمة البيانات الاختيارية ، والتي يتم عرضها في شكل قائمة شجرة.
14. يشير عنصر Keygen إلى مفتاح لتوليده.
15. تشير عناصر الإخراج إلى أنواع مختلفة من الإخراج.
16. تحدد عناصر المصدر موارد الوسائط للعناصر الإعلامية.
17. يشير عنصر القائمة إلى قائمة القائمة.
18. يمثل Ruby Element تعليقات Ruby ، ​​وعناصر RT تمثل تفسير أو نطق الأحرف. يتم استخدام عنصر RP في ملاحظات Ruby لتحديد المحتوى المعروض بواسطة المتصفح الذي لا يدعم عناصر Ruby.
19. تشير عناصر WBR إلى التبديل الناعم. الفرق من عنصر BR هو أن عنصر BR يعني أن عنصر WBR يعني عرض نافذة المتصفح أو العنصر الوالد. لا تقم بتغيير الخط ، وعندما لا يكون العرض كافيًا ، خذ زمام المبادرة لتغيير البنك.
20. تحدد عناصر BDI اتجاه النص للنص ، بحيث يتم إيقاف تشغيله من اتجاه النص المحيط به.
21. يشير عنصر الحوار إلى مربع الحوار أو النافذة.

يتم إلغاء بعض عناصر التعبير البحتة في HTML5.

عناصر التعبير النقي هي تلك العناصر التي يمكن استبدالها بـ CSS. BASEFONT ، BIG ، CENTER ، S ، Strike ، TT ، U ، يتم عرض وظائفها لعرض الصفحة.

بالنسبة لعناصر Termset ، وعناصر الإطار ، وعناصر Noframes ، لأن إطار الإطار له تأثير سلبي على توافر الويب ، لم يعد إطار الإطار مدعومًا في HTML5 ، ويؤيد فقط إطار IFRAME.

بالنسبة إلى Applet و BgSound و Blink و Marquee وغيرها من العناصر ، لأن بعض دعم المستعرضات فقط ، وخاصة عناصر BgSound وعناصر السرادق يتم دعمها فقط من قبل IE ، يتم إلغاؤها في HTML5. يمكن استبدال عناصر Applet بعناصر مضمنة أو عناصر الكائنات ، ويمكن استبدال عناصر BGSound بعنصر صوتي ، ويمكن استبدال MARQUEE ببرمجة JavaScript.

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

استخدم Canvas API لرسم سياق عنصر القماش أولاً ، ثم استخدم وظائف الرسم المختلفة المغطاة في السياق للرسم.

 <canvas id = canvas> محتوى بديل < /canvas> var canvas = document.getElementBy (canvas) ؛ / يوضح الممارسة أن السياق الأسود العظيم (0 ، 0 ، 100 ، 100) ؛

SVG هي وظيفة رسومات أخرى من HTML5. يقدم HTML5 SVG الاتحاد الداخلي بحيث يمكن أن تظهر عناصر SVG مباشرة في علامة HTML.

 <svg height = 100 width = 100> <circle cx = 50 cy = 50 r = 50 /svg>

جعل ظهور عناصر الصوت والفيديو تطبيقات وسائط HTML5 أكثر خيارات جديدة. بالنسبة لهذين العنصرين ، توفر مواصفات HTML5 واجهة برمجة تطبيقات عامة وكاملة ونصية تسيطر عليها.

قبل ظهور مواصفات HTML5 ، تتمثل الطريقة المعتادة لتشغيل مقاطع الفيديو على الصفحة في استخدام Flash أو QuickTime أو Windows Media لتضمين الصوت والفيديو في HTML. العلامات.

1. نظرًا لأن وظيفة الدعم الأصلي للمستعرض ، لا تحتاج إلى تثبيت عناصر الصوت والفيديو الجديدة.
2. تريد عناصر الوسائط أن توفر صفحة الويب واجهات برمجة التطبيقات العالمية والمتكاملة والسيناريو.

 <video src = video.webm controls> <data object = videoPlayer.swf type = application /x-shockwave-flash> <param name = viold value = video.swf /> </bomb> لا يدعم متصفحك الفيديو html5. </video>

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

 var hasvideo = !!

يمكن لـ HTML5 GeoCocation API (API الجغرافي) أن تطلب من المستخدمين مشاركة موقفهم. طريقة الاستخدام بسيطة للغاية. . تتكون معلومات الموقع من خطوط الطول ، وإحداثيات الطول وبعض البيانات الوصفية الأخرى.

لا تحدد GeoLocation API أي تقنية أساسية لاستخدام المستخدم لتحديد تطبيق التطبيق. بدلاً من ذلك ، يتم استخدامه فقط لاسترداد API لمعلومات الموقع ، والبيانات التي تم استردادها من خلال واجهة برمجة التطبيقات فقط لها درجة معينة من الدقة ، ولا يمكن أن تضمن أن موقع إرجاع الجهاز دقيق. يمكن للجهاز استخدام مصدر البيانات التالي:

1. عنوان IP

   إحداثيات ثلاثة أبعاد

   GPS

   عناوين MAC من RFID و WiFi و Bluetooth إلى WiFi

2. معرف هاتف GSM أو CDMA
3. بيانات مخصصة للمستخدم

 // update navigator.geolocation. // دقة var timestamp = position.coords.timestamp ؛ تحديث الموقع navigator.geolocation.clearwatch (WatchId) ؛

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

يتم تقديم ميزة جديدة في HTML5 ، واتصالات الرسائل المتقاطعة ، والتي يمكن أن تضمن أن يتم تنفيذ صفحات IFRAME ، وعلامة التبويب ، والنوافذ بأمان. API Postmessage هي الطريقة القياسية لإرسال الرسائل.

 window.postmessage ('Hello ، World' ، 'http://www.example.com/') ؛

عند تلقي الرسالة ، تحتاج فقط إلى إضافة وظيفة معالجة الأحداث إلى الصفحة. عند وصول رسالة ، يتم تحديد مصدر الرسالة لتحديد ما إذا كان سيتم التعامل مع الرسالة.

 window.addeventListener (MessageHandler ، True) ؛ T التعرف // يتم تجاهل الرسالة}}

حدث الرسالة هو حدث DOM مع بيانات البيانات (البيانات) وسمات الأصل. سمة البيانات هي الرسالة الفعلية التي يمررها المرسل ، وسمة الأصل هي مصدر الإرسال.

XMLHTTPREQUEST API يجعل تقنية AJAX ممكنة. هناك جانبان رئيسيان:

1. الصليب -source xmlhttprequest
2. تقدم

في الماضي ، اقتصر XMLHTTPrequest على التواصل المتماثل ، وأدركت XMLHTTPREQUEST المستوى 2 XMLHTTPREQUEST عبر الوطنية من خلال CORS. يحتوي طلب HTTP عبر source على رأس منشأ ، والذي يوفر للخادم معلومات مصدر طلبات HTTP.

WebSockets هي أقوى وظيفة اتصال في HTML5.

من أجل إنشاء اتصال WebSockets ، يقوم العميل والخادم بترقية بروتوكول HTTP إلى بروتوكول WebSocket عند مصافحة. بمجرد إنشاء الاتصال بنجاح ، يمكننا تمرير رسالة WebSocket ذهابًا وإيابًا بين العميل والخادم أسفل وضع التشغيل المزدوج الكامل.

بالإضافة إلى تعريف بروتوكول WebSockets ، تحدد المواصفات أيضًا واجهة WebSocket لتطبيق JavaScript. استخدام واجهة WebSockets بسيطة للغاية. لتوصيل المضيف عن بُعد ، تحتاج فقط إلى إنشاء مثيل WebSocket جديد لتوفير زوج من عناوين URL التي تأمل في الاتصال.

1. عنصر Tel ، يشير إلى رقم الهاتف.
2. يشير عنصر البريد الإلكتروني إلى مربع نص عنوان البريد الإلكتروني.
3. يشير عنصر URL إلى عنوان URL لصفحة الويب.
4. عنصر البحث ، لمحركات البحث ، مثل مربع البحث المعروض في الجزء العلوي من الموقع.
5. عنصر النطاق ، المحدد العددي في نطاق معين ، الشاشة النموذجية هي قضبان انزلاق.
6. يحتوي عنصر الأرقام على حقول القيم فقط.

1. عنصر اللون ، محدد الألوان ، استنادًا إلى لوحة الألوان أو لوحة التلوين للاختيار.
2. يعرض عنصر DateTime التاريخ والوقت الكامل ، بما في ذلك المنطقة الزمنية.
3. DateTime-Local ، تاريخ العرض والوقت.
4. عنصر الوقت ، محدد الوقت ومؤشر المنطقة الزمنية.
5. عنصر التاريخ ، محدد التاريخ.
6. عنصر الأسبوع ، الاختيار الأسبوعي في سنة معينة.
7. عنصر الشهر ، محدد شهري في سنة معينة.

عندما لا يكون للمستخدم قيمة الإدخال ، يمكن للتحكم في الإدخال عرض وصف وصفي أو معلومات موجهة للمستخدم من خلال ميزة العنصر النائب.

 <اسم الإدخال = الاسم النائب = الاسم الأول والأخير>

يمكن للمتصفح معرفة ما إذا كان ينبغي الحفاظ على قيمة الإدخال من خلال الإكمال التلقائي.

من خلال خصائص التركيز التلقائي ، يمكنك تحديد عنصر الجدول للحصول على تركيز إدخال واحد فقط في كل صفحة.

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

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

 <datalist id = contactlist> <orpue [email protected]> </portion> <Option [email protected]> </potion> </tawalist> <input type = email id = contact = contact>

من خلال إعداد ميزات MIN و MAX ، يمكن أن يكون نطاق إدخال القيمة لمربع إدخال النطاق محدودًا بين الحد الأدنى وأعلى قيمة. يمكنك تعيين واحد أو اثنين فقط أو اثنين ، أو لا يمكنك تعيينه.

بالنسبة لعناصر التحكم من نوع الإدخال ، يمكن أن يحدد تحديد خصائص خطوته الحبيبية لزيادة أو انخفاض قيمة الإدخال.

بمجرد تعيين الميزة المطلوبة لعنصر تحكم من نوع الإدخال ، يجب ملء هذا العنصر ، وإلا لا يمكن تقديم النموذج.

إذا كان العنصر القابل للسحب لعنصر الويب صحيحًا ، فيمكن سحب هذا العنصر.

 <div draggable = true> divable div </iv>

ستؤدي عملية السحب إلى الكثير من الأحداث ، وخاصة في ما يلي:

1. DragStart: يتم تشغيل عنصر صفحة الويب عند السحب.
2. السحب: لا يزال يتم تشغيل العنصر السحب أثناء السحب.
3. Dragenter: عندما يتم تشغيل عنصر السحب عند إدخال العنصر المستهدف ، يجب الاستماع إلى الحدث إلى العنصر المستهدف.
4. DragLeave: عندما يتم تشغيل العنصر السحب ، يجب الاستماع إلى الحدث إلى عنصر الكائن.
5. Dragover: المشغلات المستمرة عندما يبقى عنصر السحب في العنصر الهدف ، ويجب الاستماع إلى الحدث إلى العنصر المستهدف.
6. DRAP: اسحب العنصر أو الملف المحدد من نظام الملفات ، يطلق عند السحب والسقوط.
7. Dragend: يتم تشغيل عنصر صفحة الويب في النهاية.

 draggableement.addeventListener ('DragStart' ، function (e) {console.log ('drag start!) ؛}) ؛

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

 draggablement.addeventListener ('DragStart' ، function (event) {event.datatransfer.setData ('text' ، 'hello world!') ؛}) ؛

1. Dropeffect: يحدد نوع عملية السحب والإسقاط كيف يعرض المتصفح شكل الماوس.
2. Infaftalowed: تحديد العمليات المسموح بها ، والقيم المحتملة هي النسخ ، الحركة ، الارتباط ، Copylink ، Copymove ، LinkMove ، All ، None ، وغير معادلة (القيمة الافتراضية مكافئة للجميع ، أي السماح لجميع العمليات).
3. الملفات: يحتوي على كائن FileList ، يشير إلى الملف المتورط في السحب والإفلات ، والذي يتم استخدامه بشكل أساسي لمعالجة الملفات التي تم سحبها إلى المتصفح من نظام الملفات.
4. الأنواع: نوع البيانات المخزنة في كائن DataTransfer.

1. setData (التنسيق ، البيانات): تخزين البيانات على كائن DataTransfer. يتم استخدام تنسيق المعلمة الأول لتحديد نوع بيانات التخزين ، مثل النص ، URL ، النص/HTML ، إلخ.
2. getData (التنسيق): خذ البيانات من كائن datatransfer.
3. ClearData (التنسيق): قم بمسح البيانات المخزنة بواسطة كائن DataTransfer. إذا تم تحديد معلمة التنسيق ، فسيتم مسح بيانات التنسيق فقط ، وإلا يتم إزالة جميع البيانات.
4. SetDragImage (Imagelement ، X ، Y): حدد الصورة المعروضة أثناء عملية السحب. بشكل افتراضي ، تعرض العديد من المتصفحات نسخة شبه شفافة من عنصر السحب. يجب أن يكون Imgelement المعلمة عنصر صورة ، وليس مسار الصورة ، والمعلمة X و Y تشير إلى موضع الصورة للماوس.

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

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

تخزين الويب هو ميزة مهمة للغاية التي تم تقديمها بواسطة HTML5.

SessionStorage يحفظ البيانات في الجلسة ، ويغلق المتصفح البيانات للاختفاء.

قام LocalStorage دائمًا بحفظ البيانات على العميل ، ما لم يتم حذفها يدويًا ، فسيتم الاحتفاظ بها.

سواء كان SessionStorage ، أو LocalStorage ، فإن واجهة برمجة التطبيقات التي يمكن استخدامها هي نفسها.

1. حفظ البيانات: localstorage.setitem (المفتاح ، القيمة) ؛
2. قراءة البيانات: LocalStorage.getItem (KEY) ؛
3. حذف بيانات واحدة: LocalStorage.RemoveItem (مفتاح) ؛
4. حذف جميع البيانات: localstorage.clear () ؛
5. مفتاح الحصول على فهرس معين: localstorage.key (index) ؛

ما سبق هو كل محتويات هذه المقالة.