html 영역 태그는 무엇을 의미하나요? html 영역 태그 사용법에 대한 자세한 설명-HTML 튜토리얼-php.cn

html 영역 태그는 무엇을 의미하나요? html 영역 태그 사용법에 대한 자세한 설명

寻∝梦

풀어 주다： 2018-08-17 17:37:12

원래의

4671명이 탐색했습니다.

html 영역 태그는 무엇을 의미하나요? html 영역태그 사용법에 대해 얼마나 알고 계시나요? 이 문서에서는 html 영역 태그의 정의와 사용 사례를 소개하고 html 영역 태그의 속성에 대한 소개(예제 포함)를 소개합니다.

html 영역 태그의 정의 및 사용법:

< Area> 태그 정의 이미지 맵의 영역(참고: 이미지 맵은 클릭할 수 있는 영역이 있는 이미지를 나타냅니다).

지역 요소는 항상 태그 내에 중첩됩니다.

참고: 태그의 usemap 속성은 지도 요소의 name 속성과 연결되어 이미지와 지도를 연결합니다.

HTML 태그 인스턴스:

클릭 가능한 영역이 있는 이미지 맵:

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

로그인 후 복사

태그 속성:

alt: 해당 영역에 대한 대체 텍스트.
coords: 해당 지역의 좌표입니다.
href: 해당 지역의 대상 URL입니다.
hreflang: html5의 새로운 속성인 대상 URL의 언어입니다.
media: 대상 URL이 어떤 미디어/장치에 최적화되어 있는지, HTML5의 새로운 속성입니다.
nohref: 관련 링크가 없는 영역, html5에서는 지원하지 않습니다.
rel: 현재 문서와 HTML5의 새로운 속성인 대상 URL 간의 관계입니다.
모양: 영역의 모양입니다.
target: 대상 URL을 열 위치입니다.
type: 대상 URL의 MIME 유형, html5의 새로운 속성입니다.

형식:

HTML 태그 예:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>html< area>标签_PHP笔记</title>
</head>
<body>
<img src="http://www.php.cn/themes/Nana2.09/images/logo.png" alt="html< area>标签" width="300px" height="70px" alt="PHP笔记logo" usemap="#logo">
<map name="logo">
<area shape="rect" coords="0,0,70,70" alt="图标" href="#">
<area shape="rect" coords="85,0,280,50" alt="PHP笔记" href="#">
<area shape="rect" coords="85,50,275,70" alt="www.php.cn" href="#">
</map>
<h3>上面图片被分为3个区域</h3>
</body>
</body>
</html>

로그인 후 복사

댓글: usemap 속성은 의 id 또는 name 속성(브라우저에 의해 결정됨)을 참조할 수 있으므로 id와 name 속성을 동시에 에 추가해야 합니다.

HTML과 XHTML의 차이점

HTML에서 에는 닫는 태그가 없습니다.

XHTML에서는 가 제대로 닫혀야 합니다.

【관련 추천】

html5 소스타입의 용도는 무엇인가요? html5 소스태그 상세 소개

HTML에서 스크립트 태그의 역할은 무엇인가요? 스크립트 태그에서 type 속성의 사용법은 무엇입니까?

위 내용은 html 영역 태그는 무엇을 의미하나요? html 영역 태그 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!