صفحه کلید (kbd)
تگ «صفحه کلید (kbd)» برای نمایش «ورودی صفحه کلید» است. یعنی کلیدهایی که کاربر می زند. مرورگر آن را با فونت «تک فاصله (Monospace)» نشان می دهد. بنابراین خواندن میانبرها راحت تر می شود.
تگ kbd چیست؟
طبق منبع، <kbd> برای نوشتن ورودی های صفحه کلید است. مثل Ctrl یا Cmd. این تگ صرفاً معنایی است و ظاهر پایه را مرورگر تعیین می کند.
مثال ساده تگ kbd
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
استایل دهی نمایشی با CSS
می توانی ظاهر تگ kbd را با CSS بهتر کنی. این فقط نمایش را تغییر می دهد.
<style>
kbd {
border-radius: 2px;
padding: 2px;
border: 1px solid black;
}
</style>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
نمای پیش فرض مرورگر
مرورگرها معمولاً فونت monospace را روی <kbd> اعمال می کنند.
<style>
kbd {
font-family: monospace;
}
</style>
مقایسه سریع با تگ های مرتبط
برای «کد (code)» از code استفاده کن. برای «خروجی نمونه (samp)» از samp کمک بگیر. برای «متغیر (var)» از var استفاده کن. برای متن از پیش قالب بندی شده از pre استفاده کن.
نکته: اگر در متن تغییری داشتی، از ins برای درج و از del برای حذف استفاده کن.
گام های تمرینی
- یک جمله با میانبر بساز.
- کلیدها را داخل
<kbd>قرار بده. - در صورت نیاز با CSS کمی استایل بده.
جمع بندی سریع
- تگ kbd یعنی ورودی صفحه کلید.
- نمای پیش فرض، فونت monospace است.
- برای کد و خروجی، code و samp بهترند.
- می توانی ظاهر kbd را با CSS بهتر کنی.