HTML5 eingebetteter Inhalt

Das Einbetten von Inhalten in das HTML -Dokument kann Ihre Seite reicher machen.

Die Verwendung von IMG -Elementen kann in Bilder in HTML -Dokumenten eingebettet werden.

1) SRC: Zeigen Sie die URL des Bildes an;

2) ALT: Ausrüstungstext;

3) Höhe: Die Höhe des Bildes;

4) Breite: Die Breite des Bildes;

5) Usemap: Definieren Sie das Bild als Client -Bildzuordnung;

6) ISMAP: Das Bild ist definiert als das Server -Bildzuordnung.

Im Folgenden wird speziell den Betrieb des Bildes eingeführt.

Ein Bild kann in SRC- und ALT -Eigenschaften eingebettet werden.

 <Img src = triathlon.png <img src = triathlon.png </a>

Auf diese Weise wird nach dem Klicken auf das Bild der Browser zu der URL navigiert, die von der HREF -Eigenschaft des übergeordneten Elements A angegeben wurde. A. Das ISMAP -Attribut für IMG -Element erstellt ein Server -Side -Partitions -Antwortdiagramm:

 <A href = otherpage.html> <img src = triathlon.png </a>

Auf diese Weise wird die Position der Klicks des Bildes an die URL angehängt.

http: //bjpowernode/Listings/otherpage.html?

Das Antwortdiagramm der Serverpartition bedeutet normalerweise, dass der Server auf die verschiedenen Klicks des Benutzers auf das Bild im Bild reagiert.

Das Client -Partitions -Antwortdiagramm unterstützt den Benutzer, indem Sie durch den Browser zu verschiedenen Bereichen eines bestimmten Diagramms klicken. Flächenelemente.

Die Rolle von Kartenelementen besteht darin, ein Client -Bildzuordnung zu definieren. Kartenelemente enthalten normalerweise Attribute:

1) ID: Es muss das eindeutige Logo für die Kartenbezeichnung definieren.

2) Name: Optional, Name.

Das Flächenelement definiert den Bereich in der Bildzuordnung, die immer im Kartenelement verschachtelt ist. Die Attribute des Flächenelements sind in zwei Kategorien unterteilt.

1) HREF: Die URL, dass der Browser nach diesem Bereich geladen werden sollte;

2) ALT: Substitutionsinhalt, entsprechende Attribute für das IMG -Element;

3) Ziel: Zeigen Sie die entsprechenden Attribute des Basiselements von URL an;

4) Rel: Beschreiben Sie die Beziehung zwischen dem aktuellen Dokument und dem Zieldokument und den entsprechenden Attributen des Link -Elements;

5) Medien: Medium, entsprechende Attribute des Stilelements;

6) HREFLANG: Die Sprache des Zieldokuments;

7) Typ: MIME -Zieltyp des Zieldokuments.

Die zweite Kategorie enthält Attribute: Form- und Koordinierungsattribute, mit denen jeder Bildbereich angezeigt wird, auf den Benutzer klicken können. Der Wert des Formattributs lautet wie folgt:

1) RECHT: Es repräsentiert einen rechteckigen Bereich. Das entsprechende Koordinierungsattribut muss aus vier Ganzzahl -Trennungen (a, b, c, d) durch ein Komma zusammengesetzt sein: A repräsentiert die linke Seite der linken Rande und das Rechteck des Bildes; des Rechtecks ​​repräsentiert die untere Seite und die untere Seite des Rechtecks ​​des Bildes;

2) Kreis: Es repräsentiert eine kreisförmige Fläche. Die Koordniattribute müssen aus drei von Comma getrennten Ganzzahlen bestehen (a, b, c): A repräsentiert den Abstand vom linken Rand des Bildes bis zum runden Herzen;

3) Poly: repräsentiert ein Polygon. Koordnungsattribute müssen mindestens sechs Ganzzahlen enthalten, die durch Komma getrennt sind. Jedes Zahlenpaar repräsentiert einen der Apex des Polygons;

4) Standard: Der Standardbereich, der das gesamte Bild abdeckt. Es ist nicht notwendig, Koordinierungswert zu liefern.

Das Folgende ist ein Beispiel:

 <p> <img src = triathlon.png usemap =#myMap <map name = mymap> <rea href = Swimpage.html Form = RECHTECORDS = 3,5,68,62 ml Form = RECT -Koordeln = 70,5,130,62 <rea href = otherpage.html shape = Standard </map>

Das obige Skript definiert, dass der Browser, wenn der Benutzer auf den Schwimmteil des Bildes klickt, in die Swimpage.html navigiert wird

Iframe -Element kann in ein anderes Dokument im vorhandenen HTML -Dokument eingebettet werden. Das von diesem Element unterstützte Attribut lautet wie folgt:

1) SRC: URL des in Iframe angezeigten Dokuments;

2) SRCDOC: Gibt den HTML -Inhalt der auf den in Iframe angezeigten Seiten angegeben.

3) Name: Der Name von Iframe kann im Ziel des Kontextes und anderer Elemente (z. B. A, Form, Schaltfläche, Eingabe und Basis) verwendet werden.

4) Breite: Definieren Sie die Breite von Iframe;

5) Höhe: Standard die Höhe des Iframe;

6) Sandbox: Die zusätzliche Grenze des Inhalts in Iframe, der Wert der Unterstützung umfasst:

----: Wenden Sie alle nachstehenden Beschränkungen an;

--- Zulässige Same-org: Ermöglichen Sie Iframe-Inhalt. Inhalt wird als die gleiche Quelle wie der Rest des Dokuments angesehen.

.

7) Seamless: Der Browser hat den Inhalt von IFrame wie eine Gesamtkomponente des Haupt -HTML -Dokuments angezeigt. Die Verwendung dieses Attributs ist wie folgt (die meisten Browser dieses Attributs werden noch nicht unterstützt):

 <iframe src = Demo_iframe.htm nahtlos> </iframe>

Unten finden Sie ein vollständiges Beispiel für Iframe:

 <header> <h1> Dinge, die ich mag, </h1> <nav> <ul> <li> <a href = fruits.html target = myFrame> fruits ilike </a> </li> <li> <a href = Aktivitäten.html target = MyFrame> Aktivitäten ilike </a> </li> </ul> </nav> </header> <iframe name = myFrame width = 300 lhohe = 100/>

Objektelemente und Einbettelemente werden verwendet, um die Kapazität des Browsers zu erweitern und Stecker zu unterstützen.

Das Einbettelement definiert den eingebetteten Inhalt, die Unterstützungsattribute sind wie folgt:

1) Höhe: Stellen Sie die Höhe des eingebetteten Inhalts ein;

2) SRC: Die URL des Inhalts;

3) Typ: Definieren Sie den MIME -Typ des eingebetteten Inhalts, damit der Browser weiß, wie er damit umgeht.

4) Breite: Stellen Sie die Breite des eingebetteten Inhalts ein.

Alle anderen Attribute, die Sie anwenden, werden als Parameter eines Stecker -Inhalts oder eines Inhalts angesehen. Schauen Sie sich das folgende Beispiel an:

 <Einbett src = http://www.youtube.com/v/qza60hca9s?

Das zulässige Attribut für das Zulassen wird oben verwendet, um festzustellen, ob die Vollbild -Anzeigefunktion aktiviert werden soll.

Objektelemente werden auch verwendet, um ein eingebettetes Objekt zu definieren, wie z. B. Bilder, Audio, Video, PDF, Flash usw. Objektelemente können Ersatzinhalte enthalten, die angezeigt werden, wenn der angegebene Inhalt nicht verfügbar ist.

 <Objektbreite = 560 Höhe = 349 data = http: // titan/myiimaginaryFile> <param name = duldfulscreen value = true/> </b> Wir können den Inhalt </Object> nicht anzeigen

Wenn die vom Datenattribut verwiesenen Ressourcen nicht vorhanden sind, wird der Inhalt im Objektelement angezeigt.

Das Fortschrittselement repräsentiert die Fortschrittsleiste. Zu den Unterstützungsattributen gehören:

1) max: Zeigt den Maximalwert der Aufgabe an;

2) Wert: Definieren Sie den aktuellen Fortschritt zwischen den Werten der 0- und Max -Attribute;

3) Form: eine oder mehrere Formen, die zu gehören.

Wenn das MAX -Attribut weggelassen wird, beträgt der Bereich 0 bis 1, und das Wert -Attribut verwendet Float -Punkte -Nummern, um den Fortschritt darzustellen, z. B. 0,3 zeigt 30%an.

 <Progress ID = MYProgress Value = 10 max = 100> </progress> <p> <Schaltfläche Typ = Taste Wert = 30> 30%</button> <Taste = Taste = 60> 60%</butt auf> < Taste type = Taste Wert = 90> 90%</button> </p> <Script> var buttons = document.getElementsByTagName ('Taste'); .Length;

Das oben angegebene Beispiel zeigt die verschiedenen Werte, um verschiedene Schaltflächen anzuzeigen, um unterschiedliche Werte anzuzeigen.

Das Messelement zeigt einen bestimmten Wert innerhalb eines bestimmten Bereichs. Zu den Unterstützungsattributen gehören:

1) min und max: Geben Sie den Bereich nur des Umfangs an, Sie können schwimmende Punkte verwenden.

2) Niedrig: Geben Sie den Bereich mit niedrigem Wert an, und das Eigentum darunter gilt als zu niedrig.

3) Hoch: Geben Sie den Hochwertbereich an, alle Werte über ihm werden als zu hoch angesehen.

4) Optimum: Geben Sie den besten Wert an;

5) Wert: Muss der aktuelle Messwert;

6) Form: eine oder mehrere Formen, die zu gehören.

 <Meter ID = MyMeterwert = 90 min = 10 max = 100 niedrig = 40 hoch = 80optimum = 60> </meter> <p> <Button Typ = 30> 30%</button> utton value = 60> 60%< /Button> <Taste Typ = Taste Wert = 90> 90%</button> </p> <Script> var buttons = document.getElementsByTagName); = 0;

Wenn der Wert des Messelements zu niedrig und zu hoch ist und der beste Wert, präsentiert der Browser sie auf unterschiedliche Weise