ความแตกต่างระหว่าง SRC และ HREF

SRCและHREFแอตทริบิวต์ที่ใช้ในการรวมหน่วยงานภายนอกเช่นบางภาพไฟล์ CSS เป็นไฟล์ HTML, หน้าเว็บอื่น ๆ หรือไฟล์ JavaScript

มีความแตกต่างที่ชัดเจนระหว่างSRCและHREF? ที่ไหนหรือเมื่อไหร่ที่จะใช้SRCหรือHREF? ฉันคิดว่าพวกเขาไม่สามารถใช้แทนกันได้

ฉันให้ตัวอย่างด้านล่างนี้ซึ่งมีการใช้คุณลักษณะเหล่านี้:

• หากต้องการอ้างถึงไฟล์ CSS: href="cssfile.css"ภายในแท็กลิงก์
• ในการอ้างถึงไฟล์ JS: src="myscript.js"ภายในแท็กสคริปต์
• ในการอ้างถึงไฟล์ภาพ: src="mypic.jpg"ภายในแท็กรูปภาพ
• หากต้องการอ้างอิงหน้าเว็บอื่น: href="http://www.webpage.com"ภายในแท็กจุดยึด

หมายเหตุ: @ คำตอบของ John-Yin นั้นเหมาะสมกว่าในการพิจารณาการเปลี่ยนแปลงรายละเอียด

ใช่. มีความแตกต่างระหว่างsrcและhrefและพวกเขาไม่สามารถใช้แทนกันได้ เราใช้srcสำหรับองค์ประกอบที่ถูกแทนที่ในขณะที่hrefสำหรับสร้างความสัมพันธ์ระหว่างเอกสารอ้างอิงและทรัพยากรภายนอก

แอ็ตทริบิวต์href (การอ้างอิงไฮเปอร์เท็กซ์) ระบุตำแหน่งของทรัพยากรเว็บดังนั้นการกำหนดลิงค์หรือความสัมพันธ์ระหว่างองค์ประกอบปัจจุบัน (ในกรณีที่สมอa) หรือเอกสารปัจจุบัน (ในกรณีของlink) และยึดปลายทางหรือทรัพยากรที่กำหนดโดยแอตทริบิวต์นี้ เมื่อเราเขียน:

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

เบราว์เซอร์เข้าใจว่าทรัพยากรนี้เป็นสไตล์ชีทและ การประมวลผลการแยกหน้าไม่หยุดชั่วคราว (การแสดงผลอาจหยุดชั่วคราวเนื่องจากเบราว์เซอร์ต้องการกฎสไตล์เพื่อทาสีและแสดงหน้า) มันเป็นไม่ได้คล้ายกับการทุ่มตลาดเนื้อหาของ CSS แฟ้มภายในstyleแท็ก (ดังนั้นขอแนะนำให้ใช้linkแทน@importการแนบสไตล์ชีทกับเอกสาร html ของคุณ)

คุณลักษณะsrc (แหล่งที่มา) เพียงฝังทรัพยากรในเอกสารปัจจุบันที่ตำแหน่งของคำจำกัดความขององค์ประกอบ สำหรับเช่น เมื่อพบเบราว์เซอร์

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

การโหลดและการประมวลผลของหน้าจะหยุดชั่วคราวจนกว่าเบราว์เซอร์จะดึงข้อมูลรวบรวมและประมวลผลไฟล์ คล้ายกับการดัมพ์เนื้อหาของไฟล์ js ภายในscriptแท็ก ที่คล้ายกันคือกรณีที่มีimgแท็ก มันเป็นแท็กที่ว่างเปล่าและเนื้อหาที่ควรเข้ามาข้างในนั้นถูกกำหนดโดยแอsrcททริบิวต์ เบราว์เซอร์จะหยุดการโหลดชั่วคราวจนกว่าจะดึงและโหลดภาพ [เป็นกรณีที่มีiframe]

นี่คือเหตุผลที่แนะนำให้โหลดไฟล์ JavaScript ทั้งหมดที่ด้านล่าง (หน้า</body>แท็ก)

ปรับปรุง : อ้างอิงคำตอบของ @ John-Yin สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการใช้งานตามข้อกำหนดของ HTML 5

คำตอบของ apnerve ถูกต้องก่อน HTML 5 ออกมาตอนนี้มันซับซ้อนกว่านี้เล็กน้อย

ยกตัวอย่างเช่นscriptองค์ประกอบตามที่HTML 5สเปคมีสองคุณลักษณะของโลกซึ่งการเปลี่ยนแปลงวิธีการที่srcฟังก์ชั่นแอตทริบิวต์: และasync deferสิ่งเหล่านี้จะเปลี่ยนวิธีการเรียกใช้สคริปต์ (ฝังแบบอินไลน์หรือนำเข้าจากไฟล์ภายนอก)

ซึ่งหมายความว่ามีสามโหมดที่เป็นไปได้ที่สามารถเลือกได้โดยใช้แอตทริบิวต์เหล่านี้:

1. เมื่อasyncแอตทริบิวต์มีอยู่แล้วสคริปต์จะถูกดำเนินการแบบอะซิงโครนัสทันทีที่พร้อมใช้งาน
2. เมื่อไม่มีasyncแอ็ตทริบิวต์ แต่มีdeferอยู่แอ็ตทริบิวต์จะมีการเรียกใช้สคริปต์เมื่อเพจแยกวิเคราะห์เสร็จแล้ว
3. เมื่อไม่มีแอ็ตทริบิวต์สคริปต์จะถูกดึงและดำเนินการทันทีก่อนที่เอเจนต์ผู้ใช้จะแยกวิเคราะห์หน้าต่อไป

สำหรับรายละเอียดโปรดดูคำแนะนำ HTML 5

ฉันแค่ต้องการอัปเดตด้วยคำตอบใหม่สำหรับผู้ที่เข้าชมหัวข้อนี้เป็นครั้งคราว คำตอบบางคำตอบควรได้รับการตรวจสอบและเก็บถาวรโดย stackoverflow และเราทุกคน

ฉันคิดว่า<src>จะเพิ่มทรัพยากรบางอย่างลงในหน้าและ<href>เป็นเพียงการให้ลิงก์ไปยังแหล่งข้อมูล (โดยไม่ต้องเพิ่มแหล่งข้อมูลลงในหน้า)

คำจำกัดความง่าย ๆ

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

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

SRC ( S ou rc e) - ฉันต้องการโหลดทรัพยากรนี้ด้วยตัวเอง

ตัวอย่างเช่น:

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

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

HREF ( H ypertext การอ้างอิง REF ypertext) - ฉันต้องการอ้างถึงทรัพยากรนี้สำหรับคนอื่น

ตัวอย่างเช่น:

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">

มารยาท

H REF : เป็นREF erence ข้อมูลสำหรับหน้าปัจจุบันข้อมูล CSS คือสำหรับรูปแบบหน้าเว็บหรือการเชื่อมโยงไปยังหน้าอื่น การแยกหน้าไม่หยุด

SRC : เป็นอีกแหล่งที่จะเพิ่ม / โหลดไปยังหน้าเช่นเดียวกับในภาพหรือจาวาสคริปต์ การแยกวิเคราะห์หน้าอาจหยุดขึ้นอยู่กับแอตทริบิวต์การเข้ารหัส ด้วยเหตุนี้จึงเป็นการดีกว่าที่จะเพิ่มสคริปต์ก่อนที่แท็กเนื้อหาส่วนท้ายเพื่อให้การแสดงผลหน้าเว็บไม่ได้ถูกระงับ

หากคุณกำลังพูดถึง HTML4 รายการแอตทริบิวต์ของมันอาจช่วยคุณได้ในรายละเอียดปลีกย่อย พวกมันไม่สามารถแลกเปลี่ยนกันได้

จาก W3:

เมื่อมีการตั้งค่าแอตทริบิวต์ href ขององค์ประกอบ A องค์ประกอบจะกำหนดจุดยึดแหล่งข้อมูลไว้สำหรับลิงก์ที่ผู้ใช้อาจเปิดใช้งานเพื่อดึงทรัพยากรเว็บ ตัวยึดแหล่งที่มาคือตำแหน่งที่ตั้งของอินสแตนซ์ A และตัวยึดปลายทางคือทรัพยากรของเว็บ

ที่มา: http://www.w3.org/TR/html401/struct/links.html

คุณลักษณะนี้ระบุตำแหน่งของทรัพยากรรูปภาพ ตัวอย่างรูปแบบภาพที่เป็นที่รู้จัก ได้แก่ GIF, JPEG และ PNG

ที่มา: http://www.w3.org/TR/REC-html40/struct/objects.html

ความหมายง่ายๆ

• SRC: หากสามารถวางทรัพยากรภายในแท็ก body (สำหรับรูปภาพ, สคริปต์, iframe, frame)
• HREF: หากไม่สามารถวางทรัพยากรในแท็ก body และสามารถเชื่อมโยงได้เท่านั้น (สำหรับ html, css)

คุณควรจะจำได้ว่าเมื่อใช้ทุกคนและนั่นคือมันhrefถูกนำมาใช้กับการเชื่อมโยง

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

srcถูกนำมาใช้กับสคริปต์และภาพ

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

URLโดยทั่วไปจะใช้ใน CSS ที่จะรวมถึงบางสิ่งบางอย่างกันตัวอย่างเพื่อเพิ่มภาพพื้นหลัง

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

หลังจากผ่านการทำเอกสาร HTML 5.1 (1 พฤศจิกายน 2559):

ส่วนที่ 4 (องค์ประกอบของ HTML)

บทที่ 2 (ข้อมูลเมตาของเอกสาร)

ส่วนที่ 4 (องค์ประกอบลิงก์) ระบุว่า:

ปลายทางของลิงก์ถูกกำหนดโดยแอhrefททริบิวต์ซึ่งจะต้องมีอยู่และต้องมี URL ที่ไม่ว่างเปล่าซึ่งอาจถูกล้อมรอบด้วยช่องว่าง หากhrefแอตทริบิวต์นั้นขาดองค์ประกอบจะไม่กำหนดลิงก์

ไม่มีsrcแอตทริบิวต์ ...

แม่มดเป็นเหตุผลเพราะมันเป็นลิงค์

บทที่ 12 (การเขียนสคริปต์)

ส่วนที่ 1 (องค์ประกอบสคริปต์) ระบุว่า:

สคริปต์คลาสสิกอาจฝังอยู่ในบรรทัดหรืออาจนำเข้าจากไฟล์ภายนอกโดยใช้srcแอตทริบิวต์ซึ่งหากระบุจะให้ URL ของทรัพยากรสคริปต์ภายนอกเพื่อใช้ หากsrcระบุไว้ต้องเป็น URL ที่ไม่ว่างเปล่าซึ่งอาจมีช่องว่างล้อมรอบ เนื้อหาขององค์ประกอบสคริปต์แบบอินไลน์หรือทรัพยากรสคริปต์ภายนอกจะต้องสอดคล้องกับข้อกำหนดของการผลิตสคริปต์ของข้อกำหนด JavaScript สำหรับสคริปต์คลาสสิก

มันไม่ได้พูดถึงhrefคุณลักษณะ ...

สิ่งนี้บ่งชี้ว่าในขณะที่ใช้แท็กสคริปต์จะใช้srcแอตทริบิวต์ !!!

บทที่ 7 (เนื้อหาที่ฝัง)

ส่วนที่ 5 (องค์ประกอบ img)

อิมเมจที่กำหนดโดยsrcและsrcsetแอ็ตทริบิวต์และแอ็ตทริบิวต์ขององค์ประกอบซอร์สก่อนหน้าใด ๆsrcsetหากพาเรนpictureต์เป็นองค์ประกอบคือเนื้อหาที่ฝังอยู่

ยังไม่พูดถึงhrefคุณลักษณะ ...

สิ่งนี้บ่งชี้ว่าเมื่อใช้imgแท็กsrcแอ็ตทริบิวต์ควรใช้เช่นกัน ...

ลิงก์อ้างอิงไปยังคำแนะนำของ W3C

พวกเขาจะไม่สามารถเปลี่ยนแปลงได้ - แต่ละคนจะถูกกำหนดไว้ในองค์ประกอบที่แตกต่างกันสามารถมองเห็นได้ที่นี่

พวกเขามีความหมายคล้ายกันดังนั้นนี่คือความไม่ลงรอยกัน ฉันจะถือว่าส่วนใหญ่เนื่องจากแท็กที่แตกต่างกันถูกนำมาใช้โดยผู้ขายที่แตกต่างกันเพื่อเริ่มต้นจากนั้น subsumed ลงในสเป็คที่จะหลีกเลี่ยงความเข้ากันได้ย้อนหลัง

พวกเขาไม่มีความหมายคล้ายกัน 'src' หมายถึงทรัพยากรที่เบราว์เซอร์ควรดึงข้อมูลเป็นส่วนหนึ่งของหน้าปัจจุบัน HREF บ่งบอกถึงทรัพยากรที่จะดึงถ้าผู้ใช้ร้องขอ

ฉันเห็นด้วยกับสิ่งที่ apnerve พูดเกี่ยวกับความแตกต่าง แต่ในกรณีของ css มันดูแปลก ๆ ในฐานะที่เป็น CSS ได้รับการดาวน์โหลดให้กับลูกค้าโดยเบราว์เซอร์ มันไม่เหมือนสมอแท็กที่ชี้ไปยังทรัพยากรเฉพาะใด ๆ ดังนั้นการใช้ href ดูเหมือนจะแปลกสำหรับฉัน แม้ว่ามันจะไม่ได้โหลดหน้าเว็บที่ยังไม่มีหน้านั้นก็ไม่สามารถดูได้อย่างสมบูรณ์ดังนั้นมันจึงไม่ใช่แค่ความสัมพันธ์ แต่ต้องการทรัพยากรซึ่งในทางกลับกันหมายถึงทรัพยากรอื่น ๆ เช่นรูปภาพ

src จะใช้เพื่อเพิ่มทรัพยากรนั้นไปยังหน้าในขณะที่ href จะใช้ในการเชื่อมโยงไปยังทรัพยากรเฉพาะจากหน้านั้น

เมื่อคุณใช้ในหน้าเว็บของคุณเบราว์เซอร์จะเห็นว่าสไตล์ชีทนั้นมีอยู่จึงมีการแสดงผลหน้าต่อไปเนื่องจากมีการดาวน์โหลดสไตล์ชีทในพาร์เทล

เมื่อคุณใช้ในหน้าเว็บของคุณมันจะบอกเบราว์เซอร์ให้แทรกทรัพยากรที่ตำแหน่งนั้น ดังนั้นตอนนี้เบราว์เซอร์จะต้องดึงไฟล์ js แล้วโหลด จนกว่าเบราว์เซอร์จะเสร็จสิ้นกระบวนการโหลดกระบวนการแสดงผลหน้าเว็บจะหยุด นั่นคือเหตุผลที่ YUI แนะนำให้โหลดไฟล์ JS ของคุณที่ด้านล่างสุดของหน้าเว็บของคุณ