>  기사  >  웹 프론트엔드  >  데이 TML

데이 TML

PHPz
PHPz원래의
2024-08-06 10:45:001129검색

Day TML

어제보다 하루가 더디네요.
어제의 주제를 복습하면서 시작해 오늘의 주제로 넘어갔습니다
HTML 미디어를 공부했습니다
이미지, 오디오, 비디오...
(Github 문제가 있어서 나중에 프로젝트를 첨부하겠습니다)

*내 메모: *

이미지 삽입

HTML에 이미지를 삽입하려면 꼬리표. 이 태그는 자동으로 닫히며 이미지 경로를 지정하는 src 속성과 접근성을 위한 대체 텍스트를 제공하는 alt 속성이 필요합니다.

예:

 <img src="path/to/image.jpg" alt="Description of image" width="600" height="400"> 

  • src: 이미지 파일의 경로(상대 또는 절대 URL).
  • alt: 이미지의 텍스트 설명(접근성과 SEO에 중요)
  • 너비높이: 치수를 ​​지정하는 선택적 속성

오디오 삽입

오디오를 삽입하려면

예:

<audio controls>
  <source src="path/to/audio.mp3" type="audio/mpeg">
  <source src="path/to/audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
  • 컨트롤: 재생 컨트롤을 표시합니다.
  • : 오디오 파일과 해당 MIME 유형을 지정합니다.

비디오 삽입

동영상을 삽입하려면

<video width="600" height="400" controls>
  <source src="path/to/video.mp4" type="video/mp4">
  <source src="path/to/video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
  • 너비높이: 동영상 플레이어의 크기를 지정합니다.
  • 컨트롤: 재생 컨트롤을 표시합니다.
  • : 비디오 파일과 MIME 유형을 지정합니다.

모두 함께

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Embedding Example</title>
</head>
<body>

  <h1>Embedding Images, Audio, and Video in HTML</h1>

  <h2>Image Example</h2>
  <img src="path/to/image.jpg" alt="Beautiful Landscape" width="600" height="400">

  <h2>Audio Example</h2>
  <audio controls>
    <source src="path/to/audio.mp3" type="audio/mpeg">
    <source src="path/to/audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>

  <h2>Video Example</h2>
  <video width="600" height="400" controls>
    <source src="path/to/video.mp4" type="video/mp4">
    <source src="path/to/video.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>

</body>
</html>

완료

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

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