التعليق: HTML5 لديه العديد من الميزات الجديدة. رمز جديد. جيد جدًا. دعنا نلخصها الآن. للرجوع فقط
1. New Doctypeحتى إذا لم يفهم المتصفح هذه الجملة ، فسيتم تقديمه وفقًا للوضع القياسي.
2. عناصر الشكل
استخدم <gient> و <figcaption> لتمثيل الصور بشكل دلالي مع العناوين
<GINGE>
<img src = path/to/image alt = about image/>
<figcaption>
<p> هذه صورة لشيء مثير للاهتمام. </p>
</figcaption>
</figure>
3. إعادة تعريف <small>
تم إعادة تعريف <small> ويستخدم الآن لتمثيل أنواع صغيرة من الأنواع ، مثل إشعار حقوق الطبع والنشر في أسفل الموقع
4. قم بإزالة سمات النوع في علامات الرابط والبرنامج النصي
5. إضافة/لا أقواس
لا يتطلب HTML5 أن يتم نقل السمات ، وإغلاقها أم لا ، ولكن يوصى بإضافة علامات اقتباس وعلامات مغلقة.
6. اجعل المحتوى الخاص بك قابل للتحرير ، فقط أضف خاصية قابلة للضمن
7. مدخلات البريد الإلكتروني
إذا قمنا بتعيين نوع الإدخال على البريد الإلكتروني ، فسيتحقق المتصفح ما إذا كان الإدخال هو نوع البريد الإلكتروني. بالطبع ، لا يمكننا الاعتماد فقط على التحقق من الواجهة الأمامية ، ويجب أن يكون الواجهة الخلفية أيضًا التحقق المقابل.
8
معنى سمة الإدخال هذه هو أنه لا توجد حاجة لاستخدام JavaScript لإنشاء تأثير العنصر النائب
9. التخزين المحلي
استخدم سعة التخزين المحلية لتخزين شظايا بيانات كبيرة بشكل دائم على العميل (ما لم يتم حذفها بنشاط). حاليا ، معظم المتصفحات دعمتهم بالفعل. يمكنك التحقق مما إذا كان Window.localStorage موجود قبل استخدامها.
10. رأس دلالي وتذييل
11. المزيد من ميزات نموذج HTML5
12. أي و HTML5
بشكل افتراضي ، يتم تقديم عناصر HTML5 الجديدة المضمونة ، ولكن يمكن استخدام الطريقة التالية للعمل
يتم تقديمه في وضع الكتلة
رأس ، تذييل ، مقال ، قسم ، قائم ، القائمة ، hgroup {
العرض: كتلة ؛
}
لسوء الحظ ، يتجاهل أي أن الأساليب ، ويمكنه إصلاح مثل هذا:
document.createElement (المادة) ؛
document.createElement (تذييل) ؛
document.createElement (header) ؛
document.createElement (hgroup) ؛
document.createElement (NAV) ؛
document.createElement (قائمة) ؛
13. Hgroup
عادة ما يتم استخدامه لدمج مجموعة من العناوين في الرأس ، مثل
<header>
<hgroup>
<h1> استدعاء صفحة المروحة </h1>
<h2> فقط للأشخاص الذين يريدون ذكرى العمر. </h2>
</hgroup>
</header>
14. السمة المطلوبة
تحدد الخاصية المطلوبة ما إذا كان الإدخال مطلوبًا ، يمكنك إعلانه كما هو موضح أدناه
<نوع الإدخال = اسم النص = Someinput مطلوب>
أو
<نوع الإدخال = اسم النص = someinput مطلوب = مطلوب>
15. خصائص التركيز التلقائي
تماما مثل معناها ، هو التركيز على مربع الإدخال
<نوع الإدخال = اسم النص = someinput leacholder = douglas quaid مطلوب تلقائي تلقائي
16. دعم الصوت
يوفر HTML5 علامات <Oudio> ، لم تعد بحاجة إلى تقديم الصوت وفقًا للمكونات الإضافية لجهة خارجية. توفر معظم المتصفحات الحديثة دعمًا لصوت HTML5 ، لكنها لا تزال بحاجة إلى توفير بعض معالجة التوافق ، مثل
<Audio Autoplay = Autoplay Controls = Controls>
<المصدر src = file.ogg /> <! - ff–>
<المصدر src = file.mp3 ″ /> <! - WebKit–>
<a href = file.mp3 ″> قم بتنزيل هذا الملف. </a>
</audio>
17. دعم الفيديو
يشبه إلى حد كبير الصوت ، توفر علامة <video> الدعم للفيديو. نظرًا لأن مستند HTML5 لا يحدد ترميزًا محددًا للفيديو ، فإن المتصفح يقرر الترميز الذي يدعمه ، مما يؤدي إلى الكثير من التناقضات. تدعم Safari و IE تنسيقات الترميز H.264 ، ودعم Firefox و Opera تنسيقات ترميز Theora و Vorbis. عند استخدام فيديو HTML5 ، يجب عليك توفير:
<فيديو تحكم preload>
<المصدر src = cohagenphonecall.ogv type = video/ogg ؛ برامج الترميز = 'vorbis ، Theora' />
<source src = cohagenphonecall.mp4 ″ type = video/mp4 ؛ 'codecs =' avc1.42e01e ، mp4a.40.2 ' />
<p> متصفحك قديم. <a href = cohagenphonecall.mp4 ″> قم بتنزيل هذا الفيديو بدلاً من ذلك. </a> </p>
</video>
18. فيديو التحميل المسبق
إن خاصية التحميل المسبقة بسيطة بقدر ما تعني حرفيًا ، وعليك أن تقرر ما إذا كنت بحاجة إلى تحميل الفيديو قبل التحميل
<video preload>
19. عرض التحكم في الفيديو
<فيديو تحكم مسبق>
20. تعبيرات منتظمة
نظرًا لسمة النمط ، يمكننا استخدام التعبيرات العادية مباشرة في الترميز الخاص بك
<form action = method = post>
<label for = username> إنشاء اسم مستخدم: </label>
<type type = text name = username id = username leacholder = 4 <> 10 ″ pattern = [a-za-z] {4،10} مطلوب ضبط تلقائي
<button type = submit> go </utron>
</form>
21. دعم السمة الكشف
بالإضافة إلى Modernizr ، يمكننا أيضًا استخدام JavaScript لاكتشاف ما إذا كانت بعض الخصائص مدعومة ، مثل:
<script>
if (! "نمط" في المستند.
// قم بالتحقق من صحة جانب العميل/الخادم
}
</script>
22. مارك عناصر
النظر في عنصر <Mark> على أنه تسليط الضوء. عندما أختار فقرة نصية ، يجب أن يكون تأثير ترميز JavaScript على HTML كما يلي:
<h3> نتائج البحث </h3>
<p> تمت مقاطعة ، بعد أن قال Quato ، <mark> افتح عقلك </mark>. </p>
23. متى يجب استخدام <viv>
قدم HTML5 الكثير من العناصر ، فهل ما زلنا بحاجة إلى استخدام Div؟ يمكنك استخدام Div عندما لا تكون هناك عناصر أفضل.
24. هل تريد استخدام HTML5 الآن؟
لا تنتظر عام 2022 ، فهي جاهزة للاستخدام الآن ، فقط قم بذلك.
25. ما ليس HTML5
1) SVG
2) CSS3
3) تحديد الموقع الجغرافي
4) تخزين العميل
5) مآخذ الويب
26. خصائص البيانات
<div id = myDiv data-custom-attr = قيمتي> bla bla </div>
تستخدم في CSS:
<style>
H1: Hover: After {
المحتوى: ATTR (استجابة البيانات) ؛
اللون: أسود.
الموقف: مطلق ؛
اليسار: 0 ؛
}
</style>
<h1-hover-response = قلت لا تلمسني!> لا تلمسني </h1>
27. عنصر الإخراج
يتم استخدام عنصر <Tupcit> لعرض نتائج الحساب ، كما أنه يحتوي على سمة مثل التسمية.
28. استخدم إدخال المدى لإنشاء المتزلجون
يمكن لنوع النطاق المشار إليه من قبل HTML5 إنشاء منزلق ، يقبل خصائص Min و Max و Step و Value
يمكنك استخدام CSS: قبل و: بعد عرض قيم Min و Max
<type type = range name = range min = 0 ″ max = 10 ″ step = 1 ″ value =>
الإدخال [type = range]: قبل {content: attr (min) ؛ حشو اليمين: 5px ؛
}
الإدخال [type = range]: بعد {content: attr (max) ؛ حشو اليسار: 5px ؛}