Necesito hacer una página web simple recientemente.
Teniendo en cuenta la falta de experiencia frontal, para producir rápidamente, el proyecto es solo una herramienta y no tiene requisitos para el proyecto, por lo que elegí Bootstrap como marco web.
La intención original de escribir para aprender Bootstrap desde cero:
Después de leer la documentación de Bootstrap durante mucho tiempo, incluido el oficial (http://v3.bootcss.com/getting-started/) y el no oficial (http://www.runoob.com/bootstrap/bootstrap-tutorial.html), así como el simple blog de introducción escrito por otros (http://www.cnblogs.com/fnng/p/44460 47.html), y los comentarios sobre bootstrap en zhihu (https://www.zhihu.com/question/35237472, https://wwww.zhihihu.com/question/314092) Sentió que Bootstrap debería ser un marco muy útil, y no es difícil de aprender. Es una herramienta para la producción de alta velocidad, pero su flexibilidad no es suficiente para que los desarrolladores jueguen con ella como quieran. Además, hay demasiadas cosas en la parte delantera. Si no tiene un objetivo de aprendizaje y una ruta claros, puede caer fácilmente en los detalles interminables y no tener un resultado correspondiente, y se sentirá frustrado. Por lo tanto, decidí registrar mi camino de aprendizaje para poder revisarme y comenzar con la mayoría de los principiantes.
Comencemos con la plantilla más simple de Bootstrap:
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge"> <meta name = "viewport" content = "width = dispositivo-width, inicial-scale = 1" <<r!-el 3 meta * Mets * viewport "debe colocar primero * * cualquier otro contenido * debe * seguirlos! -> <title> Bootstrap 101 Template </title> <!-Bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim y respond.js para el soporte IE8 de los elementos html5 y los medios de comunicación-<!-Advertencia: advertencia: advertencia: la respuesta: la respuesta de la respuesta. -> <!-[if LT IE 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/rpond.js/1.4.2/ponder.min.js"> </script] </head> <body> <h1> ¡Hola, mundo! </h1> <!-jQuery (necesario para los complementos Javascript de Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <!-Incluya todos los complementos compilados (a continuación), o incluya archivos individuales según sea necesario-> <script src = "js/bootstrap.min.js"> </script> </body> </html>
Veamoslo uno por uno (uso # para explicación):
<! Doctype html> # significa que esta es una página HTML5
<html lang = "zh-cn"> #lang significa "lenguaje", que es un atributo de la etiqueta HTML. Este atributo le dice a los motores de búsqueda que mi página es una página china, que es conveniente para que los motores de búsqueda incluyan y no tiene impacto en la pantalla de la página. "ZH-CN" es un método de escritura de estándar ISO, que significa chino. "ZH" son las dos primeras letras de "Zhongwen" (si quieres decirle al navegador que es una interfaz en inglés, lang = "en" y "en" corresponden a las dos primeras letras de "inglés"), y "cn" es el código de país. (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)
<meta charset = "utf-8"> #meta la etiqueta es una etiqueta que facilita el navegador para analizar los archivos HTML. El atributo Charset le dice al navegador que el método de codificación de este archivo HTML es UTF-8.
<meta http-oquiv = "x-ua-compatible" content = "ie = edge"> El atributo #HTTP-Equiv le dice al navegador cuáles son la compatibilidad y otros detalles estipulados en este HTML. (//www.vevb.com/web/70787.html) #x-ua compatible El valor es una etiqueta que solo entra en vigencia en las versiones IE8 y posteriores de IE (IE9, IE10, 11, ...). Se utiliza para especificar el navegador para simular el método de renderizado de una versión específica del navegador IE. (Algunos artículos en Internet en realidad dicen que X-UA compatible es un marcador especial para IE8, que es simplemente engañoso!)
#¿Por qué hacer esto? Debido a que el IE anterior de Microsoft (IE6, IE7) no cumplió con el estándar W3C, los códigos de algunos sitios web utilizan los estándares antiguos de IE en lugar de los estándares W3C. A partir de IE8, Microsoft ha adoptado el estándar W3C.
#So puede usar este valor de atributo para forzar el método de renderizado del navegador. Al configurar content = "IE6", los usuarios también pueden mostrar páginas web HTML bajo el estándar IE6 normalmente en navegadores de IE8 y superior.
#Content = "IE = Edge" obliga al navegador a renderizar con la última versión de los estándares de IE que se pueden admitir. ¿Por qué hacer esto? Debido a que los navegadores de algunos usuarios se pueden establecer en "modo de compatibilidad", representan archivos HTML en función del estándar de IE anterior, y se producirán errores al encontrar el código HTML estándar W3C. Por lo tanto, cuando mi código es estándar W3C y no considera el soporte del antiguo estándar IE, forzar la última versión de la representación de IE que puede ser compatible en el navegador puede evitar errores de visualización causados por el "modo de compatibilidad". (Es decir, el usuario no necesita cambiar manualmente el modo de representación del navegador) <meta name = "viewport" content = "width = dispositivo-width, inicial-escala = 1"> #viewport especifica la configuración relevante de la ventana de visualización. Aquí el ancho en el contenido especifica el ancho de la pantalla, y la escala inicial especifica la relación de escala inicial. (Acerca de otras funciones: Establezca si el usuario puede escalar, relación de escala máxima, relación de escala mínima, etc., consulte: http://my.oschina.net/liangrockman/blog/380727)
<!-[si LT IE 9]>
<script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src = "// cdn.bootcss.com/respond.js/1.4.2/ corresponspond.min.js"> </script>
<! [endif]->
#Aquí hay un juicio de comentarios condicionales. Cuando la versión IE es más pequeña que IE9, Scrpit SRC toma los recursos CDN anteriores.
<script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
# Aquí está el archivo JS que enlaza jQuery y Bootstrap. Se coloca al final para acelerar la carga de la página web, es decir, primero muestre el contenido de la página web y luego cargue el archivo JS. Si se coloca en el frente, como en la etiqueta de cabeza, cuando la velocidad de Internet no es buena, se mantendrá atascado en el archivo JS de carga, y el contenido de la página web no se puede mostrar rápidamente, afectando la experiencia del usuario.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico