01. Introducción al
desarrollo front-end web 1. Descripción general del desarrollo front-end web
1) ¿Qué es el desarrollo web?
El desarrollo front-end es el proceso de crear interfaces front-end como páginas web o aplicaciones y presentarlas a los usuarios.A través de HTML, CSS, JavaScript y diversas tecnologías, marcos y soluciones derivados, se realiza la interacción de la interfaz de usuario de los productos de Internet.
Ha evolucionado a partir de la producción de páginas web, y el nombre tiene características obvias de la época. En la evolución de Internet, la producción de páginas web es un producto de la era Web1.0. El contenido principal de los primeros sitios web era estático, con imágenes y texto como parte principal, y el uso de los usuarios del sitio web también se basaba en la navegación.
Con el desarrollo de la tecnología de Internet y la aplicación de HTML5 y CSS3, las páginas web modernas son más hermosas, con efectos de interacción significativos y funciones más potentes.
La Internet móvil ha traído una gran cantidad de dispositivos terminales móviles de alto rendimiento y redes inalámbricas rápidas. HTML5 y node.jS son ampliamente utilizados, y están surgiendo varias bibliotecas de marcos.
2) Tecnología central de desarrollo front-end web
Lenguaje HTML "1" (lenguaje de marcado de hipertexto, equivalente a un marco completo, muy importante)
El dominio de HTML es el núcleo de una página web, un lenguaje estándar para crear páginas web y un lenguaje utilizado por los navegadores web, que elimina las barreras para el intercambio de información entre diferentes computadoras. Por lo tanto, es el lenguaje más utilizado en Internet y el idioma principal que constituye los documentos web. Aprender HTML es una condición básica para convertirse en desarrollador web.
HTML es un lenguaje de marcado que puede implementar páginas web y mostrarlas en un navegador. Como la última versión de HTML, HTML5 presenta una serie de nuevas tecnologías, que mejora enormemente la capacidad de admitir aplicaciones, de modo que la tecnología web ya no se limita a presentar contenido web.
Con el desarrollo de CSS, JavaScript, Flash y otras tecnologías, el poder de procesamiento de la Web para las aplicaciones ha aumentado gradualmente, y la experiencia del usuario de navegar por las páginas web ha mejorado considerablemente. Sin embargo, varias nuevas tecnologías en HTML5 han logrado avances cualitativos, haciendo que la tecnología web por primera vez se considere cercana a la tecnología nativa de aplicaciones nativas, y el desarrollo de aplicaciones web se ha convertido realmente en una opción para los desarrolladores.
HTML5 puede simplificar enormemente el trabajo de los desarrolladores. En teoría, un solo desarrollo puede ejecutarse en diferentes plataformas con la ayuda de navegadores, lo que reduce los costos de desarrollo. Esta es también una de las principales ventajas de la tecnología HTML5 que la industria generalmente cree. AppMobi, Motorola, Sencha, Appcelerator y otras compañías han lanzado herramientas de desarrollo relativamente maduras para soportar el desarrollo de aplicaciones HTML5.
CSS "2" (hojas de estilo en cascada, utilizadas para decorar marcos HTML, equivalentes a maquillaje, decoración)
Aprender CSS es un aspecto importante de la apariencia de la página web. CSS puede ayudar a que la página web se vea más bella.
JavaScript "3" (lenguaje de programación front-end, utilizado para hacer que la página interactúe, se muestre dinámicamente y permita que las cosas diseñadas vivan para ser interactivas)
Cuando se utiliza JavaScript, su nivel es muy bajo y su desarrollo es demasiado lento. Para que la página de desarrollo sea más rápida, en realidad encapsula algunos marcos de JS, similares a los módulos en Python, como jQuery, viewe.js, etc.
HTML, CSS y JavaScript se denominan tres espadachines para el desarrollo front-end.
Sistema operativo "4"
Necesita comprender los conocimientos básicos de Unix y Linux.
Servidor web "5"
Comprenda el servidor web, incluida la configuración básica de Apache, el dominio de las habilidades de configuración de htaccess.
2. Origen web
En 1984, Tim Berners Lee creó el primer sitio de navegación World Wide Web del mundo, el primer sitio web del mundo
En 1989, el equipo dirigido por Tim Berners-Lee en el CERN (Instituto Europeo de Física de Partículas) presentó un nuevo protocolo para Internet y un sistema de documentos que utiliza el protocolo. El equipo nombró a este nuevo sistema World Wide Web, que El propósito es permitir que los científicos de todo el mundo utilicen Internet para comunicar sus documentos de trabajo.
Este nuevo sistema está diseñado para permitir que cualquier usuario en Internet busque y recupere documentos de la base de datos de muchas computadoras que sirven documentos. A fines de 1990, el marco básico de este nuevo sistema se había desarrollado e implementado en una computadora en el CERN. En 1991, el sistema se trasplantó a otras plataformas informáticas y se lanzó oficialmente.
3. Características de la
Web La Web es una Web gráfica y fácil de navegar
y no tiene nada que ver con la plataforma. La
Web es una estructura distribuida. La Web
dinámica
es interactiva.
Aquí se agrega un poco de sentido común:
Marco C / S: Cliente / Servidor (cliente / servidor)
Generalmente jugamos juegos, el paquete descargado es relativamente grande, requiere una serie de entornos, los requisitos de configuración del cliente son muy altos y las diferentes plataformas tienen que desarrollar un software diferente.
B / S framework:
juego en línea Navegador / Servidor (navegador / servidor) , el cliente no necesita demasiada configuración, solo tiene un navegador, puede acceder al contenido compartido por el servidor, ahora use esto principalmente.
4. Cómo funciona la Web Por
ejemplo, una pregunta que se hace con frecuencia durante las entrevistas: ¿Cuál es el proceso general realizado después de ingresar a www.baidu.com en el navegador?
El navegador envía una solicitud al servidor DNS para resolver el nombre de dominio; el
servidor DNS resuelve el nombre de dominio a la dirección IP correspondiente y lo devuelve al cliente; el
navegador establece una conexión TCP con el servidor (el puerto predeterminado es 80); el
navegador envía un mensaje de solicitud HTTP;
El servidor responde con el mensaje de respuesta HTTP; el
navegador analiza el mensaje de respuesta y lo muestra en la página web; después de
recibir y enviar el mensaje, se libera la conexión TCP.
Los protocolos involucrados son:
Capa de aplicación: HTTP (protocolo de acceso WWW), DNS (servicio de resolución de nombres de dominio)
Capa de transporte: TCP (proporciona transmisión de datos confiable para HTTP), UDP (DNS usa transmisión UDP)
Capa de red: IP (transmisión y enrutamiento de paquetes de datos IP ), ICMP (proporciona detección de errores durante la transmisión de red), ARP (asigna la dirección IP del host de destino a una dirección MAC)
5, URL de introducción de
URL (localizador uniforme de recursos) localizador de recursos unificado, es decir, la URL, utilizada para acceder a la página Contenido
Composición:
tipo de protocolo: // dirección del servidor (puede escribir IP o nombre de host) (número de puerto) / ruta / nombre de archivo Si
no escribe el número de puerto, es el número de puerto predeterminado del protocolo.
Por ejemplo: http://www.westos.org /bbs/index.html
Repasemos los puertos comunes:
http: 80
https: 443
ssh: 22
mysql: 3306
redis: 6379
ftp: 21
02. Estructura de la página web HTML
1. Introducción
HTML HTML (Hyper Text Mark-up Language) es un lenguaje de marcado de hipertexto, un lenguaje que describe la estructura y presentación de los documentos de la página mediante etiquetas de marcado, que luego son analizadas por el navegador y luego Mostrar los resultados en la página web.
El hipertexto se refiere a hipervínculos
Las etiquetas se refieren a las etiquetas.
Editores y navegadores comunes:
Nota:
1). Los archivos HTML abiertos con un editor muestran texto, que se puede editar en texto.
2). El archivo HTML se abre con un navegador, y el navegador procesará el archivo en una página web de acuerdo con el contenido de la descripción de la etiqueta. La página web mostrada se puede saltar de un enlace de página web a otra página web.
2. La estructura básica de HTML
Como se muestra en la siguiente figura, es el contenido del marco de HTML. Cuando escribimos documentos HTML, los agregamos de acuerdo con esta plantilla.
De la siguiente manera, creamos un archivo .html relativamente simple de acuerdo con esta plantilla:
<!--注释在这里写，写完直接按ctrl+/ -->
<!--声明html-->
<!DOCTYPE html>
<!--表示是html文档-->
<html lang="en">
<!--html的头部，在页面中不会显示-->
<head>
<!-- 这里声明html文档的编码格式-->
<meta charset="UTF-8">
<!-- 编辑整个页面的标题-->
<title>标题示例</title>
</head>
<!--html的主体，在页面中真正显示的内容-->
<body>
<!-- <h1></h1>：是一级标题，里面还可以进行设置格式颜色等-->
<h1 style="color: crimson">标题一</h1>
</body>
</html>
Aquí presenta un software dedicado al desarrollo front-end web-WebStorm, este software se puede descargar e instalar directamente en el sitio web oficial. (La interfaz oficial del sitio web es la siguiente), este software es más conveniente en el proceso de desarrollo front-end web y también es relativamente liviano.
3. Tipos de documentos
Los dos tipos de documentos más utilizados son: html5 y xhtml 1.0
Aquí hablamos brevemente sobre la diferencia entre XHTML1.0, HTML4.01 y HTML5:
XHTML1.0 es un estilo XML HTML4.01.
XHTML1.1 está principalmente modularizado preliminarmente.
HTML5 es la próxima generación de HTML, reemplazando HTML4.01.
Antes del surgimiento de XHTML, su posición fue reemplazada por HTML5. HTML5 estipula dos formas de serialización, una es estilo HTML suelto y la otra es estricto estilo XML / XHTML.
La mayoría de las empresas usarán html5, y las que usan xhtml1.0 son generalmente las páginas de visualización de los departamentos gubernamentales relevantes.
La siguiente figura ilustra todo el proceso de desarrollo de HTML:
4. Especificaciones y comentarios
del documento xhtml ha formulado las especificaciones de escritura del documento. HTML5 puede observarse parcial o totalmente, dependiendo de los requisitos de desarrollo.
Todas las etiquetas deben estar en minúsculas.
Todos los atributos deben estar entre comillas dobles.
Todas las etiquetas deben estar cerradas.
Img debe agregarse con el atributo alt (descripción de la imagen)
. Puede insertar comentarios en el código del documento HTML. El comentario es la descripción y explicación del código. El contenido del comentario No se mostrará en la página, el método para insertar comentarios en el código html es:
<! - Este es un comentario->
Por ejemplo: en la figura siguiente, la primera y la tercera línea son comentarios.
03, etiquetas HTML
1, etiquetas de texto
2. Etiqueta de salto de línea
La pantalla es la siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验效果</title>
</head>
<>
<body>
<h1 style="color: blueviolet">标题一</h1>
<h2 style="color: red">标题二</h2>
<h3 style="color: yellow">标题三</h3>
<h4 style="color: green">标题四</h4>
<h5 style="color: black">标题五</h5>
<h6 style="color: blue">标题六</h6>
<br>
<i>斜体</i>
<em>斜体</em>
<b>加粗字体</b>
<strong>加粗字体</strong>
<cite>引用</cite>
<sub>下标</sub>
<sup>上标</sup>
<tt>居中显示</tt>
<u>字体加下划线</u>
<s>字体加删除线</s>
<strike>字体加删除线</strike>
s<sub>1</sub> = pi * r<sup>2</sup>
原价：<del>$100</del>
现价:<b style="color:red">$50</b>
<i>斜体</i>
<br/>
<em>斜体</em>
<br/><hr>
<br>
<p>
总想在一场如酥如丝的春雨中，撑着油纸伞穿梭于江南。可能没有布满青苔的大石板，没有杨柳拂堤的断桥，没有一个且行且谈笑的好友。就一个人，静静的起行。在那里，我可以遇到破土而出、正展现着它勃勃生机的小草，遇到拂身而来、吹面不寒的二月春风，遇到一个促膝而谈、志同道合的友人。
有人说，遇见，不过是在一定的地点，一定的时间，遇到一定的人或物，或许还有事情。但是在茫茫人海中，无数次擦肩的人又有几个是隐隐约约还存留着记忆的呢?没有心灵上的刻印，或许算不上是遇见吧。西湖三月，白素贞一袭轻衣走过，邂逅了一个儒雅书生，从此写就了一段刻骨铭心的爱情。草桥之上，梁山伯遇见祝英台，从十八里相送，到坟前的双双化蝶，为他们的爱情点开凄美的涟漪。
最美的遇见，不过初见。我们之所以愿意去记忆那些初遇的一颦一笑，只是因为这是两颗陌生而又神秘的心在相互碰撞。如春风吹着云，又如蜻蜓点着水，青涩而又温馨。有多少人曾怀念着往昔，怀念的第一次相逢，第一次微笑，因为在各自心里，那里承载的是心的起点。人生若只如初见，最美的画面不会因为时间的推移而消散殆尽，反而会因此愈念愈浓，直至如梦如画，直至永恒。
最暖的遇见，不过偶遇。如果说每一次初遇是云与风的交汇，那么我会相信每一次偶遇便是流星划过。没有计划、不经商量的，就那么匆匆地到来，该是有多欢喜。人生最大的悲痛永远不过是未知，然而最大的快乐也是未知。我们不能预知下一秒将遇到哪个人，也不能预测到你想遇见的人在何时遇到。人海还不一定茫茫，但机会总是渺渺。于是乎，我们不再刻意，一切都托付与机缘。当有一天，我们不期而遇，我们会发现这比任何一次彩排、任何一次计划都来得随意简单，但却是最为温暖。
</p>
<p>
佛祖座下弟子阿难曾说：我愿化身石桥，受那五百年风吹，五百年日晒，五百年雨淋，只求她从桥上经过。 因为在他看来，每一次遇见都足以永恒，哪怕那时的他已经是一座沧桑的古桥。我收起伞，尽管天上还飘着雨丝。我纵身于雾汽之中，听着雨珠在发间流淌的声音。蓦然回首，仅莞尔一笑，愿我以最美的姿态遇见你。
</p>
</body>
</html>
Resultados de visualización de la página web:
