مناقشة مختصرة حول العلامات الجديدة والمهجورة في HTML5

تم حذف عناصر HTML 4.01 التالية في HTML5، على الرغم من أن المتصفحات لا تزال تدعم هذه العلامات لأسباب تتعلق بالتوافق، فمن المستحسن استخدام علامات بديلة جديدة، ومن المفارقات أن المتصفحات القديمة لا تدعم العلامات الجديدة بشكل كافٍ اعتمادًا على المشروع الذي يعتمد على الجمهور.

تتضمن هذه العناصر الخط الأساسي، والكبير، والوسط، والخط، وs، والإضراب، وtt، وu. هذه العناصر مخصصة فقط لعرض الصفحة، ويجب إكمال المحتوى المعروض بواسطة CSS.

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

تتضمن هذه العناصر التطبيق الصغير و bgsound و blink و marquee والعلامات الأخرى.

إلغاء rb، استخدم روبي لاستبدال الاختصار، استخدم abbr لاستبدال الإلغاء dir، استخدم ul لاستبدال isindex، استخدم مزيجًا من النموذج والإدخال لاستبدال القائمة، استخدم pre لاستبدال xmp، استخدم الكود لاستبدال الإلغاء nextid، استخدم الأدلة الإرشادية لإلغاء plaintex، استخدم text/ استبدال نوع MIME (نص غير منسق).

في HTML4.01، يتم استخدام div على نطاق واسع في بيئات التخطيط المختلفة دون تعريف واضح لدلالات div لتحسين محركات البحث، وتكون العلامات الهيكلية المضافة حديثًا كما يلي:

أ)، يمثل عنصر القسم كتلة محتوى في الصفحة، مثل فصل أو رأس أو تذييل أو جزء آخر من الصفحة. ويمكن استخدامه مع h1، h2... وعناصر أخرى لتمثيل بنية الوثيقة. مثال: <section>……</section> في HTML5؛ <div>……</div> في HTML4.

ب) يمثل عنصر المقالة جزءًا من محتوى مستقل على الصفحة لا علاقة له بالسياق. على سبيل المثال، مقال.

ج) يمثل العنصر الجانبي معلومات مساعدة تتعلق بمحتوى عنصر المقالة بخلاف محتوى عنصر المقالة.

د) يمثل عنصر الرأس كتلة محتوى في الصفحة أو عنوان الصفحة بأكملها.

هـ). يمثل عنصر hgroup مجموعة من عناوين الصفحة بأكملها أو كتلة محتوى في الصفحة.

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

ز). يمثل عنصر التنقل جزء رابط التنقل في الصفحة.

ح) يمثل عنصر الشكل جزءًا مستقلاً من محتوى التدفق، ويمثل عمومًا وحدة مستقلة في محتوى التدفق الرئيسي للمستند. استخدم عنصرFigcaption لإضافة تعليق إلى مجموعة من عناصر الشكل. على سبيل المثال:

 <figure> ​<figcaption>جمهورية الصين الشعبية</figcaption> ​<p>ولدت جمهورية الصين الشعبية في عام 1949</p></figure>

الكتابة الشائعة في HTML4

 <dl> ​<h1>جمهورية الصين الشعبية</h1> ​<p>ولدت جمهورية الصين الشعبية عام 1949</p> ​</dl>

نتائج التشغيل:

2.1 متر

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

 <متر الحد الأقصى=100 دقيقة=0 القيمة=60 النمط=العرض: 300px;></meter>

يمكنك استخدام js للتحكم فيه من 0 إلى 100.

وقت. يمثل قيمة الوقت. تؤكد السمة datetime على وقت المؤتمر: <time>2015-10-6</time>

 <الوقت>2015-10-6</time>

نبدأ الدرس كل صباح في <time>8:30</time>. لدي موعد في <time datetime=2017-02-14>عيد الحب</time>.

نظرًا لأن هذه العلامة عبارة عن علامة دلالية، فليس لها أي تأثير خاص عند عرضها في المتصفح، فهي في الأساس نفس التأثير كما لو لم يتم تعيين العلامة.

يستخدم لتمثيل شريط التقدم

 <h3>التقدم</h3><قيمة التقدم=75 كحد أقصى=100></progress>

الحد الأقصى: القيمة القصوى، القيمة عند الانتهاء

القيمة: القيمة الحالية

تحدد هذه العلامة قائمة بالبيانات الاختيارية. عند استخدامه مع عنصر الإدخال، يمكنك إنشاء قائمة منسدلة لقيم الإدخال.

