第 8 章 埋め込み要素_html/css_WEB-ITnose

学習ポイント:

1. 埋め込み要素の概要

2. 埋め込み要素の分析

講師: Li Yanhui

この章では、主に HTML5 の埋め込み要素について説明します。組み込みの主な機能要素は外部要素を統合するためのものです。一部のリソースは HTML に挿入されます。

1.埋め込み要素の概要

オーディオ、ビデオ、ダイナミック イメージのキャンバスやメディア リソースのソース、トラックなど、ここにリストされているすべての要素がこのレッスンでカバーされるわけではありません。後の章または四半期で説明されます。 ...

mapはユーザークライアントパーティション応答グラフの領域を表しますオーディオリソースを表します ビデオリソースを表します ドキュメントを埋め込むプラグインを使用してコンテンツを埋め込みますHTML 動的グラフィックキャンバスを生成します許容値範囲の背景に値を埋め込んだグラフィック表現HTMLドキュメント内の埋め込みコンテンツ は、オブジェクトが渡されることを意味します 要素パラメータがプラグインに渡されることを意味します 目標の進捗状況のグラフィック表現を埋め込むまたはタスクの完了 メディアリソースを表します 構造化ベクトルコンテンツを表します はメディアの追加トラックを表します (字幕など）

<img src="img.png">

説明: a1f02c36ba31691bcfe87b2722de723b 要素は主に外部画像を挿入するため、画像のパスの問題はハイパーリンク 。

クライアントパーティション応答マップを定義します	エリア
	オーディオ
	video
	iframe
	埋め込み
	canvas
	メーター
	オブジェクト
	param
	progress
	source
	svg
	track
	2．埋め込み要素の分析
1.a1f02c36ba31691bcfe87b2722de723b	埋め込み画像

img

のプライベートプロパティ プロパティ名

説明

alt 画像の長さをピクセル単位で定義します画像の高さをピクセル単位で定義しますサーバー側パーティション応答マップを作成しますAssociationdab9f699790ab0922e596ecb9f6677d5要素

src	埋め込み画像URL
画像が読み込まれないときに表示される代替コンテンツ	width
	身長
	ismap
	usemap
<a href="index.html"><img src="img.png" width="339" height="229" alt="风景图" ismap> </a>   2.dab9f699790ab0922e596ecb9f6677d5创建分区响应图 <img src="img.png" alt="风景图" width="339" height="229" usemap="#Map"> <map name="Map"><area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形"><area shape="circle" coords="187,142,47" href="http://www.google.com" target="_blank" alt="圆形"><area shape="poly" coords="287,26,240,66,308,112" href="http://www.soso.com" target="_blank" alt="多边形"></map> 解释：通过图片中的热点进行超链接，这里我们采用 Dreamweaver 进行操作生成的。   3.d5ba1642137c3f32f4f4493ae923989c嵌入另一个文档 <a href="index.html" target="in">index</a> |<a href="http://www.baidu.com" target="in">百度</a> <br /><iframe src="http://www.ycku.com" width="600" height="500" name="in"></iframe> 解释：d5ba1642137c3f32f4f4493ae923989c表示内嵌一个 HTML 文档。其下的 src 属性表示初始化时显示的页面， width 和 height 表示内嵌文档的长度和高度，name 表示用于 target 的名称。   4.d8e2720730be5ddc9c2a3782839e8eb6嵌入插件内容 <embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"width="480" height="400"></embed> 解释：d8e2720730be5ddc9c2a3782839e8eb6元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了一个土豆网的 flash 视频。type 类型表示被插入内容的类型，这里不列出所有，后面如果遇到其他类型的文件，再继续探讨；width 和 height 表示宽高；src 表示文件路径。   5.273238ce9338fbb04bee6997e5552b95和0c68fef83818661b6da588c77ca3985e元素  解释：273238ce9338fbb04bee6997e5552b95元素和d8e2720730be5ddc9c2a3782839e8eb6一样，只不过 object 是 html4 的标准，而 embed 是 html5 的标准。而 object 不但可以嵌入 flash，还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替，我们这里暂时不对其详细讲解。   6.6ecb87e5318a36c03c59e25d55f43372显示进度 <progress value="30" max="100"></progress> 解释：6ecb87e5318a36c03c59e25d55f43372元素可以显示一个进度条，一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。   7.49c6123c49c6be380cb91db06cd3bfa9显示范围里的值 <meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter> 解释：49c6123c49c6be380cb91db06cd3bfa9元素显示某个范围内的值。其下的属性包含：min 和 max 表示范围边界， low 表示小于它的值过低，high 表示大于它的值过高，optimum 表示最佳值，但不出现效果。IE 浏览器不支持此元素。