html5/"> عصر HTML5 شائع وصلت. إذا كنت لا تزال تنتظر توافق المتصفح ، فهذا يعني أنك غير متصلب على الويب. بالطبع ، هذا يرجع إلى التطوير المزدهر لعملاء الأجهزة المحمولة. أنت لا تصدق ذلك ، لا يسعني إلا أن أقول: صدق أو لا تصدق!
دعنا نلقي نظرة على بنية علامة HTML5 قياسية: (أنا أتحدث فقط عن العلامات هنا ، ولا يوجد شيء آخر متورط)
<! doctype html>
<html>
<head>
<meta charset = "gb2312">
<title> html5 </itlem>
</head>
<body>
<header>
<nav> </av>
</header>
<article>
<section>
<h2> </h2>
<p> </p>
</القسم>
</article>
<TOTER> </tower>
</body>
</html>
إن تقدم علامة HTML5 بالطبع لأن دلالاتها أكثر سهولة. بالطبع ، هذا مجرد واحدة من نصائح تقدم HTML5. يقترح بعض الناس أن: لا تقل أن تقدم HTML5 ثوري ، لكنه تنموي! أنا لا أعترض على هذا البيان ، لكنه ثوري بالفعل في بعض النواحي. لا أريد الخروج من الموضوع هنا ، نتحدث فقط عن الملصقات.
بالطبع ، عندما يكون متحمسًا لمثل هذه العلامة الدلالية الرائعة ، ليس علي فقط أن أسأل: هل أي دعمها؟ لسوء الحظ ، الجواب هو لا. إذا كنت خائفًا بالفعل من قبل IE ، فيجب عليك الاستمرار في تحمل تعذيبها الذي لا نهاية له. (IE9 و IE10 متوافقان بالفعل ودعم HTML5 و CSS3/"> CSS3.0)
لكن عليك أن تكون سعيدًا بوجود العديد من العباقرة في هذا العصر الذي تعيش فيه. لقد ساعدك شخص ما في حل هذه المشكلة! على الرغم من أنه لا يمكن أن يسمى الكمال!
دعونا نلقي نظرة على عدة حلول لحل مشكلة عدم دعم علامات HTML5 المتوافقة مع IE6/7/8:
1. جافا سكريبت: document.createelenment (......) جزء من السبب في أن IE6/7/8 غير مدعوم هو أنهم لا يعتبرون تذييل علامة HTML صالحة. لذا ، ألا نجعلها علامة؟ الطريقة الأكثر مباشرة هي بالطبع لإنشاء javaScript: document.createelenment (......)!(وظيفة(){
var element = ['header' ، 'footer' ، 'article' ، 'sirlice' ، 'section' ، 'nav' ، 'menu' ، 'hgroup' ، 'details' ، 'dialog' ، 'figure' ، 'figcaption "] ،
len = element.length ؛
بينما (لين-) {
document.createElement (العنصر [i])
}
}) () ؛
هذا هو ببساطة إنشاء بعض علامات HTML5 النموذجية بحيث يمكن أن تصبح علامات في IE6/7/8.
قام شخص ما بكتابة ملف JS كامل ، تحتاج فقط إلى تقديمه ، مثل هذا:
<!-[إذا lt ie 9]>
<script src = http: //html5shim.googlecode.com/svn/trunk/html5.js> </script>
<! [endif]-> هناك أيضًا كتابة
<!-[إذا lte ie 9]>
<script src = http: //html5shiv.googlecode.com/svn/trunk/html5.js> </script>
<! بالطبع هذا ليس ما قلته. النص الأصلي هو: ... الفرق الوحيد هو أن يكون لدى الشخص M وواحد AV - هذا كل شيء.
هنا نريد أن نقدم ملاحظة خاصة: أي حكم التعليقات التوضيحية الفريدة من نوعه:
LTE: هل اختصار أقل من أو يساوي ، وهو ما يعني أقل من أو يساوي.
LT: هل اختصار أقل من ، وهو ما يعني أقل من.
GTE: هل اختصار أكبر من أو يساوي ، وهو ما يعني أكبر من أو يساوي.
GT: هو اختصار أكبر من ، وهو ما يعني أكبر من.
! : هذا لا يساوي ، مثل رمز الحكم غير المسكوك في جافا سكريبت
على الرغم من أن IE9 يدعم علامات HTML5 ، إلا أن الدعم غير مكتمل للغاية ، بحيث يمكنك أيضًا كتابة LTE ، وهو ما يعتمد على اختيارك!
بالطبع ، لا تنس تحديد خاصية العرض للعلامة التي تم إنشاؤها حديثًا. في معظم الحالات ، أريد حظر العلامة:
رأس ، تذييل ، مقال ، جانبا ، قسم ، قائمة ، القائمة ، hgroup ، التفاصيل ، مربع الحوار ، الشكل ، figcaption {display: block}
2. طرق علامات التعشيشفي الواقع ، بعبارة صريحة ، فذلك لأن علامات HTML5 الدلالية Nest Divs وغيرها من العلامات المتاحة ، ثم كتابة أنماط فقط لـ Divs. أنا لا أتفق مع طريقة الكتابة هذه. هذا أفضل من فعل ذلك ، أعط العلامة معرفًا أو فئة دلالية!
<!-[إذا lt ie 9]>
<style>
الجسم> *. القسم {
اللون: #ff0 ؛
}
</style>
<! [endif]->
<style>
القسم. القسم {color: #f00 ؛
}
</style>
<section> <viv> اختبار المحتوى ... </div> </section>
ولكن إذا كان مشابهًا لهذا الهيكل ، فليس من الآمن استخدام :<v>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</nav>
3. أي التعليقات الشرطية<!-[إذا lt ie 9]> <viv> <! [endif]->
<!-[إذا كان ie 9]> <section> <! [endif]->
<!-[if! ie]> <!-> <section> <!-<! [endif]->
......
<!-[إذا lt ie 9]> </div> <! [endif]->
<!-[إذا كان IE 9]> </section> <! [endif]->
<!-[if! ie]> <!-> </section> <!-<! [endif]->
انظر إلى حكم التعليق الفريد من قبل IE مرة أخرى:
LTE: هل اختصار أقل من أو يساوي ، وهو ما يعني أقل من أو يساوي.
LT: هل اختصار أقل من ، وهو ما يعني أقل من.
GTE: هل اختصار أكبر من أو يساوي ، وهو ما يعني أكبر من أو يساوي.
GT: هو اختصار أكبر من ، وهو ما يعني أكبر من.
! : هذا لا يساوي ، مثل رمز الحكم غير المسكوك في جافا سكريبت
أعتقد أن الجميع يفهم ما يحدث! هذه طريقة أكثر إيلاما! يجعل كمية كبيرة من رمز HTML الرمز الذي أراد في الأصل أن يكون دلالة أكثر إرباكًا. ولا يفضي إلى أنماط الكتابة.
4. استخدم XMLNS لتحديد مساحة حياة المستندXMLNS هو اختصار مساحة اسم XHTML ، وهي مساحة الاسم المزعومة. مثل إعلان Doctype ، XMLNS هو أيضا إعلان. على عكس إعلان Doctype لا يزال موجودًا في مستندات HTML ، لا توجد XMLNS في مستندات HTML. XMLNs نرى عادة تظهر في مستندات XHTML.
<html xmlns = http: //www.w3
<html lang = en> اجتذبت الطريقة من سجلات Elco Klingen اهتمامًا واسع النطاق في البداية. تحتوي هذه التقنية على مساحة اسم XML وتستخدم عناصر مع بادئة مساحة الاسم ، مثل:
<! doctype html>
<html xmlns = "http://www.w3
<body>
<html5: القسم>
<!-المحتوى->
</html5: القسم>
</body>
</html>
بادئة: HTML5 ليست طريقة قياسية للكتابة ، يمكنك أيضًا استخدام أحرف أخرى بدلاً من ذلك: HL5 على ما يرام أيضًا. مع البادئة ، يتعرف IE على عناصر جديدة ، مما يسمح بتطبيق الأساليب. إنه يعمل أيضًا في المتصفحات الأخرى ، لذلك في النهاية ، تقوم بنجاح ببناء نفس العناصر والنمط نفسه في كل متصفح.
تحتوي هذه الطريقة على عيب واضح: يجب عليك استخدام مساحة اسم منظمة XML في مستندات HTML ، وتحتاج أيضًا إلى القيام بذلك في CSS:
html5/: القسم {
العرض: كتلة ؛
}
فكيف يكون التوافق مع JS؟ هنا اختبار deml
<! doctype html>
<html xmlns = "http://www.w3
<head>
<title> ؛ html5 </itlem>
<meta charset = "gb2312">
<style>
html5/: القسم {display: block ؛ العرض: 100px ؛ الارتفاع: 50 بكسل ؛ الخلفية:#F00 ؛ الحدود: 1 بكسل الأزرق الصلب. اللون: #ff0 ؛ }
</style>
<script>
window.onload = function () {
ALERT (document.getElementByID ("Test"). Innerhtml + "--- id")
ALERT (document.getElementsByTagname ("Section") [0] .innerhtml + "--- tagname")
ALERT (document.getElementsByTagname ("Section") [0] .innerhtml + "--- أقصى")
}
</script>
</head>
<body>
<html5: القسم معرف = "اختبار"> المحتوى </html5: القسم>
</body>
</html>
تم اختبار نتائج الاختبار بواسطة IE6/7/8 ، ولكن يمكن الحصول على معرفات فقط في FixFox و Chrome ، لذلك هذه الطريقة ليست طريقة مقبولة!