এসআরসি এবং এইচআরএফের মধ্যে পার্থক্য


172

SRCএবং HREFবৈশিষ্ট্যাবলী একটি চিত্র মত কিছু বহিরাগত সত্ত্বা, একটি CSS ফাইল, একটি HTML ফাইল, অন্য কোন ওয়েব পৃষ্ঠা বা একটি জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করতে ব্যবহৃত হয়।

SRCএবং এর মধ্যে একটি স্পষ্ট পার্থক্য আছে HREF? কোথায় বা কখন ব্যবহার করতে SRCবা HREF? আমি মনে করি সেগুলি বিনিময়যোগ্যভাবে ব্যবহার করা যাবে না।

আমি নীচে কয়েকটি বৈশিষ্ট্য দিচ্ছি যেখানে এই বৈশিষ্ট্যগুলি ব্যবহৃত হয়:

  • সিএসএস ফাইলটি উল্লেখ করতে: href="cssfile.css"লিঙ্ক ট্যাগের অভ্যন্তরে।
  • src="myscript.js"স্ক্রিপ্ট ট্যাগের ভিতরে একটি জেএস ফাইল উল্লেখ করতে ।
  • কোনও চিত্রের ফাইলটি উল্লেখ করতে: src="mypic.jpg"একটি চিত্র ট্যাগের অভ্যন্তরে inside
  • অন্য একটি ওয়েবপৃষ্ঠাটি উল্লেখ করতে: href="http://www.webpage.com"অ্যাঙ্কর ট্যাগের অভ্যন্তরে।

আপনার ইনপুট জন্য প্রত্যেককে ধন্যবাদ। সুতরাং দেখে মনে হচ্ছে এই দুটিয়ের মধ্যে কোনও স্পষ্ট পার্থক্য নেই। আরও প্রতিক্রিয়া পেতে আমি আরও কিছু সময়ের জন্য অপেক্ষা করতে চাই। ওদেদের পর্যবেক্ষণ আমার কাছে কিছুটা গ্রহণযোগ্য মনে হচ্ছে looks
বিজে

২. এর মধ্যে একটি পার্থক্য রয়েছে explain
এপার্নেভ

উত্তর:


233

দ্রষ্টব্য: @ জন-ইয়িনের উত্তর চশমার পরিবর্তনগুলি বিবেচনা করে আরও উপযুক্ত।


হ্যাঁ. এসসিআর এবং হ্রেফের মধ্যে পার্থক্য রয়েছে এবং সেগুলি বিনিময়যোগ্যভাবে ব্যবহার করা যায় না। রেফারেন্সিং ডকুমেন্ট এবং একটি বাহ্যিক উত্সের মধ্যে সম্পর্ক স্থাপনের জন্য আমরা href প্রতিস্থাপিত উপাদানগুলির জন্য src ব্যবহার করি ।

href (হাইপারটেক্সট রেফারেন্স) বৈশিষ্ট্যটি একটি ওয়েব সংস্থার অবস্থান নির্দিষ্ট করে এটি বর্তমান উপাদান (অ্যাঙ্কারের ক্ষেত্রে a) বা বর্তমান নথির (ক্ষেত্রে ক্ষেত্রে link) এবং গন্তব্য অ্যাঙ্কর বা সংস্থানটি এই বৈশিষ্ট্য দ্বারা সংজ্ঞায়িত সংস্থার মধ্যে সংযোগ বা সম্পর্ককে সংজ্ঞায়িত করে। আমরা যখন লিখি:

<link href="style.css" rel="stylesheet" />

ব্রাউজার বুঝতে পারে যে এই সংস্থানটি একটি স্টাইলশিট এবং the প্রক্রিয়াকরণপৃষ্ঠা হয় পার্স না বিরতি দেওয়া (রেন্ডারিং বিরতি দেওয়া যেতে পারে যেহেতু ব্রাউজার শৈলী নিয়ম দরকার রং এবং পৃষ্ঠা রেন্ডার করতে)। এটি ট্যাগের ভিতরে সিএসএস ফাইলের বিষয়বস্তু ফেলে দেওয়ার মতো নয় not style(সুতরাং আপনার এইচটিএমএল নথিতে স্টাইলশিট সংযুক্ত করার linkপরিবর্তে ব্যবহার করার পরামর্শ দেওয়া হচ্ছে @import))

src (উত্স) বৈশিষ্ট্যটি সুনির্দিষ্ট উপাদানটির সংজ্ঞাটির স্থানে বর্তমান নথিতে সংস্থানটিকে এম্বেড করে। যেমন যেমন ব্রাউজারটি যখন সন্ধান করে

<script src="script.js"></script>

পৃষ্ঠার লোডিং এবং প্রক্রিয়াকরণটি এই ব্রাউজারটি ফাইলটি সংগ্রহ, সংকলন এবং সম্পাদন না করা পর্যন্ত বিরতি দেওয়া হয়। এটি scriptট্যাগের অভ্যন্তরে জেএস ফাইলের বিষয়বস্তু ফেলে দেওয়ার মতো to imgট্যাগের ক্ষেত্রেও একই অবস্থা । এটি একটি খালি ট্যাগ এবং বিষয়বস্তু, এটির ভিতরে আসা উচিত, এটি srcবৈশিষ্ট্য দ্বারা সংজ্ঞায়িত করা হয় । ব্রাউজারটি চিত্রটি না আনা এবং লোড না করা পর্যন্ত লোডিংকে বিরতি দেয়। [একই ক্ষেত্রে iframe]

এই কারণেই নীচে সমস্ত জাভাস্ক্রিপ্ট ফাইল লোড করার পরামর্শ দেওয়া হয় ( </body>ট্যাগের আগে )


আপডেট : এটি কীভাবে এইচটিএমএল 5 স্পেস অনুযায়ী প্রয়োগ করা হয় সে সম্পর্কে আরও তথ্যের জন্য @ জন-ইয়িনের উত্তর দেখুন fer


4
এই Apnerve জন্য আপনাকে ধন্যবাদ। এটি আমার কাছে সংবাদ ছিল।
কায়োট

এই ট্যাগগুলি কতটা গতি কার্যকর করে?
মেয়াদ উত্তীর্ণ

4
@ এক্স্পায়ারডিনঞ্জা srcসাধারণত ফাইলটিকে hrefসমান্তরালে লোড করার সময় ক্রমিকভাবে লোড করেন । সুতরাং, সংস্থানগুলি ক্রমিকভাবে লোড করা হলে অনুভূত লোডের সময় বৃদ্ধি পায়।
এপার্নেভ

তাহলে গুগল পেজস্পিড কেন বহিরাগত সিএসএস রেফারেন্সগুলি ব্লক করার বিষয়ে কথা বলবে? ডেভেলপারস
google.com/speed/docs/insights/

1
@ ফ্রি হ্যাঁ এক্সটার্নাল সিএসএস রেফারেন্স ব্লক রেন্ডারিং এবং না পার্স এটি অত্যাধুনিক ব্রাউজারে FOUC (Unstyled বিষয়বস্তুর ফ্ল্যাশ) এড়ানো।
এপেনেরভ

59

এইচটিএমএল 5 প্রকাশের আগে অ্যাপার্নভের উত্তরটি সঠিক ছিল, এখন এটি আরও জটিল।

উদাহরণস্বরূপ, এইচটিএমএল 5 স্পেসিফিকেশন scriptঅনুসারে উপাদানটির দুটি বৈশ্বিক বৈশিষ্ট্য রয়েছে যা বৈশিষ্ট্যটির কার্যকারিতা কীভাবে পরিবর্তিত হয়: এবং । স্ক্রিপ্ট (এম্বেডড ইনলাইন বা বাহ্যিক ফাইল থেকে আমদানি করা) কীভাবে কার্যকর করা উচিত তা এগুলি পরিবর্তন করে।srcasyncdefer

এর অর্থ তিনটি সম্ভাব্য মোড রয়েছে যা এই বৈশিষ্ট্যগুলি ব্যবহার করে নির্বাচন করা যেতে পারে:

  1. যখন asyncঅ্যাট্রিবিউট উপস্থিত থাকলে, তারপর স্ক্রিপ্ট দ্বারা অ্যাসিঙ্ক্রোনাস যত তাড়াতাড়ি এটা পাওয়া যায় মৃত্যুদন্ড কার্যকর করা হবে।
  2. যখন asyncঅ্যাট্রিবিউট উপস্থিত নেই কিন্তু deferঅ্যাট্রিবিউট উপস্থিত থাকলে, তারপর স্ক্রিপ্ট মৃত্যুদন্ড কার্যকর যখন পৃষ্ঠা সমাপ্ত পার্সিং রয়েছে।
  3. যখন উভয়ই বৈশিষ্ট্য উপস্থিত না থাকে, তখন ব্যবহারকারী এজেন্ট পৃষ্ঠাটি বিশ্লেষণ চালিয়ে যাওয়ার আগে স্ক্রিপ্টটি তাৎক্ষণিকভাবে কার্যকর এবং কার্যকর করা হয়।

বিশদ জন্য দয়া করে এইচটিএমএল 5 সুপারিশ দেখুন

আমি যেহেতু মাঝে মাঝে এই বিষয়টি ঘুরে দেখি তার জন্য একটি নতুন উত্তর দিয়ে আপডেট করতে চেয়েছিলাম। উত্তরগুলির কয়েকটি স্ট্যাকওভারফ্লো এবং আমাদের প্রত্যেকের দ্বারা চেক করে সংরক্ষণাগারভুক্ত করা উচিত।


1
<a> কীভাবে 'href' ব্যবহার করে এবং <লিঙ্ক rel = "স্টাইলশিট"> কীভাবে করে তার মধ্যে একটি বড় পার্থক্য রয়েছে। <link> ডাউনলোড করার জন্য রেফার-টু রিসোর্স দরকার তাই এটি মূলত ব্যবহারকারীর সামনে উপস্থাপিত পৃষ্ঠার অংশ হয়ে যায়, << লিঙ্কটি ক্লিক না করা পর্যন্ত << লিঙ্কটি এটির লক্ষ্যবস্তু ডাউনলোড করার কারণ হয় না। সুতরাং আমি বলব যে <লিঙ্ক> কমপক্ষে স্টাইল শিটের ক্ষেত্রে 'href' এর পরিবর্তে 'src' ব্যবহার করা উচিত। বা আরও ভাল <স্টাইল> এর জন্য 'সিআরসি'-এ্যাট্রিবিউট নেওয়া উচিত জাস্ট লাইক <স্ক্রিপ্ট> করে।
পানু লজিক

17

আমি মনে করি <src>পৃষ্ঠায় কিছু সংস্থান যুক্ত করে এবং <href>কেবল কোনও সংস্থার লিঙ্ক সরবরাহ করার জন্য (উত্সটি পৃষ্ঠাতে নিজেই যুক্ত না করে)।


6

সরল সংজ্ঞা

SRC : (Source). To specify the origin of (a communication); document:     

HREF : (Hypertext Reference). A reference or link to another page, document...

1
সুতরাং একটি রেফারেন্স উত্স নির্দিষ্ট করে না?
ব্রোডেভ

4

এসআরসি ( এসআরসি ই) - আমি নিজের জন্য এই সংস্থানটি লোড করতে চাই।

উদাহরণ স্বরূপ:

Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>   

Relative URL with img element : <img src="mypic.jpg">

এইচআরইএফ ( এইচ ypertext REF এরেন্স ) - আমি অন্য কারও জন্য এই সংস্থানটি উল্লেখ করতে চাই।

উদাহরণ স্বরূপ:

Absolute URL with anchor element: <a href="http://www.google.com/">Click here</a>

Relative URL with link element: <link href="mystylesheet.css" type="text/css">

শ্লীলতা


3

এইচ রেফ : বর্তমান পৃষ্ঠার তথ্য যেমন পৃষ্ঠার শৈলীর জন্য সিএসএস তথ্য বা অন্য কোনও পৃষ্ঠায় লিঙ্ক করা একটি রেফারেন্সিয়াল স্টোর পৃষ্ঠার পার্সিং বন্ধ হয় না।

কি SRC : একটি পুনরায় Is উৎস যোগ করার জন্য / চিত্রসমূহ বা জাভাস্ক্রিপ্ট হিসেবে পৃষ্ঠায় লোড করা হয়নি। কোডযুক্ত বৈশিষ্ট্যের উপর নির্ভর করে পৃষ্ঠা পার্সিং বন্ধ হতে পারে। এ কারণেই শেষের বডি ট্যাগের ঠিক আগে স্ক্রিপ্ট যুক্ত করা ভাল যাতে পৃষ্ঠার রেন্ডারিংটি ধরে রাখা যায় না।



2

ডাব্লু 3 থেকে:

যখন কোনও এলিমেন্টের href বৈশিষ্ট্য সেট করা থাকে, তখন উপাদানটি একটি লিঙ্কের জন্য একটি উত্স অ্যাঙ্করকে সংজ্ঞায়িত করে যা কোনও ওয়েব সংস্থান পুনরুদ্ধার করতে ব্যবহারকারী দ্বারা সক্রিয় করা যেতে পারে। উত্স অ্যাঙ্কর হল একটি দৃষ্টান্তের অবস্থান এবং গন্তব্য অ্যাঙ্কর হ'ল ওয়েব সংস্থান।

সূত্র: http://www.w3.org/TR/html401/struct/links.html

এই বৈশিষ্ট্যটি চিত্রের উত্সের অবস্থান নির্দিষ্ট করে। ব্যাপকভাবে স্বীকৃত চিত্র বিন্যাসের উদাহরণগুলির মধ্যে রয়েছে জিআইএফ, জেপিইজি, এবং পিএনজি।

সূত্র: http://www.w3.org/TR/REC-html40/struct/objects.html


2

একটি সাধারণ সংজ্ঞা

  • এসআরসি: যদি কোনও সংস্থান বডি ট্যাগের ভিতরে স্থাপন করা যায় (চিত্র, স্ক্রিপ্ট, আইফ্রেমে, ফ্রেমের জন্য)
  • এইচআরএফ: যদি কোনও সংস্থানকে বডি ট্যাগের ভিতরে স্থাপন করা না যায় এবং কেবল সংযুক্ত করা যায় (এইচটিএমএল, সিএসএসের জন্য)

2

আপনি মনে রাখা উচিত যখন সকলের ব্যবহারের এবং যে এটা সূরা লিঙ্ক সহ ব্যবহার করা হয়

<a href="#"></a>
<link rel="stylesheet" href="style.css" />

src স্ক্রিপ্ট এবং ইমেজ সঙ্গে ব্যবহার করা হয়

<img src="the_image_link" />
<script type="text/javascript" src="" />

URL সাধারণত সিএসএস কিছু অন্তর্ভুক্ত করা, উদাহরণ স্বরূপ একটি পটভূমি চিত্র যোগ করার জন্য ব্যবহার করা হয়

selector { background-image: url('the_image_link'); } 

2

এইচটিএমএল 5.1 ডুকমেন্টেশন (1 নভেম্বর 2016) পেরিয়ে যাওয়ার পরে:


অংশ 4 (এইচটিএমএলের উপাদানসমূহ)

দ্বিতীয় অধ্যায় (নথি মেটাডেটা)

বিভাগ 4 (লিঙ্ক উপাদান) বলে যে:

লিঙ্ক (গুলি) এর গন্তব্যটি hrefঅ্যাট্রিবিউট দ্বারা দেওয়া হয়েছে, যা অবশ্যই উপস্থিত থাকতে হবে এবং অবশ্যই স্পেস দ্বারা ঘিরে একটি বৈধ অ-খালি URL থাকতে হবে URL যদি hrefবৈশিষ্ট্যটি অনুপস্থিত থাকে তবে উপাদানটি কোনও লিঙ্ক সংজ্ঞায়িত করে না।

srcবৈশিষ্ট্যটি ধারণ করে না ...

ডাইনি যৌক্তিক কারণ এটি একটি লিঙ্ক।


অধ্যায় 12 (স্ক্রিপ্টিং)

বিভাগ 1 (স্ক্রিপ্ট উপাদান) বলে যে:

ক্লাসিক স্ক্রিপ্টগুলি হয় ইনলাইন এম্বেড করা হতে পারে বা srcবৈশিষ্ট্যটি ব্যবহার করে কোনও বাহ্যিক ফাইল থেকে আমদানি করা হতে পারে , যা নির্দিষ্ট করে যদি বাহ্যিক স্ক্রিপ্ট সংস্থান ব্যবহারের URL দেয়। যদি srcনির্দিষ্ট করা থাকে তবে এটি অবশ্যই স্পেস দ্বারা ঘিরে সম্ভাব্য চারপাশে একটি বৈধ অ-খালি URL হওয়া উচিত। ইনলাইন স্ক্রিপ্ট উপাদানগুলির বিষয়বস্তু বা বাহ্যিক স্ক্রিপ্ট সংস্থানগুলি অবশ্যই ক্লাসিক স্ক্রিপ্টগুলির জন্য জাভাস্ক্রিপ্ট স্পেসিফিকেশনের স্ক্রিপ্ট উত্পাদনের প্রয়োজনীয়তার সাথে সামঞ্জস্য করতে হবে।

এমনকি এটি hrefবৈশিষ্ট্যটি উল্লেখ করে না ...

এটি নির্দেশ করে যে স্ক্রিপ্ট ট্যাগ ব্যবহার করার সময় সর্বদা srcবৈশিষ্ট্যটি ব্যবহার করে !!!


অধ্যায় 7 (এম্বেড করা সামগ্রী)

বিভাগ 5 (img উপাদান)

চিত্রটি srcএবং srcsetবৈশিষ্ট্যগুলি দ্বারা প্রদত্ত চিত্র এবং srcsetপিতা বা মাতা যদি কোনও pictureউপাদান থাকে তবে পূর্ববর্তী কোনও ভাইবোন উত্সের বৈশিষ্ট্যগুলি এম্বেড করা সামগ্রী।

এছাড়াও hrefবৈশিষ্ট্যটি উল্লেখ করে না ...

এটি নির্দেশ করে যে imgট্যাগ ব্যবহার করার সময় srcঅ্যাট্রিবিউটটি পাশাপাশি ব্যবহার করা উচিত ...


ডাব্লু 3 সি সুপারিশের রেফারেন্স লিংক


1

এগুলি বিনিময়যোগ্য নয় - প্রতিটি এখানে আলাদা আলাদা উপাদানের উপর সংজ্ঞায়িত করা হয়, যেমন এখানে দেখা যায় ।

তাদের সত্যই একই অর্থ রয়েছে, সুতরাং এটি একটি অসঙ্গতি। আমি বেশিরভাগ কারণে বিভিন্ন বিক্রেতাদের দ্বারা শুরু হওয়া বিভিন্ন ট্যাগ প্রয়োগ করার কারণে ধরে নিয়ে যাব, তারপরে পিছনে সামঞ্জস্যতা না ভাঙার জন্য সেই অনুমানের মধ্যে ডুবে গেলাম।


1
না They এগুলির অর্থ একই নয় এবং এটি কোনও অসঙ্গতি নয়। srcট্যাগ পৃষ্ঠায় সম্পদ যোগ করে যখন hrefশুধু রিসোর্স একটি লিঙ্ক প্রদান করে এবং নথি সঙ্গে একটি সম্পর্ক স্থাপন করে।
এপার্নেভ

1

তাদের অনুরূপ অর্থ নেই। 'src' এমন একটি সংস্থান নির্দেশ করে যা বর্তমান পৃষ্ঠার অংশ হিসাবে ব্রাউজারটি আনতে হবে। এইচআরইএফ নির্দেশ করে যদি ব্যবহারকারী এটির অনুরোধ করে তবে এটি একটি সংস্থান প্রাপ্ত হবে।


3
অগত্যা নয়:<link href="foo.css" rel="stylesheet" type="text/css">
vlvaro González

ব্যবহারকারী-এজেন্টhref যদি এটির অনুরোধ করে তবে এজেপি সঠিক সংস্থান ব্যতীত অন্য কোনও উত্স প্রাপ্ত করার নির্দেশ দেয় । স্টাইলশীট হয় না বর্তমান নথির অংশ হিসেবে সংগৃহীত হয়েছে।
Apnerve

0

পার্থক্য সম্পর্কে অ্যাপনারভ কী বলে আমি তাতে সম্মত। তবে সিএসএসের ক্ষেত্রে এটি অদ্ভুত দেখাচ্ছে। সিএসএস ব্রাউজারের মাধ্যমে ক্লায়েন্টে ডাউনলোড হয়। এটি অ্যাঙ্কর ট্যাগের মতো নয় যা কোনও নির্দিষ্ট সংস্থানকে নির্দেশ করে। সুতরাং href ব্যবহার করা আমার কাছে অদ্ভুত বলে মনে হচ্ছে। এমনকি যদি পৃষ্ঠার সাথে এটি লোড না করা থাকে তবে পৃষ্ঠাটি ব্যতীত সম্পূর্ণ দেখতে পাওয়া যায় না এবং এটির কেবল সম্পর্কই নয় বরং উত্সের মতো যা ফলস্বরূপ চিত্রের মতো আরও অনেক সংস্থানকে বোঝায়।


আপনি যখন মনে করেন যে এটি নথির CSSএকটি অংশ HTML, তখন আপনি এগিয়ে যান এবং নিয়ম styleসহ ট্যাগটি ব্যবহার করতে পারেন @import। পারফরম্যান্সে এর পরিণতি হতে পারে তবে এই দৃশ্যে যথাযথ ধারণা তৈরি করে।
Apnerve

0

পৃষ্ঠায় সেই সংস্থানটি যুক্ত করতে src হ'ল ব্যবহার করা হয়, যেখানে এই পৃষ্ঠা থেকে কোনও নির্দিষ্ট সংস্থার সাথে লিঙ্ক করার জন্য href ব্যবহার করা হয়।

আপনি যখন নিজের ওয়েবপৃষ্ঠায় ব্যবহার করেন, ব্রাউজারটি দেখতে পায় যে এটি একটি স্টাইল শীট এবং তাই প্যারেললে স্টাইল শীটটি ডাউনলোড হওয়ার সাথে সাথে পৃষ্ঠা রেন্ডারিংয়ের সাথে অবিরত রয়েছে।

আপনি যখন নিজের ওয়েবপৃষ্ঠায় ব্যবহার করেন, এটি ব্রাউজারটিকে লোকেশনটিতে সংস্থান সন্নিবেশ করতে বলে। সুতরাং এখন ব্রাউজারে জেএস ফাইলটি আনতে হবে এবং তারপরে এটি লোড করতে হবে। ব্রাউজার লোডিং প্রক্রিয়া শেষ না করা পর্যন্ত পৃষ্ঠা রেন্ডারিং প্রক্রিয়াটি বন্ধ রয়েছে। এই কারণেই YUI আপনার ওয়েব পৃষ্ঠার একেবারে নীচে আপনার জেএস ফাইলগুলি লোড করার পরামর্শ দেয়।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.