HTMLにタグを埋め込む-htmlチュートリアル-php.cn

HTMLにタグを埋め込む

WBOY

リリース： 2024-09-04 16:32:27

オリジナル

761 人が閲覧しました

HTML の埋め込みタグの目的は、外部リソースまたはアプリケーションを表示することです。これは主に、ビデオファイルやオーディオファイルを HTML アプリケーションに表示するなどのマルチメディアコンテンツで使用されます。このタグは、Flash アニメーターなどのプラグインをインポートするためにも使用されます。このタグはHTML 5バージョンで導入されました。

、、、などの終了タグがあります。など

リアルタイムの例: 非常に多くの Web サイトに、Web サイト内にメディアファイルが含まれているのを見てきました。通常のタグはメディアファイルの表示にはサポートされていません。そこで、HTML 内のすべてのタイプのメディアファイルに埋め込みタグを使用しました。

注: このタグは、画像や外部 HTML ファイルを含める場合にも使用されます。

HTML での埋め込みタグはどのように機能しますか?

HTML 埋め込みは 4 つの属性に基づいて機能します。これらの属性は、埋め込みの動作を指定します。

構文:

<embed Required attributes>

ログイン後にコピー

必須属性: タグを使用すると、任意の HTML ドキュメントで属性を使用できます。

1. height: これらの属性は、埋め込みコンテンツ要素の高さを指定するために使用されます。この値はピクセル単位です。

構文:

<embed height="value in pixels">

ログイン後にコピー

2. width: これらの属性は、埋め込みコンテンツ要素の幅を指定するために使用されます。この値はピクセル単位です。

構文:

<embed width="value in pixels">

ログイン後にコピー

3. src: Web URL を運ぶために使用されます。これは、埋め込みコンテンツの Web アドレスを指定するために使用されることを意味します。

構文:

<embed src="web URL">

ログイン後にコピー

4. type: この属性は、ビデオやオーディオなどのメディアのタイプを指定するために使用されます。

構文:

<embed type="type of media">

ログイン後にコピー

HTML への埋め込みタグの例

以下に挙げる例を次に示します:

例 #1 – 画像を埋め込む

コード:

<!DOCTYPE html>
<html>
<title>embed attribute</title>
<head>
<!-- CSS Code -->
<style>
p {
color: red;
border: 2px solid green;
font-size: 22px;
}
h1 {
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1>The embed tag introduction</h1>
<p>
The
<embed>
tag in HTML purpose is for displaying external resources or
applications. This is used mostly in multimedia content like showing
video files or audio files into out HTML application. This embed tag
is also used for importing plug-ins like flash animators. This embed
tag is introduced in HTML 5 version. It does have ending tag as like p
tag, <html>, <body>, <a> etc.
</p>
<p>Real Time Example: We have seen so many website contains media
files within that websites. Normal tag are not supported to display
media files. So we have used embed tag for all types of media files in
HTML.</p>
<h1>The embed tag Example</h1>
<embed src="d6.jpg" width="400" height="400">
</body>
</html>

ログイン後にコピー

出力:

例 #2 – 他の HTML リソースを埋め込む

HTML コード: EmbedResource.html

<!DOCTYPE html>
<html>
<title>embed attribute</title>
<body>
<!-- Embed content from other html file -->
<embed src="Resource.html" width="1000" height="200">
</body>
</html>

ログイン後にコピー

HTML コード: Resource.html

<!DOCTYPE html>
<html>
<title>embed attribute</title>
<head>
<!-- CSS Code -->
<style>
p {
color: brown;
border: 2px ridge navy;
font-size: 22px;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>The embed tag introduction</h1>
<p>
The
<embed>
tag in HTML purpose is for displaying external resources or
applications. This is used mostly in multimedia content like showing
video files or audio files into out HTML application. This embed tag
is also used for importing plug-ins like flash animators. This embed
tag is introduced in HTML 5 version. It does have ending tag as like p
tag, <html>, <body>, <a> etc.
</p>
<p>Real Time Example: We have seen so many website contains media
files within that websites. Normal tag are not supported to display
media files. So we have used embed tag for all types of media files in
HTML.</p>
</body>
</html>

ログイン後にコピー

出力:

例 #3 – ビデオファイルを埋め込む

コード:

<!DOCTYPE html>
<html>
<title>embed attribute</title>
<head>
<!-- CSS Code -->
<style>
p {
color: brown;
border: 2px ridge navy;
font-size: 22px;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>The embed tag introduction</h1>
<p>
The
<embed>
tag in HTML purpose is for displaying external resources or
applications. This is used mostly in multimedia content like showing
video files or audio files into out HTML application. This embed tag
is also used for importing plug-ins like flash animators. This embed
tag is introduced in HTML 5 version. It does have ending tag as like p
tag, <html>, <body>, <a> etc.
</p>
<p>Real Time Example: We have seen so many website contains media
files within that websites. Normal tag are not supported to display
media files. So we have used embed tag for all types of media files in
HTML.</p>
<!-- Embed content from other video file -->
<embed src="nationalgeography.mp4" width="400" height="300">
</body>
</html>

ログイン後にコピー

出力: