در جلسه دوازدهم آموزش اچ تی ام ال در خدمت شماییم با آموزش 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 در اچ تی ام ال
عناصر Inline در Html
عنصر inline در یک خط جدید شروع نشده و فقط عرض مورد نیاز را اشغال میکند:
<span>Hello World</span>پیشنمایش
لیست عناصر Inline در Html
عنصر <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
- آموزش HTML؛ آموزش اصول اولیه و عناصر HTML
- آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش Html؛ آموزش کار با پاراگراف و استایل در Html
- آموزش Html؛ آموزش کار با قالب بندی متن در Html
- آموزش Html؛ آموزش کار با کامنت در HTML
- آموزش Html؛ آموزش کار با کامنت در HTML
- آموزش Html؛ آموزش کار با رنگ ها در HTML
- آموزش Html؛ آموزش کار با تصاویر در HTML
- آموزش Html؛ آموزش کار با لینک در HTML
- آموزش Html؛ آموزش کار با جدول در HTML
- آموزش Html؛ آموزش کار با لیست ها در HTML
The post آموزش Html؛ آموزش کار با عناصر Block و Inline در HTML appeared first on آموزش برنامه نویسی.