HTML5 - 埋め込みコンテンツの詳細-H5 チュートリアル-php.cn

1. 画像を埋め込む

1. ハイパーリンクに画像を埋め込む

2. クライアント側のパーティション応答グラフを作成する

2. HTML ドキュメントを埋め込む

三、通过插件嵌入内容

四、嵌入数字表现形式

1. 显示进度

2. 显示范围里的值

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 - 埋め込みコンテンツの詳細

黄舟

Mar 11, 2017 pm 04:44 PM

1. 画像を埋め込む

img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。 HTML マークアップが処理されるまで、画像はロードされません。！

src 属性は、画像を埋め込む URL を指定します。
alt 属性は、img 要素の代替コンテンツ (画像が表示できない場合にレンダリングされます) を定義します。
width 属性と height 属性は、img 要素で表される画像のサイズを指定します (単位はピクセル)。この属性が省略された場合、ブラウザは画像にどれだけの画面スペースを許可できるかを認識できません。その結果、ブラウザは画像ファイル自体に依存してサイズを決定し、それに合わせて画面上のコンテンツを再配置する必要があります。結果としてシェイクが発生します。

1. ハイパーリンクに画像を埋め込む

例: img と a 要素を使用して、サーバー側のパーティション応答グラフを作成します

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>使用img和a元素创建服务器端的分区响应图</title></head><body><a href="otherpage.html">
    <img src="/static/imghw/default1.png"  data-src="../images/sport.jpg"  class="lazy"   ismap alt="奥运会运动项目"    style="max-width:90%" height="131px"></a></body></html>

ログイン後にコピー

http://localhost:63342/html_test/public/embeddedContent_Chapter15/otherpage.html?466,39

ログイン後にコピー

ismap 属性を追加して、サーバー側のパーティション応答グラフを作成します。 URL アドレスに含まれるマウスクリックの座標。

2. クライアント側のパーティション応答グラフを作成する

クライアント側のパーティション応答グラフを作成し、画像上のさまざまな領域をクリックすることでブラウザーがさまざまな URL に移動できるようにします。

マップ要素には 1 つ以上のエリア要素が含まれており、それぞれが画像上のクリック可能なエリアを表します。
area 要素の属性は 2 つのカテゴリに分類できます。最初のカテゴリは、領域で表される画像領域がユーザーによってクリックされた後にブラウザが移動する URL を扱います。2 番目のカテゴリには、shape 属性と coords 属性が含まれます。ユーザーが各画像領域をクリックできることを示します。

ターゲットアドレスに関連するテーブルエリア要素の属性

属性	説明
href	このエリアがクリックされたときにブラウザがロードするURL
オルト	代替コンテンツ
ターゲット	は、URLの閲覧コンテキストを表示するために使用する必要があります
rel	現在のドキュメントとターゲットドキュメントの間の関係を説明します
meida	メディアに適用可能この領域
hreflang	ターゲットドキュメントの言語
type	ターゲットドキュメントのMIMEタイプ

テーブルの形状とcoords属性の値

属性	価値のある性質と意味を調整します
rect	は長方形の領域を表します。 coords 属性は、円形の領域を表す 4 つのカンマ区切りの整数 (left、top、right、bottom)
circle	で構成されている必要があります。 coords 属性は、コンマで区切られた 3 つの整数 (円の左端から中心までの距離、上端から円の中心までの距離、半径) で構成されている必要があります。
poly	は、多角形。 coords 属性には、少なくとも 6 つのカンマ区切りの整数が含まれている必要があります (各数値は多角形の頂点を表します)
デフォルト	画像全体をカバーするデフォルト領域

例: 分割された応答を作成する写真
HTML5 - 埋め込みコンテンツの詳細

<p>
    <img src="/static/imghw/default1.png"  data-src="../images/sport.jpg"  class="lazy"   usemap="#sportmap" alt="Sport image"></p><map name="sportmap">
    <area href="archery.html" shape="rect" coords="0,5,90,125" alt="射箭">
    <area href="swimming.html" shape="rect" coords="120,5,250,125" alt="游泳">
    <area href="weightlifting.html" shape="rect" coords="290,5,390,125" alt="举重">
    <area href="hockey.html" shape="rect" coords="420,5,520,125" alt="曲棍球">
    <area href="sport.html" shape="default" alt="运动"></map>

ログイン後にコピー

注:
1. usemap 属性を img 要素に追加し、map 要素に関連付けます。
2. ハイパーリンクを表示するために a 要素を使用する必要はありません。

2. HTML ドキュメントを埋め込む

iframe 要素を使用すると、既存の HTML ドキュメントに別のドキュメントを埋め込むことができます。

例: iframe 要素の使用
HTML5 - 埋め込みコンテンツの詳細

<header>
    <nav>
        <ul>
            <li>
                <a href="img_a.html" target="myframe">Img a Demo</a>
            </li>
            <li>
                <a href="img_map.html" target="myframe">Img map Demo</a>
            </li>
        </ul>
    </nav></header><iframe name="myframe" width="300" height="100"></iframe>

ログイン後にコピー

上記の例では、myframe の name 属性を持つ iframe 要素が作成され、myframe という名前の閲覧コンテキストが作成されます。この閲覧コンテキストは、他の要素 (具体的には、a、form、button、input、base) の target 属性と組み合わせて使用されます。この例では、href 属性で指定された URL が iframe にロードされます。

その他の属性のテーブル

属性	説明
src	iframeが最初にロードして表示するURLを指定します
src doc	インライン用に定義する表示される HTML ドキュメント
シームレス	iframe コンテンツをメインの HTML ドキュメントの不可欠な部分として表示します (ブラウザーではサポートされていません)
サンドボックス	HTML ドキュメントの制限 (ブラウザーではサポートされていません)

三、通过插件嵌入内容

object和embed元素最初都是作为扩展浏览器能力的一种方式，用于添加插件支持，而插件能够处理浏览器不直接支持的内容。

示例：嵌入视频

<embed src="https://www.youtube.com/embed/jItLiNKSCBg" 
    width="560" height="349" allowfullscreen="true"><object data="https://www.youtube.com/embed/jItLiNKSCBg"
        width="560" height="349">
    <param name="allowFullScreen" value="true">
    <b>Sorry!</b>We can&#39;t display this content</object>

ログイン後にコピー

示例：用object元素嵌入一张图像

<object data="../images/sport.jpg" type="image/jpg"></object>

ログイン後にコピー

示例：用object元素创建一张客户端分区响应图

<header>
    <nav>
        <ul>
            <li>
                <a href="img_a.html" target="myframe">Img a Demo</a>
            </li>
            <li>
                <a href="img_map.html" target="myframe">Img map Demo</a>
            </li>
        </ul>
    </nav></header><object type="text/html" name="myframe" width="300" height="100"></object>

ログイン後にコピー

注意：chrome和Safari目前不支持用object元素创建客户端分区响应图

示例：用object元素创建浏览器上下文

<p>
    <object type="image/jpg" data="../images/sport.jpg" usemap="#sportmap"></object></p><map name="sportmap">
    <area href="archery.html" shape="rect" coords="0,5,90,125" alt="射箭">
    <area href="swimming.html" shape="rect" coords="120,5,250,125" alt="游泳">
    <area href="weightlifting.html" shape="rect" coords="290,5,390,125" alt="举重">
    <area href="hockey.html" shape="rect" coords="420,5,520,125" alt="曲棍球">
    <area href="sport.html" shape="default" alt="运动"></map>

ログイン後にコピー

四、嵌入数字表现形式

1. 显示进度

progress元素可以用来表现某项任务逐渐完成的过程。
value属性定义了当前的进度，它位于0和max属性的值所构成的范围之间。当max属性被省略时，范围是0至1。

示例：使用progress元素

<progress id="myprogress" value="10" max="100"></progress><p>
    <button type="button" value="30">30%</button>
    <button type="button" value="60">60%</button>
    <button type="button" value="90">90%</button></p><script>
    var buttons = document.getElementsByTagName("button");    
    var progress = document.getElementsByTagName("progress")[0];    
    for(var i = 0, len = buttons.length; i < len; i++){
        buttons[i].onclick = function(e){
            progress.value = e.target.value; // 千万不能通过 buttons[i].value 获取值
        }
    }</script>

ログイン後にコピー

2. 显示范围里的值

meter元素显示了某个范围内所有可能值中的一个。
min和max属性设定了可能值所处范围的边界，它们可以用浮点数表示。
meter元素的显示可以分为三个部分：过低、过高和最佳。

low属性设置一个值，在它之下的所有值都被认为是过低；
high属性设置一个值，在它之上的所有值都被认为是过高；
optimum属性则指定了“最佳”的值。

<meter id="mymeter" value="90"
       min="0" max="100"
       low="40" high="80" optimum="60"></meter><p>
    <button type="button" value="30">30</button>
    <button type="button" value="60">60</button>
    <button type="button" value="90">90</button></p><script>
    var buttons = document.getElementsByTagName("button");    
    var meter = document.getElementById("mymeter");    
    for(var i = 0, len = buttons.length; i < len; i++){
        buttons[i].onclick = function(e){
            meter.value = e.target.value;
        }
    }</script>

ログイン後にコピー

以上がHTML5 - 埋め込みコンテンツの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。