تتطور تقنية الويب بسرعة كبيرة ، وإذا لم تقم بمواكبة الأوقات ، فسيتم القضاء عليك. لذلك ، من أجل التعامل مع HTML5 القادم ، تلخص هذه المقالة 22 مهارات أساسية لـ HTML5 ، وآمل أن يكون من المفيد لك أن تتعلم HTML5.
1. بيان doctype جديد بيان XHTML طويل جدًا ، وأعتقد أن هناك القليل من المطورين في الواجهة الأمامية الذين يمكنهم كتابة بيان Doctype هذا.<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
بيان doctype من HTML5 قصيرة جدا. أعتقد أنه يمكنك تذكره فور رؤية هذا البيان. ليس عليك أن تضيع خلايا الدماغ لتذكر بيان doctype المنحرف قليلاً عن XHTML.
<! doctype html>
يتمثل بيان Doctype الموجز لـ HTML5 في السماح للمتصفحات الحديثة مثل Firefox و Chrome والمتصفحات مثل IE6/7/8 للدخول إلى الوضع القياسي (شبه). قد تتساءل أن IE6/7 يمكنه أيضًا دعم HTML5 Doctype. في الواقع ، ستدخل IE الوضع القياسي طالما أن Doctype يتوافق مع هذا التنسيق.
2. <GINGE> العلامةألقِ نظرة على الكود البسيط التالي:
<img src = "path/to/image">
<h6> صورة المريخ. </h6>
لسوء الحظ ، يبدو أن علامة H6 هنا لا علاقة لها بعلامة IMG ، والدلالات ليست واضحة بما فيه الكفاية. أدركت HTML5 هذا واعتمد علامة <GINGE>. عندما يكون <GINGE> مع علامة <GIGCAPTION> ، يمكن دمج علامة H6 وعلامة IMG ، وسيكون الرمز أكثر دللاً.
<GINGE>
<img src = "path/to/image">
<figcaption>
<H6> هذه صورة لشيء مثير للاهتمام. </h6>
</figcaption>
</figure>
3. إعادة تعريف <small> منذ وقت ليس ببعيد ، استخدمت علامة <small> لإنشاء ترجمات تتعلق بالشعار. ومع ذلك ، يتم إعادة تعريف العلامة <small> في HTML5 لجعلها أكثر دلالية ، وسيصبح حجم الخط من <small> أصغر. فكر في الأمر ، لا يزال من الجيد استخدام هذه العلامة لمعلومات حقوق الطبع والنشر في أسفل الموقع. 4. إزالة سمات النوع من علامات JavaScript و CSS عادةً ما ستضيف سمات النوع إلى <link> و <script>:<link rel = "stylesheet" type = text/css href = "path/to/stylesheet.css">
<script type = "text/javaScript" src = "path/to/script.js"> </script>
في HTML5 ، لم تعد هناك حاجة إلى سمة النوع ، لأن هذا يبدو زائدًا بعض الشيء ، ويمكن أن يجعل الكود أكثر إيجازًا بعد إزالته.
<link href = "path/to/symesheet.css">
<script src = "path/to/script.js"> </script>
5. ما إذا كنت لاستخدام عروض أسعار مزدوجة هذا مربك بعض الشيء ، HTML5 ليس XTHML ، يمكنك حفظ عروض الأسعار المزدوجة في العلامات. أعتقد أن معظم الرفاق ، بمن فيهم أنا ، يستخدمون لإضافة عروض أسعار مزدوجة ، لأن هذا يجعل الرمز يبدو أكثر قياسية. ومع ذلك ، يمكن تحديد هذا بناءً على تفضيلاتك الشخصية سواء كنت تريد استخدام عروض أسعار مزدوجة.<h6 id = "sholeid"> ابدأ المفاعل. </h6>
6. اجعل محتوى الويب قابل للتحرير 7. مربع إدخال البريد الإلكترونيتمت إضافة سمة بريد إلكتروني جديدة لمربع الإدخال إلى HMTL5 ، والتي يمكنها اكتشاف ما إذا كان محتوى الإدخال يفي بتنسيق الكتابة في البريد الإلكتروني. الوظيفة تزداد قوة. قبل HTML5 ، يمكنك الاعتماد فقط على JS للكشف عنها. على الرغم من أن وظيفة التحقق من النماذج المدمجة ستصبح قريبًا حقيقة ، إلا أن العديد من المتصفحات لا تدعم هذه الخاصية وسيتم التعامل معها فقط كمربع إدخال نص عادي.
<method form = get>
<label for = "email"> البريد الإلكتروني: </label>
<INPUT ID = "البريد الإلكتروني" type = "البريد الإلكتروني" name = "البريد الإلكتروني">
<button type = "submit"> إرسال نموذج </button>
</form>
حتى الآن ، لا يتم دعم هذه السمة ، بما في ذلك المتصفحات الحديثة ، لذلك لا تزال هذه السمة غير موثوقة في الوقت الحالي.
8إن العنصر النائب في مربع النص (انظر تأثير مربع البحث في هذه المدونة) يفضي إلى تحسين تجربة المستخدم. من قبل ، لا يمكننا الاعتماد إلا على JS لتحقيق تأثير العناصر النائبة ، وأضفوا عنصر نائب له في HTML5.
<type type = "البريد الإلكتروني" name = "البريد الإلكتروني" placeholder = "[email protected]">
وبالمثل ، لا تدعم المتصفحات الحديثة الحالية الحالية هذه الخاصية بشكل جيد للغاية. في الوقت الحالي ، يدعم Chrome و Safari فقط هذا العقار ، ولا يدعم Firefox و Opera هذا العقار.
9. التخزين المحليتتيح وظيفة التخزين المحلية في HTML5 أن تتذكر المتصفحات الحديثة ما كتبناه ، وحتى إذا كان المتصفح مغلقًا ومُعد منتعشًا ، فلن يتأثر ذلك. على الرغم من أن بعض المتصفحات لا تدعم هذه الوظيفة ، إلا أن IE8 و Safari 4 و Firefox 3.5 لا تزال تدعم هذه الوظيفة ، يمكنك اختبارها.
10. مزيد من الرأس الدلالي وتذييللم يعد الكود التالي موجودًا في HTML5
<div id = header>
...
</div>
<div id = footer>
...
</div>
عادةً ما نحدد div للرأس والتذييل ثم نضيف معرفًا ، ولكن في HTML5 ، يمكنك استخدام علامات <Header> و <Tooler> مباشرة ، بحيث يمكن إعادة كتابة الرمز أعلاه على النحو التالي:
<header>
...
</header>
<Tower>
...
</tower>
احرص على عدم الخلط بين هذين العلامات برأس وتذييل الموقع ، فهي مجرد حاويات تمثلهما.
11. أي دعم HTML5لا يدعم IE Browser حاليًا HTML5 ، وهو أيضًا عثرة كبيرة في حجب التعميم الأسرع لـ HTML5. ومع ذلك ، فإن دعم IE9 لـ HTML5 لا يزال جيدًا جدًا.
IE تخلق جميع العلامات المضافة حديثًا لـ HTML5 إلى عناصر مضمنة ، ولكن في الواقع هي عناصر على مستوى الكتلة ، لذلك من الضروري تحديد نمط لهم:
رأس ، تذييل ، مقال ، قسم ، قائم ، القائمة ، hgroup {
العرض: كتلة ؛
}
على الرغم من ذلك ، لا يزال لا يمكن تحليل علامات HTML5 المضافة حديثًا. في هذا الوقت ، يجب استخدام JavaScript لحل هذه المشكلة:
document.createElement ("المقالة") ؛
document.createElement ("تذييل") ؛
document.createElement ("header") ؛
document.createElement ("Hgroup") ؛
document.createElement ("NAV") ؛
document.createElement ("MENA") ؛
يمكنك استخدام رمز JavaScript هذا لإصلاح IE Parse HTML5
<script MCE_SRC = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
12. مجموعة العنوان (HGROUP) هذا مشابه للخدعة الثانية. إذا تم استخدام علامات H1 و H2 لتمثيل الاسم والترجمة الفرعية للموقع ، فلن يرتبط ذلك بالقبلين المرتبطين ارتباطًا وثيقًا بمعناها الأصلي. في هذا الوقت ، يمكنك استخدام علامة <hgroup> لدمجها ، بحيث يكون الرمز أكثر دللاً.<header>
<hgroup>
<h1> استدعاء صفحة المروحة </h1>
<h2> فقط للأشخاص الذين يريدون ذكرى العمر. </h2>
</hgroup>
</header>
13. السمات المطلوبةيجب أن يكون الموظفون الأماميون قد قاموا بالعديد من مشاريع التحقق من النماذج. واحدة من النقاط المهمة هي أنه يجب ملء بعض صناديق الإدخال ، لذلك هناك حاجة إلى فحص جافا سكريبت هنا. في HTML5 ، تتم إضافة سمة جديدة يجب ملؤها: مطلوب. هناك طريقتان لاستخدام السمة المطلوبة. الطريقة الثانية تبدو أكثر هيكلية ، في حين أن الطريقة الأولى أبسط.
<input type = "text" name = "someinput" مطلوب>
<type type = "text" name = "someinput" مطلوب = "مطلوب">
مع هذه الخاصية ، يجعل التحقق من تقديم النموذج أسهل ، ألق نظرة على المثال البسيط التالي:
<method form = post>
<label for = someinput> اسمك: </label>
<input id = someinput type = text name = someinput leacholder = "douglas quaid" required = "required">
<button type = "submit"> اذهب </button>
</form>
إذا كان مربع الإدخال فارغًا ، فلن يتم إرسال النموذج بنجاح.
14. الحصول على التركيز تلقائياوبالمثل ، لم يعد HTML5 يحتاج إلى JavaScript لحل التركيز التلقائي على مربعات الإدخال. إذا كان يجب تحديد مربع إدخال أو الحصول على تركيز الإدخال ، فقد أضاف HTML5 ضبط خاصية اكتساب التركيز التلقائي:
<type type = "text" name = "someinput" placeholder = "douglas quaid" مطلوبة = "مطلوب" AutoFocus = "AutoFocus">
يمكن أيضًا كتابة التركيز التلقائي على أنه ضبط تلقائي للصورة = التركيز التلقائي ، والذي يبدو أكثر قياسية ، اعتمادًا على تفضيلاتك الشخصية.
15. دعم تشغيل الصوتيوفر HTML5 علامة <Oudio> ، والتي تحل المشكلة التي في الماضي ، كان عليك الاعتماد على المكونات الإضافية لجهة خارجية لتشغيل ملفات الصوت. حتى الآن ، يدعم عدد قليل من المتصفحات الأخيرة هذه العلامة.
<Audio Controls = "Controls" autoplay = "autoplay">
<المصدر src = "file.ogg" _fcksavedurl = "" file.ogg "" />
<المصدر src = "file.mp3" />
<a href = "file.mp3"> قم بتنزيل هذا الملف. </a>
</audio>
لماذا يوجد تنسيقان من ملفات الصوت؟ نظرًا لوجود اختلافات في التنسيقات التي تدعمها متصفحات Firefox و WebKit ، يمكن لـ Firefox دعم ملفات .ogg فقط ، بينما يدعم WebKit فقط ملفات .mp3. يتمثل الحل في إنشاء نسختين من ملفات الصوت ، بحيث يمكن أن تكون متوافقة مع متصفحات Firefox و WebKit. تجدر الإشارة إلى أن IE لا يدعم هذه العلامة.
16. دعم تشغيل الفيديو مثل علامة <Audio> ، يوفر HTML5 أيضًا دعمًا لتشغيل ملفات الفيديو بواسطة علامة <video>. أعلنت YouTube أيضًا عن مقطع فيديو جديد لـ HTML5. لكن من المؤسف بعض الشيء أن مواصفات HTML5 لا تحدد وحدة فك ترميز فيديو محددة ، ولكن يتيح للمتصفح أن يقرر بنفسه. هذا يخلق مشكلة توافق المتصفح. على الرغم من أن كل من Safari و IE9 يدعمان مقاطع الفيديو H.264 (يمكن لاعبين فلاش اللعب) ، فإن Firefox و Opera يدعمان تنسيقات Open Source Theora و Vorbis. لذلك ، عند عرض مقاطع فيديو HTML5 ، يجب عليك أيضًا إعداد تنسيقين.<فيديو تحكم preload>
<source src = "cohagenphonecall.ogv" type = "video/ogg" ؛ برامج الترميز = 'vorbis ، Theora' " />
<المصدر src = "cohagenphonecall.mp4" type = "video /mp4 ؛ 'codecs =' avc1.42e01e ، mp4a.40.2 '" />
<Div> متصفحك قديم. <a href = "cohagenphonecall.mp4"> قم بتنزيل هذا الفيديو بدلاً من ذلك. </a> </viv>
</video>
تجدر الإشارة إلى أنه على الرغم من أنه يمكن حذف سمة النوع ، إذا تمت إضافتها ، يمكن للمتصفح تحليل ملف الفيديو بشكل أسرع ودقة. لا تدعم جميع المتصفحات مقاطع فيديو HTML5 ، لذلك يتعين عليك استخدام إصدار الفلاش بدلاً من ذلك. بالطبع ، يكمن القرار معك.
17. فيديو التحميل المسبقسمة التحميل المسبقة: التحميل المسبق ، أولاً وقبل كل شيء ، تحتاج إلى تحديد ما إذا كان الفيديو يحتاج إلى تحميل مسبقًا. إذا كان الزائر يزور صفحة مع العديد من مقاطع الفيديو ، فمن الضروري تحميل مقطع فيديو ، والذي يمكن أن ينقذ وقت انتظار الزوار وتحسين تجربة المستخدم. يمكنك إضافة خاصية التحميل المسبق إلى علامة <video> لتنفيذ وظائف التحميل المسبق.
<video preload = preload>
...
</video>
[/شفرة]
18. عناصر التحكم في العرض يمكن لخصائص التحكم في العرض إضافة عنصر تحكم توقف في التشغيل إلى الفيديو. تجدر الإشارة إلى أن التأثير الذي يظهره كل متصفح قد يكون مختلفًا إلى حد ما.<video controls = "controls" preload = "preload">
...
</video>
19. باستخدام التعبيرات العاديةفي HTML5 ، يمكننا استخدام التعبيرات العادية مباشرة.
<method method = post Action =>
<label for = username> إنشاء اسم مستخدم: </label>
<input id = type type = اسم النص = اسم المستخدم username = 4 <> 10 مطلوب = مطلوب ضبط تلقائي = Autofocus Pattern = [a-za-z] {4،10}>
<button type = submit> go </utron>
</form>
20. اكتشف دعم المتصفح لسمات HTML5نظرًا لأن كل متصفح لديه دعم مختلف لسمات HTML5 ، فإن هذا يخلق بعض مشكلات التوافق. ومع ذلك ، يمكن استخدام الطرق لاكتشاف ما إذا كان المتصفح يدعم هذه الخصائص. إذا أراد الكود في المثال أعلاه اكتشاف ما إذا كان المتصفح يتم التعرف عليه من قبل المتصفح ، فيمكن استخدامه للكشف عنه باستخدام رمز JavaScript.
تنبيه ("نمط" في المستند.
في الواقع ، هذه طريقة شائعة الاستخدام لتحديد توافق المتصفح ، وغالبًا ما تستخدم مكتبة jQuery هذه الطريقة. يتم إنشاء علامة إدخال في الكود أعلاه وتحقق مما إذا كان المتصفح مدعومًا من سمة النمط. إذا كان من الممكن دعمها ، فسيدعم المتصفح هذه الوظيفة ، وإلا فلن يتم دعمها.
<script>
if (! "نمط" في المستند.
// قم بالتحقق من صحة جانب العميل/الخادم
}
</script>
21. علامة العلامات يتم استخدام علامة <Mark> لتسليط الضوء على النص الذي يحتاج إلى تسليط الضوء بصريًا على أهميته للمستخدم. يجب أن تكون السلسلة ملفوفة في هذه العلامة مرتبطة بسلوك المستخدم الحالي. على سبيل المثال ، إذا بحثت عن فتح عقلك في بعض المدونات ، فيمكنني لف كل إجراء باستخدام JavaScript في علامة <Mark>.<h3> نتائج البحث </h3>
<h6> لقد انقطعوا ، بعد أن قال Quato ، <mark> "افتح عقلك" </mark>. </h6>
22. كيفية استخدام علامة DIV بشكل صحيحقد يكون لدى بعض الناس أسئلة. مع علامات مثل <Header> و <Tooler> ، هل ستظل العلامة <Div> تعمل في HTML5؟ الجواب نعم. على سبيل المثال ، إذا كنت ترغب في إنشاء حاوية يمكنها لف محتوى خاص ، فإن <Div> المجاني والمرن هو بالتأكيد الخيار الأول. إذا كنت ترغب في إنشاء مقال أو قائمة تنقل ، فمن المستحسن أن تستخدم علامات أكثر دلالية <article> و <nav>.
يعتقد الكثير من الناس أن HTML5 قد لا يزال وقتًا طويلاً ، لذلك يتجاهلونها مباشرة. في الواقع ، بدأت العديد من مواقع الويب في استخدام HTML5 الآن. في الواقع ، بعض السمات والوظائف الجديدة لـ HTML5 هي جعل الرمز أكثر إيجازًا. هذا شيء جيد دائمًا ويجب أن يكون جديراً بمديحنا. أخيرًا ، شكرًا لك على قراءة هذا المقال على مستوى الدخول على HTML5 ، على أمل تقديم بعض المساعدة لك لتعلم HTML5.