HTML에 이미지를 삽입하는 방법-HTML 튜토리얼-php.cn

HTML에 이미지를 삽입하는 방법

清浅

풀어 주다： 2018-12-04 15:55:02

원래의

64122명이 탐색했습니다.

HTML에 그림을 삽입하는 방법은 다음과 같습니다: html 코드에 직접 삽입, CSS 스타일에 삽입, img에 대한 src 값을 설정하여 JavaScript에 그림 삽입, 그림 삽입을 위해 innerHTML에 img 속성 삽입

페이지에 텍스트는 매우 단조롭고 지루해 보일 수 있지만, 여기에 그림을 추가하면 훨씬 좋아 보일 것입니다. 오늘은 HTML 페이지에 그림을 삽입하는 방법을 소개하겠습니다.

【추천 강좌: HTML 강좌, JavaScript 강좌】

HTML 페이지에 이미지를 삽입하려면 <를 사용해야 합니다. ;나는 HTML g>태그에 있습니다

<img src="" alt="">

로그인 후 복사

img는 "이미지"를 의미하며 페이지에 표시되는 이미지입니다.

src는 "소스"를 의미합니다. 코드를 작성할 때 이미지를 폴더에 저장하는 것이 가장 좋습니다. 이름

alt는 "텍스트"를 의미하며 이미지를 찾을 수 없는 경우에만 텍스트를 표시하도록 브라우저에 지시합니다. 또는 이미지 위로 마우스를 가져가면 설정된 텍스트가 팝업됩니다

웹의 이미지 형식

. gif: 일련의 다채로운 그림 요소 또는 점으로 구성되어 그림으로 배열된 간단한 형식입니다. gif

.png: gif 형식과 유사하지만 부분 투명도 옵션이 있으며 무손실 압축만 지원합니다.

.JPEG: JPEG 형식은 현재 인터넷에서 가장 많이 사용되는 이미지 형식입니다. 파일을 가장 작은 형식으로 압축할 수 있는 형식입니다.

HTML 이미지 삽입 방법

HTML 코드에 이미지를 직접 삽입하세요

<img src="images/1.jpg">

로그인 후 복사

렌더링:

HTML에 이미지를 삽입하는 방법

CSS 스타일로 그림 삽입

<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>

로그인 후 복사

렌더링:

HTML에 이미지를 삽입하는 방법

JavaScript 언어를 사용하여 그림 삽입

<body>
<img id="demo">
<script>
	var demo=document.getElementById("demo");
	demo.src="images/3.jpg";
	demo.width="450";
	demo.height="300";
</script>
</body>

로그인 후 복사

렌더링:

Image 5.jpg

innerHTML 메서드로 그림 삽입

<div id="demo"></div>
<script>
	var demo=document.ElementById("demo");
	demo.innerHTML=&#39;<img src="images/4.jpg" width="450px" height="300px">&#39;;
</script>

로그인 후 복사

렌더링:

Image 7.jpg