معرفی عناصر HTML

عنصر HTML

در قسمت قبلی آموزش html با اصول اولیه html آشنا شدید.نجا می رود … </ tagname>

عنصر HTML همه چیز را از برچسب شروع به تگ پایان می دهد:

<p> اولین پاراگراف من </ p>

معرفی عناصر HTML

عناصر HTML بدون محتوای عناصر خالی نامیده می شوند. عناصر خالی تگ پایان ندارند، مانند عنصر (که نشان دهنده یک شکست خط است).

عناصر تو در تو HTML

عناصر HTML را می توان توزیع کرد

تمام اسناد HTML حاوی عناصر HTML تو در تو هستند.

این مثال شامل چهار عنصر HTML است:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

مثال توضیح داده شده

عنصر <html> تمام سند را تعریف می کند.

این یک تگ شروع <html> و تگ پایان </ html> است.

محتوای عنصر یک عنصر HTML دیگر است (عنصر <body>).

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://tiktheme.com/html-basic-examples/" target="_blank" class="u2e10d9fba4708ac311a7c58261270ecf"><!-- INLINE RELATED POSTS 1/3 //--><style> .u2e10d9fba4708ac311a7c58261270ecf { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #8E44AD!important; text-decoration:none; } .u2e10d9fba4708ac311a7c58261270ecf:active, .u2e10d9fba4708ac311a7c58261270ecf:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u2e10d9fba4708ac311a7c58261270ecf { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 0.95; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u2e10d9fba4708ac311a7c58261270ecf .ctaText { font-weight:bold; color:#8E44AD; text-decoration:none; font-size: 16px; } .u2e10d9fba4708ac311a7c58261270ecf .postTitle { color:#C0392B; text-decoration: underline!important; font-size: 16px; } .u2e10d9fba4708ac311a7c58261270ecf:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">همین حالا ببینید:</span>  <span class="postTitle">اصول اولیه HTML</span></div></a></div>
</body>
</html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

عنصر <body>بدنه است و کد اصلی سند در آن قرار می گیرد.

این تگ <body> یک تگ شروع و </ body> دارد.

محتوای عنصر دو عنصر دیگر HTML است (<h1> و <p>).

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

عنصر <h1> یک عنوان را تعریف می کند.

یک برچسب شروع <h1> و تگ پایان </ h1> دارد.

محتوای عنصر عبارت است از: First Heading من.

<h1>My First Heading</h1>

1	<h1>My First Heading</h1>

عنصر <p> پاراگراف را تعریف می کند.

یک برچسب شروع <p> و تگ پایان </ p> دارد.

محتوای عنصر عبارت است از: پاراگراف اول من.

<p>My first paragraph.</p>

1	<p>My first paragraph.</p>

برچسب پایان را فراموش نکنید

برخی از عناصر HTML به درستی نمایش داده می شود، حتی اگر تگ پایان را فراموش کنید:

همین حالا ببینید: خصیصه های HTML

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

<html>

<body>

<p>This is a paragraph

</body>

</html>

مثال فوق در تمام مرورگرها کار می کند، زیرا برچسب بسته بودن اختیاری است.

هرگز در این مورد تکیه نکن اگر تگ پایان را فراموش کرده اید ممکن است نتایج غیر منتظره و / یا اشتباهات ایجاد کنید.

عناصر خالی HTML

عناصر HTML بدون محتوای عناصر خالی نامیده می شوند.

یک عنصر خالی بدون یک تگ بسته است (تگ # تگ یک خط را تعریف می کند).

عناصر خالی را می توان در برچسب بازه بسته بندی کرد: <br /> <br />.

HTML5 عناصر خالی را بسته نمی کند. اما اگر میخواهید اعتبار دقیقتری داشته باشید یا اگر بخواهید سند خود را با تجزیه کننده XML قابل خواندن کنید، باید تمام عناصر HTML را به درستی بسته کنید.

از تگهای کوچکتر استفاده کنید

تگ های HTML حساس به حروف بزرگ نیستند: <P> به معنی همان <p> است.

استاندارد HTML5 نیازی به تگ های کوچک نیست، اما W3C توصیه نامه های کوچک در HTML را ارائه می دهد و برای انواع سند سخت تر از XHTML خواستار حروف کوچک است.

همین حالا ببینید: آموزش مقدماتی تا پیشرفته برنامه نویسی تحت وب با HTML5

منبع: تیک تم

پشتیبانی وردپرس

معرفی عناصر HTML

مژده سه‌شنبه 24 مهر 1397 ساعت 00:57

آموزش وردپرس

آموزش وردپرس