HTML 5 يشبه الثورة ، وهي على قدم وساق في عصر ما بعد WEB2.0.
ما هو HTML 5 ، لست بحاجة إلى الدخول في التفاصيل هنا. وفقًا لفهمي ، يمكن تلخيص ابتكار HTML 5 كنظام ملصق دلالي ، ودعم وسائط مبسط وغني ، وتكنولوجيا تخزين البيانات المحلية السحرية ، والرسوم المتحركة الغنية (قماش) لا تتطلب المكونات الإضافية ، ودعم API قوي. باختصار ، يجعل HTML 5 تفاعل الكمبيوتر وتفاعل الشبكة البشرية أكثر راحة ويناسب المستخدمين. النقص السابق في دعم تطبيقات الوسائط الغنية وهذا التخزين لم يعد ألمًا للمتصفحات. تتمثل النية الأصلية لثورة HTML 5 في الترويج للويب من منصة محتوى إلى منصة تطبيق موحدة وتوحيد معايير كل معسكر منصة.
تشرح هذه المقالة واحدة من ابتكارات HTML 5: هيكل أكثر وضوحًا وفازًا.
ابدأ من البدايةيجب أن يبدو رمز رأس XHTML قياسيًا هكذا:
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = gb2312 />
</head>
هل يمكنك أن تتذكر؟ هل ستحفظها عن ظهر قلب؟ بالطبع لا! نحتاج فقط إلى نسخة ميكانيكية ولصق.
دعونا نلقي نظرة على كيف هو رأس HTML 5 القياسي:
<! doctype html>
<meta charset = gb2312>
لست بحاجة إلى تحديد أي واحد أكثر تعقيدًا وأي واحد بسيط. نعم ، يمكن أن يكون رأس HTML 5 بسيطًا جدًا بحيث يمكن تذكره بسهولة! أيضًا ، يمكن تجاهل الحالة ، ونقلت وتراجع الخلفية قبل شريحة الزاوية الأخيرة.
لماذا يمكن أن تكون فضفاضة جدا؟ في الواقع ، إذا تم إرسال XHTML كنص/HTML ، فيمكن للمتصفح أيضًا تحليله جيدًا ، ولا يهتم المتصفح بخصم الكود. لذلك ، HTML 5 ميتافيزيقي ، فقد يكسر بعض المعايير الأصلية ، ولكن لا يزال من الممكن أن يؤدي أداءً جيدًا في المتصفح.
بالطبع ، من أجل راحة مساعدة الفريق والصيانة اللاحقة ، لا يزال يتعين علينا توحيد أسلوب الكتابة الذي تريده ، مثل:
<! doctype html>
<html>
<head>
<meta charset = gb2312 />
...
</head>
<body>
...
</body>
</html>
بالإضافة إلى ذلك ، على الرغم من أن HTML 5 لا يتم دعمه حاليًا من قبل جميع المتصفحات ، فإن هذا الرأس الذي يمكن أن يوفر أكثر من 100 بايت (للمواقع ذات المستويات الكهروضوئية اليومية أو أعلى من مليون شخص ، يمكن أن يوفر الكثير من حركة المرور). إذا كنت قد بحثت في وضع دقة المتصفح ، فيجب أن تعلم أن الصفحات ستؤدي إلى وضع غريب دون تحديد Doctype ، وطالما تم تعريف المتصفح <! doctype html> ، يمكنك تحليل الصفحات في الوضع القياسي دون تحديد نوع معين من DTD.
نظام وضع العلامات الدلالي الجديديعد الترميز الدلالي مهارة ضرورية للمطورين في الواجهة الأمامية المؤهلة ، ولكن عندما تصبح صفحات الويب غنية بشكل متزايد ، فمن الواضح أنهم غير قادرين على القيام بذلك ببساطة عن طريق استخدام علامة XHTML الأصلية إلى Desomanate. قال الله: يجب أن يكون هناك ضوء! ثم هناك ضوء. لذلك ، يوفر HTML 5 سلسلة من العلامات الجديدة والسمات المقابلة لتعكس الدلالات النموذجية لمواقع الويب الحديثة. ممارسة لإنتاج الحقيقة. لنكتب مثالًا:
<div id = header>
<div class = hgroup>
<H1> عنوان الموقع </h1>
<h1> Subtitle Subtitle </h1>
</div>
<div id = nav>
<ul>
<li> html 5 </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
</div>
</div>
<!-// نهاية الرأس->
<div id = left>
<div class = article>
<p> هذا مقال حول علامات هيكل HTML 5 الجديدة. </p>
</div>
<div class = article>
<p> هذا أيضًا مقال حول علامات هيكل HTML 5 الجديدة. </p>
</div>
</div>
<!-// الطرف الأيسر->
<div id = جانبا>
<h1> ملف تعريف المؤلف </h1>
<p> Mr.Think ، الشخص العادي الذي يركز على تقنية الواجهة الأمامية على شبكة الإنترنت. </p>
</div>
<!-// نهاية جانبية->
<div id = footer>
أسفل الصفحة
</div>
<!-// تذييل نهاية->
أعلاه جزء بسيط من صفحة المدونة HTML ، يتكون من الرأس ، ومنطقة عرض المقالة ، والعمود الجانبي الأيمن ، والأسفل. الترميز أنيق ويتوافق مع دلالات XHTML ، والتي يمكن تنفيذها بشكل جيد حتى في HTML 5. ولكن بالنسبة للمتصفح ، هذا هو قطعة من الكود لا تميز بين الأوزان ، بدلاً من علامة تسمح للماكينة بفهم الدلالات لتحديد الكتلة المقابلة. على سبيل المثال ، تحتوي المتصفحات القياسية (مثل Firefox و Chrome وحتى الإصدار الجديد من IE) على مفتاح اختصار يمكن أن يقود العملاء إلى القفز مباشرة إلى التنقل في الصفحة ، ولكن المشكلة هي أن جميع الكتل يتم تعريفها بواسطة Div ، ويتم تحديد قيمة المعرف لل DIV من قبل المطور ، لذلك لا يعرف المستعرض أي كتلة يجب أن تكون هي العلاقة التي تقع فيها الرابط الملاحة. ظهور علامات HTML 5 الجديدة تعوض عن هذا العيب. ثم ، إذا تم استبدال الرمز أعلاه بـ HTML 5 ، فيمكنك كتابته مثل هذا:
<header>
<hgroup>
<H1> عنوان الموقع </h1>
<h1> Subtitle Subtitle </h1>
</hgroup>
<v>
<ul>
<li> html 5 </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
</nav>
</header>
<div id = left>
<article>
<p> هذا مقال حول علامات هيكل HTML 5 الجديدة. </p>
</article>
<article>
<p> هذا أيضًا مقال حول علامات هيكل HTML 5 الجديدة. </p>
</article>
</div>
<جانب جانب>
<h1> ملف تعريف المؤلف </h1>
<p> Mr.Think ، الشخص العادي الذي يركز على تقنية الواجهة الأمامية على شبكة الإنترنت. </p>
</isside>
<Tower>
أسفل الصفحة
</tower>
اتضح أن بنية صفحة HTML يمكن أن تكون جميلة لدرجة أنه يمكن رؤيتها في لمحة دون تعليقات. بالنسبة للمتصفحات ، لن تكون في حيرة عندما تجد الكتلة المقابلة.
كيفية تنظيم العناصر مع HTML 5 علامات جديدة:من خلال المثال أعلاه ، نحن نفهم ابتكارات علامات HTML 5 الجديدة للهيكل ، ولكن عند التحول إلى الاستخدام الفعلي ، كيف يمكننا استخدامها بشكل مناسب؟ أعتقد أن هذا أيضًا سؤال يريد العديد من المتعلمين HTML 5 طرحه. تمامًا مثل دلالات XHTML ، ينبغي أيضًا اتباع استخدام العلامات الدلالية HTML 5: كل علامة لها معنى محدد ، والدلالات تعني أننا نستخدم العلامات المناسبة في المكان المناسب لجعل الأشخاص والآلات (يمكن فهم الآلات على أنه يمكن فهم المتصفحات كمحركات بحث). على سبيل المثال ، تكون علامة الرأس عمومًا عنصر الكتلة الأول للصفحة (يمكن أيضًا استخدام علامة الرأس في عنصر الرأس من النوع ، مثل عنوان كتلة المقالة) ، والذي يحتوي على معلومات موضوع الصفحة ؛ تُستخدم علامة NAV عمومًا لالتفاف معلومات التنقل ؛ يستخدم التذييل عمومًا للف المعلومات السفلية للصفحة ؛ وهلم جرا.
فيما يلي إرشادات التفسير والاستخدام الدلالي للعلامات الجديدة المشتركة للفئات الهيكلية المدرجة في دليل HTML 5:
<Header> علامةالتعريف اليدوي: يحدد رأس القسم أو المستند.
إرشادات الاستخدام: يتم استخدامه بشكل عام لتشمل رؤوس الصفحات ، ويمكن استخدامه أيضًا لرؤوس المنطقة الأخرى ، مثل رؤوس المقالات:
<header>
<hgroup>
<H1> عنوان الموقع </h1>
<h1> Subtitle Subtitle </h1>
</hgroup>
</header>
<hgroup> علامةالتعريف اليدوي: يستخدم لدمج عناوين صفحة أو قسم ويب.
إرشادات للاستخدام: تستخدم لمجموعات فئات العنوان ، مثل العنوان والرجوع الفرعي للمقال:
<hgroup>
<H1> هذه مقالة تقدم علامات هيكل HTML 5 </H1>
<H2> HTML 5 Innovation </h2>
</hgroup>
<v> علامةالتعريف اليدوي: حدد الجزء الذي يحدد رابط التنقل.
إرشادات للاستخدام: قسم التنقل لتحديد الصفحات:
<v>
<ul>
<li> html 5 </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
</nav>
<جانب جانب> العلامةتحديد المحتوى بخلاف المقالة. يجب أن يكون محتوى جانبا مرتبطًا بمحتوى المقالة.
إرشادات الاستخدام: يستخدم للمحتوى المقطوع ، سيتم بدء قسم جديد في دفق المستندات ، والذي يستخدم عمومًا في الأشرطة الجانبية المتعلقة بمحتوى المقالة:
<جانب جانب>
<h1> ملف تعريف المؤلف </h1>
<p> Mr.Think ، الشخص العادي الذي يركز على تقنية الواجهة الأمامية على شبكة الإنترنت. </p>
</isside>
<section> العلامةالتعريف اليدوي: تحديد الأقسام في المستند. على سبيل المثال ، فصول أو رؤوس أو تذييلات أو أجزاء أخرى من المستند.
إرشادات الاستخدام: سيبدأ المحتوى المستخدم في الأقسام قسمًا جديدًا في دفق المستند:
<section>
ما هو القسم <h1>؟ </h1>
<h2> فصل جديد </h2>
<article>
<h2> حول القسم </h1>
<p> مقدمة القسم </p>
...
</article>
</القسم>
<TOTER> العلامةالتعريف اليدوي: يحدد تذييل القسم أو المستند. عادة ، سيحتوي على اسم المبدع ، وتاريخ إنشاء المستند ، و/أو معلومات الاتصال.
إرشادات الاستخدام: يتم استخدامه عمومًا لالتفاف الصفحة بأكملها بقاع عام ، ويمكن استخدامها أيضًا في أسفل المناطق الأخرى ، مثل الجزء السفلي من المقالة:
<Tower>
</tower>
<article> علامةالتعريف اليدوي: تحديد المحتوى الخارجي. على سبيل المثال ، مقال جديد من مزود أخبار خارجي ، إما من مدونة ، أو من منتدى. أو أنه يأتي من مصادر خارجية أخرى.
إرشادات للاستخدام: كما يوحي الاسم ، يتم استخدامه بشكل عام في كتل المقالات:
<article>
<header>
<hgroup>
<H1> هذه مقالة تقدم علامات هيكل HTML 5 </H1>
<H2> HTML 5 Innovation </h2>
</hgroup>
<time dateTime = 2011-03-20> 2011.03.20 </time>
</header>
<p> تفاصيل محتوى المقالة </p>
</article>
<gient> العلامةالتعريف اليدوي: يستخدم لدمج العناصر.
إرشادات الاستخدام: تستخدم في الغالب في الجمع بين الصور وأوصاف الصور:
<GINGE>
<img src = img.gif alt = عنوان علامة الشكل = علامة الشكل/>
<IgCaption> هذه هي معلومات الوصف للصورة </figcaption>
</figure>
<mence> علامةالتعريف اليدوي: تحديد قائمة القائمة. استخدم هذه العلامة عندما تريد سرد عناصر التحكم في النماذج.
دليل الاستخدام: يستخدم في كتل فئة القائمة ، وتستخدم لتحديد قوائم القائمة أو خيارات القائمة:
<Mence>
<li> html 5 </li>
<li> CSS </li>
<li> JavaScript </li>
</menu>
لن يتم شرح العلامات الجديدة الأخرى في HTML 5 واحدة تلو الأخرى. يرجى التحقق من الدليل بنفسك.
في الواقع ، هذه الأشياء مثل Div و H1 و INPU وغيرها من العلامات في XHTML. طالما أنك تمارس المزيد في الحياة اليومية ، فمن السهل استخدامها بحرية.
حول التوافقإذا كنت شخصًا يحب الدراسة والانتباه إلى الواجهة الأمامية ، فيجب أن تعلم أنه تم استخدام علامات HTML 5 الجديدة في بنية صفحة Taobao. لذا ، ما أريد قوله هو أنه طالما تجرؤ على المحاولة ، فإن التوافق ليس مشكلة. هناك العديد من أساليب التوافق عبر الإنترنت (هذه المقالة تدور حول الهيكل ، ها ~).
قصص لاحقةأي تقنية جديدة تتطلب عملية التكيف. إذا كنت على استعداد لتكون مطورًا ممتازًا للوصول الأمامي على الويب ، فيجب عليك الاستمرار في المحاولة وقبول أحدث تقنيات الواجهة الأمامية.
قال صن ون ذات مرة إنه إذا كنت تريد أن تصنع سعادة الحضارة ، فعليك أن تصنع ألم الحضارة. هذا صحيح بالنسبة لثورة الإنسانية ، وكذلك ثورة HTML 5. لقد سمح الانخفاض التدريجي لـ IE بمصنعي المتصفح الرئيسيين للدخول إلى فترة الدول المتحاربة والتنافس مع بعضهم البعض. أما بالنسبة للمطورين ، نأمل فقط أن يتبع مصنعو المتصفح الرئيسيون نفس المعيار قدر الإمكان ، بدلاً من تقسيم اللاعبين بعد المنافسة. لأن العرض التقديمي الفعال والمثالي لنفس التطبيق لجميع أنواع المستخدمين هو هدفنا النهائي.
وبهذه الطريقة ، تبدأ هذه المقالة من doctype من الصفحة ، إلى استخدام علامات HTML 5 الجديدة لإنشاء بنية صفحة أكثر دلالة ، ثم يشرح العلامات الجديدة المتعلقة ببنية الصفحة. أعتقد أن كل شخص لديه فهم جديد للعلامات الجديدة الهيكلية لـ HTML 5. إذا كنت مهتمًا ، فافتح IDE الخاص بك ، واكتب قطعة من الكود المصممة بواسطة العلامات الجديدة لـ HTML 5 ، ثم استخدم CSS لوصف مخططك الكبير!