22 نصائح أساسية حول HTML5 (الصورة والبرنامج التعليمي)

تتطور تقنية الويب بسرعة كبيرة ، وإذا لم تقم بمواكبة الأوقات ، فسيتم القضاء عليك. لذلك ، من أجل التعامل مع HTML5 القادم ، تلخص هذه المقالة 22 مهارات أساسية لـ HTML5 ، وآمل أن يكون من المفيد لك أن تتعلم HTML5.

بيان 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 يتوافق مع هذا التنسيق.

ألقِ نظرة على الكود البسيط التالي:

<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>

منذ وقت ليس ببعيد ، استخدمت علامة <small> لإنشاء ترجمات تتعلق بالشعار. ومع ذلك ، يتم إعادة تعريف العلامة <small> في HTML5 لجعلها أكثر دلالية ، وسيصبح حجم الخط من <small> أصغر. فكر في الأمر ، لا يزال من الجيد استخدام هذه العلامة لمعلومات حقوق الطبع والنشر في أسفل الموقع.

عادةً ما ستضيف سمات النوع إلى <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>

هذا مربك بعض الشيء ، HTML5 ليس XTHML ، يمكنك حفظ عروض الأسعار المزدوجة في العلامات. أعتقد أن معظم الرفاق ، بمن فيهم أنا ، يستخدمون لإضافة عروض أسعار مزدوجة ، لأن هذا يجعل الرمز يبدو أكثر قياسية. ومع ذلك ، يمكن تحديد هذا بناءً على تفضيلاتك الشخصية سواء كنت تريد استخدام عروض أسعار مزدوجة.

<h6 id = "sholeid"> ابدأ المفاعل. </h6>

تمت إضافة سمة بريد إلكتروني جديدة لمربع الإدخال إلى HMTL5 ، والتي يمكنها اكتشاف ما إذا كان محتوى الإدخال يفي بتنسيق الكتابة في البريد الإلكتروني. الوظيفة تزداد قوة. قبل HTML5 ، يمكنك الاعتماد فقط على JS للكشف عنها. على الرغم من أن وظيفة التحقق من النماذج المدمجة ستصبح قريبًا حقيقة ، إلا أن العديد من المتصفحات لا تدعم هذه الخاصية وسيتم التعامل معها فقط كمربع إدخال نص عادي.

<method form = get>

<label for = "email"> البريد الإلكتروني: </label>

<INPUT ID = "البريد الإلكتروني" type = "البريد الإلكتروني" name = "البريد الإلكتروني">

<button type = "submit"> إرسال نموذج </button>

</form>

حتى الآن ، لا يتم دعم هذه السمة ، بما في ذلك المتصفحات الحديثة ، لذلك لا تزال هذه السمة غير موثوقة في الوقت الحالي.

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

<type type = "البريد الإلكتروني" name = "البريد الإلكتروني" placeholder = "[email protected]">

وبالمثل ، لا تدعم المتصفحات الحديثة الحالية الحالية هذه الخاصية بشكل جيد للغاية. في الوقت الحالي ، يدعم Chrome و Safari فقط هذا العقار ، ولا يدعم Firefox و Opera هذا العقار.

تتيح وظيفة التخزين المحلية في HTML5 أن تتذكر المتصفحات الحديثة ما كتبناه ، وحتى إذا كان المتصفح مغلقًا ومُعد منتعشًا ، فلن يتأثر ذلك. على الرغم من أن بعض المتصفحات لا تدعم هذه الوظيفة ، إلا أن IE8 و Safari 4 و Firefox 3.5 لا تزال تدعم هذه الوظيفة ، يمكنك اختبارها.

لم يعد الكود التالي موجودًا في HTML5

<div id = header>

...

</div>

<div id = footer>

...

</div>

عادةً ما نحدد div للرأس والتذييل ثم نضيف معرفًا ، ولكن في HTML5 ، يمكنك استخدام علامات <Header> و <Tooler> مباشرة ، بحيث يمكن إعادة كتابة الرمز أعلاه على النحو التالي:

<header>

...

</header>

<Tower>

...

</tower>

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

لا يدعم 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>

هذا مشابه للخدعة الثانية. إذا تم استخدام علامات H1 و H2 لتمثيل الاسم والترجمة الفرعية للموقع ، فلن يرتبط ذلك بالقبلين المرتبطين ارتباطًا وثيقًا بمعناها الأصلي. في هذا الوقت ، يمكنك استخدام علامة <hgroup> لدمجها ، بحيث يكون الرمز أكثر دللاً.

