Różnica między SRC i HREF

SRCI HREFatrybuty są wykorzystywane w celu włączenia niektórych podmiotów zewnętrznych, takich jak obraz, plik CSS, plik HTML, każda inna strona internetowa lub plik JavaScript.

Czy istnieje wyraźne rozróżnienie między SRCi HREF? Gdzie i kiedy używać SRClub HREF? Myślę, że nie można ich używać zamiennie.

Poniżej podajemy kilka przykładów użycia tych atrybutów:

• Aby odnieść się do pliku CSS: href="cssfile.css"wewnątrz tagu linku.
• Aby odnieść się do pliku JS: src="myscript.js"wewnątrz tagu script.
• Aby odnieść się do pliku obrazu: src="mypic.jpg"wewnątrz tagu obrazu.
• Aby odesłać do innej strony internetowej: href="http://www.webpage.com"wewnątrz tagu kotwicy.

UWAGA: @ Johna-yin za odpowiedź jest bardziej odpowiednie biorąc pod uwagę zmiany w specyfikacji.

Tak. Istnieje różnica między src i href i nie można ich używać zamiennie. Używamy src do zastępowanych elementów, a href do ustanawiania relacji między dokumentem odniesienia a zasobem zewnętrznym.

Atrybut href (odniesienie hipertekstowe) określa lokalizację zasobu internetowego, definiując w ten sposób łącze lub relację między bieżącym elementem (w przypadku kotwicy a) lub bieżącym dokumentem (w przypadku link) a docelową kotwicą lub zasobem zdefiniowanym przez ten atrybut. Kiedy piszemy:

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

Przeglądarka rozumie, że ten zasób to arkusz stylów, a plik przetwarzanieanalizowanie strony nie jest wstrzymane (renderowanie może zostać wstrzymane, ponieważ przeglądarka potrzebuje reguł stylu do malowania i renderowania strony). Nie jest to podobne do zrzucania zawartości pliku css wewnątrz styletagu. (Dlatego zaleca się używanie linkzamiast @importdołączania arkuszy stylów do dokumentu HTML).

src (Source) po prostu osadza zasób w bieżącym dokumencie w miejscu definicji elementu. Np. Gdy przeglądarka znajdzie

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

Ładowanie i przetwarzanie strony zostaje wstrzymane do czasu, gdy przeglądarka pobierze, skompiluje i uruchomi plik. Jest to podobne do zrzucania zawartości pliku js wewnątrz scripttagu. Podobnie jest z imgtagiem. Jest to pusty tag, a treść, która ma się w nim znaleźć, jest definiowana przez srcatrybut. Przeglądarka wstrzymuje ładowanie do czasu pobrania i załadowania obrazu. [tak jest w przypadku iframe]

To jest powód, dla którego wskazane jest ładowanie wszystkich plików JavaScript na dole (przed </body>tagiem)

aktualizacja : zapoznaj się z odpowiedzią @ John-Yin, aby uzyskać więcej informacji na temat sposobu implementacji zgodnie ze specyfikacjami HTML 5.

Odpowiedź apnerve była poprawna przed pojawieniem się HTML 5, teraz jest trochę bardziej skomplikowana.

Na przykład scriptelement, zgodnie ze specyfikacją HTML 5 , ma dwa globalne atrybuty, które zmieniają sposób działania srcatrybutu: asynci defer. Zmieniają one sposób wykonywania skryptu (osadzonego w tekście lub importowanego z pliku zewnętrznego).

Oznacza to, że istnieją trzy możliwe tryby, które można wybrać za pomocą tych atrybutów:

1. Gdy asyncatrybut jest obecny, skrypt zostanie wykonany asynchronicznie, gdy tylko będzie dostępny.
2. Gdy asyncatrybut nie istnieje, ale deferatrybut jest obecny, skrypt jest wykonywany po zakończeniu analizowania strony.
3. Jeśli żaden atrybut nie jest obecny, skrypt jest pobierany i wykonywany natychmiast, zanim agent użytkownika będzie kontynuował analizowanie strony.

Aby uzyskać szczegółowe informacje, zapoznaj się z zaleceniem HTML 5

Chciałem tylko zaktualizować nową odpowiedź dla każdego, kto od czasu do czasu odwiedza ten temat. Niektóre odpowiedzi powinny zostać sprawdzone i zarchiwizowane przez stackoverflow i każdego z nas.

Myślę, że <src>dodaje trochę zasobów do strony i <href>służy tylko do podania linku do zasobu (bez dodawania samego zasobu do strony).

Prosta definicja

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) - Chcę załadować ten zasób dla siebie.

Na przykład:

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 ) - Chcę odnieść się do tego zasobu dla kogoś innego.

Na przykład:

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

Kurtuazja

H REF : Czy REF różnicą do informacji dla bieżącej strony czyli o css dla stylu strony lub link do innej strony. Analiza strony nie została zatrzymana.

SRC : to ponowne ŹRÓDŁO do dodania / załadowania do strony, jak w obrazach lub javascript. Analiza strony może się zatrzymać w zależności od zakodowanego atrybutu. Dlatego lepiej jest dodać skrypt tuż przed końcowym tagiem body, aby renderowanie strony nie zostało wstrzymane.

Jeśli mówisz o HTML4, jego lista atrybutów może pomóc ci w subtelnościach. Nie są wymienne.

Od W3:

Gdy atrybut href elementu A jest ustawiony, element definiuje kotwicę źródłową dla łącza, które może być aktywowane przez użytkownika w celu pobrania zasobu sieci Web. Kotwica źródłowa to lokalizacja wystąpienia A, a kotwica docelowa to zasób sieci Web.

Źródło: http://www.w3.org/TR/html401/struct/links.html

Ten atrybut określa lokalizację zasobu obrazu. Przykłady szeroko rozpoznawalnych formatów obrazów to GIF, JPEG i PNG.

Źródło: http://www.w3.org/TR/REC-html40/struct/objects.html

Prosta definicja

• SRC: Jeśli zasób można umieścić wewnątrz tagu body (dla obrazu, skryptu, elementu iframe, ramki)
• HREF: Jeśli zasobu nie można umieścić w tagu body i można go tylko połączyć (dla html, css)

Należy pamiętać, kiedy użyć wszystkich i że jest to href jest używany wraz z linkami

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

src służy pomocą skryptów i obrazów

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

url jest stosowany powszechnie w CSS zawierać coś dla exemple dodać obraz tła

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

po przejrzeniu dokumentacji HTML 5.1 (1 listopada 2016):

część 4 (Elementy HTML)

Rozdział 2 (Metadane dokumentu)

sekcja 4 (element link) stwierdza, że:

Miejsce docelowe linków jest określone przez hrefatrybut, który musi być obecny i musi zawierać prawidłowy, niepusty adres URL, potencjalnie otoczony spacjami. Brak hrefatrybutu oznacza, że ​​element nie definiuje łącza.

nie zawiera srcatrybutu ...

wiedźma jest logiczna, ponieważ jest łączem.

Rozdział 12 (Skrypty)

sekcja 1 (element skryptu) stwierdza, że:

Klasyczne skrypty mogą być osadzane w tekście lub importowane z zewnętrznego pliku przy użyciu srcatrybutu, który, jeśli jest określony, podaje adres URL zewnętrznego zasobu skryptu do użycia. Jeśli srczostanie określony, musi to być prawidłowy niepusty adres URL, potencjalnie otoczony spacjami. Zawartość wbudowanych elementów skryptu lub zewnętrznego zasobu skryptu musi być zgodna z wymaganiami specyfikacji JavaScript dotyczącej tworzenia skryptów dla klasycznych skryptów.

nie wspomina nawet o hrefatrybucie ...

oznacza to, że podczas używania tagów skryptu zawsze używaj srcatrybutu !!!

Rozdział 7 (Treść osadzona)

sekcja 5 (element img)

Obraz podane przez srci srcsetatrybutów, i ewentualne poprzednie rodzeństwo źródłowego elementu srcsetatrybuty jeśli rodzic jest pictureelementem, jest osadzony treści.

również nie wspomina o hrefatrybucie ...

oznacza to, że podczas używania imgtagów srcatrybut powinien być również używany ...

Odnośnik do rekomendacji W3C

Nie są wymienne - każdy jest zdefiniowany na innym elemencie, jak widać tutaj .

Rzeczywiście mają podobne znaczenie, więc jest to niespójność. Zakładałbym głównie ze względu na różne tagi wdrażane przez różnych dostawców na początku, a następnie uwzględnione w specyfikacji, aby uniknąć zerwania wstecznej kompatybilności.

Nie mają podobnego znaczenia. „src” wskazuje zasób, który przeglądarka powinna pobrać jako część bieżącej strony. HREF wskazuje zasób do pobrania, jeśli użytkownik tego zażąda.

Zgadzam się z tym, co apnerve mówi o tym rozróżnieniu. Ale w przypadku css wygląda to dziwnie. Ponieważ css jest również pobierany do klienta przez przeglądarkę. To nie jest jak tag kotwicy, który wskazuje na konkretny zasób. Dlatego użycie href wydaje mi się dziwne. Nawet jeśli nie jest załadowana stroną, nadal bez tej strony nie może wyglądać na kompletną, a więc nie jest to tylko relacja, ale jak zasób, który z kolei odnosi się do wielu innych zasobów, takich jak obrazy.

src służy do dodawania tego zasobu do strony, podczas gdy href służy do łączenia z określonym zasobem z tej strony.

Kiedy używasz na swojej stronie internetowej, przeglądarka widzi, że jest to arkusz stylów i dlatego kontynuuje renderowanie strony, gdy arkusz stylów jest pobierany w parellel.

Kiedy używasz na swojej stronie internetowej, mówi przeglądarce, aby wstawiła zasób w tej lokalizacji. Teraz przeglądarka musi pobrać plik js, a następnie go załadować. Dopóki przeglądarka nie zakończy procesu ładowania, proces renderowania strony jest wstrzymany. To jest powód, dla którego YUI zaleca ładowanie plików JS na samym dole strony internetowej.