این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ source در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ source در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Source در HTML
تگ source تگی است که با استفاده از آن میتوان یک سورس / منبع یا بطور کلی مسیر یک فایل رو برای تگ های Audio و Video و Picture مشخص کرد.
Free-Learn
مثال از تگ source در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده در تگ audio
|
1 2 3 4 5 6 7 |
<body> <audio controls> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
مثال شماره ۲ : استفاده در تگ video
|
1 2 3 4 5 6 7 |
<body> <video controls> <source src="files/demo.mp4" type="video/mp4"> </video> </body> |
مثال شماره ۳ : استفاده در تگ picture
|
1 2 3 4 5 6 7 8 9 |
<body> <picture> <source media="(min-width: 650px)" srcset="files/pic-1.jpg"> <source media="(min-width: 465px)" srcset="files/pic-2.jpg"> <img src="files/pic-3.jpg"> </picture> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ source در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ source در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| src | URL | آدرس URL فایل را مشخص میکند |
| srcset | URL | نمایش فایل در اندازه های مختلف صفحه نمایش |
| media | media_query | برای مشخص کردن مدیاکوئری ها در صفحه ( برای واکنش گرایی ) |
| type | MIME-type | نوع رسانه ای را مشخص میکند ( مثلا نوع رسانه فایل ویدئویی از نوع mp4 میشه video/mp4 ) |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ source از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- نوع رسانه یا نوع محتوایی رسانه ای یا در واقع همون MIME-TYPE تمامی فایل ها را میتوانید از اینجا مشاهده نمایید.
