يتحدث الفصل أعلاه عن المهارات السبعة الأولى لـ HTML5 ، والآن دعونا نتعلم مهارات جديدة.
8
في السابق ، كنا بحاجة إلى استخدام JavaScript لإنشاء أصحاب نائبة لصناديق النص. يمكنك في البداية تعيين سمة القيمة لمعرفة ما إذا كان ذلك مناسبًا ، ولكن طالما أن المستخدم يحذف النص ، سيصبح محتوى الإدخال فارغًا مرة أخرى. سمة العنصر النائب تعوض بشكل فعال لهذا.
<اسم الإدخال = نوع البريد الإلكتروني = البريد الإلكتروني لضايق الضعف[email protected] />
9. التخزين المحلي
بفضل التخزين المحلي لـ HTML5 ، يمكننا أن ندع المتصفحات المتقدمة تتذكر ما أدخلناه ، وحتى إذا كان المتصفح مغلقًا أو تم تحديثه لاحقًا ، فلن يتأثر ذلك. على الرغم من أن جميع المتصفحات لا تدعمها ، فإن أهم Internet Explorer 8 ، Safari 4 ، Firefox 3.5.
10. رأس دلالي وتذييل
<div id = header>
...
</div>
<div id = footer>
...
</div>
لقد ولت الرمز أعلاه. لا يحتوي DIVS على أي بنية دلالية بشكل أساسي ، حتى لو تم تطبيق المعرف. في HTML5 ، يمكننا استخدام عناصر <Header> و <Tooler> ، ويمكن استبدال الكود أعلاه بـ:
<header>
...
</header>
<Tower>
...
</tower>
احرص على عدم الخلط بين هذين العنصرين ورأس الموقع. هم مجرد حاويات تمثلهم.
11. أي و HTML5
يتطلب الأمر الكثير من المال لفهم عناصر HTML5 الجديدة. من أجل التأكد من أنه يمكن عرض عناصر HTML5 الجديدة بشكل صحيح كعناصر على مستوى الكتلة ، من الضروري تحديد نمطها باستخدام الكود التالي:
رأس ، تذييل ، مقال ، قسم ، قائم ، القائمة ، hgroup {
العرض: كتلة ؛
}
ومع ذلك ، لا يزال لا يعرف ماهية هذه العناصر ، لذلك فهي تتجاهل هذه التنسيقات وتحتاج إلى استخدام الكود التالي لحل هذه المشكلة:
document.createElement (المادة) ؛
document.createElement (تذييل) ؛
document.createElement (header) ؛
document.createElement (hgroup) ؛
document.createElement (NAV) ؛
document.createElement (قائمة) ؛
12. عنوان المجموعة (HGROUP)
لنفترض أن موقع الويب يحتوي على اسم وعلامات فرعية ليتم تمييزه بعلامات <h1> و <h2> على التوالي. لا توجد طريقة في HTML4 يمكن أن تصف العلاقة بين الاثنين مع علاقة دلالية جيدة. بالإضافة إلى ذلك ، عند استخدام H2 لعرض عناوين أخرى على الصفحة ، هناك المزيد من المشكلات من حيث التسلسل الهرمي. باستخدام عنوان المجموعة HGROUP ، يمكننا جمع هذه العناوين معًا دون التأثير على المخطط التفصيلي بالكامل للوثيقة.
<header>
<hgroup>
<h1> استدعاء صفحة المروحة </h1>
<h2> فقط للأشخاص الذين يريدون ذكرى العمر. </h2>
</hgroup>
</header>
13. السمات المطلوبة
يتيح النموذج خصائص جديدة ضرورية ، مع تحديد ما إذا كان الإدخال المحدد ضروريًا. يمكنك إعلان هذه السمة بطريقتين مختلفتين مختلفتين وفقًا لتفضيلاتك الخاصة لكود الكتابة:
<نوع الإدخال = اسم النص = Someinput مطلوب>
أو أكثر صرامة:
<نوع الإدخال = اسم النص = someinput مطلوب = مطلوب>
كلا سطر الكود أعلاه العمل. بعد استخدام هذا السطر من الرمز ويدعم المتصفح السمة المطلوبة ، لن يتم إرسال النموذج الفارغ. فيما يلي مثال بسيط ، وأضفنا أيضًا سمة العنصر النائب:
<method method = post Action =>
<label for = someinput> اسمك: </label>
<type type = text id = someinput name = someinput leacholder = douglas quaid مطلوب>
<button type = submit> go </utron>
</form>
إذا كان الإدخال فارغًا ، فلن يتم إرسال النموذج ، مع تسليط الضوء على مربع النص.
14. سمات التركيز التلقائي
وبالمثل ، مع HTML5 ، لم تعد هناك حاجة إلى حلول JavaScript لحل مشكلة التركيز التلقائي. إذا كان ينبغي تحديد أو تركيز الإدخال ، فيمكننا الآن استخدام خاصية ضبط تلقائي للصورة من HTML.
<نوع الإدخال = اسم النص = someinput leacholder = douglas quaid مطلوب تلقائي تلقائي
15. دعم الصوت
لم نعد نحتاج إلى الاعتماد على الإضافات من الطرف الثالث لتوفير الصوت. يوفر HTML5 عنصر الصوت <Oudio>. حاليًا ، تدعم أحدث المتصفحات فقط صوت HTML5. في هذه المرحلة ، من الأفضل توفير بعض التوافق المتخلف.
<Audio Autoplay = Autoplay Controls = Controls>
<المصدر src = file.ogg />
<المصدر src = file.mp3 ″ />
<a href = file.mp3 ″> قم بتنزيل هذا الملف. </a>
</audio>
عند الحديث عن تنسيقات الصوت ، لم يدعمها موزيلا ولا Webkit بالكامل. يريد Firefox رؤية ملف .OGG ، ويدعم متصفح WebKit فقط امتداد Mp3 الأكثر شيوعًا. هذا يعني أنه يجب عليك إنشاء نسختين من الصوت ، على الأقل حتى الآن. عندما تقوم Safari بتحميل الصفحة ، فإنها لا تتعرف على ملف تنسيق .ogg وسيتم تخطيه ونقله إلى إصدار MP3. يرجى ملاحظة أن IE لا يدعمه ، وأن Opera 10 أو Lower يدعم فقط ملفات .wav.