html img 태그 사용-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

html img 태그 사용

韦小宝

Dec 02, 2017 am 10:26 AM

html 사용 상표

이 글에서는 html에 있는 이미지 태그의 다양한 기능에 대해 자세히 설명합니다. html 페이지에서 사진은 꼭 필요한 요소입니다. html의 img 태그도 매우 간단하고 익히기 쉽습니다. 살펴보자!

img는 다음과 같은 상대 경로를 사용하여 이 map그림을 표시합니다.

<img src="./imgs/002.jpg">

로그인 후 복사

개발 팁: 실제 개발에서는 일반적으로 imgs 폴더가 프로젝트 디렉터리에 생성되며 모든 이미지 리소스는 그림 호출 중 편의를 위해 여기에 배치됩니다. 개발. 위에 표시된 대로 ./imgs는 이미지가 있는 디렉터리이고 /002.jpg는 선택할 이미지입니다.

img는 다음과 같은 절대 경로를 사용하여 웹 페이지 이미지를 표시합니다.

<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"/>

로그인 후 복사

img에서 선택할 수 있는 속성이 많습니다.

1. alt는 이미지가 잘못 로드될 때 표시 내용을 나타냅니다. 방문자는 이미지 사용을 알 수 있습니다.

예:

<img src="./imgs/001.jpg12" alt="logo">

로그인 후 복사

표시된 결과는 다음과 같습니다.

는 이 사진이 로고 사진임을 의미합니다.

2. align은 텍스트에서 이미지가 정렬되는 위치를 나타냅니다.

상단은 하단 정렬, 중간은 중앙에 정렬됩니다. 기본값은 하단 정렬입니다.

두 가지 플로팅 효과: 왼쪽 이미지는 텍스트 왼쪽에 떠 있고, 오른쪽 이미지는 텍스트 오른쪽에 떠 있습니다.

3. 너비와 높이를 통해 이미지 크기 변경

2와 3의 코드 데모는 다음과 같습니다

<p>一张百度logo<img src="./imgs/001.jpg" width="100"/></p>
<p>一张百度logo<img src="./imgs/001.jpg" align="top" width="100"/></p>
<p>一张logo<img src="./imgs/002.jpg" align="bottom" width="100"></p>
<p>百度logo<img src="./imgs/002.jpg" align="middle" width="100"></p>
<p>百度logo<img src="./imgs/002.jpg" align="left" width="100"></p>
<p>百度logo<img src="./imgs/002.jpg" align="right" width="100"></p>

로그인 후 복사

이미지는 모두 상대 경로 아래의 로컬 이미지입니다

4. 다른 링크를 열려면

<p>点击图片打开链接 <a href="page1.html" title="点击进入page1界面"> <img src="./imgs/001.jpg" alt="logo" width="200px" align="middle"/></a></p>

로그인 후 복사

Page1.html은 또 다른 html 문서이며 코드는 다음과 같습니다.

<html>
<head>
    <title>page1界面</title>
</head>
<body>
    <p>我是page1</p>
</body>
</html>

로그인 후 복사

page1.html을 열려면 사진을 클릭하세요.

5. 이미지 매핑

<img src="page.jpg" border="0" usemap="#page" alt="pages" />
<map name="page" id="page">
    <area shape="circle" coords="180,139,14" href ="page1.html" alt="page1" />
    <area shape="circle" coords="129,161,10" href ="page2.html" alt="page2" />
</map>

로그인 후 복사

지역과 지도가 함께 사용되며 지역은 지도 태그 아래에 있습니다. img의 usemap은 맵의 이름을 가리킵니다. 두 개의 다른 링크(page1 또는 page2)를 입력하려면 그림의 다른 위치를 클릭하세요.

위 내용은 모두에게 html img 태그 사용에 관한 내용입니다.

관련 권장사항:

img 속성에서 alt와 title의 차이점에 대한 자세한 그래픽 설명

이미지 매핑 생성에 대한 html의 태그에 대한 자세한 설명

왜 HTML에서는 안되나요? 이미지 크기를 조절하려면 img 태그를 사용하세요?

위 내용은 html img 태그 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.