Comentario: HTML5 tiene muchas características nuevas. Nuevo código. Muy bien. Resumimoslo ahora. Solo como referencia
1. Nuevo DoctypeIncluso si el navegador no entiende esta oración, se convertirá en el modo estándar.
2. Elementos de figura
Use <figura> y <Caption> para representar semánticamente imágenes con títulos
<figura>
<img src = path/to/image alt = sobre imagen/>
<Caption>
<p> Esta es una imagen de algo interesante. </p>
</figcaption>
</figura>
3. Redefinido <Small>
<small> ha sido redefinido y ahora se usa para representar pequeñas tipos de escritura, como el aviso de derechos de autor en la parte inferior del sitio web
4. Elimine los atributos de tipo en el enlace y las etiquetas de script
5. Agregar/sin soportes
HTML5 no requiere que los atributos se citen y se cierren o no, pero se recomienda agregar citas y etiquetas cerradas.
6. Haga que su contenido sea editable, solo agregue una propiedad contentable
7. Entradas por correo electrónico
Si establecemos el tipo de entrada al correo electrónico, el navegador verificará si la entrada es el tipo de correo electrónico. Por supuesto, no podemos confiar únicamente en la verificación frontal, y el back-end también debe tener la verificación correspondiente.
8. Marcadores de posición
El significado de este atributo de entrada es que no hay necesidad de usar JavaScript para crear el efecto del marcador de posición
9. Almacenamiento local
Use el almacenamiento local para almacenar permanentemente grandes fragmentos de datos en el cliente (a menos que se elimine activamente). Actualmente, la mayoría de los navegadores ya los han apoyado. Puede verificar si Window.localStorage existe antes de usarlos.
10. Header y pie de página semántico
11. Más características de formulario HTML5
12. es decir y html5
Por defecto, los nuevos elementos HTML5 se vuelven en línea, pero el siguiente método se puede usar para hacer
Se representa en modo de bloque
encabezado, pie de página, artículo, sección, NAV, menú, Hgroup {
Pantalla: bloque;
}
Lamentablemente, IE ignora estos estilos y puede arreglar así:
document.createElement (artículo);
document.createElement (pie de página);
document.createElement (encabezado);
document.createElement (hgroup);
document.createElement (NAV);
document.createElement (menú);
13. Group
Por lo general, se usa para combinar un conjunto de títulos en el encabezado, como
<Header>
<hgroup>
<H1> RECUERDA PÁGINA DEL FAN </H1>
<h2> Solo para las personas que desean el recuerdo de su vida. </h2>
</hgroup>
</Header>
14. Atributo requerido
La propiedad requerida define si se requiere una entrada, puede declararla como a continuación
<input type = text name = SomeInput requerido>
o
<input type = text name = someInput requerido = requerido>
15. Propiedades de enfoque automático
Al igual que su significado, es centrarse en el cuadro de entrada
<input type = text name = someInput PlaceLearTer = Douglas Quaid requerido Autococus>
16. Soporte de audio
HTML5 proporciona etiquetas <udio>, ya no necesita renderizar audio de acuerdo con los complementos de terceros. La mayoría de los navegadores modernos brindan soporte para el audio HTML5, pero aún necesita proporcionar un procesamiento de compatibilidad, como
<Audio AutoPlay = AutoPlay Controls = Controls>
<fuente src = file.ogg /> <! - ff–>
<fuente src = file.mp3 ″ /> <! - Webkit–>
<a href = file.mp3 ″> Descargue este archivo. </a>
</audio>
17. Soporte de video
Al igual que el audio, la etiqueta <DoDeD> proporciona soporte para el video. Dado que el documento HTML5 no especifica una codificación específica para el video, el navegador decide qué codificaciones admiten, lo que conduce a muchas inconsistencias. Safari e IE admiten formatos de codificación H.264, Firefox y Opera Admite Theora y Formatos de codificación Vorbis. Al usar el video HTML5, ambos deben proporcionar:
<Video Controls Preload>
<fuente src = cohagenphonecall.ogv type = video/ogg; Codecs = 'Vorbis, Theora' />
<fuente src = cohagenphonecall.mp4 ″ type = video/mp4; 'Codecs =' AVC1.42E01E, MP4A.40.2 ' />
<p> Tu navegador es viejo. <a href = cohagenphonecall.mp4 ″> Descargue este video en su lugar. </a> </p>
</video>
18. Video de precarga
La propiedad de precarga es tan simple como significa literalmente, y debe decidir si necesita precargar el video cuando la página está cargando
<Preload de video>
19. Mostrar control de video
<Controles de precarga de video>
20. Expresiones regulares
Debido al atributo del patrón, podemos usar directamente expresiones regulares en su marcado
<Form Action = Method = Post>
<etiqueta for = username> Crear un nombre de usuario: </etiqueta>
<input type = text name = username id = username placeLApader = 4 <> 10 ″ Pattern = [A-Za-Z] {4,10} Autococus requerido>
<button type = enviar> go </boton>
</form>
21. Soporte de atributos de detección
Además de Modernizr, también podemos usar JavaScript para simplemente detectar si algunas propiedades son compatibles, como:
<script>
if (! 'patrón' en document.createElement ('input')) {
// Validación del lado del cliente/servidor
}
</script>
22. Marcos elementos
Considere el elemento <Mark> como resaltado. Cuando selecciono un párrafo de texto, el efecto de marcado de JavaScript en HTML debería ser el siguiente:
<h3> Resultados de búsqueda </h3>
<p> Fueron interrumpidos, justo después de que Quato dijo, <Mark> Abre tu mente </sk>. </p>
23. Cuándo usar <Div>
HTML5 ha introducido tantos elementos, entonces, ¿todavía necesitamos usar Div? Puede usar DIV cuando no hay mejores elementos.
24. ¿Quieres usar HTML5 ahora?
No espere a 2022, está listo para usar ahora, solo hágalo.
25. ¿Qué no son HTML5?
1) SVG
2) CSS3
3) Geolocalización
4) Almacenamiento del cliente
5) Sockets web
26. Propiedades de datos
<div id = myDiv data-custom-attr = my value> bla bla </div>
Usado en CSS:
<estilo>
H1: Hover: After {
Contenido: ATTR (Data-Hover-Response);
Color: negro;
Posición: Absoluto;
Izquierda: 0;
}
</style>
<H1 Data-Hover-Response = Dije que no me toquen!> No me toque </h1>
27. Elemento de salida
El elemento <Output> se usa para mostrar los resultados del cálculo, y también tiene una etiqueta como la etiqueta como atributo.
28. Use la entrada de rango para crear controles deslizantes
El tipo de rango referenciado por HTML5 puede crear un control deslizante, que acepta propiedades min, max, paso y valor
Puede usar CSS ': antes y: después para mostrar los valores de Min y Max
<input type = range name = range min = 0 ″ max = 10 ″ paso = 1 ″ valor =>
entrada [type = range]: antes {contenido: attr (min); Right de relleno: 5px;
}
entrada [type = range]: después de {content: attr (max); RODING-LEFT: 5PX;}