SRC ve HREF arasındaki fark

SRCVe HREFnitelikleri görseli gibi bazı dış varlıkları, bir CSS dosyası, bir HTML dosyası, başka bir web sayfasını veya bir JavaScript dosyası eklemek için kullanılan vardır.

SRCVe arasında açık bir ayrım var mı HREF? Nerede veya ne zaman kullanılır SRCveya HREF? Bence birbirlerinin yerine kullanılamazlar.

Aşağıda bu niteliklerin kullanıldığı birkaç örnek vermekteyim:

• Bir CSS dosyasına başvurmak için: href="cssfile.css"bağlantı etiketinin içinde.
• Bir JS dosyasına başvurmak için: src="myscript.js"komut dosyası etiketinin içinde.
• Bir resim dosyasına başvurmak için: src="mypic.jpg"resim etiketinin içinde.
• Başka bir web sayfasına başvurmak için: href="http://www.webpage.com"bağlantı etiketinin içinde.

NOT: @ John-Yin cevabı teknik özelliklerde yapılan değişiklikler dikkate alındığında daha uygundur.

Evet. Src ve href arasında bir ayrım vardır ve bunlar birbirinin yerine kullanılamaz. Değiştirilen öğeler için src kullanırken , başvuru belgesi ile bir dış kaynak arasında ilişki kurmak için href kullanılır.

href (Köprü Metni Başvurusu) özelliği, bir Web kaynağının konumunu belirtir, böylece geçerli öğe (bağlantı durumunda a) veya geçerli belge (durumunda link) ve bu özellik tarafından tanımlanan hedef bağlantı noktası veya kaynak arasında bir bağlantı veya ilişki tanımlar . Yazdığımızda:

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

Tarayıcı, bu kaynağın bir stil sayfası olduğunu ve işlemesayfanın ayrıştırma değil durdurulmuş (render tarayıcı boya ve sayfayı oluşturmak için stil kuralları ihtiyacı beri durdurulmuş olabilir). Css dosyasının içeriğini etiketin içine atmakla aynı şey değildirstyle . (Bu nedenle, stil sayfalarını html belgenize iliştirmek linkyerine kullanmanız önerilir @import.)

src (Source) özniteliği, kaynağı geçerli belgeye öğenin tanımının bulunduğu yere gömer. Örneğin. Tarayıcı bulduğunda

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

Sayfanın yüklenmesi ve işlenmesi, tarayıcı dosyayı getirene, derleyene ve yürütene kadar duraklatılır. Js dosyasının içeriğini scriptetiketin içine atmaya benzer . imgEtiketi ile de benzer . Boş bir etikettir ve içine girmesi gereken içerik, srcözellik tarafından tanımlanır . Tarayıcı, görüntüyü alıp yükleyene kadar yüklemeyi duraklatır. [böyledir iframe]

Tüm JavaScript dosyalarının altına ( </body>etiketten önce ) yüklenmesinin önerilmesinin nedeni budur

güncelleme : HTML 5 spesifikasyonlarına göre nasıl uygulandığı hakkında daha fazla bilgi için @ John-Yin'in cevabına bakın .

apnerve'nin cevabı HTML 5 çıkmadan önce doğruydu, şimdi biraz daha karmaşık.

Örneğin script, HTML 5 belirtimine göre öğenin, srcözelliğin işlevini değiştiren iki genel özelliği vardır : asyncve defer. Bunlar betiğin (yerleşik satır içi veya harici dosyadan içe aktarılan) nasıl yürütüleceğini değiştirir.

Bu, bu özellikler kullanılarak seçilebilecek üç olası mod olduğu anlamına gelir:

1. Ne zaman asyncbir özelliğin mevcut olup, daha sonra komut kısa sürede sunulur sunulmaz, uyumsuz çalıştırılacaktır.
2. Ne zaman asyncnitelik bulunmadığı, ama defernitelik mevcut sayfa bitmiş ayrıştırma sahip olduğunda, o zaman komut dosyası çalıştırılır.
3. Her iki özellik de mevcut değilse, kullanıcı aracısı sayfayı ayrıştırmaya devam etmeden önce komut dosyası hemen alınır ve yürütülür.

Ayrıntılar için lütfen HTML 5 önerisine bakın

Bu konuyu zaman zaman ziyaret eden herkes için yeni bir yanıtla güncellemek istedim. Cevapların bazıları stackoverflow ve hepimiz tarafından kontrol edilmeli ve arşivlenmelidir.

Ben <src>sayfaya bazı kaynaklar ekler ve <href>sadece bir kaynağa bir bağlantı sağlamak için olduğunu düşünüyorum (sayfaya kendisi kaynak eklemeden).

Basit Tanım

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) - Bu kaynağı kendim yüklemek istiyorum.

Örneğin:

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) - Bu kaynağa başkası için başvurmak istiyorum.

Örneğin:

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

Nezaket

H REF : Geçerli sayfanın bilgisine bir REF dir , yani sayfa stili veya başka bir sayfaya bağlantı için css bilgisi. Sayfa Ayrıştırma durdurulmaz.

SRC : Görüntülerde veya javascript'te olduğu gibi sayfaya eklenecek / yüklenecek bir KAYNAK . Sayfa Ayrıştırma, kodlanmış özniteliğe bağlı olarak durabilir. Bu nedenle, sayfa oluşturma işleminin kaldırılmaması için bitiş gövde etiketinden hemen önce komut dosyası eklemek daha iyidir.

HTML4 konuşuyorsanız, özellikler listesi inceliklerde size yardımcı olabilir. Değiştirilemezler.

W3'ten:

A öğesinin href özniteliği ayarlandığında, öğe, kullanıcı tarafından bir Web kaynağı almak üzere etkinleştirilebilen bir bağlantı için bir kaynak bağlantısı tanımlar. Kaynak bağlantı noktası A örneğinin konumudur ve hedef bağlantı noktası Web kaynağıdır.

Kaynak: http://www.w3.org/TR/html401/struct/links.html

Bu öznitelik, görüntü kaynağının konumunu belirtir. Yaygın olarak tanınan görüntü biçimlerine örnek olarak GIF, JPEG ve PNG verilebilir.

Kaynak: http://www.w3.org/TR/REC-html40/struct/objects.html

Basit bir tanım

• SRC: Bir kaynak gövde etiketinin içine yerleştirilebiliyorsa (resim, komut dosyası, iframe, çerçeve için)
• HREF: Bir kaynak gövde etiketinin içine yerleştirilemez ve yalnızca bağlanabilirse (html, css için)

Herkesi kullanmayı hatırlıyor olmalı ve o kadar href bağlantıları ile kullanılır

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

src komut ve görüntülerle kullanılır

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

URL bir arka plan görüntüsü eklemek için Exemple için, bir şeyler eklemek CSS genellikle kullanılan

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

HTML 5.1 dağıtımından geçtikten sonra (1 Kasım 2016):

bölüm 4 (HTML unsurları)

bölüm 2 (Belge meta verileri)

bölüm 4 (bağlantı elemanı) şunları belirtir:

Bağlantının / bağlantıların hedefi, hrefmevcut olması ve potansiyel olarak boşluklarla çevrelenmiş geçerli, boş olmayan bir URL içermesi gereken özellik tarafından verilir . Eğer hrefnitelik yoktur, o zaman eleman bir bağlantı tanımlamıyor.

srcözelliği içermiyor ...

cadı mantıklıdır çünkü bir bağlantıdır.

bölüm 12 (Komut Dosyası)

bölüm 1 (kod öğesi) şunu belirtir:

Klasik komut dosyaları satır içine katıştırılabilir veya srcbelirtilirse kullanılacak dış komut dosyası kaynağının URL'sini veren öznitelik kullanılarak harici bir dosyadan içe aktarılabilir . Eğer srcbelirtilirse, potansiyel boşluklarla çevrili geçerli bir boş olmayan bir URL olmalıdır. Satır içi komut dosyası öğelerinin veya harici komut dosyası kaynağının içeriği, JavaScript belirtiminin klasik komut dosyaları için Komut Dosyası üretimi gereksinimlerine uygun olmalıdır.

bu hrefözellikten bile bahsetmiyor ...

Bu, komut dosyası etiketlerini kullanırken her zaman srcözelliği kullandığını gösterir !!!

bölüm 7 (Katıştırılmış içerik)

bölüm 5 (img öğesi)

srcVe srcsetöznitelikleri tarafından verilen görüntü srcsetve üst pictureöğe bir öğe ise önceki kardeş kaynak öğenin öznitelikleri katıştırılmış içeriktir.

ayrıca bu hrefözellikten bahsetmez ...

Bu, imgetiketleri kullanırken srcözelliğin de kullanılması gerektiğini gösterir ...

W3C Tavsiyesine referans bağlantısı

Değiştirilemezler - her biri burada görülebileceği gibi farklı unsurlarda tanımlanır .

Gerçekten de benzer anlamları var, bu yüzden bu bir tutarsızlık. Ben çoğunlukla farklı satıcılar tarafından başlamak için uygulanan farklı etiketleri nedeniyle, daha sonra geriye dönük uyumluluk kırmak için olduğu gibi spec içine toplanan nedeniyle kabul ediyorum.

Benzer anlamları yok. 'src', tarayıcının geçerli sayfanın bir parçası olarak getirmesi gereken bir kaynağı belirtir. HREF, kullanıcı isterse getirilecek bir kaynağı gösterir.

Apnerve'nin bu ayrım hakkında söylediklerine katılıyorum. Ama css durumunda tuhaf görünüyor. Css ayrıca tarayıcı tarafından istemciye indirilir gibi. Belirli bir kaynağa işaret eden bağlantı etiketi gibi değildir. Yani href kullanmak bana tuhaf geliyor. Bu sayfa olmadan hala sayfa ile yüklü olmasa bile tam görünemez ve bu yüzden sadece ilişki değil, aynı zamanda kaynak gibi görüntüler gibi diğer birçok kaynağı ifade eder.

src, bu kaynağı sayfaya eklemek için kullanılırken href, o sayfadan belirli bir kaynağa bağlanmak için kullanılır.

Web sayfanızda kullandığınızda, tarayıcı bir stil sayfası olduğunu görür ve stil sayfası parellel'e indirilirken sayfa oluşturma ile devam eder.

Web sayfanızda kullandığınızda, tarayıcıya kaynağı konuma eklemesini söyler. Şimdi tarayıcı js dosyasını getirmeli ve sonra yüklemelidir. Tarayıcı yükleme işlemini tamamlayana kadar sayfa oluşturma işlemi durdurulur. Bu nedenle YUI, JS dosyalarınızı web sayfanızın en altına yüklemenizi önerir.