آموزش تگ hr در HTML

9 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ hr در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ hr در HTML به صورت کامل آشنا بشید.

تگ hr در HTML

همان طور که میدانید تگ hr مخفف شده ی عبارت Horizontal Rule می باشد. این عبارت به معنی قانون افقی است. تگ hr تگی است که با استفاده از آن میتوان یک خط افقی صاف را در یک صفحه وب ایجاد نمود. لازم به ذکر است که همیشه این خط صاف نیست و میتوانیم آن را به حالت های دلخواه هم تبدیل کنیم.

کاربرد این تگ در جداسازی مطالب یا مثلا جداسازی بخش های یک وبسایت است، به نوعی میشود گفت که با این تگ میتوان برای خوانایی بهتر موضوعات را از همدیگر جدا کرد.کاربردی غیر از این ندارد.

مثال از تگ hr در HTML

در ادامه دوره آموزشی html css پروژه محور به دو تا از مثال های این تگ میپردازیم تا بهتر با این تگ آشنا شوید.

مثال اول: استفاده از تگ hr بصورت پیش فرض و بدون استفاده از استایل یا همان کد css

<body dir="rtl">
  <h2>HTML</h2>
    <p>زبان مادر برای طراحی صفحات وب می باشد.</p>
<hr>
  <h2>CSS</h2>
    <p>یک زبان جذاب برای استایل دهی و آرایش صفحات وب می باشد.</p> 
<hr>
  <h2>JavaScript</h2>
    <p>یک زبان برای تغییر و یا ایجاد تگ های درون صفحه</p>
</body>

مثال دوم : استایل دادن به تگ hr با استفاده از کد CSS اختصاصی

<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>

راستی اگر دنبال آموزش html css پروژه محور در تبریز هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

پشتیبانی مرورگرها از تگ hr

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ hr در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

پشتیبانی مرورگر هار از تگ table

پشتیبانی تگ hr از صفات و رویدادهای عمومی

تگ hr قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

  • این تگ مانند سایر تگ ها دارای تگ پایانی نیست در اصل یک تگ تنهاست.

دستورات پیش فرض CSS

اغلب مرورگرها تگ hr را بشکل پیش فرض با دستوراتی همچون کد های CSS زیر نمایش میدهند.

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید