Una breve discusión sobre etiquetas nuevas y abandonadas en HTML5

Los siguientes elementos HTML 4.01 se han eliminado en HTML5. Aunque los navegadores aún admiten estas etiquetas por razones de compatibilidad, se recomienda utilizar nuevas etiquetas alternativas. Paradójicamente, los navegadores antiguos no admiten suficientes etiquetas nuevas Dependiendo del proyecto.

Estos elementos incluyen basefont, big, center, font, s, strike, tt, u. Estos elementos son puramente para mostrar la página y el contenido mostrado debe completarse con CSS.

Estos elementos incluyen frameset, frame y noframes. HTML5 no admite marcos, solo admite marcos iframe, o utiliza un formato del lado del servidor compuesto por varias páginas que se ajustan a la página y elimina las tres etiquetas anteriores.

Estos elementos incluyen subprograma, bgsound, parpadeo, marquesina y otras etiquetas.

Abolir rb, usar ruby ​​​​para reemplazar el acrónimo Usar abbr para reemplazar el directorio de abolición Usar ul para reemplazar isindex Usar una combinación de formulario y entrada para reemplazar el listado Usar pre para reemplazar xmp Usar código para reemplazar el nextid de abolición Usar guids para abolir Plaintex Usar texto/ plian (cuerpo sin formato) sustitución de tipo MIME

En HTML4.01, los divs se usan ampliamente en varios entornos de diseño sin una definición clara. HTML5 semántica los divs para SEO, y las etiquetas estructurales recién agregadas son las siguientes:

a), el elemento de sección representa un bloque de contenido en la página, como un capítulo, encabezado, pie de página u otra parte de la página. Se puede utilizar en combinación con h1, h2... y otros elementos para representar la estructura del documento. Ejemplo: <sección>……</sección> en HTML5; <div>……</div> en HTML4.

b). El elemento del artículo representa un contenido independiente en la página que no está relacionado con el contexto. Por ejemplo, un artículo.

c), el elemento lateral representa información auxiliar relacionada con el contenido del elemento del artículo distinta del contenido del elemento del artículo.

d). El elemento de encabezado representa un bloque de contenido en la página o el título de toda la página.

e). El elemento hgroup representa una combinación de los títulos de toda la página o un bloque de contenido en la página.

f), el elemento de pie de página representa la nota al pie de toda la página o un bloque de contenido en la página. Normalmente, incluirá el nombre del creador, la fecha de creación y la información de contacto del creador.

g). El elemento de navegación representa la parte del enlace de navegación de la página.

h). El elemento de figura representa una pieza independiente de contenido de flujo, que generalmente representa una unidad independiente en el contenido de flujo principal del documento. Utilice el elemento figcaption para agregar un título a un grupo de elementos de figura. Por ejemplo:

 <figure> ​<figcaption>RPC</figcaption> ​<p>La República Popular China nació en 1949</p></figure>

Escritura común en HTML4

 <dl> ​<h1>prc</h1> ​<p>La República Popular China nació en 1949</p> ​</dl>

Resultados de ejecución:

2.1. metro

Representa un valor dentro de un rango específico, que se puede usar para salarios, cantidades, porcentajes, etc. max representa el valor máximo, min representa el valor mínimo y value representa el valor actual.

 <metro máx=100 min=0 valor=60 estilo=ancho: 300px;></metro>

Puedes usar js para controlarlo de 0 a 100.

tiempo. Representa un valor de tiempo. El atributo datetime enfatiza la hora de la conferencia: <time>2015-10-6</time>.

 <hora>2015-10-6</hora>

Empezamos clases todas las mañanas a las <time>8:30</time>. Tengo una cita el <time datetime=2017-02-14>Día de San Valentín</time>.

Debido a que esta etiqueta es una etiqueta semántica, no tiene ningún efecto especial cuando se ve en un navegador. Es básicamente el mismo efecto que si la etiqueta no estuviera configurada.

Se utiliza para representar una barra de progreso.

 <h3>progreso</h3><valor de progreso=75 máx=100></progreso>

max: valor máximo, valor al finalizar

valor: valor actual

Esta etiqueta define una lista de datos opcionales. Utilizado junto con el elemento de entrada, puede crear una lista desplegable de valores de entrada.

Cuando se combina con la entrada, se pueden completar tanto la selección como la entrada.

 <tipo de entrada=lista de texto=países /><id de lista de datos=países> <valor de opción=China></opción> <valor de opción=Estados Unidos></opción> <valor de opción=Japón></opción></lista de datos >

Se utiliza principalmente para presentar visualmente al usuario el texto que necesita resaltarse o resaltarse. Las palabras clave de búsqueda se resaltan en los resultados de búsqueda de aplicaciones típicas. HTML5<marca></mark>;HTML4 <span></span>.

