Sự khác biệt giữa SRC và HREF

Các thuộc tính SRCvà HREFđược sử dụng để bao gồm một số thực thể bên ngoài như hình ảnh, tệp CSS, tệp HTML, bất kỳ trang web nào khác hoặc tệp JavaScript.

Có sự khác biệt rõ ràng giữa SRCvà HREF? Ở đâu hoặc khi nào sử dụng SRChay HREF? Tôi nghĩ rằng chúng không thể được sử dụng thay thế cho nhau.

Tôi sẽ đưa ra một vài ví dụ dưới đây khi các thuộc tính này được sử dụng:

• Để tham khảo tệp CSS: href="cssfile.css"bên trong thẻ liên kết.
• Để tham khảo tệp JS: src="myscript.js"bên trong thẻ script.
• Để tham khảo một tệp hình ảnh: src="mypic.jpg"bên trong một thẻ hình ảnh.
• Để giới thiệu một trang web khác: href="http://www.webpage.com"bên trong một thẻ neo.

LƯU Ý: Câu trả lời của @ John-Yin thích hợp hơn khi xem xét các thay đổi trong thông số kỹ thuật.

Đúng. Có một sự khác biệt giữa src và href và chúng không thể được sử dụng thay thế cho nhau. Chúng tôi sử dụng src cho các phần tử thay thế trong khi href để thiết lập mối quan hệ giữa tài liệu tham chiếu và tài nguyên bên ngoài.

Thuộc tính href (Tham chiếu siêu văn bản) chỉ định vị trí của tài nguyên Web do đó xác định liên kết hoặc mối quan hệ giữa phần tử hiện tại (trong trường hợp neo a) hoặc tài liệu hiện tại (trong trường hợp link) và neo đích hoặc tài nguyên được xác định bởi thuộc tính này. Khi chúng tôi viết:

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

Trình duyệt hiểu rằng tài nguyên này là biểu định kiểu và Chế biếnphân tích trang không bị tạm dừng (kết xuất có thể bị tạm dừng do trình duyệt cần các quy tắc kiểu để vẽ và hiển thị trang). Nó không giống với việc bỏ nội dung của tệp css bên trong stylethẻ. (Do đó, nên sử dụng linkthay @importvì gắn biểu định kiểu vào tài liệu html của bạn.)

Thuộc tính src (Nguồn) chỉ nhúng tài nguyên trong tài liệu hiện tại vào vị trí định nghĩa của phần tử. Ví dụ. Khi trình duyệt tìm thấy

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

Quá trình tải và xử lý trang bị tạm dừng cho đến khi trình duyệt này tìm nạp, biên dịch và thực thi tệp. Nó tương tự như việc bỏ nội dung của tệp js bên trong scriptthẻ. Tương tự là trường hợp với imgthẻ. Đó là một thẻ trống và nội dung, sẽ xuất hiện bên trong nó, được xác định bởi srcthuộc tính. Trình duyệt tạm dừng tải cho đến khi nó tải và tải hình ảnh. [trường hợp như vậy với iframe]

Đây là lý do tại sao nên tải tất cả các tệp JavaScript ở dưới cùng (trước </body>thẻ)

cập nhật : Tham khảo câu trả lời của @ John-Yin để biết thêm thông tin về cách triển khai theo thông số kỹ thuật HTML 5.

Câu trả lời của apnerve là chính xác trước khi HTML 5 xuất hiện, bây giờ nó phức tạp hơn một chút.

Ví dụ, scriptphần tử, theo đặc tả HTML 5 , có hai thuộc tính toàn cục thay đổi cách thức srchoạt động của thuộc tính: asyncvà defer. Chúng thay đổi cách tập lệnh (nhúng nội tuyến hoặc nhập từ tệp bên ngoài) nên được thực thi.

Điều này có nghĩa là có ba chế độ có thể được chọn bằng các thuộc tính sau:

1. Khi asyncthuộc tính có mặt, thì tập lệnh sẽ được thực thi không đồng bộ, ngay khi có sẵn.
2. Khi asyncthuộc tính không có nhưng deferthuộc tính có mặt, thì tập lệnh được thực thi khi trang đã phân tích xong.
3. Khi không có thuộc tính nào, thì tập lệnh được tìm nạp và thực thi ngay lập tức, trước khi tác nhân người dùng tiếp tục phân tích trang.

Để biết chi tiết, vui lòng xem đề xuất HTML 5

Tôi chỉ muốn cập nhật với một câu trả lời mới cho bất cứ ai thỉnh thoảng ghé thăm chủ đề này. Một số câu trả lời nên được kiểm tra và lưu trữ bằng stackoverflow và mỗi người trong chúng ta.

Tôi nghĩ rằng <src>thêm một số tài nguyên vào trang và <href>chỉ để cung cấp một liên kết đến một tài nguyên (mà không cần thêm tài nguyên vào trang).

Định nghĩa đơn giản

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) - Tôi muốn tự mình tải tài nguyên này.

Ví dụ:

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 erence) - Tôi muốn tham khảo tài nguyên này cho người khác.

Ví dụ:

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

Phép lịch sự

H REF : Là một thông tin REF cho thông tin cho trang hiện tại, tức là thông tin css cho kiểu trang hoặc liên kết đến trang khác. Phân tích trang không dừng lại.

SRC : Là một NGUỒN lại được thêm / tải vào trang như trong hình ảnh hoặc javascript. Phân tích trang có thể dừng tùy thuộc vào thuộc tính được mã hóa. Đó là lý do tại sao tốt hơn là thêm tập lệnh ngay trước thẻ body kết thúc để kết xuất trang không được giữ.

Nếu bạn đang nói HTML4, danh sách các thuộc tính của nó có thể giúp bạn với sự tinh tế. Chúng không thể thay thế cho nhau.

Từ W3:

Khi thuộc tính href của phần tử A được đặt, phần tử xác định neo nguồn cho liên kết có thể được người dùng kích hoạt để truy xuất tài nguyên Web. Neo nguồn là vị trí của cá thể A và neo đích là tài nguyên Web.

Nguồn: http://www.w3.org/TR/html401/struct/links.html

Thuộc tính này chỉ định vị trí của tài nguyên hình ảnh. Ví dụ về các định dạng hình ảnh được công nhận rộng rãi bao gồm GIF, JPEG và PNG.

Nguồn: http://www.w3.org/TR/REC-html40/struct/objects.html

Một định nghĩa đơn giản

• SRC: Nếu tài nguyên có thể được đặt bên trong thẻ body (đối với hình ảnh, tập lệnh, iframe, khung)
• HREF: Nếu tài nguyên không thể được đặt bên trong thẻ body và chỉ có thể được liên kết (đối với html, css)

Bạn nên nhớ khi sử dụng tất cả mọi người và đó là nó
các href được sử dụng với các liên kết

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

các src được sử dụng với các kịch bản và hình ảnh

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

các url được sử dụng chung trong CSS để bao gồm một cái gì đó, cho dụ để thêm một hình nền

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

sau khi trải qua bản trích dẫn HTML 5.1 (ngày 1 tháng 11 năm 2016):

phần 4 (Các yếu tố của HTML)

chương 2 (Siêu dữ liệu tài liệu)

phần 4 (Phần tử liên kết) nói rằng:

Đích của (các) liên kết được cung cấp bởi hrefthuộc tính, phải có mặt và phải chứa một URL không trống hợp lệ có khả năng được bao quanh bởi các khoảng trắng. Nếu hrefthuộc tính vắng mặt, thì phần tử không xác định một liên kết.

không chứa srcthuộc tính ...

phù thủy là hợp lý bởi vì nó là một liên kết.

chương 12 (viết kịch bản)

phần 1 (Phần tử script) nói rằng:

Các tập lệnh cổ điển có thể được nhúng nội tuyến hoặc có thể được nhập từ một tệp bên ngoài bằng srcthuộc tính, nếu được chỉ định sẽ cung cấp URL của tài nguyên tập lệnh bên ngoài để sử dụng. Nếu srcđược chỉ định, nó phải là một URL không trống hợp lệ có khả năng được bao quanh bởi các khoảng trắng. Nội dung của các thành phần tập lệnh nội tuyến hoặc tài nguyên tập lệnh bên ngoài phải tuân theo các yêu cầu sản xuất Tập lệnh của đặc tả JavaScript cho các tập lệnh cổ điển.

nó thậm chí không đề cập đến hrefthuộc tính ...

điều này chỉ ra rằng trong khi sử dụng thẻ script luôn sử dụng srcthuộc tính !!!

chương 7 (Nội dung nhúng)

phần 5 (Phần tử img)

Hình ảnh được cung cấp bởi các thuộc tính srcvà srcsetcác thuộc tính của phần tử nguồn anh chị em trước đó srcsetnếu cha mẹ là một picturephần tử, là nội dung được nhúng.

cũng không đề cập đến hrefthuộc tính ...

điều này chỉ ra rằng khi sử dụng imgthẻ, srcthuộc tính nên được sử dụng ...

Liên kết tham chiếu đến Khuyến nghị của W3C

Chúng không thể thay thế cho nhau - mỗi cái được định nghĩa trên các yếu tố khác nhau, như có thể thấy ở đây .

Chúng thực sự có ý nghĩa tương tự, vì vậy đây là một sự không nhất quán. Tôi sẽ giả định chủ yếu là do các thẻ khác nhau được triển khai bởi các nhà cung cấp khác nhau để bắt đầu, sau đó được đưa vào thông số kỹ thuật để tránh phá vỡ tính tương thích ngược.

Chúng không có ý nghĩa tương tự. 'src' chỉ ra tài nguyên mà trình duyệt sẽ tìm nạp như một phần của trang hiện tại. HREF chỉ ra một tài nguyên sẽ được tìm nạp nếu người dùng yêu cầu nó.

Tôi đồng ý những gì apnerve nói về sự khác biệt. Nhưng trong trường hợp của css thì có vẻ kỳ quặc. Vì css cũng được tải xuống máy khách bằng trình duyệt. Nó không giống như thẻ neo trỏ đến bất kỳ tài nguyên cụ thể nào. Vì vậy, sử dụng href có vẻ kỳ lạ với tôi. Ngay cả khi nó không được tải với trang mà vẫn không có trang đó có thể trông hoàn chỉnh và do đó, nó không chỉ là mối quan hệ mà còn giống như tài nguyên mà lần lượt đề cập đến nhiều tài nguyên khác như hình ảnh.

src được sử dụng để thêm tài nguyên đó vào trang, trong khi href được sử dụng để liên kết đến một tài nguyên cụ thể từ trang đó.

Khi bạn sử dụng trong trang web của mình, trình duyệt sẽ thấy rằng đó là biểu định kiểu và do đó tiếp tục với kết xuất trang khi biểu định kiểu được tải xuống dưới dạng parellel.

Khi bạn sử dụng trong trang web của mình, nó sẽ cho trình duyệt chèn tài nguyên vào vị trí. Vì vậy, bây giờ trình duyệt phải tìm nạp tệp js và sau đó tải nó. Cho đến khi trình duyệt kết thúc quá trình tải, quá trình kết xuất trang bị dừng lại. Đó là lý do tại sao YUI khuyên bạn nên tải các tệp JS của bạn ở cuối trang web của bạn.