قسم الدردشة PHP. أقسام المحتوى في HTML5 - div أو القسم أو المقالة؟ استخدام سمات متعددة
بغض النظر عن مقدار استخدامنا لـ PHP، لا تزال بعض الوظائف تظهر والتي لم نسمع عنها من قبل. وبعض منهم سيكون مفيدا جدا بالنسبة لنا. لقد قمت بإنشاء قائمة صغيرة من الوظائف المفيدة التي يجب أن تكون في ترسانة كل مبرمج PHP.
1. إنشاء وظائف بعدد متغير من الوسائط
على الأرجح، أنت تعلم بالفعل أن PHP تسمح لنا بإنشاء وظائف باستخدام وسائط اختيارية. سأعرض الآن وظيفة يمكن أن يختلف فيها عدد الوسائط من حالة إلى أخرى.
لكن أولاً، دعونا نتذكر كيف نقوم بإنشاء الوظائف بالطريقة المعتادة:
// دالة بمعلمتين اختياريتين function foo($arg1 = "", $arg2 = "") ( echo "arg1: $arg1\n"; echo "arg2: $arg2\n"; ) foo("hello", "عالم")؛ /* سيُخرج: arg1: hello arg2:world */ foo(); /* سيتم إخراج: arg1: arg2: */
الآن دعونا نلقي نظرة على كيفية كتابة دالة بعدد غير محدود من الوسائط. للقيام بذلك، سيتم استخدام طريقة func_get_args():
// لا تحدد الوسائط function foo() ( // تُرجع مصفوفة من الوسائط التي تم تمريرها $args = func_get_args(); foreach ($args as $k => $v) ( echo "arg".($k+1) ." : $v\n" ) ) foo(); /* لن يُخرج أي شيء */ foo("hello"); /* ستتم طباعة arg1: hello */ foo("hello", "world", "again"); /* ستتم طباعة arg1: مرحبًا arg2: العالم arg3: مرة أخرى */
2. استخدم Glob() للبحث عن الملفات
في كثير من الأحيان أسماء الوظائف تتحدث عن نفسها. لا يمكن قول الشيء نفسه عن الدالة glob().
دون الخوض في الكثير من التفاصيل، وظائفها تشبه طريقة scandir(). يسمح لك بالعثور على الملف المطلوب باستخدام القالب:
// البحث عن كافة ملفات PHP $files = glob("*.php"); print_r($files); /* سيتم إخراج: Array ( => phptest.php => pi.php => post_output.php => test.php) */
للعثور على ملفات من عدة أنواع، عليك أن تكتب مثل هذا:
// العثور على جميع ملفات php وtxt $files = glob("*.(php,txt)", GLOB_BRACE); print_r($files); /* الإخراج: صفيف ( => phptest.php => pi.php => post_output.php => test.php => log.txt => test.txt) */
يمكنك أيضًا تحديد المسار في القالب:
$files = glob("../images/a*.jpg"); print_r($files); /* الإخراج: مصفوفة ( => ../images/apple.jpg => ../images/art.jpg) */
للحصول على المسار الكامل للمستند، استخدم طريقة realpath() :
$files = glob("../images/a*.jpg"); // قم بتطبيق وظيفة "realpath" على كل عنصر من عناصر المصفوفة $files = array_map("realpath",$files); print_r($files); /* سيتم إخراج: Array ( => C:\wamp\www\images\apple.jpg => C:\wamp\www\images\art.jpg) */
3. معلومات عن الذاكرة المستخدمة
إذا قمت بتتبع مقدار الذاكرة التي تستهلكها البرامج النصية الخاصة بك، فمن المحتمل أن تقوم بتحسينها في كثير من الأحيان.
لدى PHP أداة قوية لتتبع الذاكرة. قد تكون الأحمال مختلفة في أجزاء مختلفة من البرنامج النصي. للحصول على قيمة الذاكرة المستخدمة حاليًا، يجب علينا استخدام طريقة Memory_get_usage(). لتحديد الحد الأقصى لحجم الذاكرة المستخدمة، استخدم Memory_get_peak_usage()
صدى "الأولي: ".memory_get_usage()." بايت \n"; /* الأولي: 361400 بايت */ // إعطاء حمل صغير لـ ($i = 0; $i< 100000; $i++) { $array = md5($i); } // и ещё for ($i = 0; $i < 100000; $i++) { unset($array[$i]); } echo "Final: ".memory_get_usage()." bytes \n"; /* Final: 885912 bytes */ echo "Peak: ".memory_get_peak_usage()." bytes \n"; /* Peak: 13687072 bytes */
4. معلومات المعالج
للقيام بذلك، تحتاج إلى استخدام طريقة getrusage (). لكن ضع في اعتبارك أن هذه الميزة لن تعمل على نظام التشغيل Windows.
Print_r(getrusage()); /* طباعة المصفوفة ( => 0 => 0 => 2 => 3 => 12692 => 764 => 3864 => 94 => 0 => 1 => 67 => 4 => 0 => 0 => 0 => 6269 => 0) */
الصورة الموضحة أعلاه ستكون واضحة لمن لديه خبرة في إدارة النظام. ولجميع الآخرين، نقدم نسخة:
- ru_oublock: عدد عمليات كتابة الكتلة
- ru_inblock: عدد عمليات قراءة الكتلة
- ru_msgsnd: عدد الرسائل المرسلة
- ru_msgrcv: عدد الرسائل المستلمة
- ru_maxrss: الحد الأقصى لحجم المجموعة غير المقسمة إلى صفحات
- ru_ixrss: إجمالي حجم الذاكرة المشتركة
- ru_idrss: الحجم الإجمالي للبيانات غير المشتركة
- ru_minflt: عدد صفحات الذاكرة المستخدمة
- ru_majflt: عدد الأخطاء المفقودة في الصفحة
- ru_nsignals: عدد الإشارات المستقبلة
- ru_nvcsw: عدد مفاتيح السياق حسب العملية
- ru_nivcsw: عدد مفاتيح السياق القسرية
- ru_nswap: عدد مرات الوصول إلى القرص عند الترحيل
- ru_utime.tv_usec: وقت التشغيل في وضع المستخدم (ميكروثانية)
- ru_utime.tv_sec: وقت التشغيل في وضع المستخدم (بالثواني)
- ru_stime.tv_usec: وقت التشغيل في الوضع المميز (ميكروثانية)
- ru_stime.tv_sec: وقت التشغيل في الوضع المميز (بالثواني)
لمعرفة موارد المعالج التي يستخدمها البرنامج النصي، تحتاج إلى قيمة "وقت المستخدم" (وقت المستخدم) و"وقت النظام" (وقت الوضع المميز). يمكنك الحصول على النتيجة في كل من الثواني والميكروثانية. لتحويل إجمالي عدد الثواني إلى رقم عشري، تحتاج إلى قسمة قيمة الميكروثانية على مليون وإضافة قيمة الثواني إلى القيمة.
إنه نوع من الارتباك. هنا مثال:
// راحة لمدة 3 ثواني من النوم (3)؛ $data = getrusage(); صدى "وقت المستخدم:". ($data["ru_utime.tv_sec"] + $data["ru_utime.tv_usec"] / 1000000)؛ صدى "وقت النظام:". ($data["ru_stime.tv_sec"] + $data["ru_stime.tv_usec"] / 1000000)؛ /* يطبع وقت المستخدم: 0.011552 وقت النظام: 0 */
على الرغم من أن تنفيذ البرنامج النصي استغرق حوالي 3 ثوانٍ، إلا أنه لم يتم تحميل المعالج بشكل كبير. الحقيقة هي أنه عند استدعاء (النوم)، لا يستهلك البرنامج النصي أي موارد للمعالج تقريبًا. بشكل عام، هناك العديد من المهام التي تستغرق وقتا كبيرا، ولكن لا تستخدم المعالج. على سبيل المثال، انتظار العمليات المتعلقة بالقرص. لذلك لا تستخدم دائمًا وقت وحدة المعالجة المركزية في البرامج النصية الخاصة بك.
وهنا مثال آخر:
// المشي 10 ملايين مرة for($i=0;$i<10000000;$i++) { } $data = getrusage(); echo "User time: ". ($data["ru_utime.tv_sec"] + $data["ru_utime.tv_usec"] / 1000000); echo "System time: ". ($data["ru_stime.tv_sec"] + $data["ru_stime.tv_usec"] / 1000000); /* выводит User time: 1.424592 System time: 0.004204 */
استغرق البرنامج النصي 1.4 ثانية من وقت وحدة المعالجة المركزية. في هذه الحالة، تكون أوقات استدعاء النظام منخفضة بشكل عام.
وقت الوضع المميز (وقت النظام) هو الوقت الذي يقضيه المعالج في تنفيذ طلبات النظام إلى النواة نيابة عن البرنامج. مثال:
$start = ميكروتايم(صحيح); // استدعاء microtime كل 3 ثواني while(microtime(true) - $start< 3) { } $data = getrusage(); echo "User time: ". ($data["ru_utime.tv_sec"] + $data["ru_utime.tv_usec"] / 1000000); echo "System time: ". ($data["ru_stime.tv_sec"] + $data["ru_stime.tv_usec"] / 1000000); /* выводит User time: 1.088171 System time: 1.675315 */
الآن تم إنفاق وقت النظام أكثر بكثير مما كان عليه في المثال السابق. كل ذلك بفضل طريقة microtime()، التي تستخدم موارد النظام.
ومع ذلك، تجدر الإشارة إلى أن الوقت المعروض قد لا يكون دقيقًا بسبب ذلك في وقت معين، يتم أيضًا استخدام موارد المعالج بواسطة برامج أخرى، مما قد يؤدي إلى حدوث خطأ بسيط.
5. الثوابت السحرية
هناك العديد من الثوابت السحرية في PHP، مثل رقم السطر الحالي (__LINE__)، مسار الملف (__FILE__)، مسار الدليل (__DIR__)، اسم الوظيفة (__FUNCTION__)، اسم الفئة (__CLASS__)، اسم الطريقة (__METHOD__) ومساحات الأسماء ( __مساحة الاسم__).
لن نعتبرهم جميعا. دعونا نلقي نظرة على زوجين فقط:
// يعتمد هذا البرنامج النصي على موقع الملف الحالي و// قد يسبب مشاكل إذا تم استخدامه من أدلة مختلفة require_once("config/database.php"); // هذا البرنامج النصي لن يسبب مشاكل require_once(dirname(__FILE__) . "/config/database.php");
استخدم __LINE__ عند تصحيح البرامج النصية:
// الكود // ... my_debug("بعض رسائل التصحيح"، __LINE__)؛ /* سيعرض السطر 4: بعض رسائل التصحيح */ // المزيد من التعليمات البرمجية // ... my_debug("another debug message"، __LINE__); /* سيطبع السطر 11: رسالة تصحيح أخرى */ function my_debug($msg, $line) ( echo "Line $line: $msg\n"; )
6. إنشاء معرفات فريدة
هناك أوقات تحتاج فيها إلى إنشاء سلسلة فريدة. لقد رأيت عدة مرات أن الدالة md5() تُستخدم لحل هذه المشكلة:
// إنشاء سلسلة عشوائية echo md5(time() . mt_rand(1.1000000));
ولكن في الواقع، لدى PHP وظيفة خاصة ()uniqid لهذه الأغراض
// إنشاء سلسلة عشوائية echo uniqid(); /* ستتم طباعة 4bd67c947233e */ // مرة أخرى echo uniqid(); /* سيتم طباعة 4bd67c9472340 */
بالعين المجردة يمكنك أن ترى أن الرموز الأولى، بعبارة ملطفة، متشابهة... ويرجع ذلك إلى حقيقة أن هذه الطريقة تستخدم وقت الخادم لإنشاء الرموز. وهذا مفيد حتى، لأنه... يتم الحصول على جميع القيم التي تم إنشاؤها بالترتيب الأبجدي، مما يجعل من الممكن فرزها بسرعة.
من أجل تقليل فرص الحصول على نسخة مكررة، يمكننا إضافة بادئة أو استخدام معلمة ثانية (يزيد عدد الأحرف):
// مسبوقة بـ echo uniqid("foo_"); /* ستتم طباعة foo_4bd67d6cd8b8f */ // مع المعلمة الثانية echo uniqid("",true); /* ستطبع 4bd67d6cd8b926.12135106 */ // كلاهما echo uniqid("bar_",true); /* سيتم إخراج bar_4bd67da367b650.43684647 */
تولد هذه الطريقة سلاسل أصغر من md5، وبالتالي توفر المساحة.
7. التسلسل
هل سبق لك أن قمت بتخزين بيانات معقدة في قاعدة بيانات أو ملف؟ من أجل تحويل كائن إلى سلسلة، توفر PHP وظيفة خاصة.
بشكل عام، هناك طريقتان من هذه الطرق: serialize() وunserialize()
// مصفوفة معقدة $myvar = array("hello", 42, array(1,two"), "apple"); // تحويل إلى سلسلة $string = serialize($myvar); صدى سلسلة $؛ /* سيطبع a:4:(i:0;s:5:"hello";i:1;i:42;i:2;a:2:(i:0;i:1;i:1; s :3:"two";)i:3;s:5:"apple";) */ // احصل على القيمة الأصلية $newvar = unserialize($string); print_r($newvar); /* سيتم إخراج المصفوفة ( => hello => 42 => Array ( => 1 => two) => apple) */
هذه هي الطريقة التي تعمل بها هذه الوظائف. ومع ذلك، نظرًا للنمو السريع في شعبية JSON، تمت إضافة طريقتين json_encode() وjson_decode() إلى PHP 5.2. عملهم مشابه لـ serialize ():
// مصفوفة معقدة $myvar = array("hello", 42, array(1,two"), "apple"); // تحويل إلى سلسلة $string = json_encode($myvar); صدى سلسلة $؛ /* ستطبع ["hello",42,,"apple"] */ // استعادة القيمة الأصلية $newvar = json_decode($string); print_r($newvar); /* طباعة المصفوفة ( => hello => 42 => Array ( => 1 => two) => apple) */
يعد هذا الخيار أكثر إحكاما ومتوافقًا مع اللغات الأخرى مثل JavaScript. ومع ذلك، عند العمل مع كائنات معقدة للغاية، قد يحدث فقدان البيانات.
8. ضغط السلسلة
عندما نتحدث عن الضغط، تتبادر إلى ذهننا على الفور ملفات الأرشيف بتنسيق ZIP. يوفر PHP القدرة على ضغط السلاسل الطويلة دون أي ملفات.
يوضح المثال التالي كيفية عمل الدالتين gzcompress() وgzuncompress():
$string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut elit id mi ultricies adipiscing. Nulla facilisi. Praesent pulvinar, sapien vel feugiat feugiat resibulum, nulla two pretium orci, not ultricies elit lacus quis ante. علم ipsum ألم الجلوس amet ، consectetur adipiscing elit كيو الاتحاد الأوروبي غير إينيم "؛ $compressed = gzcompress($string); صدى "الحجم الأصلي:". strlen($string)."\n"; /* سيخرج الحجم الأصلي: 800 */ echo "الحجم المضغوط: ". strlen($compressed)."\n"; /* سيخرج الحجم المضغوط: 418 */ // return $original = gzuncompress($compressed);
يمكننا تقليل حجم النص بنسبة 50%. لنفس الأغراض، يمكنك استخدام طريقتي gzencode() وgzdecode()، اللتين تستخدمان خوارزمية ضغط مختلفة.
9. قم بالتنفيذ قبل الخروج
لدى PHP وظيفة Register_shutdown_function() التي ستسمح لك بتنفيذ بعض التعليمات البرمجية قبل إيقاف تشغيل البرنامج النصي.
لنفترض أنك تريد معرفة بعض المعلومات... وقت تشغيل البرنامج النصي:
// احصل على وقت البدء $start_time = microtime(true); // بعض العمليات // ... // عرض وقت التشغيل echo "استغرق التنفيذ: ". (ميكروتايم (صحيح) - $start_time). "ثواني.";
للوهلة الأولى، قد يبدو هذا مهمة تافهة. ولهذه الأغراض، يمكنك وضع الكود في نهاية الملف. ومع ذلك، إذا تم تنشيط وظيفة الخروج () في مكان ما قبل ذلك، فلن يعمل هذا الرمز أبدًا. كما أنه لن يعمل إذا كان هناك خطأ في الصفحة أو قام المستخدم بمقاطعة تحميل الصفحة (بالنقر على الزر المقابل في متصفحه)؛
عند استخدام طريقة Register_shutdown_function()، سيتم تنفيذ التعليمات البرمجية في أي حال:
$start_time = ميكروتايم(صحيح); Register_shutdown_function("my_shutdown"); الدالة my_shutdown() ( global $start_time; echo "استغرق التنفيذ: ". (microtime(true) - $start_time). " ثواني."; )
خاتمة
PHP كوكب كامل لا يتوقف أبدًا عن إبهارنا بمحتواه. ما رأيك في هذه الوظائف؟
). كل علامة (قسم)يجب أن يكون لديك زوج (/قسم). المعلمات المطلوبة هي اسمو حلقة. يمكن أن يكون اسم الدورة (القسم) أي شيء يتكون من أحرف وأرقام وشرطات سفلية. دورات (قسم)يمكن أن تكون متداخلة ويجب أن تكون أسماء الأقسام المتداخلة فريدة بالنسبة لبعضها البعض. عامل حلقة(عادةً مجموعة من القيم) تحدد عدد تكرارات الحلقة. عند طباعة المتغيرات داخل القسم، يجب إدراج اسم القسم بجوار اسم المتغير داخل قوسين مربعين. (قسم آخر)يتم تنفيذه إذا كانت المعلمة حلقةلا يحتوي على قيم
اسم السمة | يكتب | مطلوب | تقصير | وصف |
---|---|---|---|---|
اسم | خيط | نعم | غير متوفر | اسم القسم |
حلقة | مختلط | نعم | غير متوفر | قيمة تحدد عدد تكرارات الحلقة. |
يبدأ | عدد صحيح | لا | 0 | مؤشر الموضع الذي ستبدأ منه الحلقة. إذا كانت القيمة سالبة، فسيتم حساب موضع البداية من نهاية المصفوفة. على سبيل المثال، إذا كان متغير الحلقة يحتوي على 7 عناصر وكانت قيمة سمة البداية هي -2، فسيكون فهرس البداية هو 5. يتم اقتطاع القيم غير الصالحة (القيم خارج المصفوفة) تلقائيًا إلى أقرب قيمة صالحة. |
خطوة | عدد صحيح | لا | 1 | قيمة الخطوة المستخدمة لاجتياز الصفيف. على سبيل المثال، تشير الخطوة=2 إلى اجتياز المصفوفة بالعناصر 0,2,4... إذا كانت الخطوة سالبة، فسيتم اجتياز المصفوفة في الاتجاه المعاكس. |
الأعلى | عدد صحيح | لا | 1 | الحد الأقصى لعدد تكرارات الحلقة. |
يعرض | منطقية | لا | حقيقي | يشير إلى ما إذا كان سيتم إظهار هذا القسم أم لا |
ملحوظة
بدءًا من الإصدار 1.5.0 من Smarty، تم تغيير صيغة متغير خاصية الجلسة من (%sectionname.varname%) إلى ($smarty.section.sectionname.varname). لا يزال بناء الجملة القديم مدعومًا، ولكنك لن ترى سوى أمثلة على بناء الجملة الجديد.
يتم استخدام الفهرس لعرض الفهرس الحالي للمصفوفة، بدءًا من الصفر (أو سمة البداية إذا تم تحديدها) وزيادة بمقدار واحد (أو قيمة سمة الخطوة إذا تم تحديد واحدة).
ملاحظة تقنية
إذا لم يتم تحديد سمات الخطوة والبدء، فإن الفهرس هو نفس سمة قسم التكرار، باستثناء أنه يبدأ عند 0 بدلاً من 1.
يتم استخدام التكرار لعرض رقم التكرار الحالي للحلقة.
ملحوظة
هذه القيمة مستقلة عن خصائص البداية والخطوة والحد الأقصى، على عكس خاصية الفهرس. كما أن التكرارات تبدأ من الواحد وليس من الصفر مثل المؤشرات. رونوم هو مرادف لخاصية التكرار، وهما يعملان بنفس الطريقة.
مثال 7.38. خاصية (القسم) التكرار
تعيين ("custid"، $id)؛ ?> (اسم القسم=حلقة cu=بداية $custid=5 خطوة=2) التكرار=($smarty.section.cu.iteration) مؤشر=($smarty.section.cu.index) id=($custid)
(/قسم)
نتيجة تشغيل هذا المثال:
التكرار=1 فهرس=5 معرف=3005
التكرار = 2 فهرس = 7 معرف = 3007
التكرار = 3 فهرس = 9 معرف = 3009
التكرار = 4 فهرس = 11 معرف = 3011
التكرار = 5 فهرس = 13 معرف = 3013
التكرار = 6 فهرس = 15 معرف = 3015
يستخدم هذا المثال خاصية التكرار لطباعة رأس الجدول كل خمسة أسطر (يستخدم (if) مع عامل التعديل - باقي القسمة).
يقدم HTML5 مجموعة من العناصر المقطعية التي تستخدمها في الترميز الخاص بك لإضافة معنى أو معنى دلالي إلى صفحاتك، وبالتالي السماح لبرامج الكمبيوتر بفهم محتواها بشكل أفضل.
بعد قراءة هذا المنشور، سوف تتعلم كيفية استخدام العناصر المقطعية على مواقع الويب الخاصة بك. سأحاول أن أشرح في أي الحالات يكون من الأفضل استخدام عنصر أو آخر ومتى يكون من الأفضل اللجوء إلى العنصر القديم الجيد.
لنبدأ.
العنصر الرئيسي
يجب أن يحتوي العنصر على المحتوى الرئيسي لصفحة الويب الخاصة بك. علاوة على ذلك، يجب أن يكون المحتوى بأكمله فريدًا على الصفحة ولا يجوز عرضه في أي مكان آخر على الموقع.لا ينبغي وضع المحتوى المتكرر على صفحات متعددة (الشعار، مربع البحث، روابط التذييل، وما إلى ذلك) داخل عنصر.
فيما يلي مثال لكيفية تقديم المحتوى الرئيسي للصفحة.
القيثارات
أعظم القيثارات في عصرنا
جيبسون إس جي
درابزين المذيع
ملحوظة:استخدمنا خاصية الدور ARIA role=”main”، وهنا تشير إلى أهمية هذا العنصر لتلك البرامج التي لا تدعم العنصر بعد (على سبيل المثال، بعض برامج قراءة الشاشة).
يمكنك استخدام عنصر واحد فقط لكل صفحة، ولا يمكن وضعه داخل العناصر، أو.
عنصر المقالة
يجب أن يحتوي العنصر على جزء من المعلومات المستقلة التي يمكن إخراجها من سياق الصفحة بأكملها دون أن تفقد معناها. يمكن أن يكون هذا: أخبار، مقال مدونة، تعليقات المستخدم.
عنوان المقال
يمكنك تداخل العناصر مع بعضها البعض. وهذا يعني أن العناصر المتداخلة مرتبطة بالعنصر الخارجي.
كانت هذه مقالة مثيرة للاهتمام كيف تربط هذا بالتميز العالمي؟عنوان المقال
تعليقات
في هذا المثال، استخدمنا عنصرًا لتسليط الضوء على المقالة نفسها وكل تعليق عليها. يسمح نظام التداخل هذا بنسب التعليقات إلى نص المقالة.
عنصر القسم
يتم استخدام العنصر لتمثيل قسم (مجموعة) من المحتوى ذي الصلة. يشبه تطبيقه التطبيق مع الاختلاف الرئيسي وهو أن المحتوى الموجود داخل العنصر ليس له أي معنى خارج سياق الصفحة نفسها.يوصى باستخدام العلامات (
– )
للإشارة إلى موضوع القسم.
لإعطاء مثال على المقالة التي تقرأها الآن، يمكنك لف كل فقرة في علامة.
كيفية استخدام عناصر قسم HTML5
العنصر الرئيسي
عنصر المقالة
عنصر القسم
...
إذا كنت تريد تجميع المحتوى للتصميم لاحقًا، ففي هذه الحالة تحتاج إلى استخدام عنصر بدلاً من ذلك.
عنصر التنقل
يتم استخدام العنصر لتمييز مجموعة من الروابط إلى صفحات أو أقسام خارجية داخل الصفحة الحالية. إنه مناسب تمامًا لكل من التنقل الرئيسي للموقع وجدول المحتويات أو المشاركات.
يؤدي تخطيط الروابط كقائمة إلى تسهيل التنقل، على الرغم من أنه ليس مطلوبًا عند استخدام العنصر.
عنصر جانبا
يتم استخدام العنصر لتمييز المحتوى المرتبط بشكل مباشر بالمحتوى المحيط، ولكن يمكن أيضًا النظر فيه بشكل منفصل. يمكن أن تكون هذه حواشي جانبية (كما هو الحال في الكتب)، أو مجموعات من العناصر، أو أرقام، أو اقتباسات.
جوجل تشتري Nest
في هذا المثال، استخدمنا عنصرًا لتسليط الضوء على معلومات حول Google في مقالة إخبارية. قد تكون هذه المعلومات مفيدة للقارئ، ولكنها لا تتعلق بالخبر بشكل مباشر.
عنصر الرأس
يتم استخدام العنصر لتقديم جزء تمهيدي لمقال أو صفحة ويب. وعادة ما تحتوي على العنوان أو بعض البيانات الوصفية المتعلقة بالمحتوى، مثل تاريخ نشر المقالة أو جدول المحتويات (ضمن عنصر) لمستند أطول.سيتم ربط العنصر بأقرب عنصر مقطعي، وعادةً ما يكون العنصر الأصلي المباشر في بنية الصفحة.
جوجل تشتري Nest
في هذا المثال، يحتوي العنصر على عنوان مقالة إخبارية وتاريخ نشرها.
عنصر التذييل
يتم استخدام العنصر لتمثيل معلومات القسم مثل المؤلف وحقوق النشر والروابط لصفحات الويب ذات الصلة.
وبنفس الطريقة، يتم توصيل العنصر بأقرب عنصر مقطعي.
عنصر العنوان
يعد العنصر أحد أكثر العناصر التي يساء استخدامها في HTML. ليس المقصود من هذا العنصر ترميز عنوان بريدي، بل توفير معلومات الاتصال لمقال أو صفحة ويب. قد تكون هذه روابط إلى موقع المؤلف أو عنوان بريده الإلكتروني.جهات الاتصال مات ويست
غالبًا ما يستخدم هذا العنصر داخل العنصر، والذي بدوره يقع داخل العنصر.
جوجل تشتري Nest
خاتمة
في هذا المنشور، تعلمت كيفية استخدام عناصر قسم HTML5 لتخطيط صفحات الويب. استخدام هذه العناصر له عدد من المزايا.أحد أكبر هذه الميزات هو إعطاء معنى دلالي لمناطق معينة من صفحة الويب الخاصة بك، مما يسمح لبرامج الكمبيوتر (قارئات الشاشة) بتحديد العناصر الأساسية للمحتوى والتنقل.
ملحوظة:لا تدعم جميع برامج قراءة الشاشة العناصر الدلالية حتى الآن. لحماية نفسك، يمكنك الاستمرار في استخدام الأدوار
HTML5 العناصر الدلاليةتصف بوضوح معناها أو غرضها لكل من المتصفحات ومطوري الويب.
قبل ظهور معيار HTML5، كان يتم ترميز الصفحة بالكامل باستخدام العناصر بشكل أساسي
قدم معيار HTML5 عناصر جديدة لتنظيم المحتوى وتجميعه وترميز محتوى النص. أتاحت العناصر الدلالية الجديدة تحسين بنية صفحة الويب، وإضافة معنى دلالي إلى المحتوى الموجود فيها (كان ذلك
وفقًا لمواصفات HTML5، ينتمي كل عنصر إلى فئة محددة (صفر أو أكثر). كل واحد منهم يجمع عناصر ذات خصائص مماثلة. تتميز الفئات العامة التالية:
- محتوى ميتا
- تدفق المحتوى
- المحتوى المقطعي
- محتوى الرأس
- محتوى النص
- المحتوى المضمن
- المحتوى التفاعلي
وصف عناصر HTML5
1. العنصر
فئات المحتوى:تدفق المحتوى.
مجموعات العناصر التمهيدية والتنقلية، اختيارية. قد تحتوي على عناوين أو غلاف لمحتويات قسم الصفحة أو نموذج بحث أو شعار. يمكن أن يحتوي مستند HTML على عناصر متعددة في نفس الوقت
وصف الموقع
عنصر
2. العنصر
فئات المحتوى:
تم تصميمه لإنشاء كتلة تنقل لصفحة ويب أو موقع ويب بأكمله، ولكن ليس من الضروري أن يكون موجودًا بالداخل
يمكنك استخدام أكثر من مجرد عناصر القائمة كعناصر شريط التنقل:
...
يمكنك أيضًا إضافة رؤوس داخل عنصر:
...
3. العنصر
فئات المحتوى:تدفق المحتوى، المحتوى المقطعي.
تستخدم لتجميع الإدخالات - المنشورات والمقالات وإدخالات المدونة والتعليقات. وهي عبارة عن كتلة مستقلة ومنفصلة مخصصة للاستخدام المتكرر، وعادةً ما تبدأ برأس. قد تكون مكررة في صفحات أخرى من الموقع وتحتوي على عناصر أخرى بداخلها
...
4. العنصر
فئات المحتوى:تدفق المحتوى، المحتوى المقطعي.
يمثل العنصر قسمًا عامًا من المستند. المحتوى الموضوعي للمجموعات وعادةً ما يحتوي على عنوان. إنها ليست كتلة مجمعة؛ لهذه الأغراض فمن الأفضل استخدام العنصر
...
...
...
داخل
يمكنك إنشاء العناصر الأم
ملاحظات على الطبيعة
...
...
ملاحظات تاريخية
...
...
العنصر الخامس
فئات المحتوى:تدفق المحتوى، المحتوى المقطعي.
محتوى المجموعات المرتبط بشكل مباشر بالمحتوى المحيط ولكن يمكن اعتباره منفصلاً (أي أن إزالة هذه الكتلة لن تؤثر على فهم المحتوى الرئيسي). في أغلب الأحيان، يتم وضع العنصر كعمود جانبي (كما هو الحال في الكتب) ويتضمن مجموعة من العناصر:
6. العنصر
فئات المحتوى:تدفق المحتوى.
يمثل تذييل القسم المحتوي أو العنصر الجذري. يحتوي عادةً على معلومات حول مؤلف المقال ومعلومات حقوق الطبع والنشر وما إلى ذلك. عند استخدامه كتذييل صفحة كاملة، يتم استكمال المحتوى بإشعارات حقوق الطبع والنشر، وروابط لشروط الاستخدام، ومعلومات الاتصال، وروابط للمحتوى ذي الصلة، وما إلى ذلك.
يمكن أن يكون هناك عناصر متعددة في مستند ويب واحد
7. العنصر
فئات المحتوى:تدفق المحتوى.
يستخدم لتحديد معلومات الاتصال الخاصة بالمؤلف/مالك المستند أو المقالة. للإشارة إلى مؤلف الوثيقة، يتم وضع العلامة داخل العنصر
8. العنصر
فئات المحتوى:تدفق المحتوى.
عنصر
عنصر
القلطي
حول السلالة
9. العنصر
فئات المحتوى:تدفق المحتوى، محتوى قسم الجذر.
عنصر
عنصر
10. العنصر
عنصر
11. العنصر
فئات المحتوى:
يحدد الوقت (24 ساعة) أو التاريخ وفقًا للتقويم الغريغوري، مع إمكانية الإشارة إلى إزاحة الوقت والمنطقة الزمنية. لم يتم تصميم النص المضمن في هذه العلامة بواسطة المتصفح. السمة datetime متاحة للعلامة، والتي يشير محتواها إلى ما سيراه المستخدم على شاشة جهاز الكمبيوتر الخاص به:
لكي تتم قراءة التاريخ تلقائيًا، يجب أن يكون بالتنسيق YYYY-MM-DD. يتم تحديد الوقت، الذي يمكن تحديده أيضًا، بالتنسيق HH:MM مع إضافة البادئة المنفصلة T (الوقت):
12. العنصر
فئات المحتوى:تدفق المحتوى، محتوى النص.
نص يوضع داخل علامة ، يتم تمييزه باللون الأصفر افتراضيًا (يمكن تغيير لون الخلفية ولون الخط في الكتلة المحددة عن طريق تعيين أنماط CSS معينة). باستخدام هذه العلامة، يمكنك وضع علامة على المحتوى المهم بالإضافة إلى الكلمات الرئيسية.
13. العنصر
فئات المحتوى:تدفق المحتوى، محتوى النص.
يفصل جزءًا من النص الذي يجب عزله عن بقية النص لتنسيق النص ثنائي الاتجاه. يستخدم للنصوص المكتوبة في وقت واحد باللغات المقروءة من اليسار إلى اليمين ومن اليمين إلى اليسار.
14. العنصر
فئات المحتوى:تدفق المحتوى، محتوى النص.
تُظهر العلامة الواحدة للمتصفح مكانًا لإضافة فاصل أسطر طويل إذا لزم الأمر.
15. عناصر لوصف شخصيات شرق آسيا
فئات المحتوى:تدفق المحتوى، محتوى النص.
عنصر يسمح لك بوضع علامة على عنصر واحد أو أكثر من فئة محتوى النص باستخدام تعليق توضيحي روبي. تُستخدم التعليقات التوضيحية روبي بشكل أساسي في الطباعة في شرق آسيا كدليل للنطق أو لتضمين خصائص أخرى. قد يحتوي العنصر على:
— عقد أو عناصر نصية واحدة أو أكثر
- عنصر أو أكثر
عناصر
عنصر
عنصر