دليل تعليمي HTML5

API HTML5

وسائط HTML5

رسومات HTML5

SVG المدمج في HTML5 دليل HTML5

دعم متصفحات HTML5

يمكنك جعل بعض المتصفحات القديمة (غير مدعومة HTML5) تدعم HTML5.

دعم متصفحات HTML5

المتصفحات الحديثة تدعم HTML5.

بالإضافة إلى ذلك، جميع المتصفحات، بما في ذلك القديمة والجديدة، تتعامل تلقائيًا مع العناصر غير المعروفة كعناصر داخلية.

لذلك، يمكنك "تعليم" معالجة المتصفح "غير معروف" عناصر HTML.

حتى أنك يمكنك تعليم متصفح Internet Explorer 6 (Windows XP 2001) التعامل مع عناصر HTML غير المعروفة.

تعريف عناصر HTML5 كعناصر مستوى الـ block

حدد HTML5 8 عناصر جديدة من العناصر الدلالية (semantic). جميع هذه العناصر هي عناصر مستوى الـ block.

للبحث عن عرض صحيح لهذه العناصر في المتصفحات القديمة، يمكنك تعيين خاصية display في CSS إلى قيمة block:

مثال

<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليمي أساسي (oldtoolbag.com)</title>　
</head>
<body>
header, section, footer, aside, nav, main, article, figure　{
　　　　display:　block;　
}
</body>
</html>

اختبار لرؤية <‹/›>

إضافة عناصر مخصصة إلى HTML

يمكنك إضافة عناصر مخصصة إلى HTML.

يضيف هذا المثال عنصرًا مخصصًا إلى HTML ويحدد أنماطًا لهذا العنصر، واسم العنصر هو <myLabel> :

مثال

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">　
<title>إضافة عناصر جديدة إلى HTML (oldtoolbag.com)</title>
<script>
　　　　document.createElement("myLabel")
</script>
<style>
myLabel{
　　　　display:　block;
　　　　background-color:　#ddd;
　　　　padding:　50px;
　　　　font-size:　30px;
}
</style>　
</head>
　
<body>
　
<h1>عنواني الأول لـ HTML5</h1>
　
<p>فقرة HTML5 الأولى.</p>
　
<myLabel>عنصري الأول المخصص</myLabel>
　
</body>
　　</html>

اختبار لرؤية <‹/›>

جملة JavaScript document.createElement("myLabel") هي لإضافة عناصر جديدة إلى متصفح IE.

جعل متصفح IE يدعم HTML5

يمكنك استخدام الطريقة المذكورة أعلاه لإضافة عناصر HTML5 إلى متصفحات IE، ولكن:

لا يدعم المتصفحات التي تعمل بنظام Internet Explorer 8 وكل الإصدارات الأقدم من IE الطريقة المذكورة أعلاه.

يمكننا استخدام "HTML5 Enabling JavaScript" الذي أنشأه Sjoerd Visscher، " لحل هذه المشكلة:

<![if lt IE 9]>
　　<script　src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

هذا الكود هو تعليق، يهدف إلى قراءة ملف html5.js وتحليله عند إصدار IE أقل من IE9.

ملاحظة:يرجى استخدام مكتبة موارد الستاتيكية لهذا الموقع (مكتبة موارد Google غير مستقرة في الصين):

<![if lt IE 9]>
　　<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

html5shiv هو حل جيد للتصفحات IE.html5shivيحل مشكلة عدم إدراك العناصر الجديدة التي يقدمها HTML5 من قبل المتصفحات IE6-8، لا يمكن استخدام هذه العناصر كعناصر أم لتغليف العناصر الفرعية، ولا يمكن تطبيق أنماط CSS عليها.

حلول Shiv مثالية

مثال

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">
<title>تطبيق HTML5</title>
　　<![if lt IE 9]>
　　<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
　　<![endif]-->
</head>
　
<body>
　
<h1>مقالتي الأولى</h1>
　
<article>
موقع دليل الأساسيات (oldtoolbag.com) - تعلم الأساسيات، حتى تتمكن من الذهاب أبعد!!
</article>
　
</body>
</html>

اختبار لرؤية <‹/›>

يجب وضع كود html5shiv.js في علامة <head> لأن متصفح Internet Explorer يحتاج إلى تحميل هذا الملف أولاً عند معالجة العناصر الجديدة في HTML5.

SVG المدمج في HTML5 دليل HTML5