Contenido incrustado HTML5

Incrustar el contenido en el documento HTML puede enriquecer su página.

El uso de elementos IMG puede integrarse en imágenes en documentos HTML.

1) SRC: Mostrar la URL de la imagen;

2) ALT: texto del equipo;

3) Altura: la altura de la imagen;

4) Ancho: el ancho de la imagen;

5) USEMap: Defina la imagen como un mapeo de imagen del cliente;

6) ISMAP: la imagen se define como la asignación de imágenes del servidor.

Lo siguiente introduce específicamente el funcionamiento de la imagen.

Una imagen se puede incrustar con propiedades SRC y ALT.

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

De esta manera, después de hacer clic en la imagen, el navegador se navegará a la URL especificada por la propiedad HREF del elemento principal A. El atributo ISMAP a IMG Elemento crea un diagrama de respuesta de partición de servidor:

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

De esta manera, la posición de los clics de la imagen se adjuntará a la URL.

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

El diagrama de respuesta de la partición del servidor generalmente significa que el servidor responde a los diferentes clics del usuario en la imagen en la imagen.

El diagrama de respuesta de la partición del cliente admite al usuario para navegar por el navegador a diferentes URL haciendo clic en diferentes áreas de un determinado diagrama. Elementos de área.

El papel de los elementos del mapa es definir la asignación de imágenes de un cliente. Los elementos del mapa generalmente contienen atributos:

1) ID: debe definir el logotipo único para la etiqueta del mapa;

2) Nombre: opcional, nombre.

El elemento de área define el área en el mapeo de imágenes, que siempre está anidado en el elemento del mapa. Los atributos del elemento de área se dividen en dos categorías.

1) href: la URL de que el navegador debe cargarse después de hacer clic en esta área;

2) ALT: contenido de sustitución, atributos correspondientes al elemento IMG;

3) Objetivo: Mostrar el contexto de navegación de la URL, los atributos correspondientes del elemento base;

4) Rel: Describa la relación entre el documento actual y el documento de destino, y los atributos correspondientes del elemento de enlace;

5) Medios: Medio, atributos correspondientes del elemento de estilo;

6) Hreflang: el lenguaje del documento objetivo;

7) Tipo: MIME Tipo de documento objetivo.

La segunda categoría contiene atributos: forma de forma y coordens, que se utilizan para indicar cada área de imagen en la que los usuarios pueden hacer clic. El valor del atributo de forma es el siguiente:

1) RECT: representa un área rectangular. El atributo de coordens correspondiente debe estar compuesto por cuatro separaciones enteras (a, b, c, d) separadas por una coma: A representa el lado izquierdo del borde izquierdo y el rectángulo de la imagen; del rectángulo; Representa el lado inferior y el lado inferior del rectángulo de la imagen;

2) Círculo: representa un área circular. Los atributos de las coordinas deben estar compuestos por tres enteros separados por coma (a, b, c): A representa la distancia desde el borde izquierdo de la imagen hasta el corazón redondo;

3) Poli: representa un polígono. Los atributos de Coords deben contener al menos seis enteros separados por coma, cada par de números representa uno de los ápiles del polígono;

4) Valor predeterminado: el área predeterminada, que cubre la imagen completa. No hay necesidad de proporcionar un valor de coords.

El siguiente es un ejemplo:

 <P> <img src = triathlon.png useMap =#mymap <map name = mymap> <rea href = swimpage.html shape = rect coords = 3,5,68,62 ml forma = rect coords = 70,5,130,62 <rea href = otherPage.html shape = default </sp>

El script anterior define que si el usuario hace clic en la parte de natación de la imagen, el navegador se navega a Swimpage.html.

El elemento iframe se puede integrar en otro documento en el documento HTML existente. El atributo compatible con este elemento es el siguiente:

1) SRC: URL del documento que se muestra en iframe;

2) SRCDOC: Especifica el contenido HTML de la página que se muestra en las páginas que se muestran en iframe;

3) Nombre: El nombre de iframe se puede usar en el objetivo del contexto y otros elementos (como A, Forma, botón, entrada y base).

4) Ancho: Defina el ancho de iframe;

5) Altura: Estándar la altura del iframe;

6) Sandbox: el límite adicional del contenido en iframe, el valor de soporte incluye:

----: aplique todas las restricciones a continuación;

--- Permitir el nombre-orgin: permitir el contenido de iframe se considera la misma fuente que el resto del documento;

--- Permitir la navegación: permita el enlace al contexto de navegación de nivel superior, para que pueda reemplazar el documento completo actual con otro documento o crear una nueva etiqueta y ventana;

7) Sin costuras: instruyó al navegador que muestre el contenido de iframe como un componente general del documento HTML principal; El uso de este atributo es el siguiente (la mayoría de los navegadores de este atributo aún no son compatibles):

 <iframe src = demo_iframe.htm Seamless> </iframe>

A continuación se muestra un ejemplo completo de iframe:

 <Header> <h1> cosas que me gustan </h1> <am> <ul> <li> <a href = fruits.html target = myframe> frutas ilike </a> </li> <li> <a href = Actividades.html Target = myFrame> Actividades ilike </a> </li> </ul> </naving> </weater> <iframe name = myFrame Width = 300 Height = 100/>

Los elementos de objeto y los elementos de inserción se utilizan para expandir la capacidad del navegador y agregar soporte de enchufe.

El elemento de incrustación define el contenido incrustado, los atributos de soporte son los siguientes:

1) Altura: establezca la altura del contenido incrustado;

2) SRC: la URL del contenido;

3) Tipo: Defina el tipo MIME de contenido incrustado para que el navegador sepa cómo lidiar con él;

4) Ancho: establezca el ancho del contenido incrustado.

Cualquier otro atributo que aplique será considerado como un parámetro de un plug -in o contenido. Mire el ejemplo a continuación:

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

El atributo PermishFullScreen se usa anteriormente para establecer si habilita la función de visualización de pantalla completa.

Los elementos de objeto también se usan para definir un objeto incrustado, como: imágenes, audio, video, pdf, flash, etc. Los elementos del objeto pueden contener contenido de repuesto, que se muestran cuando el contenido especificado no está disponible.

 <Object width = 560 Height = 349 data = http: // titan/myiiMaginaryFile> <param name = allowfulScreen value = true/> </b> No podemos mostrar contenido </objeto>

Si los recursos mencionados por el atributo de datos no existen, se muestra el contenido en el elemento de objeto.

El elemento de progreso representa la barra de progreso. Los atributos de soporte incluyen:

1) Max: indica el valor máximo de la tarea;

2) Valor: Defina el progreso actual, entre los valores de los atributos 0 y Max;

3) Forma: una o más formas a las que pertenecen.

Cuando se omite el atributo MAX, el rango es de 0 a 1, y el atributo de valor usa números de punto flotante para representar el progreso, como 0.3 indica el 30%.

 <Progress id = myProgress value = 10 max = 100> </progress> <p> <button type = button value = 30> 30%</boton> <botón type = button = 60> 60%</butt on> < Tipo de botón = Botón Valor = 90> 90%</botón> </p> <script> var Botones = document.getElementsByTagName ('Button'); .length;

El ejemplo dado anteriormente demuestra los diferentes valores para mostrar diferentes botones para mostrar diferentes valores.

El elemento del medidor muestra un cierto valor dentro de un cierto rango. Los atributos de soporte incluyen:

1) Min y Max: especifique el rango de solo el alcance, puede usar puntos flotantes;

2) Bajo: especifique el rango de bajo valor, la propiedad debajo se considera demasiado baja;

3) Alto: especifique el rango de alto valor, todos los valores por encima se consideran demasiado altos;

4) óptimo: especifique el mejor valor;

5) Valor: debe, el valor actual de la medición;

6) Forma: una o más formas a las que pertenecen.

 <Meter id = mymeter value = 90 min = 10 max = 100 Low = 40 high = 80Optimum = 60> </seter> <p> <button type = 30> 30%</boton> Utton Value = 60> 60%< /Button> <Botton Type = Botton Value = 90> 90%</boton> </p> <script> VAR BOTONES = Document.getElementsByTagName); = 0;

Cuando el valor del elemento del medidor es demasiado bajo y demasiado alto, y el mejor valor, el navegador los presentará de diferentes maneras