خانه آموزش HTML آموزش تگ های HTML آموزش تگ template در HTML

آموزش تگ template در HTML

توسط

۱۳۹۸-۰۳-۳۱

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

آموزش تگ template در HTML

Free-Learn

آنچه در این جلسه میخوانید :

1 تگ Template در HTML
2 مثال از تگ template در HTML
3 پشتیبانی مرورگرها
4 پشتیبانی از صفات و رویدادهای عمومی
5 نکات و توضیحات

تگ Template در HTML

تگ template تگی است که با استفاده از آن میتوان یک محتوا را در یک صفحه وب قرار داد ولی از نمایش آن در مرورگرها جلوگیری کرد، یعنی در واقع محتویات این تگ در مرورگرها بصورت پیش فرض نمایش داده نمی شود.

حال برای نمایش محتویات تگ template میتوان از جاوااسکرپیت استفاده کرد، پس بطور کلی محتویات تگ template در یک صفحه وب وجود دارد ولی در مرورگرها نمایش داده نمی شود.

Free-Learn

مثال از تگ template در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

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

<body>

<button onclick="showimage()">ایجاد کن و نمایش بده</button>

<template>
  <h2>فری لرن</h2>
  <img src="images/Logo-Header-2.png">
</template>

<script>
function showimage() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

</body>

<body>

<button onclick="showimage()">ایجاد کن و نمایش بده</button>

</template>

function showimage() {

var temp = document.getElementsByTagName("template")[0];

var clon = temp.content.cloneNode(true);

document.body.appendChild(clon);

}

</script>

</body>

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ template در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	۲۶٫۰	۲۲٫۰	۱۵٫۰	۹٫۰	۱۳٫۰

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ template تنها از صفات عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تگ template یک تگ جدید/اضافه شده در HTML5 می باشد.

Free-Learn

دریافت PDF یا پرینت این مطلب