HTML5/"> La era de HTML5 es popular ha llegado. Si todavía está esperando la compatibilidad del navegador, significa que está fuera de contacto con la web. Por supuesto, esto se debe al desarrollo en auge de los clientes móviles. Si aún está luchando con si debe dominar HTML5 y CSS3 Technologies, por favor. No lo creas, solo puedo decir: ¡lo creas o no!
Echemos un vistazo a una estructura de etiqueta HTML5 estándar: (solo estoy hablando de etiquetas aquí, y no hay nada más involucrado)
<! Doctype html>
<html>
<Evista>
<meta charset = "gb2312">
<title> html5 </title>
</ablo>
<Body>
<Header>
<Al nav> </am>
</Header>
<Artículo>
<Sección>
<h2> </h2>
<p> </p>
</section>
</artículo>
<Tooter> </foTer>
</body>
</html>
El avance de la etiqueta HTML5 es, por supuesto, porque su semántica es más intuitiva. Por supuesto, esta es solo una de las puntas del progreso de HTML5. Algunas personas sugieren que: no digas que el progreso de HTML5 es revolucionario, ¡pero el desarrollo! No me opongo a esta declaración, pero de hecho es revolucionario en algunos aspectos. No quiero salir del tema aquí, solo hablamos de etiquetas.
Por supuesto, cuando estoy entusiasmado con una etiqueta semántica tan maravillosa, no solo tengo que preguntar: ¿es decir, es decir, lo admite? Desafortunadamente, la respuesta es no. Si ya tiene miedo de IE, debe continuar soportando su tortura interminable. (IE9 e IE10 ya son compatibles y admiten HTML5 y CSS3/"> CSS3.0)
Pero debes estar contento de que haya muchos genios en esta época en los que vives. ¡Alguien te ha ayudado a resolver este problema! ¡Aunque, no se puede llamar perfecto!
Echemos un vistazo a varias soluciones para resolver el problema de no admitir etiquetas HTML5 que son compatibles con IE6/7/8:
1. JavaScript: Document.CreateElenment (......) Parte de la razón por la que no es compatible con IE6/7/8 es que no consideran que los pies de pie son una etiqueta HTML válida. Entonces, ¿no lo haremos solo una etiqueta? ¡La forma más directa es, por supuesto, crear JavaScript: Document.CreateElenment (......)!(función(){
var elemento = ['Header', 'pie de página', 'artículo', 'aparte', 'sección', 'nav', 'menú', 'hgroup', 'detalles', 'diálogo', 'figura', 'figcaption'],
len = element.length;
while (len-) {
document.createElement (elemento [i])
}
}) ();
Esto simplemente está creando algunas etiquetas HTML5 típicas para que puedan convertirse en etiquetas en IE6/7/8.
Alguien ha escrito un archivo JS completo, solo necesita presentarlo, así:
<!-[si LT IE 9]>
<script src = http: //html5shim.googlecode.com/svn/trunk/html5.js> </script>
<! [endif]-> también hay escritos
<!-[si LTE IE 9]>
<script src = http: //html5shiv.googlecode.com/svn/trunk/html5.js> </script>
<! [endif]-> La única diferencia entre html5shiv y html5shim es my v, ¡y no hay otra diferencia! Por supuesto, esto no es lo que dije. El texto original es: ... La única diferencia es que uno tiene una M y uno tiene AV, eso es todo.
Aquí queremos hacer una nota especial: es decir, el juicio de anotación único de IE:
LTE: ¿Es la abreviatura de menos o igual a, lo que significa menos o igual a.
LT: ¿Es la abreviatura de menos de lo que significa menos que?
GTE: ¿Es la abreviatura de mayor o igual, que significa mayor que o igual a.
GT: es la abreviatura de mayor que, que significa mayor que.
! : Significa no igual, lo mismo que el símbolo de juicio no igual en JavaScript
Aunque IE9 admite etiquetas HTML5, el soporte no es muy completo, por lo que también puede escribir LTE, que depende de su elección!
Por supuesto, no olvide especificar la propiedad de visualización de la etiqueta recién creada. En la mayoría de los casos, quiero que se bloquee la etiqueta:
encabezado, pie de página, artículo, aparte, sección, NAV, menú, hgroup, detalles, diálogo, figura, figcaption {display: block}
2. Métodos de etiquetas de anidaciónDe hecho, para decirlo sin rodeos, se debe a que las etiquetas semánticas de HTML5 Nest Divs y otras etiquetas disponibles, y luego solo escribe estilos para DIV. No estoy de acuerdo con este método de escritura. ¡Esto es mejor que hacerlo, dale a la etiqueta una identificación o clase semántica!
<!-[si LT IE 9]>
<estilo>
cuerpo> * .section {
Color: #FF0;
}
</style>
<! [endif]->
<estilo>
Sección. Sección {Color: #F00;
}
</style>
<Sect> <Div> Prueba de contenido ... </div> </section>
Pero si es similar a esta estructura, no es seguro usarlo :<Arr>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</am>
3. es decir, comentarios condicionales<!-[si LT IE 9]> <Viv> <
<!-[si IE 9]> <section> <
<!-[if! ie]> <!-> <section> <!-<
......
<!-[si LT IE 9]> </div> <! [Endif]->
<
<
Mira el juicio de comentarios único del IE nuevamente:
LTE: ¿Es la abreviatura de menos o igual a, lo que significa menos o igual a.
LT: ¿Es la abreviatura de menos de lo que significa menos que?
GTE: ¿Es la abreviatura de mayor o igual, que significa mayor que o igual a.
GT: es la abreviatura de mayor que, que significa mayor que.
! : Significa no igual, lo mismo que el símbolo de juicio no igual en JavaScript
¡Creo que todos entienden lo que está pasando! ¡Esta es una forma más dolorosa! Una gran cantidad de código HTML hace que el código que originalmente quería ser semántico sea aún más confuso. Y no es propicio para escribir estilos.
4. Use XMLNS para definir el espacio de vida del documentoXMLNS es la abreviatura del espacio de nombres XHTML, que es el llamado espacio de nombres. Al igual que la Declaración de Doctype, XMLNS también es una declaración. A diferencia de la declaración de Doctype todavía existe en los documentos HTML, XMLNS no existe en los documentos HTML. Los xmlns que generalmente vemos aparecen en documentos XHTML.
<html xmlns = http: //www.w3.org/1999/xhtml lang = en> Este es el espacio de nombres original de xhtml, que se simplificó después de html5.
<html lang = en> El método de los registros de Elco Klingen atrajo una atención generalizada al principio. Esta técnica contiene un espacio de nombres XML y utiliza elementos con prefijo de espacio de nombres, como:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/html5/">
<Body>
<html5: sección>
<!-Contenido->
</html5: sección>
</body>
</html>
El prefijo de: HTML5 no es una forma de escribir estándar, también puede usar otros caracteres: HL5 también está bien. Con el prefijo, IE reconoce nuevos elementos, lo que permite aplicar estilos. Funciona igual de bien en otros navegadores, por lo que al final, construyes con éxito los mismos elementos y el mismo estilo en cada navegador.
Este método tiene una falla clara: debe usar un espacio de nombres en forma de XML en documentos HTML, y también debe hacerlo en CSS:
html5/: sección {
Pantalla: bloque;
}
Entonces, ¿cómo es la compatibilidad con JS? Aquí hay una prueba deml
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/html5/">
<Evista>
<title>; html5 </title>
<meta charset = "gb2312">
<estilo>
html5/: sección {display: block; Ancho: 100px; Altura: 50px; Antecedentes:#F00; borde: 1px azul sólido; Color: #FF0; }
</style>
<script>
window.onload = function () {
alerta (document.getElementById ("Test"). Innerhtml + "--- id")
alerta (document.getElementsBytagName ("Sección") [0] .innerhtml + "--- TagName")
alerta (document.getElementsBytagName ("Sección") [0] .innerhtml + "--- uppercase")
}
</script>
</ablo>
<Body>
<html5: section id = "test"> content </html5: sección>
</body>
</html>
Los resultados de la prueba fueron probados por IE6/7/8, pero solo se pueden obtener ID en FixFox y Chrome, ¡por lo que este método no es un método aceptable!