HTML5 TIPS 1: سرعة تطوير التكنولوجيا اليوم مذهلة. إذا لم تكن حريصًا ، فقد لا تتمكن من مواكبة ذلك. يستمر تطوير الجيل الجديد من HTML-HTML5 في جلب لنا مفاجآت جديدة. سنقدم بعض تقنيات HTML لك من خلال هذه المقالة.
1. نوع المستند الجديد (Doctype)
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
هل ما زلت تستخدم نوع مستند XHTML أعلاه المزعج ويصعب تذكره؟ إذا كان هذا هو الحال ، فقد حان الوقت للتبديل إلى نوع مستند HTML5 الجديد.
<! doctype html>
الآن لا يستغرق الأمر سوى 15 حرفًا بسيطًا. (ملاحظة: يجب أن يظهر إعلان Doctype الخاص بك على السطر الأول من ملف HTML الخاص بك.)
2. عناصر الرسومات (الشكل)
هل ما زلت تفكر في استخدام الكود التالي لتمييز الصور؟
<mg src = path/to/image alt = about image/>
<p> صورة المريخ. </p>
لا يمكن أن يرتبط الرمز أعلاه بعنوان الرسم البياني بطريقة بسيطة ودليلية ، لأنه يتم تغليفه ببساطة بعلامات الفقرة وعناصر الصور ، ويحسن HTML5 هذا من خلال إدخال <gient> عناصر. عند استخدامها بالاقتران مع عنصر <igigcaption> ، يمكننا إقران عنوان الرسوم مع الرسم. الرمز كما يلي:
<GINGE>
<img src = path/to/image alt = about image/>
<figcaption>
<p> هذه صورة لشيء مثير للاهتمام. </p>
</figcaption>
</figure>
3. إعادة تعريف <small>
اتضح أنه يمكنك استخدام عنصر <small> لإنشاء ترجمات مرتبطة ارتباطًا وثيقًا بالشعار. ومع ذلك ، قام HTML5 الآن بتعديل هذا الاستخدام ، وتم إعادة تعريف العنصر <small> ، أو بشكل أكثر ملاءمة ، يتم استخدامه الآن لتمثيل كلمات صغيرة أو ملاحظات جانبية أخرى (مثل إشعار حقوق الطبع والنشر في أسفل الموقع).
4. لا توجد مزيد من البرامج النصية أو أنواع الروابط
على الأرجح أنك لا تزال تضيف خصائص النوع إلى الروابط وعلامات البرنامج النصي مثل الرمز أدناه.
<link rel = stylesheet href = path/to/stylesheet.css type = text/css/>
<script type = text/javaScript src = path/to/script.js> </script>
في HTML5 ، لم يعد هناك حاجة إلى هذا. وهذا يعني أن هاتين الملصقتين تمثلان الأنماط والبرامج النصية على التوالي. لذلك ، يمكننا حذف جميع سمات نوعها. الرمز كما يلي:
<link rel = stylesheet href = path/to/stylesheet.css/>
<script src = path/to/script.js> </script>
5. استخدم أو عدم استخدام عروض الأسعار
تذكر أن HTML5 يختلف عن XHTML ، ولا يتعين عليك لف السمات في عروض الأسعار إذا كنت لا تحب ذلك. ومع ذلك ، إذا كنت تعتقد أن استخدام الاقتباسات سيجعلك تشعر بالراحة ، فلن تكون هناك أي مشاكل بالطبع.
<p class = myClass id = soysid> ابدأ المفاعل.
6. اجعل المحتوى الخاص بك قابل للتحرير
واحدة من الميزات القوية للغاية لـ HTML5 قابلة للاستيلاء ، والتي ، كما يوحي الاسم ، ستسمح للمستخدم بتحرير أي محتوى نص موجود داخل عنصر (بما في ذلك عناصر طفله). يحتوي على مجموعة واسعة من الاستخدامات ، مثل قوائم المهام البسيطة أو المواقع القائمة على الويكي ، وأحد مزاياها هي أنها تستخدم التخزين المحلي.
<! doctype html>
<html lang = en>
<head>
<meta charset = utf-8 ″>
<title> بدون عنوان </title>
</head>
<body>
<h2> قائمة المهام </h2>
<ul contateded = true>
<li> كسر سائق الكابينة الميكانيكية. </li>
<li> القيادة إلى المصنع المهجور
<li> شاهد فيديو Self </li>
</ul>
</body>
</html>
أو ، كما تقول الخدعة الخامسة ، يمكنك أيضًا كتابة الرمز على السطر تسعة مثل هذا (بدون اقتباسات):
<ul contateded = true>
7. إدخال البريد الإلكتروني
إذا قمنا بتطبيق نوع البريد الإلكتروني لتحديد نموذج الإدخال ، فيمكننا قيادة المتصفح للسماح فقط بإدخال السلسلة الذي يتوافق مع بنية عنوان البريد الإلكتروني الصالحة. على الرغم من أن التحقق من النماذج المدمجة سيصل قريبًا ، لا يمكننا الاعتماد تمامًا على هذا. لا تفهم المتصفحات القديمة نوع البريد الإلكتروني هذا ، بل يعودون ببساطة إلى مربع النص العادي.
<! doctype html>
<html lang = en>
<head>
<meta charset = utf-8 ″>
<title> بدون عنوان </title>
</head>
<body>
<form action = method = get>
<label for = البريد الإلكتروني> البريد الإلكتروني: </label>
<معرف الإدخال = اسم البريد الإلكتروني = نوع البريد الإلكتروني = البريد الإلكتروني />
<button type = إرسال> إرسال النموذج </button>
</form>
</body>
</html>
عندما يتعلق الأمر بالعناصر والسمات التي يدعمها المتصفح ولا يدعمها ، يجب أن تعرف أن جميع المتصفحات ليست موثوقة في الوقت الحاضر. على سبيل المثال ، تدعم Opera فقط التحقق من البريد الإلكتروني إذا قمت بتحديد سمة الاسم. ومع ذلك ، فإنه لا يدعم سمة العنصر النائب (كما سيتم مناقشته أدناه). أخيرًا ، بينما يمكنك استخدام هذا الشكل من التحقق ، لا تعتمد عليه كثيرًا.