SRC와 HREF의 차이점

SRC및 HREF속성은 이미지와 같은 일부 외부 개체, CSS 파일, HTML 파일, 다른 웹 페이지 나 자바 스크립트 파일을 포함하는 데 사용됩니다.

SRC와 사이에 명확한 차이점이 HREF있습니까? 어디하거나 사용 SRC또는 HREF? 나는 그것들을 상호 교환하여 사용할 수 없다고 생각합니다.

아래에 이러한 속성이 사용되는 몇 가지 예가 나와 있습니다.

• CSS 파일을 참조하려면 : href="cssfile.css"링크 태그 내부.
• JS 파일을 참조하려면 : src="myscript.js"스크립트 태그 내부.
• 이미지 파일을 참조하려면 : src="mypic.jpg"이미지 태그 내부.
• 다른 웹 페이지를 참조하려면 href="http://www.webpage.com"앵커 태그 내부

참고 : 사양의 변화를 고려하면 @ John-Yin의 대답 이 더 적절합니다.

예. src 와 href 사이에는 차이가 있으며 서로 바꿔 사용할 수 없습니다. 참조 문서와 외부 리소스 사이의 관계를 설정하기 위해 href 는 교체 된 요소에 src 를 사용 합니다.

href (하이퍼 텍스트 참조) 속성은 웹 자원의 위치를 ​​지정하여 현재 요소 (앵커의 경우 a) 또는 현재 문서 (의 경우 link)와이 속성으로 정의 된 대상 앵커 또는 자원 사이의 링크 또는 관계를 정의합니다. 우리가 쓸 때 :

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

브라우저는이 리소스가 스타일 시트이고 가공페이지 구문 분석이 일시 중지 되지 않습니다 (브라우저가 페이지를 페인트하고 렌더링하기 위해 스타일 규칙이 필요하므로 렌더링이 일시 중지 될 수 있음). 그것은이다 없는 내부 CSS 파일의 내용 투기와 유사한 style태그를. (따라서 스타일 시트를 html 문서에 첨부 하는 link대신 사용 하는 것이 좋습니다 @import.)

src (소스) 속성은 요소 정의 위치의 현재 문서에 리소스를 포함시킵니다. 예를 들어. 브라우저가 발견하면

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

브라우저가 파일을 페치, 컴파일 및 실행할 때까지 페이지로드 및 처리가 일시 정지됩니다. script태그 안에 js 파일의 내용을 덤프하는 것과 비슷합니다 . img태그 의 경우도 마찬가지입니다 . 빈 태그이며 그 안에 들어와야하는 컨텐츠는 src속성으로 정의됩니다 . 브라우저는 이미지를 가져오고로드 할 때까지로드를 일시 중지합니다. [그렇습니다 iframe]

이것이 모든 JavaScript 파일을 맨 아래 ( </body>태그 이전 ) 에로드하는 것이 좋습니다 이유입니다

업데이트 : HTML 5 사양에 따라 구현되는 방법에 대한 자세한 내용은 @ John-Yin의 답변 을 참조하십시오 .

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 ERENCE) - 내가 다른 사람이 자원을 참조합니다.

예를 들면 다음과 같습니다.

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는 : A는 REF의 현재 페이지에 대한 정보 ERENCE 다른 페이지로 페이지 스타일이나 링크에 대한 즉, CSS의 정보. 페이지 파싱이 중지되지 않았습니다.

SRC는 : 다시의인가 SOURCE 이미지 나 자바 스크립트로 페이지를로드 추가 할 /. 코딩 된 속성에 따라 페이지 구문 분석이 중지 될 수 있습니다. 따라서 페이지 렌더링이 유지되지 않도록 종료 본문 태그 바로 앞에 스크립트를 추가하는 것이 좋습니다.

HTML4를 사용하는 경우 속성 목록 이 미묘함에 도움이 될 수 있습니다. 그들은 상호 교환이 불가능합니다.

W3에서 :

A 요소의 href 속성이 설정되면이 요소는 사용자가 웹 리소스를 검색하기 위해 활성화 할 수있는 링크의 소스 앵커를 정의합니다. 소스 앵커는 A 인스턴스의 위치이고 대상 앵커는 웹 리소스입니다.

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

이 속성은 이미지 리소스의 위치를 ​​지정합니다. 널리 인식되는 이미지 형식의 예로는 GIF, JPEG 및 PNG가 있습니다.

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

간단한 정의

• SRC : 본문 태그 안에 리소스를 배치 할 수있는 경우 (이미지, 스크립트, iframe, 프레임)
• 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은 배경 이미지를 추가 할 수 exemple를 위해 뭔가를 포함하는 CSS에서 일반적으로 사용되는

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

HTML 5.1 ducumentation을 거친 후 (2016 년 11 월 1 일) :

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 권장 사항에 대한 참조 링크

그것들은 상호 교환이 불가능합니다-각각은 여기에서 볼 수 있듯이 다른 요소에 정의되어 있습니다 .

그것들은 실제로 비슷한 의미를 가지고 있기 때문에 이것은 일관성이 없습니다. 나는 주로 다른 공급 업체가 다른 태그를 구현하기 시작한 다음 이전 버전과의 호환성을 위반하지 않기 위해 사양에 포함 된 것으로 가정합니다.

그것들은 비슷한 의미가 없습니다. 'src'는 브라우저가 현재 페이지의 일부로 가져와야하는 리소스를 나타냅니다. HREF는 사용자가 요청하면 가져올 리소스를 나타냅니다.

나는 차별에 대해 apnerve가 말한 것에 동의합니다. 그러나 CSS의 경우 이상하게 보입니다. css도 브라우저를 통해 클라이언트에 다운로드됩니다. 특정 리소스를 가리키는 앵커 태그와 다릅니다. 따라서 href를 사용하면 이상하게 보입니다. 해당 페이지가없는 페이지로로드되지 않은 페이지조차도 완전하게 보일 수 없으므로 관계뿐만 아니라 리소스와 같은 리소스는 이미지와 같은 많은 다른 리소스를 나타냅니다.

src는 해당 리소스를 페이지에 추가하는 데 사용되고 href는 해당 페이지의 특정 리소스에 연결하는 데 사용됩니다.

웹 페이지에서 사용할 때 브라우저는 해당 스타일 시트를보고 스타일 시트가 병렬로 다운로드 될 때 페이지 렌더링을 계속합니다.

웹 페이지에서 사용하면 브라우저가 해당 위치에 리소스를 삽입하도록 브라우저에 지시합니다. 이제 브라우저는 js 파일을 가져 와서로드해야합니다. 브라우저가로드 프로세스를 완료 할 때까지 페이지 렌더링 프로세스가 중지됩니다. 이것이 YUI가 웹 페이지 맨 아래에 JS 파일을로드하도록 권장하는 이유입니다.