عند دمجها مع الإدخال، يمكن إكمال كل من التحديد والإدخال.

 <نوع الإدخال=قائمة النص=الدول /><معرف قاعدة البيانات=الدول> <قيمة الخيار=الصين></option> <قيمة الخيار=الولايات المتحدة></option> <قيمة الخيار=اليابان></option></datalist >

يتم استخدامه بشكل أساسي لتقديم النص الذي يحتاج إلى إبرازه أو إبرازه بشكل مرئي للمستخدم. يتم تمييز كلمات البحث الأساسية في نتائج بحث التطبيقات النموذجية. HTML5<mark></mark>;HTML4 <span></span>.

تعريف تعليقات روبي (بينيين صيني أو أحرف). يُستخدم مع علامتي <Ruby> و<rt>. يتكون عنصر روبي من حرف واحد أو أكثر (يتطلب شرحًا/نطقًا)، وعنصر rt الذي يوفر تلك المعلومات، وعنصر rp اختياري يحدد المحتوى الذي سيتم عرضه عندما لا يدعم المتصفح عنصر روبي.

يحدد تفسير أو نطق حرف (صوتي أو حرف صوتي صيني).

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

يمثل فاصل سطر ناعم. الفرق مع العنصر br: يشير العنصر br إلى أنه يجب عمل فاصل أسطر هنا، ويشير wbr إلى أنه عندما تكون نافذة المتصفح أو العنصر الأصلي واسعة (عندما لا تكون هناك حاجة لفاصل أسطر)، فلن يكون السطر متاحًا. مكسور، ولكن عندما لا يكون العرض كافيًا، سيتم لف الخط تلقائيًا هنا.

تحديد الرسومات، مثل المخططات والصور الأخرى. العنصر <canvas> هو مجرد حاوية رسومات (قماش)، ويجب عليك استخدام البرامج النصية لرسم الرسومات.

 <canvas id=myCanvas></canvas><script type=text/javascript> var Canvas = document.getElementById('myCanvas'); var ctx = Canvas.getContext('2d'); ctx.fillRect(0, 0, 80, 100);</script>

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

 <menu> ​<command onclick=alert('Hello World')> ​انقر فوقي!</command> ​</menu>

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

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

تحديد أنواع مختلفة من المخرجات، مثل مخرجات البرنامج النصي.

 <form action=form_action.asp Method=get name=sumform> ​<output name=sum></output> ​</form>

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

إذا كنت بحاجة إلى تشغيل الصوت والفيديو على الصفحة، فإن الطرق التي نستخدمها غالبًا هي:

أ) 、 تضمين

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf'allowFullScreen='true' الجودة='عالية' العرض='480' الارتفاع='400' محاذاة=' middle'allowScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

ب) استخدم مشغل الفلاش

مثل بعض المكونات الإضافية التابعة لجهات خارجية،flowplayer602

تشير مكونات الوسائط المتعددة بتنسيق HTML5 إلى مكونات الفيديو (الفيديو) ومكونات الصوت (الصوت). يمكن لمكونات الوسائط المتعددة بتنسيق HTML5 تضمين مكونات الوسائط المتعددة مباشرة على صفحات الويب الخاصة بك دون مساعدة المكونات الإضافية التابعة لجهات خارجية مثل Flash Player. إن القدرة الجديدة للمتصفحات على تقديم الدعم الأصلي للفيديو تسهل على مطوري الويب إضافة مكونات الفيديو إلى مواقعهم على الويب دون الاعتماد على توفر المكونات الإضافية الخارجية. نظرًا للقيود المفروضة على تقنية Flash التي تستخدمها Apple حاليًا على أجهزة iPhone وiPad، فإن إمكانيات مكونات الوسائط المتعددة بتنسيق HTML5 لها أهمية خاصة.

تستخدم لتشغيل مقاطع الفيديو والأفلام

الصيغة الأساسية للملصق هي كما يلي:

 <عرض الفيديو=800 ارتفاع=600 عناصر تحكم=ملصق عناصر التحكم=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <عرض الكائن= الارتفاع= النوع=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> المتصفح الحالي لا يدعم التشغيل المباشر للفيديو. انقر هنا لتنزيل الفيديو: <a href=a.mp4>تنزيل فيديو</a></video>

المصدر هو مصدر الفيديو، والذي يمكن أن يكون من أنواع متعددة، وعندما يفشل أحد هذه الأنواع، سيتم تحديد النوع التالي. وهناك ثلاثة أنواع رئيسية:

Ogg = ملف Ogg مع تشفير فيديو Theora وترميز الصوت Vorbis MPEG4 = ملف MPEG 4 مع تشفير الفيديو H.264 وترميز الصوت AAC WebM = ملف WebM مع تشفير الفيديو VP8 وترميز الصوت Vorbis

