HTML에 이미지를 삽입하는 방법
- 清浅원래의
- 2018-12-04 15:55:0264175검색
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">
렌더링:
CSS 스타일로 그림 삽입
<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>렌더링:
JavaScript 언어를 사용하여 그림 삽입
<body>
<img id="demo">
<script>
var demo=document.getElementById("demo");
demo.src="images/3.jpg";
demo.width="450";
demo.height="300";
</script>
</body>렌더링:
innerHTML 메서드로 그림 삽입
<div id="demo"></div>
<script>
var demo=document.ElementById("demo");
demo.innerHTML='<img src="images/4.jpg" width="450px" height="300px">';
</script>렌더링:
요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다.
위 내용은 HTML에 이미지를 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!