این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ hr در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ hr در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ HR در HTML
تگ hr که مخفف کلمه ی Horizontal Rule می باشد ، تگی است که با استفاده از آن میتوان یک خط افقی صاف ( که البته میتونه صاف هم نباشه ) را در یک صفحه وب ایجاد نمود.
ما معمولا از این تگ برای جداسازی مطالب یا مثلا جداسازی بخش های یک وبسایت استفاده مینماییم، یا بهتر بگیم با استفاده از این تگ میتوان موضوعات را از همدیگر برای خوانایی بهتر ( و بیشتر ) جدا کرد، کلا کاربردش همینه.
Free-Learn
مثال از تگ hr در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ HR در حالت عادی بدون استایل
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body dir="rtl"> <h2>HTML</h2> <p>زبان مادر برای طراحی صفحات وب می باشد.</p> <hr> <h2>CSS</h2> <p>یک زبان جذاب برای استایل دهی و آرایش صفحات وب می باشد.</p> <hr> <h2>JavaScript</h2> <p>یک زبان برای تغییر و یا ایجاد تگ های درون صفحه</p> </body> |
مثال شماره ۲ : استایل دادن به تگ HR با استفاده از CSS ( در طرح های مختلف )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <hr class="hr-1"> <hr class="hr-2"> <hr class="hr-3"> <hr class="hr-4"> <hr class="hr-5"> <hr class="hr-6"> <hr class="hr-7"> <hr class="hr-8"> <hr class="hr-9"> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ hr در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ hr از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ hr در HTML یک تگ تنهاست ( یعنی تگ پایانی برای بستن ندارد )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ hr را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 8 9 |
hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; } |
