این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش صفت Src در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Src در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Src در HTML
صفت src که دیگه همه میدونن چیه! یعنی همه میدونن حا ، این صفت یکی از پرکاربردترین صفات مورد استفاده در تگ های زبان HTML می باشد، با استفاده از این صفت میتونیم ( آدرس یا مسیر ) یا محل یک ( فایل / لینک ) رو مشخص و یا تعریف نماییم.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <iframe> | <video> | <audio> |
| <script> | <input> | <img> |
| <embed> | <track> | <source> |
Free-Learn
مثال از صفت Src در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : استفاده در تگ Audio
|
1 2 3 4 5 |
<body> <audio controls src="files/demo.mp3">..</audio> </body> |
مثال شماره ۲ : استفاده در تگ Video
|
1 2 3 4 5 |
<body> <video controls src="files/demo.mp4">..</video> </body> |
مثال شماره ۳ : استفاده در تگ Iframe
|
1 2 3 4 5 |
<body> <iframe src="https://free-learn.ir"></iframe> </body> |
مثال شماره ۴ : استفاده در تگ Img
|
1 2 3 4 5 |
<body> <img src="images/cat.gif"> </body> |
مثال شماره ۵ : استفاده در تگ Input
|
1 2 3 4 5 6 7 8 |
<body> <form action="files/get_data.php" method="POST"> نام: <input type="text" name="myname"> <br><br> <input type="image" src="images/submit-button.png"> </form> </body> |
مثال شماره ۶ : استفاده در تگ Script
|
1 2 3 4 5 |
<head> <script src="files/test.js"></script> </head> |
مثال شماره ۷ : استفاده در تگ Source
|
1 2 3 4 5 6 7 |
<body> <audio controls> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
مثال شماره ۸ : استفاده در تگ Track
|
1 2 3 4 5 6 7 8 |
<body> <video controls width="400" height="230"> <source src="files/demo.mp4" type="video/mp4"> <track src="files/subtitle.vtt" kind="subtitles" srclang="fa" label="فارسی" default> </video> </body> |
مثال شماره ۹ : استفاده در تگ Embed
|
1 2 3 4 5 |
<body> <embed src="files/test-object.html" width="500" height="300"> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت src در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | Edge |
| audio | بله | بله | بله | بله | بله |
| video | بله | بله | بله | بله | بله |
| iframe | بله | بله | بله | بله | بله |
| img | بله | بله | بله | بله | بله |
| input | بله | بله | بله | بله | بله |
| script | بله | بله | بله | بله | بله |
| source | بله | بله | بله | بله | بله |
| track | بله | بله | بله | بله | بله |
| embed | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 2 3 4 5 6 7 8 9 |
<audio src="URL"> <video src="URL"> <iframe src="URL"> <img src="URL"> <input type="image" src="URL"> <script src="URL"> <source src="URL"> <track src="URL"> <embed src="URL"> |
Free-Learn
جدول مقادیر صفت Src در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| URL | آدرس یا مسیر فایل بصورت مطلق یا نسبی نمونه آدرس مطلق : https://test.com/my_image.jpg نمونه آدرس نسبی : files/my_image.jpg |
Free-Learn
نکات و توضیحات
- این صفت فقط در تگ input از نوع image کار میکند. ( ‘input type=’image )
