کاربر:Zaman/صفحه تمرین/html/5

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

///////////////////////////////////////

https://www.w3schools.com/tags/tag_label.asp

HTML <label> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

سه دکمه رادیویی با برچسب:

<form action="/action_page.php">

 <label for="male">Male</label>

 <input type="radio" name="gender" id="male" value="male"><br>

 <label for="female">Female</label>

 <input type="radio" name="gender" id="female" value="female"><br>

 <label for="other">Other</label>

 <input type="radio" name="gender" id="other" value="other"><br><br>

 <input type="submit" value="Submit">

</form>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <label> یک برچسب برای چندین عنصر تعریف می کند:

  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="search">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <meter>
  • <progress>
  • <select>
  • <textarea>

استفاده صحیح از برچسب ها با عناصر فوق سود می برد:

  • کاربران خواننده صفحه نمایش (هنگامی که کاربر روی عنصر متمرکز شد ، برچسب را با صدای بلند می خوانید)
  • کاربرانی که با کلیک بر روی مناطق بسیار کوچک (مانند کادرهای انتخاب) مشکل دارند - زیرا وقتی کاربر متن را در عنصر <label> کلیک می کند ، ورودی را ضرب می کند (این باعث افزایش منطقه ضربه می شود).

خصوصیت برچسب <label> باید برابر با ویژگی id عنصر مربوط باشد تا آنها را به هم وصل کنیم.


Browser Support

پشتیبانی مرورگر

Element
<label> Yes Yes Yes Yes Yes

Tips and Notes

نکات و یادداشت ها

نکته: برچسب با استفاده از صفت "for" یا قرار دادن عنصر در داخل عنصر <label> به یک عنصر محدود می شود.



Attributes

ویژگی ها

ویژگی مقدار توضیحات
for element_id مشخص می کند که کدام یک از برچسب ها به چه عنصر تشکیل شده اند
form form_id مشخص می کند که برچسب به چه شکلی تعلق دارد

Global Attributes

ویژگی های جهانی

برچسب <label> همچنین از ویژگیهای جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <label> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Label Object مرجع HTML DOM: برچسب شی


Default CSS Settings

بیشتر مرورگرها عنصر <label> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

