این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ pre در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ pre در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Pre در HTML
تگ pre که از کلمه ( PreFormatted ) گرفته شده است، در لغت به معنی ( پیش فرمت ) می باشد، تگی است که با استفاده از آن میتوان یک متن سفارشی یا مثلا یک متن با فرمت دلخواه را درون یک صفحه وب ایجاد کرد.
همونطور که میدونید در زبان HTML در حالت عادی ما نمیتونیم متنی را بصورت دلخواه با فرمت دلخواه ایجاد نماییم، بفرض مثال ما نمیتونیم در یک پاراگراف هرچقدر که بخوایم بین کلمات فاصله بندازیم یا مثلا نمیتونیم اینتر بزنیم و سطر رو بشکنیم بریم سطر بعد و…
حال ما با استفاده از تگ pre به راحتی میتونیم هرمتنی را با هرنوع فرمتی که بخوایم در یک صفحه وب ایجاد نماییم. ( یعنی کلا هرچی داخلش بنویسید در خروجی هم دقیقا همونجوری نشونش میده )
Free-Learn
مثال از تگ pre در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ pre ( بدون استایل )
|
1 2 3 4 5 6 7 8 |
<body> <pre> سایت آموزشی فری لرن سلام خوبی؟ ----- کلا هرچی دلم بخواد اینجا تایپ میکم </pre> </body> |
مثال شماره ۲ : ایجاد باکس کد ( یه باکسی که بشه کد توش گذاشت ) مثه همین باکس هایی که بالا و پایین دارید میبینید
|
1 2 3 4 5 6 7 8 9 |
<body> <pre class="mycode"> <a href="#"> <img src="logo.png"> </a> </pre> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ pre در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ pre از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- بصورت پیش فرض این تگ هیچ استایل خاصی نداره ولی خب ما با استفاده از CSS میتونیم به راحتی بهش استایل بدیم. ( همانند مثال شماره ۲ )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ pre را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 |
pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; } |