Definir comentarios de Ruby (pinyin o caracteres chinos). Se utiliza con las etiquetas <ruby> y <rt>. El elemento ruby ​​consta de uno o más caracteres (que requieren una explicación/pronunciación), un elemento rt que proporciona esa información y un elemento rp opcional que define el contenido que se mostrará cuando el navegador no admite el elemento ruby.

Define la interpretación o pronunciación de un carácter (fonética o carácter chino).

Se utiliza en los comentarios de Ruby para definir lo que muestran los navegadores que no admiten elementos de Ruby.

Representa un salto de línea suave. La diferencia con el elemento br: el elemento br indica que aquí se debe hacer un salto de línea; wbr indica que cuando la ventana del navegador o el elemento principal es ancho (cuando no hay necesidad de un salto de línea), la línea no será ancha. roto, pero cuando el ancho no es suficiente, la línea se ajustará automáticamente aquí.

Defina gráficos, como cuadros y otras imágenes. El elemento <canvas> es solo un contenedor de gráficos (canvas) y debes usar scripts para dibujar gráficos.

 <canvas id=myCanvas></canvas><script type=text/javascript> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ; ctx.fillRect(0, 0, 80, 100);</script>

Representa un botón de comando, como un botón de opción, una casilla de verificación o un botón. El elemento de comando es visible sólo si está dentro de un elemento de menú. De lo contrario, este elemento no se mostrará, pero se puede utilizar para especificar atajos de teclado.

 <menu> ​<command onclick=alert('Hola mundo')> ​¡Haz clic en mí!</command> ​</menu>

Se utiliza para describir detalles de un documento o parte de un documento. Se puede utilizar junto con la etiqueta de resumen, que puede definir títulos para obtener más detalles. El título es visible y cuando el usuario hace clic en el título, se muestran los detalles. El resumen debe ser el primer elemento secundario de los detalles.

Defina una lista de opciones. Utilice este elemento junto con el elemento de entrada para definir los posibles valores de la entrada. La lista de datos y sus opciones no se muestran, es solo una lista de valores de entrada válidos. Utilice el atributo de lista del elemento de entrada para vincular la lista de datos.

Defina diferentes tipos de salida, como la salida de script.

 <formulario acción=form_action.asp método=obtener nombre=sumform> ​<nombre de salida=suma></output> ​</form>

Definir lista de menú. Utilice esta etiqueta cuando desee enumerar controles de formulario. Tenga en cuenta que la diferencia con el menú de navegación se utiliza específicamente para controles de formulario.

Si necesita reproducir audio y video en la página, los métodos que utilizamos frecuentemente son:

a) 、 incrustar

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf' enableFullScreen='true' calidad='alta' anchura='480' altura='400' align=' middle' enableScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

b) Utilice el reproductor flash.

Como algunos complementos de terceros, flowplayer602

Los componentes multimedia HTML5 se refieren a componentes de video (video) y componentes de audio (audio). Los componentes multimedia HTML5 pueden incrustar componentes multimedia directamente en sus páginas web sin la ayuda de complementos de terceros, como Flash Player. La nueva capacidad de los navegadores para ofrecer soporte nativo para video facilita a los desarrolladores web agregar componentes de video a sus sitios web sin depender de la disponibilidad de complementos externos. Debido a las limitaciones de la tecnología Flash que Apple utiliza actualmente en el iPhone y el iPad, las capacidades de los componentes multimedia HTML5 son particularmente importantes.

Se utiliza para reproducir vídeos, películas.

La fórmula básica de la etiqueta es la siguiente:

 <video ancho=800 alto=600 controles=controles poster=content/1.jpg> <fuente src=content/iceage4.mp4 tipo=video/mp4></fuente> <fuente src=content/iceage4.webm tipo=video /webm></fuente> <ancho del objeto= alto= tipo=aplicación/x-shockwave-flash data=mivideo.swf> <nombre del parámetro=valor de la película=mivideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> El navegador actual no admite la reproducción directa de video. Haga clic aquí para descargar el video: <a href=a.mp4>Descargar. vídeo</a></video>

La fuente es la fuente de vídeo, que puede ser de varios tipos. Cuando una falla, se seleccionará la siguiente. Hay tres tipos principales:

Ogg = Archivo Ogg con codificación de video Theora y codificación de audio Vorbis MPEG4 = Archivo MPEG 4 con codificación de video H.264 y codificación de audio AAC WebM = Archivo WebM con codificación de video VP8 y codificación de audio Vorbis