label {

  cursor: default;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_legend.asp

HTML <legend> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

عناصر مرتبط با گروه به صورت:

<form action="/action_page.php">

 <fieldset>

   <legend>Personalia:</legend>

   <label for="fname">First name:</label>

   <input type="text" id="fname" name="fname"><br><br>

   <label for="lname">Last name:</label>

   <input type="text" id="lname" name="lname"><br><br>

   <label for="email">Email:</label>

   <input type="email" id="email" name="email"><br><br>

   <label for="birthday">Birthday:</label>

   <input type="date" id="birthday" name="birthday"><br><br>

   <input type="submit" value="Submit">

 </fieldset>

</form>

Try it Yourself »

More "Try it Yourself" examples below.

نمونه های "خودت را امتحان کن" بیشتر در زیر.


Definition and Usage

تعریف و کاربرد

برچسب <legend> عنوانی را برای عنصر <fieldset> تعریف می کند.


Browser Support

پشتیبانی مرورگر

Element
<legend> Yes Yes Yes Yes Yes

Global Attributes

ویژگی های جهانی

برچسب <legend> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <legend> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.



More Examples

نمونه های بیشتر

Example

اجازه دهید عنوان زمینه به سمت راست (با CSS) شناور باشد:

<form action="/action_page.php">

 <fieldset>

   <legend style="float:right">Personalia:</legend>

   <label for="fname">First name:</label>

   <input type="text" id="fname" name="fname"><br><br>

   <label for="lname">Last name:</label>

   <input type="text" id="lname" name="lname"><br><br>

   <label for="email">Email:</label>

   <input type="email" id="email" name="email"><br><br>

   <label for="birthday">Birthday:</label>

   <input type="date" id="birthday" name="birthday"><br><br>

   <input type="submit" value="Submit">

 </fieldset>

</form>

Try it Yourself »


Related Pages

صفحات مرتبط

HTML DOM reference: Legend Object مرجع HTML DOM: Legend Object


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <legend> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

legend {

  display: block;

  padding-left: 2px;

 padding-right: 2px;

 border: none;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_li.asp

HTML <li> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

یک لیست HTML سفارش داده شده (<ol>) و دیگری فهرست نشده (<ul>) HTML:

<ol>

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>


<ul>

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ul>

Try it Yourself »

نمونه های "خودت را امتحان کن" بیشتر در زیر.


Definition and Usage

تعریف و کاربرد

The <li> tag defines a list item.

برچسب <li> یک مورد لیست را مشخص می کند.

برچسب <li> در لیست های مرتب شده (<ol>) ، لیست های نامرتب (<ul>) و در لیست های منو (<menu>) استفاده می شود.


Browser Support

پشتیبانی مرورگر

Element
<li> Yes Yes Yes Yes Yes

Tips and Notes

نکات و یادداشت ها

نکته: از CSS برای تعریف نوع لیست و لیست های سبک استفاده کنید.


Attributes

ویژگی ها

ویژگی مقدار توضیحات
value number مقدار یک مورد لیست را مشخص می کند. موارد لیست زیر از این تعداد افزایش می یابد (فقط برای لیست های <ol>)

Global Attributes

ویژگی های جهانی

برچسب <li> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <li> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.



More Examples

نمونه های بیشتر

Example

انواع سبک لیست مختلف (با CSS) تنظیم کنید:

<ol>

 <li>Coffee</li>

 <li style="list-style-type:lower-alpha">Tea</li>

 <li>Milk</li>

</ol>


<ul>

 <li>Coffee</li>

 <li style="list-style-type:square">Tea</li>

 <li>Milk</li>

</ul>

Try it Yourself »

در آموزش CSS ما می توانید جزئیات بیشتری در مورد ویژگی نوع سبک لیست پیدا کنید.

Example

ایجاد یک لیست در داخل یک لیست (یک لیست تو در تو):

<ul>

 <li>Coffee</li>

 <li>Tea

   <ul>

     <li>Black tea</li>

     <li>Green tea</li>

   </ul>

 </li>

 <li>Milk</li>

</ul>

Try it Yourself »

Example

ایجاد یک لیست پیچیده پیچیده تر:

<ul>

 <li>Coffee</li>

 <li>Tea

   <ul>

     <li>Black tea</li>

     <li>Green tea

       <ul>

         <li>China</li>

         <li>Africa</li>

       </ul>

     </li>

   </ul>

 </li>

 <li>Milk</li>

</ul>

Try it Yourself »


Related Pages

صفحات مرتبط

HTML tutorial: HTML Lists

آموزش HTML: لیست های HTML

HTML DOM reference: Li Object

مرجع HTML DOM: Li Object

CSS Tutorial: Styling Lists

CSS Tutorial: لیست های یک ظاهر طراحی شده


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <li> را با مقادیر پیش فرض زیر نمایش می دهند:

li {

 display: list-item;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_link.asp

HTML <link> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

پیوند به یک صفحه شیوه خارجی:

<head>

 <link rel="stylesheet" type="text/css" href="theme.css">

</head>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

The <link> tag defines a link between a document and an external resource.

برچسب <link> ارتباط بین یک سند و یک منبع خارجی را مشخص می کند.

برچسب <link> برای پیوند به صفحه های سبک خارجی استفاده می شود.


Browser Support

پشتیبانی مرورگر

هنگامی که از صفحات سبک استفاده می شود ، برچسب <link> در همه مرورگرهای اصلی پشتیبانی می شود. هیچ پشتیبانی واقعی برای هر چیز دیگری نیست.

Element
<link> Yes Yes Yes Yes Yes

توجه: عنصر <link> یک عنصر خالی است ، فقط شامل ویژگی ها است.

توجه: این عنصر فقط در قسمت head می رود ، اما می تواند هر تعداد بار ظاهر شود.



Attributes

ویژگی ها

ویژگی مقدار توضیحات
crossorigin anonymous

use-credentials

نحوه رسیدگی به عنصر با درخواست های مبدأ را مشخص می کند
href URL مکان سند مرتبط را مشخص می کند
hreflang language_code زبان متن را در سند پیوندی مشخص می کند
media media_query مشخص کنید که سند مرتبط با چه دستگاهی نمایش داده می شود
referrerpolicy no-referrer

no-referrer-when-downgrade

origin

origin-when-cross-origin

unsafe-url

مشخص می کند که هنگام مراجعه به منابع ، از کدام مراجعه کننده استفاده کنید
rel alternate

author

dns-prefetch

help

icon

license

next

pingback

preconnect

prefetch

preload

prerender

prev

search

stylesheet

ضروری. رابطه بین سند فعلی و سند مرتبط را مشخص می کند
sizes HeightxWidth

any

Specifies the size of the linked resource. Only for rel="icon"

اندازه منبع مرتبط را مشخص می کند. فقط برای rel = "icon"

title یک صفحه سبک دلخواه یا جایگزین را تعریف می کند
type media_type نوع رسانه مربوط به سند مرتبط را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <link> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <link> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML tutorial: HTML Styles

آموزش HTML: HTML سبک

HTML DOM reference: Link Object

مرجع HTML DOM: پیوند شی


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <link> را با مقادیر پیش فرض زیر نمایش می دهند:

link {

 display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_main.asp

HTML <main> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

<main>

 <h2>Web Browsers</h2>

 <p>Chrome, Firefox, and Edge are the most used browsers today.</p>


 <article>

   <h3>Google Chrome</h3>

   <p>Chrome is a free, open-source web browser developed by Google, released in 2008.</p>

 </article>


 <article>

   <h3>Microsoft Edge</h3>

   <p>Edge is a free web browser from Microsoft, released in 1995.</p>

 </article>


 <article>

   <h3>Mozilla Firefox</h3>

   <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>

 </article>

</main>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <main> محتوای اصلی یک سند را مشخص می کند.

محتوای داخل عنصر <main> باید مختص سند باشد. این محتوا نباید حاوی مطالبی باشد که در اسناد مانند نوارهای جانبی ، پیوندهای ناوبری ، اطلاعات حق چاپ ، آرمهای سایت و فرمهای جستجو تکرار شود.

توجه: نباید بیش از یک عنصر <اصلی> در یک سند وجود داشته باشد. عنصر <main> نبايد از فرزندان عناصر <article> ، <aside> ، <footer> ، <header> يا <nav> باشد.


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<main> 26.0 12.0 21.0 7.0 16.0

Global Attributes

ویژگی های جهانی

برچسب <main> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <main> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_map.asp

HTML <map> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

نقشه تصویر با مناطق قابل کلیک:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">


<map name="planetmap">

 <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">

 <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">

 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">

</map>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

از تگ <map> برای تعریف نقشه تصویر سمت مشتری استفاده می شود. نقشه تصویر تصویری با مناطق قابل کلیک است.

نام مورد نیاز عنصر <map> با ویژگی نام کاربری <img> همراه است و رابطه ای بین تصویر و نقشه ایجاد می کند.

عنصر <map> شامل تعدادی عنصر <area> است که مناطق قابل کلیک را در نقشه تصویر مشخص می کند.


Browser Support

پشتیبانی مرورگر

Element
<map> Yes Yes Yes Yes Yes


Attributes

ویژگی ها

ویژگی مقدار توضیحات
name mapname ضروری. نام نقشه را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <map> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <map> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

مرجع HTML DOM: نقشه شی


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <map> را با مقادیر پیش فرض زیر نمایش می دهند:

map {

 display: inline;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////

https://www.w3schools.com/tags/tag_mark.asp

HTML <mark> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

بخش هایی از متن را برجسته کنید:

<p>Do not forget to buy <mark>milk</mark> today.</p>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <mark> متن مشخص شده را تعریف می کند.

اگر می خواهید بخش هایی از متن خود را برجسته کنید ، از برچسب <mark> استفاده کنید.


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<mark> 6.0 9.0 4.0 5.0 11.1

Global Attributes

ویژگی های جهانی

برچسب <mark> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <mark> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML tutorial: HTML Text Formatting

آموزش HTML: قالب بندی متن HTML

HTML DOM reference: Mark Object

مرجع HTML DOM: علامت گذاری به عنوان شی


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <mark> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

mark {

  background-color: yellow;

  color: black;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////

https://www.w3schools.com/tags/tag_meta.asp

HTML <meta> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

ابرداده را در یک سند HTML شرح دهید:

<head>

 <meta charset="UTF-8">

 <meta name="description" content="Free Web tutorials">

 <meta name="keywords" content="HTML, CSS, JavaScript">

 <meta name="author" content="John Doe">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head> Try it Yourself »


Definition and Usage

تعریف و کاربرد

ابرداده داده (اطلاعات) مربوط به داده است.

برچسب های <meta> همیشه درون عنصر <head> قرار می گیرند و در مورد سند HTML ابرداده ارائه می دهند.

برچسب <meta> معمولاً برای مشخص کردن مجموعه کاراکترها ، توضیحات صفحه ، کلمات کلیدی ، نویسنده سند و تنظیمات نمایش استفاده می شود.

ابرداده روی صفحه نمایش داده نمی شود اما قابل تجزیه در دستگاه است.

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

There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag (See "Setting The Viewport" example below).

روشی وجود دارد که به طراحان وب اجازه می دهد تا از طریق برچسب <meta> کنترل نمای را (منطقه قابل مشاهده کاربر یک صفحه وب) بگیرند (به مثال "تنظیم نمای دید" مراجعه کنید).


Browser Support

پشتیبانی مرورگر

Element
<meta> Yes Yes Yes Yes Yes


Attributes

ویژگی ها

ویژگی مقدار توضیحات
charset character_set رمزگذاری کاراکتر برای سند HTML را مشخص می کند
content text مقدار مرتبط با ویژگی http-equiv یا name را نشان می دهد
http-equiv content-type

default-style refresh

یک هدر HTTP برای اطلاعات / مقدار ویژگی صحیح ارائه می دهد
name application-name

author description generator keywords viewport

نامی برای فوق داده مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <meta> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Some <meta> Examples

برخی از مثالها

تعریف کلمات کلیدی برای موتورهای جستجو:

<meta name="keywords" content="HTML, CSS, JavaScript">

شرح صفحه وب خود را تعریف کنید:

<meta name="description" content="Free Web tutorials for HTML and CSS">

نویسنده صفحه را تعریف کنید:

<meta name="author" content="John Doe">

هر بار 30 ثانیه سند را تازه کنید:

<meta http-equiv="refresh" content="30">

تنظیم نمای منظره برای اینکه وب سایت شما در همه دستگاه ها خوب به نظر برسد:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Setting the Viewport

تنظیم Viewport

این ویترین قسمت قابل مشاهده کاربر در یک صفحه وب است. با دستگاه متفاوت است - از طریق صفحه رایانه از تلفن همراه کوچکتر خواهد بود.

شما باید عنصر <meta> زیر را در تمام صفحات وب خود وارد کنید:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

این دستورالعمل های مرورگر را در مورد نحوه كنترل ابعاد صفحه و مقیاس بندی ارائه می دهد.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

عرض = قسمت عرض دستگاه عرض صفحه را برای دنبال کردن عرض صفحه دستگاه (که بسته به نوع دستگاه متفاوت خواهد بود) تنظیم می کند.

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

قسمت مقیاس اولیه = 1.0 سطح بزرگنمایی اولیه را هنگام بارگذاری صفحه برای اولین بار توسط مرورگر تنظیم می کند.

در اینجا مثالی از یک صفحه وب بدون مشاهده متا تگ مشاهده شده ، و همان صفحه وب با برچسب مشاهده متنی مشاهده شده است:

نکته: اگر در حال مرور این صفحه با تلفن یا رایانه لوحی هستید ، می توانید برای دیدن تفاوت ، روی دو لینک زیر کلیک کنید.

Without the viewport meta tag

بدون تگ مشاهده متا

With the viewport meta tag

با برچسب مشاهده متا

شما می توانید اطلاعات بیشتر در مورد مشاهده را در طراحی وب پاسخگو ما - The Viewport Tutorial مطالعه کنید.


Related Pages

صفحات مرتبط

HTML tutorial: HTML Head

آموزش HTML: HTML Head

HTML DOM reference: Meta Object

مرجع HTML DOM: متا شی


Default CSS Settings

تنظیمات پیش فرض CSS

None.

❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_meter.asp

HTML <meter> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

با استفاده از عنصر متر برای اندازه گیری داده ها در یک محدوده معین (پیمانه):

<label for="disk_c">Disk usage C:</label>

<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>


<label for="disk_d">Disk usage D:</label>

<meter id="disk_d" value="0.6">60%</meter>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <meter> اندازه گیری مقیاس را در یک محدوده شناخته شده یا مقدار کسری تعریف می کند. این نیز به عنوان سنج شناخته می شود.

مثال: استفاده از دیسک ، ارتباط یک نتیجه پرس و جو و غیره.

توجه: از نشانگر <meter> برای نشان دادن پیشرفت (مانند یک نوار پیشرفت) نباید استفاده شود. برای میله های پیشرفت ، از برچسب <progress> استفاده کنید.

نکته: همیشه برچسب <label> را برای بهترین روشهای دستیابی اضافه کنید!


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<meter> 8.0 13.0 16.0 6.0 11.5


Attributes

ویژگی ها

ویژگی مقدار توضیحات
form form_id مشخص می کند که کدام عنصر <meter> را به آن تعلق دارد
high number دامنه ای را که ارزش بالایی محسوب می شود را مشخص می کند
low number دامنه ای را که مقدار کم محسوب می شود ، مشخص می کند
max number حداکثر مقدار دامنه را مشخص می کند
min number حداقل مقدار دامنه را مشخص می کند. مقدار پیش فرض 0 است
optimum number مشخص می کند مقدار بهینه برای سنج چقدر است
value number ضروری. مقدار فعلی سنج را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <meter> همچنین از خصوصیات جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <meter> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Meter Object مرجع HTML DOM: شی متر


Default CSS Settings

تنظیمات پیش فرض CSS

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_nav.asp

HTML <nav> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

مجموعه ای از پیوندهای ناوبری:

<nav>

 <a href="/html/">HTML</a> |

 <a href="/css/">CSS</a> |

 <a href="/js/">JavaScript</a> |

 <a href="/jquery/">jQuery</a>

</nav>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <nav> مجموعه ای از پیوندهای ناوبری را تعریف می کند.

توجه کنید که همه پیوندهای یک سند نباید درون یک عنصر <nav> باشد. عنصر <nav> فقط برای لینک های اصلی پیوندهای ناوبری در نظر گرفته شده است.

مرورگرها ، مانند خواننده های صفحه نمایش برای کاربران غیرفعال ، می توانند از این عنصر برای تعیین اینکه آیا از ارائه اولیه این محتوا صرف نظر می کنند استفاده کنند.


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<nav> 5.0 9.0 4.0 5.0 11.1


Global Attributes

ویژگی های جهانی

برچسب <nav> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <nav> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Nav Object مرجع HTML DOM: Nav Object


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <nav> را با مقادیر پیش فرض زیر نمایش می دهند:

nav {

 display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////

https://www.w3schools.com/tags/tag_noframes.asp

HTML <noframes> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

در HTML5 پشتیبانی نمی شود

از برچسب <noframes> در HTML 4 استفاده شد تا به عنوان برچسب fallback برای مرورگرهایی که از فریم پشتیبانی نمی کنند عمل کند.


What to Use Instead?

در عوض از چه چیزی استفاده کنیم؟

Example

با استفاده از برچسب <iframe> یک سند دیگر را در داخل سند HTML فعلی وارد کنید:

<iframe src="https://www.w3schools.com"></iframe>

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////

https://www.w3schools.com/tags/tag_noscript.asp

HTML <noscript> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

استفاده از برچسب <noscript>:

<script>

document.write("Hello World!")

</script>

<noscript>Your browser does not support JavaScript!</noscript>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <noscript> محتوای متناوب را برای کاربرانی تعریف می کند که اسکریپت ها را در مرورگر خود غیرفعال کرده اند یا مرورگری دارند که از اسکریپت پشتیبانی نمی کند.

عنصر <noscript> را می توان در <head> و <body> استفاده کرد. هنگام استفاده در <head> ، عنصر <noscript> فقط باید عناصر <link> ، <style> و <meta> را داشته باشد.

اگر اسکریپت پشتیبانی نمی شود ، یا در مرورگر کاربر غیرفعال می شود ، محتوای داخل عنصر <noscript> نمایش داده می شود.


Browser Support

پشتیبانی مرورگر

Element
<noscript> Yes Yes Yes Yes Yes

Tips and Notes

نکات و یادداشت ها

نکته: همچنین استفاده از برچسب کامنت برای "پنهان کردن" اسکریپت ها از مرورگرها بدون پشتیبانی از اسکریپت های سمت مشتری (همچنین آنها را به عنوان متن ساده نشان نمی دهند) همچنین یک عمل خوب است.

<script>


</script>



Global Attributes

ویژگی های جهانی

برچسب <noscript> همچنین از ویژگیهای جهانی در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML tutorial: HTML Scripts آموزش HTML: اسکریپت های HTML


Default CSS Settings

تنظیمات پیش فرض CSS

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_object.asp

HTML <object> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

تصویری تعبیه شده:

<object data="pic_trulli.jpg" width="300" height="200">

Try it Yourself »

Example

An embedded HTML page:

<object data="snippet.html" width="500" height="200">

Try it Yourself »

Example

An embedded video:

<object data="video.mp4" width="400" height="300">

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <object> یک ظرف را برای یک منبع خارجی تعریف می کند.

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

برای جاسازی تصویر بهتر است از برچسب <img> استفاده کنید.

برای جاسازی HTML ، بهتر است از تگ <iframe> استفاده کنید.

برای جاسازی ویدیو یا صدا ، بهتر است از برچسب های <video> و <audio> استفاده کنید.


Browser Support

پشتیبانی مرورگر

Element
<object> Yes Yes Yes Yes Yes

Plug-ins

تگ <object> در ابتدا برای جاسازی افزونه های مرورگر طراحی شده است.

افزونه ها یک برنامه کامپیوتری هستند که عملکرد استاندارد مرورگر را گسترش می دهند.

افزونه ها برای اهداف مختلفی استفاده شده اند:

  • اپلت های جاوا را اجرا کنید
  • کنترل های ActiveX را اجرا کنید
  • نمایش فیلم های فلش
  • نقشه ها را نمایش دهید
  • اسکن ویروس ها
  • شناسه بانکی را تأیید کنید

هشدار!

بیشتر مرورگرها دیگر از برنامه های Java و Plug-ins پشتیبانی نمی کنند.

کنترل های ActiveX دیگر در هیچ مرورگری پشتیبانی نمی شوند.

همچنین پشتیبانی از Shockwave Flash در مرورگرهای مدرن خاموش شده است.

Tips and Notes

نکات و یادداشت ها

Any text between the <object> and </object> is an alternate text, for browsers that do not support embedded objects. هر متن بین <object> و </object> یک متن جایگزین است ، برای مرورگرهایی که از اشیاء جاسازی شده پشتیبانی نمی کنند.



Attributes

ویژگی ها

ویژگی مقدار توضیحات
data URL URL منبع مورد استفاده توسط شی را مشخص می کند
form form_id مشخص می کند که شیء به چه شکلی تعلق دارد
height pixels ارتفاع جسم را مشخص می کند
name name نامی را برای جسم مشخص می کند
type media_type نوع رسانه داده مشخص شده در ویژگی داده را مشخص می کند
usemap #mapname نام نقشه تصویر سمت مشتری را که باید با آن استفاده شود ، مشخص می کند
width pixels عرض جسم را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <object> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <object> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML tutorial: HTML Object Element

آموزش HTML: HTML Object Element

HTML DOM reference: Object Object

مرجع HTML DOM: Object Object


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <object> را با مقادیر پیش فرض زیر نمایش می دهند:

object:focus {

 outline: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_ol.asp

HTML <ol> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

دو لیست مرتب شده مختلف (لیست اول از 1 شروع می شود و لیست دوم از 50 شروع می شود):

<ol>

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>


<ol start="50">

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>

Try it Yourself »

More "Try it Yourself" examples below.

نمونه های "خودت را امتحان کن" بیشتر در زیر.


Definition and Usage

تعریف و کاربرد

برچسب <ol> یک لیست مرتب شده را تعریف می کند. یک لیست مرتب شده می تواند عددی یا الفبایی باشد.

برای تعریف موارد لیست از تگ <li> استفاده کنید.


Browser Support

پشتیبانی مرورگر

Element
<ol> Yes Yes Yes Yes Yes

Tips and Notes

نکات و یادداشت ها

نکته: از CSS برای لیست کردن سبک ها استفاده کنید. در آموزش CSS ما بیشتر بخوانید: لیست های سبک.

نکته: برای لیست نامرتب ، از برچسب <ul> استفاده کنید.



Attributes

ویژگی ها

ویژگی مقدار توضیحات
reversed reversed مشخص می کند که ترتیب لیست باید نزولی باشد (9،8،7 ...)
start number مقدار شروع یک لیست مرتب شده را مشخص می کند
type 1

A

a

I

i

نوع نشانگر استفاده در لیست را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <ol> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <ol> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


More Examples

نمونه های بیشتر

Example

کاهش و گسترش ارتفاع خط در لیست ها (با CSS):

<ol style="line-height:80%">

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>


<ol style="line-height:180%">

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>

Try it Yourself »


Related Pages

صفحات مرتبط

HTML tutorial: HTML Lists

آموزش HTML: لیست های HTML

HTML DOM reference: Ol Object

مرجع HTML DOM: Ol Object

CSS Tutorial: Styling Lists

CSS Tutorial: لیست های یک ظاهر طراحی شده


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <ol> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

ol {

نمایش: بلوک؛

  list-style-type: decimal;

  margin-top: 1em;

  margin-bottom: 1em;

 margin-left: 0;

  margin-right: 0;

  padding-left: 40px;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////

https://www.w3schools.com/tags/tag_optgroup.asp

HTML <optgroup> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

گزینه های مربوط به گروه با برچسب <optgroup>:

<label for="cars">Choose a car:</label>

<select id="cars">

 <optgroup label="Swedish Cars">

   <option value="volvo">Volvo</option>

   <option value="saab">Saab</option>

 </optgroup>

 <optgroup label="German Cars">

   <option value="mercedes">Mercedes</option>

   <option value="audi">Audi</option>

 </optgroup>

</select>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <optgroup> برای گروه بندی گزینه های مرتبط در یک لیست کشویی استفاده می شود.

اگر یک لیست طولانی از گزینه ها داشته باشید ، دسته بندی از گزینه های مرتبط با آن آسانتر است.


Browser Support

پشتیبانی مرورگر

Element
<optgroup> Yes Yes Yes Yes Yes

Attributes

ویژگی ها

ویژگی مقدار توضیحات
disabled disabled مشخص می کند که یک گروه گزینه باید غیرفعال شود
label text یک برچسب برای یک گروه گزینه را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <optgroup> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <optgroup> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: OptionGroup Object مرجع HTML DOM: OptionGroup Object


Default CSS Settings

تنظیمات پیش فرض CSS

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_option.asp

HTML <option> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

لیست کشویی با چهار گزینه:

<label for="cars">Choose a car:</label>


<select id="cars">

 <option value="volvo">Volvo</option>

 <option value="saab">Saab</option>

 <option value="opel">Opel</option>

 <option value="audi">Audi</option>

</select>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <option> یک گزینه را در یک لیست انتخاب شده تعریف می کند.

عناصر <option> درون یک عنصر <select> یا <datalist> می روند.


Browser Support

پشتیبانی مرورگر

Element
<option> Yes Yes Yes Yes Yes

Tips and Notes

نکات و یادداشت ها

توجه: برچسب <option> می تواند بدون هیچ گونه ویژگی مورد استفاده قرار گیرد ، اما شما معمولاً به ویژگی مقدار نیاز دارید ، این نشان می دهد که چه چیزی برای ارسال به سرور ارسال می شود. نکته: اگر لیست طولانی از گزینه ها دارید ، می توانید گزینه های مرتبط را با برچسب <optgroup> گروه بندی کنید.



Attributes

ویژگی ها

ویژگی مقدار توضیحات
disabled disabled مشخص می کند که یک گزینه باید غیرفعال شود
label text برچسب کوتاه تر را برای یک گزینه مشخص می کند
selected selected مشخص می کند که هنگام بارگیری صفحه ، گزینه ای باید از قبل انتخاب شود
value text مقدار ارسال شده به سرور را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <option> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <option> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Option Object مرجع HTML DOM: شیء گزینه


Default CSS Settings

تنظیمات پیش فرض CSS

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_output.asp

HTML <output> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

یک محاسبه انجام دهید و نتیجه را در یک عنصر <output> نشان دهید:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

 <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">

  =<output name="x" for="a b"></output>

</form>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <output> نتیجه یک محاسبه را نشان می دهد (مانند نمونه ای که توسط یک اسکریپت انجام می شود).


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<output> 10.0 13.0 4.0 5.1 11.0

Attributes

ویژگی ها

ویژگی مقدار توضیحات
for element_id رابطه بین نتیجه محاسبه و عناصر مورد استفاده در محاسبه را مشخص می کند
form form_id عنصر خروجی را به کدام شکل مشخص می کند
name name نامی را برای عنصر خروجی مشخص می کند


Global Attributes

ویژگی های جهانی

برچسب <output> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <output> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Output Object مرجع HTML DOM: شیء خروجی


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <output> را با مقادیر پیش فرض زیر نمایش می دهند:

output {

 display: inline;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_p.asp

HTML <p> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

یک بند به شرح زیر است:

<p>This is some text in a paragraph.</p>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

تعریف و کاربرد

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

مرورگرها بطور خودکار مقداری فضا (حاشیه) را قبل و بعد از هر عنصر <p> اضافه می کنند. حاشیه ها را می توان با CSS (با خصوصیات حاشیه) اصلاح کرد.


Browser Support

پشتیبانی مرورگر

Element
<p> Yes Yes Yes Yes Yes

Global Attributes

ویژگی های جهانی

برچسب <p> همچنین از ویژگیهای جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <p> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.



More Examples

نمونه های بیشتر

Example

متن را در یک پاراگراف (با CSS) تراز کنید:

<p style="text-align:right">This is some text in a paragraph.</p>

Try it Yourself »

Example

اطلاعات بیشتر در مورد پاراگراف ها:

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

Try it Yourself »

Example

Poem problems in HTML:

مشکلات شعر در HTML:

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

Try it Yourself »


Related Pages

صفحات مرتبط

HTML tutorial: HTML Paragraphs

آموزش HTML: پاراگراف HTML

HTML DOM reference: Paragraph Object

مرجع HTML DOM: پاراگراف شی


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <p> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

p {

  display: block;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 0;

 margin-right: 0;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_param.asp

HTML <param> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

پارامتر "autoplay" را روی "true" تنظیم کنید ، به محض بارگیری صفحه شروع به پخش می کند:

<object data="horse.wav">

 <param name="autoplay" value="true">

</object>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

از تگ <param> برای تعریف پارامترهای پلاگین های تعبیه شده با عنصر <object> استفاده می شود.

نکته: HTML همچنین دو عنصر دیگر را برای پخش صوتی یا فیلم شامل: <audio> و <video> دارد.


Browser Support

پشتیبانی مرورگر

برچسب <param> در کلیه مرورگرهای اصلی پشتیبانی می شود. با این وجود ، قالب پرونده تعریف شده در <object> در همه مرورگرها پشتیبانی نمی شود.

Element
<param> Yes Yes Yes Yes Yes


Attributes

ویژگی ها

ویژگی مقدار توضیحات
name name نام یک پارامتر را مشخص می کند
value value مقدار پارامتر را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <param> همچنین از ویژگیهای جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <param> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Parameter Object مرجع HTML DOM: شیء پارامتر


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <param> را با مقادیر پیش فرض زیر نمایش می دهند:

param {

 display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_picture.asp

HTML <picture> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

نحوه استفاده از برچسب <picture>:

<picture>

 <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">

 <source media="(min-width: 465px)" srcset="img_white_flower.jpg">

 <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">

</picture>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <picture> در مشخص کردن منابع تصویری انعطاف پذیری بیشتری به وب می دهد.

بیشترین کاربرد عنصر <picture> برای جهت هنری در طرح های پاسخگو خواهد بود. به جای داشتن یک تصویری که بر اساس عرض نمای بالا یا پایین باشد ، می توان چندین تصویر را طراحی کرد تا با ظرافت بیشتری بتوانند نمای مرورگر را پر کنند.

عنصر <picture> دارای دو تگ متفاوت است: یک یا چند تگ <source> و یک تگ <img>.

عنصر <source> دارای ویژگی های زیر است:

  • srcset (ضروری) - URL نشان می دهد تصویر را نشان می دهد
  • رسانه - هرگونه پرس و جو معتبر رسانه ای را که معمولاً در CSS تعریف می شود ، می پذیرد
  • اندازه ها - توصیف کننده یک عرض عرض ، یک پرس و جو رسانه ای با توصیف عرض یا لیست کاملاً محدود با کاما از رسانه های دارای توصیف عرض را تعریف می کند
  • نوع - نوع MIME را مشخص می کند

مرورگر از مقادیر ویژگی برای بارگذاری مناسب ترین تصویر استفاده می کند. مرورگر از اولین عنصر <source> با یک اشاره تطبیق استفاده می کند و هرگونه برچسب <source> زیر را نادیده می گیرد.

عنصر <img> به عنوان آخرین برچسب فرزند بلوک اعلامیه <picture> مورد نیاز است. از عنصر <img> برای ارائه سازگاری به عقب برای مرورگرهایی که از عنصر <picture> پشتیبانی نمی کنند ، یا اگر هیچ یک از برچسبهای <source> با یکدیگر مطابقت ندارند ، استفاده می شود.

عنصر <picture> مشابه عناصر <video> و <audio> کار می کند. شما منابع مختلفی را تنظیم می کنید و اولین منبعی که متناسب با ترجیحات است منبع مورد استفاده است.



Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<picture> 38.0 13.0 38.0 9.1 25.0

Global Attributes

ویژگی های جهانی

برچسب <picture> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <picture> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

CSS Tutorial: CSS Responsive Design - Images آموزش CSS: طراحی پاسخگو CSS - تصاویر


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_pre.asp

HTML <pre> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Preformatted text:

<pre>

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both      spaces and

line breaks

</pre>

Try it Yourself »

More "Try it Yourself" examples below.

نمونه های "خودت را امتحان کن" بیشتر در زیر.


Definition and Usage

تعریف و کاربرد

برچسب <pre> متن پیش فرض شده را تعریف می کند. متن در یک عنصر <pre> با قلم با عرض ثابت (معمولاً پیک) نمایش داده می شود ، و هم فضا و هم شکاف خط را حفظ می کند.


Browser Support

پشتیبانی مرورگر

Element
<pre> Yes Yes Yes Yes Yes

Tips and Notes

نکات و یادداشت ها

نکته: هنگام نمایش متن با قالب بندی غیرمعمول یا نوعی کد رایانه ، از عنصر <pre> استفاده کنید.



Global Attributes

ویژگی های جهانی

برچسب <pre> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

برچسب <pre> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


More Examples

نمونه های بیشتر

Example

نحوه ایجاد متن از پیش فرمت شده با عرض ثابت (با CSS):

<div style="width:200px;overflow:auto">

<pre>This is a pre with a fixed width. It will use as much space as specified.</pre>

</div>

Try it Yourself »


Related Pages

صفحات مرتبط

HTML Tutorial: HTML Text Formatting

آموزش HTML: قالب بندی متن HTML

HTML DOM reference: Pre Object

مرجع HTML DOM: Pre Object


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <pre> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

pre {

  display: block;

  font-family: monospace;

  white-space: pre;

 margin: 1em 0;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_progress.asp

HTML <progress> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

نمایش یک نوار پیشرفت:

<label for="file">Downloading progress:</label>

<progress id="file" value="32" max="100"> 32% </progress>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <progress> نشان دهنده پیشرفت یک کار است.

نکته: همیشه برچسب <label> را برای بهترین روشهای دستیابی اضافه کنید!


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<progress> 8.0 10.0 16.0 6.0 11.0

Tips and Notes

نکات و یادداشت ها

نکته: برای نمایش پیشرفت یک کار ، از تگ <progress> در کنار JavaScript استفاده کنید.

توجه: برچسب <progress> برای نشان دادن یک سنج (به عنوان مثال استفاده از فضای دیسک یا ارتباط یک نتیجه پرس و جو) مناسب نیست. برای نشان دادن یک سنج ، به جای آن از برچسب <meter> استفاده کنید.



Attributes

ویژگی های

ویژگی مقدار توضیحات
max number در کل چقدر کار به کار نیاز دارد مشخص می کند. مقدار پیش فرض 1 است
value number مشخص می کند چه مقدار از کار به اتمام رسیده است

Global Attributes

ویژگی های جهانی

برچسب <progress> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

برچسب <progress> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Progress Object مرجع HTML DOM: پیشرفت شی


Default CSS Settings

تنظیمات پیش فرض CSS

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <q> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

یک نقل قول کوتاه را علامت گذاری کنید:

<p>WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>

We hope they succeed.</p>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <q> یک نقل قول کوتاه را تعریف می کند.

مرورگرها معمولاً علائم نقل قول را در اطراف نقل قول درج می کنند.


Browser Support

پشتیبانی مرورگر

Element
<q> Yes Yes Yes Yes Yes

Tips and Notes

نکات و یادداشت ها

نکته: برای علامت گذاری بخشی که از منبع دیگری نقل شده است ، از <blockquote> (به جای <q>) استفاده کنید.


Attributes

ویژگی ها

ویژگی مقدار توضیحات
cite URL Specifies the source URL of the quote


Global Attributes

ویژگی های جهانی

برچسب <q> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

رچسب <q> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Quote Object مرجع HTML DOM: نقل قول شی


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <q> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

q {

 display: inline;

}


q:before {

  content: open-quote;

}


q:after {

 content: close-quote;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_rp.asp

HTML <rp> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

یک یادداشت یاقوت:

<ruby>

漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>

</ruby>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

از برچسب <rp> برای تهیه پرانتز در اطراف یک متن یاقوت استفاده می شود ، توسط مرورگرهایی که حاشیه نویسی یاقوت را پشتیبانی نمی کنند نشان داده می شود.

از <rp> به همراه <ruby> و <rt> استفاده کنید: عنصر <ruby> از یک یا چند کاراکتر تشکیل شده است که نیاز به توضیحی / تلفظ دارد و یک عنصر <rt> که به آن اطلاعات می دهد و یک عنصر اختیاری <rp>آنچه را برای مرورگرهایی که حاشیه نویسی یاقوت را پشتیبانی نمی کنند نشان می دهد.


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<rp> 5.0 5.5 38.0 5.0 15.0

Global Attributes

ویژگی های جهانی

برچسب <rp> همچنین از ویژگیهای جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <rp> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Default CSS Settings

تنظیمات پیش فرض CSS

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_rt.asp

HTML <rt> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

یک یادداشت یاقوت:

<ruby>

漢 <rt> ㄏㄢˋ </rt>

</ruby>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <rt> توضیحی یا تلفظ شخصیت ها (برای تایپوگرافی شرق آسیا) را در یک یادداشت یاقوت تعریف می کند.

از <rt> همراه با <ruby> و <rp> استفاده کنید: عنصر <ruby> از یک یا چند کاراکتر تشکیل شده است که نیاز به توضیحی / تلفظ دارد و یک عنصر <rt> که به آن اطلاعات می دهد ، و یک عنصر اختیاری <rp> آنچه را برای مرورگرهایی که حاشیه نویسی یاقوت را پشتیبانی نمی کنند نشان می دهد.


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<rt> 5.0 5.5 38.0 5.0 15.0

Global Attributes

ویژگی های جهانی

برچسب <rt> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <rt> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <rt> را با مقادیر پیش فرض زیر نمایش می دهند:

rt {

 line-height: normal;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_ruby.asp

HTML <ruby> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

یک یادداشت یاقوت:

<ruby>

漢 <rt> ㄏㄢˋ </rt>

</ruby>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

The <ruby> tag specifies a ruby annotation.

برچسب <ruby> حاشیه نویسی از یاقوت را مشخص می کند.

حاشیه نویسی یک روبی اضافی است که به متن اصلی وصل شده است تا تلفظ یا معنی شخصیت های مربوطه را نشان دهد. این نوع حاشیه نویسی اغلب در انتشارات ژاپنی مورد استفاده قرار می گیرد.

از <ruby> به همراه <rt> و <rp> استفاده کنید: عنصر <ruby> از یک یا چند کاراکتر تشکیل شده است که به توضیحات / تلفظ نیاز دارد و یک عنصر <rt> که به آن اطلاعات می دهد و یک عنصر اختیاری <rp> آنچه را برای مرورگرهایی که حاشیه نویسی یاقوت را پشتیبانی نمی کنند نشان می دهد.


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<ruby> 5.0 5.5 38.0 5.0 15.0

Global Attributes

ویژگی های جهانی

برچسب <ruby> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <ruby> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_s.asp

HTML <s> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

متن را علامت بزنید که دیگر صحیح نیست:

<p><s>My car is blue.</s></p>

<p>My new car is silver.</p>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <s> متنی را مشخص می کند که دیگر صحیح ، دقیق یا مرتبط نیست.

از تگ <s> برای تعریف متن جایگزین یا حذف شده استفاده نمی شود ، از تگ <del> برای تعریف متن جایگزین یا حذف شده استفاده می شود.


Browser Support

پشتیبانی مرورگر

Element
<s> Yes Yes Yes Yes Yes

Global Attributes

ویژگی های جهانی

برچسب <s> همچنین از ویژگیهای جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <s> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML tutorial: HTML Text Formatting

آموزش HTML: قالب بندی متن HTML

HTML DOM reference: S Object

مرجع HTML DOM: S Object


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <s> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

s {

  text-decoration: line-through;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_samp.asp

HTML <samp> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

قالب در متن:

<samp>Sample output from a computer program</samp>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <samp> یک برچسب عبارت است. این خروجی نمونه از یک برنامه کامپیوتری را تعریف می کند.

نکته: این برچسب از بین نمی رود ، اما می توان با CSS به جلوه ای غنی تر رسید.

همه برچسب های عبارت:

برچسب توضیحات
<em> متن تأکید شده را ارائه می دهد
<strong> متن مهم را تعریف می کند
<code> قطعه ای از کد رایانه را تعریف می کند
<samp> خروجی نمونه از یک برنامه کامپیوتری را تعریف می کند
<kbd> ورودی صفحه کلید را تعریف می کند
<var> متغیر را تعریف می کند

Browser Support

پشتیبانی مرورگر

Element
<samp> Yes Yes Yes Yes Yes


Global Attributes

ویژگی های جهانی

برچسب <samp> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <samp> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML tutorial: HTML Text Formatting

آموزش HTML: قالب بندی متن HTML

HTML DOM reference: Samp Object

مرجع HTML DOM: Samp Object


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <samp> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

samp {

 font-family: monospace;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_script.asp

HTML <script> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Write "Hello JavaScript!" with JavaScript:

"سلام JavaScript!" بنویسید با JavaScript:

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <script> برای تعریف یک اسکریپت سمت مشتری (JavaScript) استفاده می شود.

عنصر <script> یا حاوی اسکریپت نویسی است ، یا به یک اسکریپت خارجی از طریق ویژگی src اشاره می کند.

کاربردهای رایج برای JavaScript عبارتند از دستکاری تصویر ، اعتبار سنجی فرم و تغییرات پویا در محتوا.

نکته: اگر می خواهید JavaScript را یاد بگیرید ، به آموزش JavaScript ما مراجعه کنید.


Browser Support

پشتیبانی مرورگر

Element
<script> Yes Yes Yes Yes Yes

Tips and Notes

نکات و یادداشت ها

توجه: اگر ویژگی "src" موجود است ، عنصر <script> باید خالی باشد.

نکته: همچنین برای کاربرانی که اسکریپت ها را در مرورگر خود غیرفعال کرده اند ، به عنصر <noscript> نگاه کنید ، یا یک مرورگر داشته باشید که از برنامه نویسی سمت مشتری پشتیبانی نمی کند.

توجه: چندین راه برای اجرای اسکریپت خارجی وجود دارد:

  • If async="async": The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
  • اگر async = "async": اسکریپت همزمان با بقیه صفحه انجام می شود (اسکریپت اجرا می شود در حالی که صفحه همچنان به تجزیه می پردازد)
  • If async is not present and defer="defer": The script is executed when the page has finished parsing
  • اگر async موجود نباشد و defer = "defer": وقتی صفحه کامل تجزیه شد ، اسکریپت اجرا می شود
  • If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
  • اگر async یا تعویق وجود نداشته باشد: قبل از ادامه مرورگر تجزیه صفحه ، اسکریپت بلافاصله بارگیری و اجرا می شود


Differences Between HTML and XHTML

تفاوت بین HTML و XHTML

In XHTML, the content inside scripts is declared as #PCDATA (instead of CDATA), which means that entities will be parsed.

در XHTML ، محتوای درون اسکریپت ها به عنوان #PCDATA (به جای CDATA) اعلام می شود ، به این معنی که اشخاص تجزیه می شوند.

This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:

این بدان معنی است که در XHTML ، باید تمام شخصیت های خاص رمزگذاری شوند ، یا تمام محتویات باید درون یک بخش CDATA پیچیده شوند:

<script type="text/javascript">

//<![CDATA[

var i = 10;

if (i < 5) {

 // some code

}

//]]>

</script>


Attributes

ویژگی ها

ویژگی مقدار توضیحات
async async مشخص می کند که این اسکریپت به صورت ناهمزمان اجرا شده است (فقط برای اسکریپت های خارجی)
charset charset رمزگذاری کاراکتر مورد استفاده در یک فایل اسکریپت خارجی را مشخص می کند
defer defer مشخص می کند که اسکریپت با اجرای صفحه تجزیه (فقط برای اسکریپت های خارجی) اجرا می شود
src URL URL یک فایل اسکریپت خارجی را مشخص می کند
type media_type نوع رسانه فیلمنامه را مشخص می کند

Global Attributes

ویژگی های جهانی

برچسب <script> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML tutorial: HTML Scripts

آموزش HTML: اسکریپت های HTML

HTML DOM reference: Script Object

مرجع HTML DOM: Script Object

JavaScript Tutorial: Learn JavaScript

آموزش JavaScript: جاوا اسکریپت را بیاموزید


Default CSS Settings

Most browsers will display the <script> element with the following default values:

script {

  display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_section.asp

HTML <section> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

بخشی در یک سند ، توضیح می دهد که WWF چیست:

<section>

 <h2>WWF</h2>

 <p>The World Wide Fund for Nature (WWF) is....</p>

</section>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

برچسب <section> بخش هایی را در یک سند مانند فصل ها ، سرصفحه ها ، پاورقی ها یا هر بخش دیگر از سند تعریف می کند.


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که کاملاً از عنصر پشتیبانی می کند.

Element
<section> 5.0 9.0 4.0 5.0 11.5

Global Attributes

ویژگی های جهانی

برچسب <section> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <section> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Section Object مرجع HTML DOM: بخش موضوع


Default CSS Settings

تنظیمات پیش فرض CSS

بیشتر مرورگرها عنصر <section> را با مقادیر پیش فرض زیر نمایش می دهند:

Example

section {

 display: block;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


https://www.w3schools.com/tags/tag_select.asp

HTML <select> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

یک لیست کشویی با چهار گزینه ایجاد کنید:

<label for="cars">Choose a car:</label>


<select id="cars">

 <option value="volvo">Volvo</option>

 <option value="saab">Saab</option>

 <option value="mercedes">Mercedes</option>

 <option value="audi">Audi</option>

</select>

Try it Yourself »


Definition and Usage

تعریف و کاربرد

از عنصر <select> برای ایجاد یک لیست کشویی استفاده می شود.

عنصر <select> یک کنترل فرم است و می تواند به صورت فرم برای جمع آوری ورودی کاربر استفاده شود.

برچسب <option> در داخل عنصر <select> گزینه های موجود را در لیست تعریف می کند.

نکته: همیشه برچسب <label> را برای بهترین روشهای دستیابی اضافه کنید!


Browser Support

پشتیبانی مرورگر

Element
<select> Yes Yes Yes Yes Yes


Attributes

ویژگی ها

ویژگی مقدار توضیحات
autofocus autofocus مشخص می کند که هنگام بارگیری صفحه ، لیست کشویی باید به طور خودکار تمرکز کند
disabled disabled مشخص می کند که یک لیست کشویی باید غیرفعال شود
form form_id تعریف می کند که لیست کشویی را به آن تعلق دارد
multiple multiple مشخص می کند که چندین گزینه می توانند همزمان انتخاب شوند
name name نامی را برای لیست کشویی تعریف می کند
required required مشخص می کند که کاربر قبل از ارسال فرم ملزم به انتخاب یک مقدار است
size number تعداد گزینه های قابل مشاهده را در یک لیست کشویی تعریف می کند

Global Attributes

ویژگی های جهانی

برچسب <select> همچنین از ویژگی های جهانی در HTML پشتیبانی می کند.


Event Attributes

ویژگی های رویداد

برچسب <select> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.


Related Pages

صفحات مرتبط

HTML DOM reference: Select Object

مرجع HTML DOM: شی را انتخاب کنید

CSS Tutorial: Styling Forms

آموزش CSS: فرم های سبک سازی


Default CSS Settings

تنظیمات پیش فرض CSS

None.


❮ PreviousComplete HTML ReferenceNext ❯