يلاحظ:

 <video src=img/a.mp4 controls=controls Poster=img/1.jpg>متصفحك قديم جدًا، يرجى الترقية، تنزيل الفيديو <a href=#>العنوان</a></video>

محتوى HTML الداخلي لمعظم علامات HTML5 هو المحتوى الذي يتم عرضه عندما لا يدعم المتصفح العلامة.

الفرق بين ربط الحدث والاستماع:

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>الفرق بين ربط الأحداث ومراقبتها</title> </head>​ <body> <button id=btnA>الزر A </button> <button id=btnB>الزر B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { تنبيه (لقد نقرت)؛ } btnA.onclick = function() { تنبيه (لقد نقرت مرة أخرى } btnB.addEventListener(click, function(event)); { تنبيه (لقد نقرت }، خطأ) btnB.addEventListener(click,function(event){; تنبيه (لقد نقرت مرة أخرى }، خطأ) </script> </body>​</html>);

بعد ربط حدث باستخدام اسم الحدث، سيحل الربط محل الحدث المرتبط مسبقًا، أي أن آخر حدث مرتبط سيصبح ساري المفعول؛

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

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>علامة الفيديو</title> </head> <body> <video id=videoIce width=800 height=600 controls=controls Poster =content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <عرض الكائن= الارتفاع= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> المتصفح الحالي لا يدعم التشغيل المباشر للفيديو. انقر هنا لتنزيل الفيديو: <a href=content/a.mp4>تنزيل الفيديو</a> </video> <h2> <button onclick=play()>تشغيل</button> <button onclick=pause()>إيقاف مؤقت</button> <span id=msg></span> </h2> <نوع البرنامج النصي =text/javascript> var videoIce=document.getElementById(videoIce); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime } </script> </body>​</html>

يمكن للصوت أن يدرك وظيفة تشغيل الصوت والموسيقى.

 <audio src=http://baidu/demo/test.mp3 controls >متصفحك لا يدعم عنصر الصوت</autio><audio src=content/a.mp3 controls=controls autoplay=autoplay></audio>

العديد من سمات علامة الصوت هي نفس سمات الفيديو:

التشغيل التلقائي: صحيح|خطأ، إذا كان صحيحًا، فسيتم تشغيل الصوت بمجرد أن يصبح جاهزًا. عناصر التحكم: true|false إذا كان صحيحًا، فسيتم عرض عناصر التحكم، مثل زر التشغيل، للمستخدم. النهاية: تحدد القيمة الرقمية المكان الذي يتوقف فيه المشغل عن التشغيل في البث الصوتي. افتراضيًا، سيتم تشغيل الصوت حتى النهاية. حلقة: تحدد القيمة الرقمية الموضع الذي يتوقف عنده تشغيل الحلقة في دفق الصوت. القيمة الافتراضية هي قيمة سمة النهاية. Loopstart: تحدد القيمة الرقمية موضع البداية لتشغيل الحلقة في دفق الصوت. القيمة الافتراضية هي قيمة سمة البداية. عدد مرات التشغيل: تحدد القيمة الرقمية عدد مرات تشغيل المقطع الصوتي. الافتراضي هو 1. src: url عنوان url للصوت الذي يتم تشغيله. البداية : تحدد القيمة الرقمية الموضع في البث الصوتي حيث يبدأ المشغل بالتشغيل. افتراضيًا، يتم تشغيل الصوت في البداية.

مثال على استخدام العنصر المصدر كعلامة فرعية لعنصر الوسائط المتعددة:

 <audio>​<source src='test.mp3 ' type='audio/mpeg'/>​<source src='test.ogg ' type='audio/ogg'/>​<source src='test.spx ' type='audio/ogg'/>​</audio>

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

واجهة برمجة التطبيقات للصوت هي في الأساس نفس واجهة الفيديو فيما يلي مثال لتخصيص مستوى الصوت:

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>علامة الصوت</title> </head> <body> <h2>علامة الصوت</h2> <audio src=content/ fcml.mp3 الضوابط=controls autoplay=autoplay id=mp3> <marquee><h2>تغيير المتصفح فهو قديم جدا</h2></marquee> </audio> <نوع الإدخال=النطاق الأدنى=0 الحد الأقصى=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01 } < / سكريبت> </body></html>

الحجم فقط بين 0-1.

يستخدم لتضمين المحتوى (بما في ذلك الوسائط المختلفة). يمكن أن يكون التنسيق Midi، وWav، وAIFF، وAU، وMP3، وflash، وما إلى ذلك.

مثال: <embed src=flash.swf /> مثال للتعليمات البرمجية في HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.