آموزش تگ hr در HTML

آموزش تگ 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 پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
پشتیبانی تگ 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; }
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید