찾다
웹 프론트엔드HTML 튜토리얼웹페이지 제작 초보자: HTML 하이퍼링크 A tag_HTML/Xhtml_웹페이지 제작 사용법 배우기


하이퍼링크 a 태그는 링크 포인트를 의미하며, 이는 English Anchor의 약어입니다. 그 기능은 현재 위치의 텍스트나 그림을 다른 페이지, 텍스트 또는 이미지와 연결하는 것입니다. 이는 잘 알려져 있지만 문법 구조가 다소 알려지지 않았으므로 효과적으로 사용하려면 문법 구조를 이해해야 합니다. 하이퍼링크 태그는 링크포인트를 나타내며, 영어앵커(English Anchor)의 약어입니다. 그 기능은 현재 위치의 텍스트나 그림을 다른 페이지, 텍스트 또는 이미지와 연결하는 것입니다. 이는 잘 알려져 있지만 문법 구조가 다소 알려지지 않았으므로 효과적으로 사용하려면 문법 구조를 이해해야 합니다. 태그의 기본 구문 구조는 다음과 같습니다.
class=type
id=value
href=reference
name=value
rel=same|next| parent| 이전
rev=값
대상=창
스타일=값
제목=제목
onclick=함수
onmouseout=함수
onMouseOver=함수>
태그의 문법 구조를 보면 다양한 링크 효과를 얻기 위해 하이퍼링크를 설정할 때 선택할 수 있는 매개변수가 많다는 것을 알 수 있습니다. !
class 및 id 옵션: 링크 포인트의 종류와 할당된 ID 번호를 설정하는 데 사용되며 일반적으로 설정되지 않습니다. 가장 일반적으로 사용되는 두 가지 매개변수는 href와 name입니다. href는 하이퍼텍스트 참조(Hypertext Reference)의 약자로 링크 주소를 설정하는 데 사용됩니다. 링크 주소는 URL 주소여야 합니다. 특정 경로가 제공되지 않으면 기본 경로는 현재 페이지의 경로와 동일합니다. 링크된 파일도 여러 가지 상황으로 구분됩니다. HTML 파일인 경우 현재 브라우저에서 직접 열리게 되며, 실행 파일(.exe 파일)인 경우에는 직접 실행되거나 다운로드되는 파일이 됩니다. 당사에서 제공하는 다운로드 기능을 사용하며, 워드 형식의 파일인 경우 해당 파일을 브라우저에서 열어 편집 및 처리할 수 있습니다.
rel: 링크 관계 설정을 나타냅니다. rel=same은 링크할 파일이 이 파일과 동일함을 나타내고, rel=next는 링크할 파일이 다음 페이지임을 나타내고, rel=parent는 이 파일을 나타냅니다. 은 링크될 파일의 ​​상위 파일입니다. rel=previous는 링크될 파일이 이전 페이지임을 의미합니다.
rev: 역방향 링크를 설정하는 데 사용됩니다.
target: 프레임 창을 사용할 때 어느 창에 연결할지 설정하고, target="_bank"는 웹 페이지를 열기 위해 새 창을 여는 것을 의미합니다.
제목: 링크 포인트 선택 시 표시되는 제목을 설정하는데 사용됩니다.
onclick: 이벤트에 해당합니다. 링크 지점을 클릭하면 이 이벤트가 트리거되고 해당 서브루틴이 실행됩니다.
onmouseover: onclick과 유사하게 링크 지점 위로 마우스를 이동할 때 해당 이벤트가 트리거됩니다.
onmouseout: 마우스가 마을 연락처 밖으로 이동한 후 해당 이벤트가 트리거됩니다.
몇가지 예: 홈페이지로 돌아가기
음성파일 재생
해당 프로그램 실행
열기 해당 프로그램 문서 처리
응용 능력
1. 다운로드 파일 제공
많은 네티즌들이 다운로드 효과 제공 방법을 묻는 글을 올렸습니다. 실제로는 여전히 하이퍼링크이지만 다운로드할 파일을 홈페이지에 업로드해야 합니다. 예: 다운로드할 수 있는 "Web Page Skills" 파일 패키지가 있습니다. 파일 이름은 "homepagejq.zip"이며 이 링크의 코드는 다음과 같이 작성할 수 있습니다. 다운로드하려면 여기를 클릭하세요. "웹 페이지 기술" 파일 패키지.
 2. 링크된 웹페이지를 새 창에서 엽니다.
"target" 값을 "_blank"로 설정합니다. 예: 새 창에서 "aboutme.htm" 웹페이지를 엽니다. 이 효과를 생성하는 코드는 내 정보...입니다.
 3. 링크로 마우스를 이동하여 설명 텍스트 한 줄을 표시합니다.
이 효과를 얻으려면 "title" 매개변수 값을 설정하세요. 예: '스크립트 홈' 링크 위로 마우스를 이동하면 '웹페이지 제작 기술을 소개하는 전문 사이트입니다'라는 설명이 표시됩니다. 해당 링크의 코드는 다음과 같습니다. 웹페이지 제작스킬">스크립트 하우스를 소개하는 전문 사이트입니다.
 4. 링크에 마우스를 올리면 창이 뜹니다
onmouseover 매개변수를 설정하여 얻은 효과입니다. 예: 링크 위로 마우스를 이동하면 창이 팝업되고 "창에 마우스 호버 효과 데모!"가 표시됩니다. 이 링크의 코드는 링크와 같습니다. 유사한 방법을 사용하여 마우스를 눌렀을 때 프롬프트 창이 팝업되고, 마우스를 놓으면 프롬프트 창이 팝업되는 효과를 만들 수 있습니다.
 5. 이 페이지의 특정 콘텐츠에 대한 링크
이 페이지 콘텐츠의 특정 부분에 대한 링크(즉, "파일 내에서 점프")를 얻으려면 링크 포인트의 이름을 매개변수 이름으로 지정해야 합니다. 텍스트 조각을 선택하고 연결을 위한 name 매개변수로 이름을 지정합니다. 소위 동일 파일 내에서의 점프는 독자가 매우 긴 파일을 읽을 때 내용의 특정 부분에만 관심이 있는 경우 점프 읽기 방법을 사용할 수 있음을 의미합니다. 기본 형식은
2부1부의 내용..
........................... ...............
2부의 실제 내용은...
..... ........ ............................
 이렇게 '2부'를 클릭하면 이 하이퍼링크 이후 자동으로 로 이동됩니다. "두 번째 부분 실제 콘텐츠" 장소. "name" 매개변수에 의해 정의된 링크 포인트 이름은 임의로 선택할 수 있지만, 링크의 "href" 매개변수에 있는 링크 포인트 이름은 앞에 "#"을 추가하는 것을 잊지 마세요.
 6. 다른 페이지의 지정된 콘텐츠 위치로 링크
방법은 위의 예와 유사하지만 웹페이지의 파일 이름을 링크 포인트 이름 앞에 추가해야 합니다. "href" 매개변수입니다. 예: page1.htm과 page2.htm이라는 두 개의 웹 페이지가 있습니다. 각 페이지에는 두 부분의 콘텐츠가 있습니다. 이제 링크를 클릭하면 페이지의 두 번째 부분으로 이동합니다. page2.htm. 그러면 먼저 page2.htm의 두 번째 부분 시작 부분에 다음 코드를 작성합니다. page1.htm에 다음과 같은 링크 코드를 작성합니다. page2 부분 콘텐츠의 두 번째 부분; .
 7. 이메일 링크
하이퍼링크를 클릭하면 클라이언트 컴퓨터의 이메일 관리 소프트웨어가 실행되어 편지를 쓸 수 있습니다. 다음 코드 줄을 사용하세요. 나에게 편지를 보내주세요. "Please write to me" 링크를 클릭하면 이메일 관리 소프트웨어(예: OE)의 쓰기 기능이 자동으로 시작되고 이메일 주소가 수신자의 주소 표시줄에 추가됩니다.
링크는 텍스트뿐만 아니라 이미지도 캐리어로 사용할 수 있고, 그림의 특정 부분도 캐리어로 사용할 수 있으며, 위의 효과도 얻을 수 있습니다. 차이점은 캐리어, 즉 링크 두 개의 대괄호 사이의 부분이므로 다른 예를 들어주지 않겠습니다.
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML 태그와 HTML 속성의 차이점은 무엇입니까?HTML 태그와 HTML 속성의 차이점은 무엇입니까?May 14, 2025 am 12:01 AM

htmltagsdefinestructureofawebpage, whiletributesdfunctionalityanddetails.1) tags, andoutlinethecontent'splacement.2) agtributessuchassrc, class 및 styleenhancetagsbysingingimages ources, styling, and mormore, mormor, 개선.

HTML의 미래 : 진화와 트렌드HTML의 미래 : 진화와 트렌드May 13, 2025 am 12:01 AM

HTML의 미래는보다 의미적이고 기능적이며 모듈 식 방향으로 발전 할 것입니다. 1) 의미화로 인해 태그가 콘텐츠를보다 명확하게 설명하여 SEO 및 장벽없는 액세스를 향상시킵니다. 2) 기능화는 사용자의 요구를 충족시키기 위해 새로운 요소와 속성을 소개합니다. 3) 모듈화는 구성 요소 개발을 지원하고 코드 재사용 성을 향상시킵니다.

HTML 속성이 웹 개발에 중요한 이유는 무엇입니까?HTML 속성이 웹 개발에 중요한 이유는 무엇입니까?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopmentforcontrollingbehavior, 외관 및 기능. 접근성, 접근성, andseo.forexample, thesrcattributeintagspactsseo, whike whike whike whike whike whike thercattributeintagspactsseo

ALT 속성의 목적은 무엇입니까? 왜 중요한가요?ALT 속성의 목적은 무엇입니까? 왜 중요한가요?May 11, 2025 am 12:01 AM

ALT 속성은 HTML에서 태그의 중요한 부분이며 이미지에 대한 대체 텍스트를 제공하는 데 사용됩니다. 1. 이미지를로드 할 수 없으면 ALT 속성의 텍스트가 표시되어 사용자 경험을 향상시킵니다. 2. 스크린 리더는 ALT 속성을 사용하여 시각 장애가있는 사용자가 그림의 내용을 이해하도록 도와줍니다. 3. 검색 엔진 인덱스 텍스트 텍스트는 웹 페이지의 SEO 순위를 향상시키기 위해 ALT 속성의 텍스트를 색인 텍스트입니다.

HTML, CSS 및 JavaScript : 예제 및 실제 응용 프로그램HTML, CSS 및 JavaScript : 예제 및 실제 응용 프로그램May 09, 2025 am 12:01 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 구축하는 데 사용됩니다. 2. CSS는 웹 페이지의 모양을 아름답게하는 데 사용됩니다. 3. JavaScript는 동적 상호 작용을 달성하는 데 사용됩니다. 태그, 스타일 및 스크립트를 통해이 세 가지는 함께 현대 웹 페이지의 핵심 기능을 구축합니다.

 태그에서 Lang 속성을 어떻게 설정합니까? 이것이 중요한 이유는 무엇입니까? 태그에서 Lang 속성을 어떻게 설정합니까? 이것이 중요한 이유는 무엇입니까?May 08, 2025 am 12:03 AM

태그의 Lang 속성을 설정하는 것은 웹 접근성 및 SEO를 최적화하는 핵심 단계입니다. 1) 태그에 LANG 속성을 설정하십시오. 2) 다국어 컨텐츠에서는 다른 언어 부품에 대한 LANG 속성을 설정하십시오. 3) "en", "fr", "zh"와 같은 ISO639-1 표준을 준수하는 언어 코드를 사용하여 LANG 속성을 올바르게 설정하면 웹 페이지 및 검색 엔진 순위의 접근성을 향상시킬 수 있습니다.

HTML 속성의 목적은 무엇입니까?HTML 속성의 목적은 무엇입니까?May 07, 2025 am 12:01 AM

htmlattributesearsentialforenhancingwebelements'functionalityandAmpearance.theyaddinformationTodeFineBehavior, 외관 및 간호, WebsITESITERACTIVE, RAPITIVE 및 VVESILLY -CAMENTION.ATTRIBUTESLIKESRC, HREF, 클래스, 유형 및 디스티브 트랜스포트

HTML에서 목록을 어떻게 만드나요?HTML에서 목록을 어떻게 만드나요?May 06, 2025 am 12:01 AM

ToCreateAlistInhtml, useUnorderEdListandForOrdLists : 1) forUnderedList, wrapitemSinanduseForeachitem, renderingasabulletedList.2) forOrderEdlists, useandfornumberedLists, useandfornumberedlists, useandfornumberedlists, useandfornumberedlists, withTheyPeatTributeFferentNumberingStyles.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.