html img 태그 사용
- 韦小宝원래의
- 2017-12-02 10:26:273433검색
이 글에서는 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의 a1f02c36ba31691bcfe87b2722de723b 태그에 대한 자세한 설명
왜 HTML에서는 안되나요? 이미지 크기를 조절하려면 img 태그를 사용하세요?
위 내용은 html img 태그 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!