این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ kbd در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ kbd در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ kbd در HTML
تگ kbd که مخفف Keyboard Input می باشد تگی است که در دسته ی تگ های عبارتی یا Phrase می باشد ، با استفاده از آن میتوان یک ورودی صفحه کلید یا Keyboard Input را در یک صفحه وب قرار داد.
خب شاید براتون سواله که این کیبورد اینپوت یعنی چی ؟! ببینید هدف اصلی اینه که مرورگرها و موتورهای جستجوگر مثه گوگل بتونن محتوای درون یک صفحه وب را درک و تفسیر کنن، فقط همین ( یعنی کاربر این تگ ها فقط برای مرورگرها و موتورهای جستجوگر می باشد )
حالا نه فقط این تگ ( kbd ) بلکه تمامی تگ های HTML برای همینن که موتورهای جستجوگر و مرورگرها بتونن محتوای یک صفحه ی وب رو درک کنند، وگرنه شما بیا توی تگ kbd یه متن کاملا بی ربط با این تگ بنویس.
خب توی مرورگر نمایش میده و مشکلی نداره ولی دیگه اینجا موتورهای جستجوگری مثه گوگل و خوده مرورگر دیگه نمیتونن بفهمن که شما منظورتون از اون متن یه چیز دیگه بوده ، چرا؟ چون اونا هرچیزی که درون تگ kbd قرار بگیره به عنوان یک ورودی صفحه کلید یا مثلا یک دکمه از صفحه کلید تصورش میکنن و فقط اینجوری میبیننش، تموم شد رفت.
در جدول زیر میتوانید تمامی تگ های عبارتی را مشاهده نمایید :
| <code> | <strong> | <em> |
| <var> | <kbd> | <samp> |
Free-Learn
مثال از تگ kbd در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ kbd ( بدون استایل )
|
1 2 3 4 5 |
<body> <p>Please Press <kbd>Ctrl</kbd> and <kbd>C</kbd> For Copy File</p> </body> |
مثال شماره ۲ : استایل دادن به تگ kbd با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> kbd{ font-family:tahoma; font-size:13px; font-weight:600; background-color:#1668b9; padding:3px 7px; color:#fff; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ kbd در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ kbd از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- در حالت پیش فرض تگ kbd استایل خاصی ندارد ولی ما با استفاده از CSS به راحتی میتونیم بهش استایل بدیم. ( همانند مثال شماره ۲ )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ kbd را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
kbd { font-family: monospace; } |
