آموزش Html؛ آموزش کار با عناصر Block و Inline در HTML

آموزش Html؛ آموزش کار با عناصر Block و Inline در HTML

آموزش Html؛ آموزش کار با عناصر Block و Inline در HTML

در جلسه دوازدهم آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش کار با عناصر Block و Inline در HTML از وب سایت آموزش برنامه نویسی سورس باران.

آموزش کار با عناصر Block و Inline در HTML

تمام عناصر HTML با توجه به نوع خود دارای یک مقدار نمایش پیش‌فرض هستند. این مقدار برای بیشتر عناصر به صورت block یا inline است.

Every HTML element has a default display value depending on what type of element it is. The two display values are: block and inline.

حتما بخوانید : طراحی وب سایت در شیراز

عناصر block-level در اچ تی ام ال

یک عنصر block-level همیشه در یک خط جدید آغاز شده و تمام عرض موجود را اشغال می‌کند (تا جایی که بتواند به سمت چپ و راست کشیده می‌شود). عنصر <div> یک عنصر block-level است.

<div>Hello World</div>
پیشنمایش

لیست عناصر block-level در اچ تی ام ال

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1><h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

 

عناصر Inline در Html

عنصر inline در یک خط جدید شروع نشده و فقط عرض مورد نیاز را اشغال می‌کند:

<span>Hello World</span>
پیشنمایش

لیست عناصر Inline در Html

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

 

عنصر <div> در Html

عنصر <div> اغلب به عنوان محفظه‌ی عناصر دیگر HTML مورد استفاده قرار می‌گیرد. وقتی از این عنصر به همراه CSS استفاده می‌شود، می‌توان از آن برای استایل دادن به block های محتوا استفاده کرد:

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
پیشنمایش

 

عنصر <span> در Html

عنصر <span> اغلب به عنوان محفظه‌ای برای متن به کار برده می‌شود. این عنصر نیاز به هیچ‌گونه خصوصیتی (attribute) نداشته اما معمولا از خصوصیت‌های style و class برای آن استفاده می‌شود. وقتی عنصر <span> همراه با CSS به کار برده می‌شود می‌توان از آن‌ برای استایل دادن به بخش‌هایی از متن استفاده کرد:

<h1>My <span style="color:red">Important</span> Heading</h1>
پیشنمایش

HTML Grouping Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

منبع : W3Schools

لیست جلسات قبل آموزش Html

  1. آموزش HTML؛ آموزش اصول اولیه و عناصر HTML
  2. آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش Html؛ آموزش کار با پاراگراف و استایل در Html
  4. آموزش Html؛ آموزش کار با قالب بندی متن در Html
  5. آموزش Html؛ آموزش کار با کامنت در HTML
  6. آموزش Html؛ آموزش کار با کامنت در HTML
  7. آموزش Html؛ آموزش کار با رنگ ها در HTML
  8. آموزش Html؛ آموزش کار با تصاویر در HTML
  9. آموزش Html؛ آموزش کار با لینک در HTML
  10. آموزش Html؛ آموزش کار با جدول در HTML
  11. آموزش Html؛ آموزش کار با لیست ها در HTML

The post آموزش Html؛ آموزش کار با عناصر Block و Inline در HTML appeared first on آموزش برنامه نویسی.

درباره نویسنده: administrator

ممکن است دوست داشته باشید

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *