Web HTML de tres piezas: descripción general de la Web (1)

HTML web de tres piezas (1)

Descripción general de la tecnología de desarrollo web front-end

1.1 Resumen web

origen

En 1980, Tim Berners (Tim Berners-Lee) construyó un proyecto-INQUIRE en el Laboratorio Europeo de Física Nuclear. Esta es una base de datos de edición en línea de hipertexto similar a Wikipedia. En marzo de 1989, escribió un artículo en el que mencionaba un modelo de gestión más sofisticado: la World Wide Web. Colaboró ​​con Robert Cailliau en 1990. El 13 de noviembre de 1990, escribió la primera página web en una estación de trabajo NeXT para hacer realidad su idea. Más tarde, esta estación de trabajo NeXT se convirtió en el primer servidor de Internet del mundo. Durante las vacaciones de Navidad del mismo año, diseñó un conjunto de todas las herramientas necesarias para realizar el trabajo en red: el primer navegador web (también editor) y el primer servidor web.

El 6 de agosto de 1991, se publicó oficialmente un artículo sobre la World Wide Web en el grupo de noticias alt.hypertext. Marcó la primera aparición del servicio público World Wide Web en Internet.

Otro gran avance de Tim Berners es el injerto de hipertexto en Internet. E inventó un sistema de autenticación único para los recursos de la red global: Uniform Resource Indentifier (URI).

Luego, para evitar que unas pocas personas controlaran la red mundial, Tim organizó el Consorcio World Wide Web, o W3C. Comprometidos con guiar la Web hacia su mayor potencial. Las diversas versiones del acuerdo HTML son de la reunión del W3C.

1.2 Características de la Web

• 1. Interfaz gráfica y fácil de navegar

  La Web es muy popular, puede mostrar color y texto en la misma página al mismo tiempo, mientras que Internet solo puede mostrar información de texto antes. Es muy conveniente navegar al mismo tiempo, simplemente salta de un enlace a otro.

• 2. Independencia de la plataforma

  No importa qué plataforma sea el sistema informático, puede acceder a la WWW a través de Internet sin restricciones de plataforma.

• 3. Estructura distribuida

  Una gran cantidad de información de imágenes, audio y video ocupará mucho espacio en el disco, y es difícil predecir cuánta información hay por adelantado. Para la Web, la información puede colocarse en diferentes sitios y no es necesario recopilarla. Al navegar, solo necesita apuntar su navegador al sitio. Eso es darse cuenta de que la información de un sitio no está necesariamente integrada físicamente de manera lógica.

• 4. Dinámico

  La información del sitio se puede actualizar y, si se puede garantizar el tiempo real, se puede lograr la dinámica.

• 5. Interactividad

  La interactividad de la Web se refleja en primer lugar en sus hipervínculos, y el orden de navegación del usuario está completamente determinado por él. Además, se puede obtener información dinámica desde el servidor expresando el formulario de Formulario. El usuario envía una aplicación al servidor y el servidor devuelve información de respuesta de acuerdo con la solicitud del usuario.

1.3 Cómo funciona la web

Cite una imagen para ilustrar:

Descripción del proceso: El
usuario envía una solicitud- "El navegador y el servidor establecen una conexión-" El navegador encapsula los datos de la solicitud en un formato que se ajusta al protocolo (encabezado de la solicitud, cuerpo de la solicitud) - "El servidor recibe la solicitud del usuario-" La solicitud se analiza y procesa- "Volver Respuesta a la solicitud correspondiente (cuerpo de la respuesta, encabezado del mensaje de respuesta): "El navegador analizará y mostrará la información al usuario después de recibirla.

La solicitud de entrada es la URL y, a continuación, el solucionador de nombres de dominio resuelve el nombre de dominio, se accede al servidor web de la dirección IP especificada de acuerdo con el resultado de la resolución y se envía la solicitud HTTP.

1.4 Desarrollo de front-end web

Era Web1.0

En la producción de páginas web, el sitio web es solo el editor de información, el contenido principal se presenta de manera estática y los usuarios son solo visitantes del sitio web.

Era Web2.0

Reconstruya el contenido del sitio web y utilice HTML + CSS + Javascript, DIV, DOM, AJAX y otras tecnologías para lograr la optimización general del sitio web y la mejora de la experiencia del usuario. Países desarrollados: personal de front-end: personal de back-end = 1: 1. China todavía carece de personal de front-end.

Por lo tanto, los ingenieros de desarrollo de front-end que surgieron en la era Web2.0 reciben cada vez más atención.

1.5 Tecnología de desarrollo web front-end

1.5.1 Estándar de desarrollo web HTML Three Musketeers

HTML (lenguaje de marcado de hipertexto) es un lenguaje de marcado de hipertexto. Es un lenguaje de marcado en lugar de un lenguaje de programación porque no requiere compilación. HTML es la estructura de las páginas web. Utiliza marcado para describir páginas web. El contenido de la página web incluye títulos, subtítulos, párrafos, tablas, formularios, etc.

Documento HTML

Un archivo de texto compuesto por etiquetas HTML y texto sin formato que se utiliza para describir una página web. Los navegadores web pueden analizar archivos de este tipo y mostrarlos en forma de páginas web.

versión	hora
HTML1.0	Junio ​​de 1993
HTML2.0	Noviembre de 1995
HTML3.2	Enero de 1996
HTML4.0	Diciembre de 1997
HTML4.01	Diciembre de 1999
HTML5	Octubre de 2014

URL del localizador uniforme de recursos

También se llama Localizador uniforme de recursos (Localizador uniforme de recursos). Podemos entenderlo como la dirección de una página web. Es la dirección de recurso estándar (dirección) en Internet.

Tipo de protocolo de composición: // dirección del servidor (número de puerto) / ruta / nombre de archivo

• protocolo

  如 HTTP, HTTPS, ftp, archivo

• Nombre de dominio del host y ruta (puerto, etc.)

  http://info.cern.ch/www20/
  http:/www.enu.cn/kexuetansuo_12385/index.html
  ftp://ftp.pku.edu.cn/
  

• La dirección específica del recurso de host

Protocolo y nombre de dominio de host con un //resto separado con /.

Servidor web

También llamado sitio web, se refiere a un sitio que proporciona servicios de acceso web en Internet. Un todo orgánico compuesto por software y hardware. La dirección IP y el nombre de dominio deben asignarse al servidor web para proporcionar servicios web externos. El número básico de la arquitectura es la estructura B / S. La primera página web que ve un usuario también se llama página de inicio, por lo que el diseño de la página de inicio es muy importante.

Hipervínculo

Utilice <a></a>etiquetas para importar hipervínculos. Las páginas web se componen de varios hipervínculos. ¡Los hipervínculos web son importantes!

<a href='https://www.baidu.com'>百度百科</a>

1.5.2 Estándar de desarrollo web Three Musketeers CSS (hoja de estilo en cascada)

Debido a que NetScape y Microsoft continúan agregando nuevas etiquetas y atributos HTML a la especificación HTML en su software de navegador, resulta difícil que el contenido del sitio web sea independiente de la capa de presentación del sitio web. La organización W3C asume la misión de la estandarización HTML. Se creó un estilo fuera de HTML4.0. Todos los navegadores principales admiten CSS (hojas de estilo en cascada)

El papel de CSS

La hoja de estilo en cascada (CSS) también se denomina hoja de estilo en cascada. Puede controlar eficazmente el diseño de la página, la fuente, el color y otros efectos con mayor precisión. Solo necesita realizar algunas modificaciones simples en el código correspondiente para cambiar diferentes partes de la misma página. El uso de la tecnología CSS tiene como objetivo resolver el problema de la separación del contenido y el rendimiento web.

CSS es un lenguaje de marcado que el navegador analiza directamente. Los estándares CSS son desarrollados y mantenidos por el trabajo CSS del W3C.

ejemplo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset='utf-8'>
    <title>CSS样式表应用</title>
    <style type="text/css">
    p{
     
     
      font-size:24px; /*设置字号*/
      font-family:黑体;/*设置字体*/
      text-indent:2em;/*设置首行缩进*/
      color:#FF0000;/*设置颜色*/
    }
    #div1 p{
     
     
      font-size:18px;
      color:blue;
      border:1px doublle #000099;/*边框样式*/
    }
    </style>
  </head>
  <body>
    <p>第一个段落</p>
    <div id="div1" class="">
     <P>图层段落</p>
    </div>
  </body>
</html>

Pantalla de efectos:

Historia de desarrollo

• CSS1: Publicado el 17 de diciembre de 1996, estándar recomendado por W3C

• CSS2: lanzado el 11 de enero de 1999, estándar W3C, soporte agregado para medios (impresoras y dispositivos auditivos), fuentes descargables

• CSS3: Está previsto dividir CSS en módulos más pequeños. Estos módulos se dividen en modelo de caja, modelo de lista, método de hipervínculo, modelo de idioma, fondo y borde, características del texto, diseño de varias columnas, etc.

1.5.3 El JavaScript del estándar de desarrollo web Three Musketeers

Origen

JavaScript es un lenguaje de secuencias de comandos del lado del cliente impulsado por objetos y eventos con relativa seguridad. Al mismo tiempo, también es un lenguaje de secuencias de comandos muy utilizado en el desarrollo web del lado del cliente, que a menudo se utiliza para agregar funciones dinámicas a HTML. Como responder a diversas operaciones del usuario. Diseñado originalmente por Brendan Eich de Netscape (Brandon Eich), fue desarrollado a partir de LiveScript de Netscape y creó un prototipo y heredó un lenguaje de script cliente de tipo dinámico orientado a objetos. Solo Netscape cooperó con Sun y cambió su nombre a JavaScript. Al mismo tiempo, ECMA (Asociación Europea de Fabricantes de Computadoras) formuló el estándar ECMAScript basado en JavaScript.

Composición de JavaScript

Un JavaScript completo consta de tres partes diferentes:

• Núcleo (EMCAScript)
• Modelo de objetos de documento (DOM)
• Modelo de objetos del navegador (modelo de objetos del navegador, BOM)

Javascript es en realidad un documento de archivo de texto, que debe estar incrustado en el documento HTML cuando se usa. Entonces, cualquier editor de documentos puede desarrollar programas JavaScript.

<!doctype html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>JavaScript的简单应用</title>
  </head>
  <body>
  <script>
  document.write("hello,World");/*直接在浏览器视窗显示*/
  alert("hello,World");/*开启对话窗显示*/
  </script>
  </body>
</html>

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-sanguijuelas, se recomienda guardar la imagen y subirla directamente (img-GqXRtNti-1598152051197) (2020-08-23-10-07-05.png)]

1.5.4 DOM HTML

HTML DOM es la abreviatura de (Document Object Meodel) modelo de objeto de documento HTML. De acuerdo con la especificación DOM de W3C, DOM es una interfaz independiente del navegador y de la plataforma que permite a los usuarios acceder a otros componentes estándar en la página. La combinación de DOM y JavaScript da cuenta de la separación de comportamiento y estructura de las páginas web.

El origen de DOM
se remonta a la "guerra de navegadores" entre Microsoft y Netscape a finales de la década de 1990. Para luchar a muerte en JavaScript y JScript, las dos partes agregaron potentes funciones de navegador a gran escala. Como resultado, los navegadores que no son de Microsoft no pueden mostrar páginas web normales. DOM resuelve el conflicto entre JavaScript de Netscape y JScript de Microsoft. Proporciona un método estándar para procesar documentos HTML o XML para diseñadores y desarrolladores web.

HTML DOM define un método estándar para acceder y manipular documentos HTML. JavaScript puede reconstruir todo el documento HTML, pero necesita obtener acceso a los elementos del documento HTML. Esta entrada, junto con operaciones como mover, agregar y eliminar elementos HTML, debe obtenerse a través del DOM.

Estructura DOM

DOM es una colección de nodos o fragmentos de información organizados en un modelo jerárquico. Planifique toda la página como un documento compuesto por nodos. Permitir a los desarrolladores recorrer la información de los nodos. Como se muestra en la figura: se considera una estructura basada en árboles o en objetos

Nivel DOM HTML

• HTML DOM Level1 se lanzó en octubre de 1998, la especificación recomendada por W3C, incluidos los módulos DOM Core y DOM HTML
• HTML DOM Level2 introduce vistas DOM, eventos DOM, estilos DOM, recorrido DOM y plantillas; utilizado para manejar nuevos tipos de interfaz
• HTML DOM Level3 presenta un método para cargar y mantener documentos de una manera unificada, incluido el nuevo módulo DOM Load and Save y los métodos de validación DOM para expandir aún más el DOM

1.5.5 BUENO

BOM (Browser Object Model) también se denomina modelo de objetos de navegador. El modelo de objetos del navegador define la interfaz de cada componente funcional del navegador que JavaScript puede operar. Proporciona diagramas y métodos operativos para acceder a varias partes funcionales del documento (como la propia ventana, las partes funcionales de la pantalla, el historial del navegador).

La lista de materiales se ocupa principalmente de las ventanas y marcos del navegador, pero generalmente las extensiones de JavaScript específicas del navegador pueden considerarse parte de la lista de materiales. Estas extensiones incluyen: soporte para cookies, abrir nuevas ventanas del navegador, ajustar el tamaño, etc.

Los objetos comunes de la lista de materiales son: ventana, navegador, pantalla, historial, ubicación

1.5.6 AJAX

AJAX (Asynchronous JavaScript and XML) también se denomina JavaScript asincrónico y XML y es una de las tecnologías más utilizadas en la era Web2.0. Es una combinación de múltiples tecnologías. Presentación estandarizada usando XHTML y CSS, visualización e interacción dinámicas usando DOM, e interacción y procesamiento de datos usando XML y XSTL. Más importante aún, rompe la combinación de tecnología convencional de usar la recarga de páginas.

Principio de funcionamiento
El núcleo de AJAX es el objeto JavaScript XMLHTTPRequest. Este objeto se introdujo por primera vez en Internet Explorer 5 y es compatible con la tecnología de solicitud asincrónica. Puede utilizar JavaScript para realizar una solicitud al servidor y procesar la respuesta sin bloquear al usuario.

A través de AJAX, puede usar el objeto XMLHTTPRequest de JavaScript para comunicarse directamente con el servidor, sin la necesidad de volver a cargar la página para interactuar con el servidor web.

AJAX utiliza la transferencia de datos asíncrona (solicitud HTTP) entre el navegador y el servidor web, de modo que una página web puede solicitar una pequeña cantidad de información del servidor en lugar de toda la página.

1.5.7 jQuery

jQuery es una biblioteca de JavaScript entre navegadores que simplifica la operación entre HTML y JavaScript. Es un excelente marco de JavaScript. Propósito: "Escriba menos, haga más" -escriba menos código y haga más.

Cómo agregar páginas web en jQuery

Podemos descargar la última biblioteca de archivos de jQuery en el sitio web oficial de jQuery y luego agregarla a la página web de las siguientes maneras:

<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
</head>

Alternativa a jQuery

Si no desea almacenar la biblioteca de archivos jQuery en su computadora, puede cargarla desde goole o la red de distribución de contenido de Microsoft:

1, CDN similar a Google

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" ></script>
</head>

2, CDN de Microsoft

<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" type="text/javascript" ></script>
</head>

Características de jQuery
Dado que es una biblioteca de funciones de JavaScript, las características son las siguientes:

• Selección de elementos HTML, operación de elementos
• Operaciones CSS
• Función de evento HTML
• Animación y efectos especiales de JavaScript
• AJAX
• Utilidades
• Recorrido y modificación de DOM HTML

Programa de ejemplo

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery的简单应用</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" type="text/javascript" ></script>
    <script>
      $ (document).ready(function(){
     
     
        $ ("p").click(function(){
     
     
          $ (this).hide();
        });
      });
    </script>
  </head>
  <body>
    <p>你点击我我会隐藏</p>
    <p>你点击我我也会隐藏</p>
    <p>你也要点击我！</p>
  </body>
</html>

1.6 Ejercicios y experimentos

1. Preguntas de opción múltiple

Pregunta equivocada:

• La empresa que diseñó JavaScript fue Netscape, no Sun

2. Complete los espacios en blanco

Pregunta equivocada:

• Los documentos HTML son archivos de texto compuestos por etiquetas HTML y texto sin formato.
• El nombre completo de AJAX es JavaScript y XML asíncronos.
• El nombre completo de CSS es Hoja de estilo en cascada.
• El formato de la URL es: tipo de protocolo: // nombre de dominio (puerto) / ruta del recurso