<header>

<hgroup>

<h1> استدعاء صفحة المروحة </h1>

<h2> فقط للأشخاص الذين يريدون ذكرى العمر. </h2>

</hgroup>

</header>

يجب أن يكون الموظفون الأماميون قد قاموا بالعديد من مشاريع التحقق من النماذج. واحدة من النقاط المهمة هي أنه يجب ملء بعض صناديق الإدخال ، لذلك هناك حاجة إلى فحص جافا سكريبت هنا. في 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>

إذا كان مربع الإدخال فارغًا ، فلن يتم إرسال النموذج بنجاح.

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

<type type = "text" name = "someinput" placeholder = "douglas quaid" مطلوبة = "مطلوب" AutoFocus = "AutoFocus">

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

يوفر 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 لا يدعم هذه العلامة.

مثل علامة <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 ، لذلك يتعين عليك استخدام إصدار الفلاش بدلاً من ذلك. بالطبع ، يكمن القرار معك.

سمة التحميل المسبقة: التحميل المسبق ، أولاً وقبل كل شيء ، تحتاج إلى تحديد ما إذا كان الفيديو يحتاج إلى تحميل مسبقًا. إذا كان الزائر يزور صفحة مع العديد من مقاطع الفيديو ، فمن الضروري تحميل مقطع فيديو ، والذي يمكن أن ينقذ وقت انتظار الزوار وتحسين تجربة المستخدم. يمكنك إضافة خاصية التحميل المسبق إلى علامة <video> لتنفيذ وظائف التحميل المسبق.

<video preload = preload>

...

</video>

[/شفرة]

يمكن لخصائص التحكم في العرض إضافة عنصر تحكم توقف في التشغيل إلى الفيديو. تجدر الإشارة إلى أن التأثير الذي يظهره كل متصفح قد يكون مختلفًا إلى حد ما.

<video controls = "controls" preload = "preload">

...

</video>

في 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>

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

تنبيه ("نمط" في المستند.

في الواقع ، هذه طريقة شائعة الاستخدام لتحديد توافق المتصفح ، وغالبًا ما تستخدم مكتبة jQuery هذه الطريقة. يتم إنشاء علامة إدخال في الكود أعلاه وتحقق مما إذا كان المتصفح مدعومًا من سمة النمط. إذا كان من الممكن دعمها ، فسيدعم المتصفح هذه الوظيفة ، وإلا فلن يتم دعمها.

<script>

if (! "نمط" في المستند.

// قم بالتحقق من صحة جانب العميل/الخادم

}

</script>

يتم استخدام علامة <Mark> لتسليط الضوء على النص الذي يحتاج إلى تسليط الضوء بصريًا على أهميته للمستخدم. يجب أن تكون السلسلة ملفوفة في هذه العلامة مرتبطة بسلوك المستخدم الحالي. على سبيل المثال ، إذا بحثت عن فتح عقلك في بعض المدونات ، فيمكنني لف كل إجراء باستخدام JavaScript في علامة <Mark>.

<h3> نتائج البحث </h3>

<h6> لقد انقطعوا ، بعد أن قال Quato ، <mark> "افتح عقلك" </mark>. </h6>

قد يكون لدى بعض الناس أسئلة. مع علامات مثل <Header> و <Tooler> ، هل ستظل العلامة <Div> تعمل في HTML5؟ الجواب نعم. على سبيل المثال ، إذا كنت ترغب في إنشاء حاوية يمكنها لف محتوى خاص ، فإن <Div> المجاني والمرن هو بالتأكيد الخيار الأول. إذا كنت ترغب في إنشاء مقال أو قائمة تنقل ، فمن المستحسن أن تستخدم علامات أكثر دلالية <article> و <nav>.

يعتقد الكثير من الناس أن HTML5 قد لا يزال وقتًا طويلاً ، لذلك يتجاهلونها مباشرة. في الواقع ، بدأت العديد من مواقع الويب في استخدام HTML5 الآن. في الواقع ، بعض السمات والوظائف الجديدة لـ HTML5 هي جعل الرمز أكثر إيجازًا. هذا شيء جيد دائمًا ويجب أن يكون جديراً بمديحنا. أخيرًا ، شكرًا لك على قراءة هذا المقال على مستوى الدخول على HTML5 ، على أمل تقديم بعض المساعدة لك لتعلم HTML5.