در این فصل:
نحو عنصر
عنصر HTMLواحد ساختاری اصلی یک صفحه وب است که به زبان HTML نوشته شده است. تصویر زیر نحو عناصر را نشان می دهد. برای اکثر تگ ها، نحو عنصر به جز تگ های منفرد یکسان به نظر می رسد.
همه عناصر در HTML از یک فرمت پیروی می کنند:
- عنصر با یک تگ شروع شروع می شود.
- عنصر با یک تگ بسته به پایان می رسد.
- محتوای یک عنصر همه چیز بین تگ های باز و بسته است.
- برخی از عناصر محتوایی ندارند (عناصر خالی).
- اکثر عناصر می توانند دارای ویژگی باشند
توجه: فراموش نکنید که علامت "" را در تگ پایانی قرار دهید / "، به مرورگر می گوید که عنصر شما به پایان رسیده است و آنچه بعد از آن نوشته می شود قبلاً عنصر دیگری است.
عناصر خالی
چندین عنصر در HTML وجود دارد که برچسب بسته شدن ندارند، مانند یا
. چنین عناصری نامیده می شوند خالیزیرا آنها حاوی هیچ محتوایی نیستند و برچسب بسته شدن ندارند.
عناصر تو در تو
تمام اسناد HTML از عناصر تو در تو تشکیل شده اند. بسیاری از آنها می توانند یا حاوی عناصر دیگری باشند یا می توانند درون عناصر دیگر تودرتو شوند، در حالی که عمق تودرتو عناصر محدود نیست.
مثال زیر دارای سه عنصر است که دو عنصر تودرتو هستند:
اولین پاراگراف من
هنگامی که یک عنصر را درون عنصر دیگری قرار می دهید، باید مراقب باشید که عنصر تودرتو در همان عنصر شروع و به پایان برسد. بنابراین، مثال زیر نادرست است:
این خیلی
جالب هستدو نوع عنصر در HTML وجود دارد - عناصر بلوک و عناصر درون خطی. در زیر با ویژگی های این عناصر و تفاوت آنها و همچنین راه های کنترل آنها از طریق قوانین CSS آشنا خواهید شد.
بلوک کردن عناصر
عناصر بلوک مبنایی هستند که برای چیدمان صفحات وب استفاده می شود. چنین عنصری مستطیلی است که بهطور پیشفرض، کل عرض صفحه را اشغال میکند (مگر اینکه در CSS طور دیگری مشخص شده باشد)، و طول عنصر به محتوای آن بستگی دارد. چنین عنصری همیشه از یک خط جدید شروع می شود، یعنی در زیر عنصر قبلی قرار دارد. یک عنصر بلوک می تواند شامل سایر عناصر بلوکی و درون خطی باشد.
نمونه هایی از عناصر بلوک:
,
- ,
- عناصر درون خطی فقط می توانند حاوی داده یا سایر عناصر درون خطی باشند، در حالی که عناصر بلوک می توانند شامل سایر عناصر بلوک، عناصر درون خطی و داده باشند. به عبارت دیگر، عناصر درون خطی به هیچ وجه نمی توانند عناصر بلوک را ذخیره کنند.
- عناصر بلوک همیشه از یک خط جدید شروع می شوند و عناصر درون خطی به این شکل تاکید نمی کنند.
- عناصر سطح بلوک کل عرض موجود مانند پنجره مرورگر را اشغال می کنند، در حالی که عناصر درون خطی به اندازه محتوای آنها به اضافه مقادیر padding، margin و حاشیه هستند.
- ,
و غیره.
عناصر درون خطی
برخلاف یک عنصر بلوک، یک عنصر درون خطی به یک خط جدید بسته نمی شود، بلکه در همان خط عنصر قبلی قرار می گیرد. چنین عناصری معمولاً در داخل عناصر بلوک یافت می شوند و عرض آنها فقط به محتوا و تنظیمات CSS بستگی دارد. تفاوت دیگر بین یک عنصر درون خطی و یک عنصر بلوک این است که فقط می تواند حاوی محتوا و سایر عناصر درون خطی باشد. عناصر بلوک را نمی توان در عناصر درون خطی تودرتو کرد.
نمونه هایی از عناصر درون خطی: , , , , و غیره.
توجه داشته باشید:در HTML5 ترتیب تو در تو بودن تگ ها مهم نیست. عناصر دیگر فقط به بلوک و درون خطی تقسیم نمی شوند، بلکه بر اساس معنا و هدف گروه بندی می شوند و دسته بندی محتوا را نشان می دهند.
نمایش ویژگی CSS: تغییر نوع عنصر
با ویژگی نمایش بسیار مفید در CSS، می توانید یک عنصر در سطح بلوک را شبیه یک عنصر درون خطی کنید و بالعکس. برای اینکه یک عنصر بلوک مانند یک عنصر درون خطی رفتار کند (یعنی به یک خط جدید ترجمه نمی شود)، باید یک قانون برای آن بنویسید:
نمایشگر: درون خطی
اگر می خواهید یک عنصر درون خطی را به عنوان یک عنصر بلوک نمایش دهید (به طوری که قبل و بعد از عنصر شکسته خط رخ دهد)، موارد زیر را بنویسید:
display:block;
اکشن (نمایش:داخلی) و (نمایش:بلاک)
شما همچنین می توانید یک "هیبرید" بسازید - یک عنصر بلوک با رفتاری مشابه یک عنصر درون خطی. در این حالت، تمام محتوای چنین عناصر بلوکی به طور معمول نمایش داده می شود، اما بلوک ها مانند عناصر درون خطی رفتار می کنند، در یک خط یکی پس از دیگری ردیف می شوند و تنها در صورت لزوم در یک خط جدید قرار می گیرند. حاشیه فروپاشی در چنین مواردی تاثیری ندارد. برای ایجاد یک عنصر بلاک درون خطی، بنویسید:
نمایشگر: بلوک درون خطی
اکشن (نمایش: inline-block)
در ادامه آموزش:ویژگی مرزی CSS. شما یاد خواهید گرفت که چگونه مرزها را به عناصر صفحه وب اضافه کنید و چه تنظیماتی را می توانید با استفاده از Cascading Style Sheets روی آنها اعمال کنید.
عناصر درون خطی عناصر صفحه وب هستند که مستقیماً بخشی از یک عنصر دیگر مانند یک پاراگراف متنی هستند. آنها عمدتاً برای تغییر ظاهر متن یا انتخاب منطقی آن استفاده می شوند.
برچسب بزنید یکی از عناصر مهم HTML است و برای ایجاد لینک طراحی شده است. بسته به وجود نام یا ویژگی های href تگ یک پیوند یا لنگر تنظیم می کند.
وزن پررنگ فونت را مشخص می کند.
برچسب بزنید اندازه فونت را در مقایسه با متن معمولی یک عدد افزایش می دهد. در HTML، اندازه قلم در واحدهای دلخواه از 1 تا 7 اندازه گیری می شود، و میانگین اندازه متن پیش فرض 3 است. بنابراین، اضافه کردن یک برچسب متن را یک واحد دلخواه افزایش می دهد.
برچسب بزنید
یک خط جدید را در مکانی که این تگ در آن قرار دارد تنظیم می کند. برخلاف تگ پاراگراف
استفاده از برچسب
یک تورفتگی خالی قبل از خط اضافه نمی کند.
برچسب بزنید طراحی شده برای تأکید بر متن مرورگرها چنین متنی را به صورت مورب نمایش می دهند.
وزن فونت را به حالت کج تنظیم می کند.
برچسب بزنید برای نمایش تصاویر با فرمت های گرافیکی GIF، JPEG یا PNG در یک صفحه وب طراحی شده است. در صورت لزوم می توان با گذاشتن تگ تصویر را به فایل دیگری پیوند داد داخل یک ظرف . در این حالت حاشیه ای در اطراف تصویر نمایش داده می شود که با افزودن ویژگی border="0" به تگ حذف می شود. .
برچسب بزنید اندازه فونت را در مقایسه با متن معمولی یک بار کاهش می دهد. در عمل شبیه به یک برچسب است ، اما دقیقا برعکس عمل می کند.
یک تگ جهانی که برای تعریف یک عنصر درون خطی در یک سند طراحی شده است.
برچسب بزنید طراحی شده برای تأکید بر متن مرورگرها چنین متنی را به صورت پررنگ نمایش می دهند.
فونت را به عنوان زیرنویس نمایش می دهد. در این مورد، متن زیر خط پایه کاراکترهای باقی مانده از خط قرار می گیرد و اندازه آن کاهش می یابد - H 2 O.
فونت را به صورت فوق نویس نمایش می دهد. عمل آن مشابه است ، اما متن در بالای خط پایه متن ظاهر می شود - m 2 .
تفاوت بین عناصر بلوکی و درون خطی به شرح زیر است.
عناصر HTML با توجه به نحوه نمایش آنها در یک صفحه وب به عناصر درون خطی و بلوک تقسیم می شوند.
عناصر درون خطی (داخلی)
عناصر درون خطی برای انجام برخی اقدامات بر روی متن طراحی شده اند، به عنوان مثال: شکستن خط، برجسته کردن یک قطعه متن به صورت مورب، برجسته کردن منطقی برخی از متن ها و اعمال سبک ها بر روی آن با استفاده از CSS و غیره. بسته به هدف عنصر درون خطی، یک تکه متن بین تگ های باز و بسته قرار می گیرد یا از یک تگ در هر جایی از متن استفاده می شود، مثلاً برای شکستن یک خط.
مثلا:
می توانید از یک عنصر درون خطی استفاده کنید تاکید بر متنی که توجه بازدیدکنندگان سایت را به خود جلب می کند با استفاده از سبک پررنگ.
یک عنصر درون خطی دارای عرضی برابر با عرض محتوای آن است. عناصر درون خطی نمی توانند حاوی عناصر بلوکی در درون خود باشند.
نمونه هایی از عناصر درون خطی: , ,