Como todos sabemos, HTML5 pertenece a la Alianza de la Red Wanwei (W3C). En noviembre de 2016, W3C actualizó el estándar HTML 5 de ejercicio a largo plazo, que fue la primera pequeña actualización en 2 años. Se han eliminado muchas características funcionales HTML 5.1 propuestas inicialmente debido a defectos de diseño y la falta de soporte de los fabricantes de navegadores.
Aunque hay algunos elementos y mejoras de funciones, se lleva a HTML 5.1, sigue siendo una pequeña actualización. Algunos de estos nuevos elementos incluyen etiquetas combinadas.
Se espera que W3C y el comienzo del desarrollo del borrador HTML 5.2 se publiquen a fines de 2017. Lo que queremos presentar aquí son las nuevas características funcionales y la mejora de funciones introducidas en la versión 5.1. No necesita mover JavaScript para usar estas características. No todos los navegadores admiten estas características, por lo que debe verificarlas para verificar el soporte del navegador antes de aplicarlas al entorno de producción.
14. Prevenir ataques de pesca en líneaLa mayoría de las personas que usan Target = '_ en blanco' no conocen un hecho interesante: la etiqueta recién abierta puede cambiar la ventana. Lo representará en la página Abierta para realizar un código JavaScript malicioso. Debido a que el usuario cree que la página de apertura es segura, no dudará.
Para eliminar por completo este problema, HTML 5.1 ha estandarizado el uso de la propiedad Rel = Noopner que está estandarizada por el aislamiento del contexto del navegador. REL = NOOPEREN se puede usar en etiquetas <a> y <ee>.
<A href =# target = _blank roth = noopner> El enlace quiere hacer problemas ya </a>13. Título de la imagen de manejo flexible
La etiqueta <Figcaption> representa el título o la leyenda asociada con el elemento <figura>, que generalmente se usa como contenedor para elementos visuales como imágenes, cuadros, ilustraciones. En la versión HTML temprana, <FigCaption> solo se puede usar como la primera o última sub -etiquetada. HTML5.1 ha relajado este límite, y ahora puede usar <figCaption> en cualquier lugar del contenedor <figura>.
<Article> <h1> El titular de las noticias/figura de hoy> <p> Este es el aumento de los precios de la gasolina en dos meses y el tercero en caso de diesel en una quincena.12.
SpellCheck es un atributo de enumeración que puede tomar el valor de la cadena vacía, verdadero y falso. Si se especifica que el estado es verdadero, significa que el elemento aceptará la ortografía y la inspección de la gramática.
Element.forcespellCheck () obligará a los agentes de los usuarios a informar errores de ortografía y gramática detectados en el elemento de texto, incluso si el usuario nunca enfoca la entrada en el elemento.
<P SpellCheck = True> <Lelse> Nombre: <Input SpellCheck = False ID = TextBox> </Label> </p>11. Opciones de aire
La nueva versión de HTML le permite crear un elemento vacío <opción>. Puede ser un sub -elemento de <optgroup>, <setalist> o <select> elemento. Encontrará que esta característica puede ayudar al diseñar una tabla unilateral amigable con el usuario.
10. Apoye la pantalla completa del marcoLa propiedad de la variable booleana permitida para la pantalla desarrollada para el cuadro le permite controlar si el contenido se puede mostrar a través de la pantalla utilizando el método requestfulLscreen (). Por ejemplo, usamos iframes incrustados en YouTube como ejemplo. Debe establecer la propiedad PermishFullScreen para permitir que el reproductor muestre el video de pantalla completa.
<Atadicle> <WEADER> <P> <img src =/usericons/16235> <b> Fred Flintstone </b> </p> <p> <a href =/publicaciones/30934 r = Bookmark> 12:44 < /a> - <a href =#A.503439551> Publicación privada </a> </p> </header> <p> <p> ¡Mira mi nuevo video! >9. Encabezado y pie de página incrustado
HTML5.1 le permite incrustar el encabezado y el pie de página en otro encabezado. Puede agregar un encabezado o pie de página a los elementos de la cabeza, si se contienen en el contenido del párrafo. Si desea agregar elaboración detallada como <section> y <Artículo> Etiquetas a elementos de párrafo semántico, esta característica será muy útil.
En el siguiente código, la etiqueta <artículo> contiene una etiqueta <Header>, que tiene una etiqueta <aparentemente> con una etiqueta <weader>.
<Atader> <WEADER> <H2> Lección: Cómo cocinar pollo </h2> <sing aparte> <Header> <H2> Acerca del autor: Tom Haank </h2> <a href =./Tomhank/> ¡Contáctelo! </a/p> </header> <p> Experimento en nada más que cocinar. En la bolsa con la cremallera con el pollo y sellarlo.8. Imagen de ancho cero
La nueva versión de HTML le permite agregar imágenes de ancho cero. Esta característica se puede usar cuando la imagen no necesita mostrarse al usuario. Si un elemento IMG tiene otros usos, no es solo una imagen, por ejemplo, como parte del servicio para calcular el número de vistas de la página, use 0 valores en las propiedades de ancho y altura. Para imágenes de 0 ancho, se recomienda usar atributos vacíos.
<Img src = theImageFile.jpg Width = 0 Height = 0 src = "/uploads/allimg/170217/22010q544-0.jpg"/>El nuevo método ReportValidity () le permite verificar un formulario y restablecer los resultados, e informar los errores a los usuarios en la posición adecuada del navegador. Los agentes de los usuarios pueden informar más de una regla de restricción, si un solo elemento encuentra múltiples problemas al mismo tiempo. Para esta situación, la entrada de contraseña es un contenido imprescindible pero no lleno, y se identificará como un error.
<h2> Validación de formulario </h2> <p> Ingrese los detalles </p> <form> <label> Tipo de entrada obligatorio = Nombre de contraseña = Contraseña requerida/> </etiqueta> <button type = enviar it> enviar </botón > </form> <script> document.quryselector ('form').6. El contexto del navegadorEn HTML 5.1, puede usar la marca <menú> para definir el menú, que contiene uno o más elementos <Menuitem>, y luego usa la propiedad contextMenu para vincularlo a cualquier elemento. La ID del elemento <ener> debe ser consistente con el valor del atributo contextMenu del elemento que queremos agregarle el menú contextual.
Cada <menuitem> puede tener una de las tres siguientes formas:
- Opción de radio de radio desde un grupo;
- Casilla de verificación: seleccione o cancele la opción;
- Comando -Exto una acción al hacer clic.
<H2 contextMenu = PopUp-Menu> Haga clic derecho para obtener la demostración del menú contextual. Type = Command Label = Command OnClick = Alert ('Advertencia')> Codero de verificación 2 </menuitem> <menuitem type = radio name = group1> botón de radio a </menuitem t ype = radio name = group1 checked = true> botón de radio b </menuitem> <menuitem type = checkbox deshabilitado> Deshabilitar el elemento del menú </menuitem> </menú>5. Use números aleatorios cifrados en scripts y estilosCryptográfica Nonce es un número generado al azar, que solo se puede usar una vez, y para cada solicitud de página, debe generarse. Este atributo Nonce se puede usar en elementos <script> y <style>.
Generalmente se usa en la estrategia de seguridad de contenido de un sitio web para determinar si se debe implementar un estilo y script específicos en la página. En el código que se proporciona a continuación, este valor está codificado, pero en el escenario de uso real, este valor se genera aleatoriamente.
<script nonce = 'd3ne7uwp43bhr0e'> el código JavaScript </script>4. Relación de enlace de secuencia inversaEl atributo Rev se define en HTML4, pero no aparece en HTML5. W3C se decide volver a incluir los atributos Rev en elementos <a> y <link>. La relación entre los documentos de enlace actual e inverso de la identificación del atributo Rev. Se ha incluido para admitir el formato de marca de estructura de datos ampliamente utilizado, RDFA.
Usemos dos documentos para dar un ejemplo.
// Documento con URL Capítulo1.html <Link href = Less2.html rel = Next Rev = Prev> // Document con URL Capítulo2.html <Link Href = Less1.html = Prev rev = Next> <Link Href = Less3. Roth = Next Rev = Prev>3. Mostrar/ocultar informaciónLos nuevos elementos <settle> y <summary> le permiten agregar información de extensión a un párrafo. Puede mostrar u ocultar un bloque de información adicional a través del elemento Click. Por defecto, la información adicional está oculta.
En el código, debe colocar la marca <summary> en la marca <settle>, como se muestra a continuación. Después de la etiqueta <summary>, puede agregar otro contenido para estar oculto.
<section> <h3> Mensaje de error </h3> <settle> <summary> Este archivo no tiene un error en la red de descarga du. <dt> Tamaño del archivo: </dt> <dd> 8 kb </dd> <dt> código de error: </dt> <dd> 342a </dd> </dl> </solts> </section>2. Más tipos de elementos de entradaEl elemento de entrada HTML ha expandido tres tipos de entrada, mes, y tiempo de fecha y hora.
Como muestra el nombre, los dos primeros elementos permiten a los usuarios elegir un valor de semana y un valor de un mes. Dependiendo del soporte del navegador, se presentarán en un calendario de dibujo que se exhibirá, lo que le permite elegir una semana o mes específica de un año.
DatateMe-Local representa un dominio de entrada de fecha y hora, pero no hay configuración de zona horaria. Sus datos se pueden seleccionar en un método similar al elemento de entrada de mes o semana, y el tiempo se puede ingresar solo.
<sect> <h2> Semana, mes y dateTime-Local </h2> <form de acción = action_page.php> Elija una semana: <input type = week name = Year_week> <input = envit> </form> <para acción = Action_page.php> cumpleaños (mes y año): <input type = mes name = bdaymonth> <input type = envit> </form> <form de acción = action_page.ph p> unión (fecha y hora): <type de entrada = DateTime-Local Name = bdaytime> <input type = subt value = send> </form> </section>1. Imagen de respuestaEl W3C introduce algunas características funcionales, y la imagen de respuesta se puede lograr sin usar CSS. Ellos son ...
atributo de imagen srcset
El atributo SRCSET le permite especificar múltiples fuentes de imagen opcionales, correspondientes a una resolución de píxeles diferente. Permitirá que el navegador muestre la implementación de calidad adecuada de acuerdo con los diferentes dispositivos de usuario. Por ejemplo, es mejor mostrar una imagen de baja resolución para usuarios con dispositivos móviles lentos.
Puede usar la propiedad SRCSET y traer sus propios símbolos de modificación X para describir la relación de píxeles de cada imagen.
<Img src = clicks/low-res.jpg srcset = Clicks/Low-res.jpg 1x, Clicks/Medium-Res.jpg 2x, Clicks/High-Res.jpg 3x>Además de la relación de píxeles, también puede optar por usar el símbolo de modificación W para especificar imágenes de diferentes tamaños. En el siguiente ejemplo, la imagen de alta resolución se define como una pantalla cuando el ancho es 1600px.
<Img src = clicks/low-res.jpg srcset = Clicks/Low-res.jpg 500W, Clicks/Medium.jpg 1000W, Clicks/High-Res.jpg 1600W>Atributo de imagen de tamaños
La mayoría de las veces, a los creadores les gusta mostrar diferentes imágenes para diferentes tamaño de pantalla. Esto se puede lograr con el atributo de tamaño. Le permite ajustar el ancho para el tamaño del espacio distribuido a la pantalla de la imagen, y luego usar la propiedad SRCSET para seleccionar la imagen apropiada para mostrar. Por ejemplo…
<IMG SRC = Clicks/Low-Res.jpg tames = (width máximo: 25em) 60VW, 100VW srcset = clicks/low-res.jpg 500W, Clicks/mediano-res.jpg 1000W, Clicks/High-res.jpg 1600W>Aquí, el atributo de tamaños define el 100%del ancho de la imagen de la ventana cuando la ventana es superior a 25 EM, o el 60%del ancho de la vista de la vista cuando es menos igual a 25EM.
elemento de imagen
El elemento de imagen le permite declarar imágenes para diferentes tamaño de pantalla. Esto se puede implementar encapsulando <img> con <imagen> elemento y describiendo múltiples sub -elementos.
<Piction> Marking solo no muestra nada. Se ha asumido que la fuente de imagen predeterminada se declarará como el valor del atributo SRC, y la fuente de imagen opcional se colocará en el atributo SCRSET.
<Imagen> <Source Media = (Max-Width: 25em) Srcset = Clicks/Small/Low-Res.jpg 1x, Clicks/Small/Medium-Res.jpg 2x, Clices/Small/High-Res.jp. > <Source Media = (Max-Width: 60em) srcset = Clicks/grande/bajo-res.jpg 1x, Clicks/grande/mediano-res.jpg 2x, clices/gran/alta res.jpg 3x> <img src = Clicks/Default/Medium- Res.jpg> </Piction>ResumirLo anterior es todo el contenido de este artículo.