Aviso:

 <video src=img/a.mp4 controles=controls poster=img/1.jpg>Su navegador es demasiado antiguo, actualícelo, descargue el video <a href=#>Dirección</a></video>

El contenido internalHTML de la mayoría de las etiquetas HTML5 es el contenido que se muestra cuando el navegador no admite la etiqueta.

La diferencia entre vinculación de eventos y escucha:

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>La diferencia entre enlace de eventos y monitoreo</title> </head>​ <body> <button id=btnA>Botón A </button> <button id=btnB>Botón B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { alerta(hiciste clic } btnA.onclick = function() { alerta(hiciste clic nuevamente } btnB.addEventListener(clic, función(evento) {alerta(hiciste clic); },falso); btnB.addEventListener(clic,función(evento){ alerta(hiciste clic nuevamente); },false </script> </body>​</html>

Después de vincular un evento utilizando el nombre del evento on, la vinculación sobrescribirá el evento vinculado anteriormente, es decir, el último evento vinculado entrará en vigor;

El uso de addEventListener para vincular eventos no se sobrescribirá y se pueden vincular varios eventos idénticos a un elemento al mismo tiempo.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>Etiqueta de vídeo</title> </head> <body> <video id=videoIce ancho=800 alto=600 controles=controles poster =content/1.jpg> <fuente src=content/iceage4.mp4 tipo=video/mp4></fuente> <fuente src=content/iceage4.webm tipo=video/webm></fuente> <ancho del objeto= alto= tipo=aplicación/x-shockwave-flash data=mivideo.swf> <nombre del parámetro=valor de la película=mivideo.swf /> <nombre del parámetro=valor de flashvars= autostart=true&amp;file=myvideo.swf /> </object> El navegador actual no admite la reproducción directa de vídeo. Haga clic aquí para descargar el vídeo: <a href=content/a.mp4>Descargar vídeo</a>. </video> <h2> <button onclick=play()>Reproducir</button> <button onclick=pause()>Pausa</button> <span id=msg></span> </h2> <tipo de script =texto/javascript> var videoIce=document.getElementById(videoIce); función reproducir() { videoIce.play() }​ función pausa() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime } </script> </body>​</html>;

El audio puede realizar la función de reproducir sonido y música.

 <audio src=http://baidu/demo/test.mp3 controles >Su navegador no soporta el elemento de audio</autio><audio src=content/a.mp3 controles=controls autoplay=autoplay></audio>

Muchos de los atributos de la etiqueta de audio son los mismos que los del vídeo:

reproducción automática: verdadero|falso, si es verdadero, el audio se reproducirá tan pronto como esté listo. controles: verdadero|falso Si es verdadero, muestra controles, como un botón de reproducción, al usuario. final: el valor numérico define en qué parte de la transmisión de audio el reproductor deja de reproducir. De forma predeterminada, el sonido se reproducirá hasta el final. loopend: el valor numérico define la posición donde se detiene la reproducción del bucle en la secuencia de audio. El valor predeterminado es el valor del atributo final. loopstart: el valor numérico define la posición inicial de la reproducción del bucle en la secuencia de audio. El valor predeterminado es el valor del atributo de inicio. playcount: el valor numérico define cuántas veces se reproduce el clip de audio. El valor predeterminado es 1. src: url La URL del audio que se está reproduciendo. inicio: el valor numérico define la posición en la secuencia de audio donde el reproductor comienza a reproducir. De forma predeterminada, el sonido se reproduce al principio.

Ejemplo de uso del elemento fuente como subetiqueta de un elemento multimedia:

 <audio>​<fuente src='test.mp3 ' type='audio/mpeg'/>​<fuente src='test.ogg ' type='audio/ogg'/>​<fuente src='test.spx ' tipo='audio/ogg'/>​</audio>

Utilizando el elemento fuente, el navegador busca secuencialmente en la lista hasta que encuentra un formato de archivo que puede reproducir. Una vez encontrado, reproduce el archivo e ignora los demás elementos que le siguen.

La API de audio es básicamente la misma que la del video. Aquí hay un ejemplo de cómo personalizar el volumen:

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>etiqueta de audio</title> </head> <body> <h2>etiqueta de audio</h2> <audio src=content/ fcml.mp3 controles=controles autoplay=autoplay id=mp3> <marquee><h2>Cambia el navegador, es demasiado antiguo</h2></marquee> </audio> <tipo de entrada=rango min=0 max=100 onchange=setVolume(this) /> <tipo de script=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01; /script> </body></html>

El volumen está sólo entre 0-1.

Se utiliza para incrustar contenido (incluidos varios medios). El formato puede ser Midi, Wav, AIFF, AU, MP3, flash, etc.

Ejemplo: <embed src=flash.swf /> Ejemplo de código en HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.