El primer día de aprendizaje front-end --- 02

01

Hoy, aprendí principalmente algunos conocimientos básicos de computadora, dirección URL, composición de sitios web y algo de gramática básica de html. Preste especial atención al aprendizaje de la gramática básica.

web(*)

Sitio web: se combinan varias páginas web para formar un sitio web.

World Wide Web: una colección de innumerables sitios web y páginas web. world wide web, También abreviado como 3wo wwwo web.

¿Qué es el front-end (*)

El front-end y el back-end son como la relación entre un televisor y una torre de televisión. La torre de televisión envía la señal, la televisión recibe la señal y amplifica la señal para mostrar lo que hay en la señal.

El back-end enviará algunos datos y es necesario mostrar el front-end de los datos enviados.

[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

La importancia del front-end (*)

Combinado con el fondo de la era moderna, el front-end tiene las siguientes funciones:

• Realice el diseño de páginas web combinado con la estética de la gente moderna (páginas de los años 90, 2000 y 10).

  • Interfaz del sitio web de 1989 (la interfaz web original)

    

  • Interfaz del sitio web en 2000:

    

  • Interfaz del sitio web en 2010

    

• Combine la interfaz del sitio web en el entorno de big data.

  

  Los sitios web son cada vez más grandes y los usuarios son cada vez más. Es necesario garantizar la velocidad de acceso anterior bajo una gran cantidad de acceso y gran volumen de datos.

Nombre de dominio y dirección URL (***)

¿En qué se basa nuestra red para acceder entre sí ( IP地址), pero la dirección IP no es fácil de recordar, por lo que hay un nombre de dominio y un DNS?

192.168.13.61 A

10.201.203.11 B

• nombre de dominio

  • Nombre de dominio (inglés: nombre de dominio), abreviado como nombre de dominio, nombre de dominio, es el nombre de una computadora o grupo de computadoras en Internet compuesto por una serie de nombres separados por puntos, utilizados para identificar la ubicación electrónica de la computadora durante los datos transmisión (a veces también se refiere a la ubicación geográfica).

    www.baidu.com

    El nombre de dominio completo consta de tres partes:

    • Nombre de dominio de nivel superior: (nombre de dominio de primer nivel)

      • com, organización comercial
      • cn, China
      • red, organización de la red
      • org, organización sin fines de lucro
      • edu, educación
      • gobierno, agencia nacional
      • mil, organización militar
      • tecnología, aprender

      https://wanwang.aliyun.com/domain/mobi/?spm=5176.76129.1001.14.2f0e554aTnXhJi

    • dominio secundario

      Lo compramos nosotros mismos.

    • Nombre de la CPU

      www.baidu.com, Existe una organización comercial llamada baidu. Visiting es el anfitrión de www en el sitio web de baidu, una organización comercial.

  • El sistema de nombres de dominio (DNS, una base de datos distribuida que asigna nombres de dominio y direcciones IP entre sí) es un servicio central de Internet. Sirve como una base de datos distribuida que puede asignar nombres de dominio y direcciones IP entre sí, lo que permite que las personas puedan acceder Internet de forma más cómoda sin tener que recordar la cantidad de direcciones IP que la máquina puede leer directamente.

    www.baidu.com es un nombre de dominio que corresponde a la dirección IP 14.215.177.38. DNS es como una guía telefónica. Nos permite ingresar directamente el nombre www.baidu.com en lugar de la dirección IP 14.215.177.38. Después de ingresar directamente el nombre de dominio del sitio web, DNS convertirá el nombre en una dirección IP que la máquina pueda reconocer.

• URL

  www.baidu.comLlamada dirección URL (Uniform Resource Locator), se utiliza para indicar la dirección específica del recurso que se solicitará.

  http://www.ceshi.com:80/test/test.html?par1=var1&par2=var2#p

  • http: Nombre del protocolo, que le dice al servidor qué convención debe usarse para comunicarse con el cliente. httpEs opcional y httpse agregará automáticamente después de ingresar una dirección .

    http://localhost/

  • www.ceshi.com,dirección del servidor. Qué dirección debe solicitarse específicamente.

  • :80,Puerto. Representa la ventana desde la que se deben ingresar los datos. Opcional.

  • /test/test.html, Ruta del archivo, utiliza la ruta del archivo para acceder al recurso especificado en el directorio especificado en el servidor, puede haber varias rutas de archivo.

    C:\xampp\htdocsNos llamamos el directorio raíz del sitio web.

  • par1=var1&par2=var2, La cadena de consulta. Se utiliza para pasar valores al lenguaje de secuencias de comandos del lado del servidor.

  • #p, El identificador del fragmento.

  https://www.baidu.com/

  https://www.baidu.com/s?
  ie=utf8&
  f=8&rsv_bp=1&
  rsv_idx=1&
  tn=baidu&
  wd=oaliyun&
  fenlei=256&
  oq=%25E9%2598%25BF%25E9%2587%258C%25E4%25BA%2591&
  rsv_pq=b8b7b03d00093b6a&
  rsv_t=7a80mEN03j6OQBWI75zBB6g%2FZwScCBnONj%2BDPdcJsw1ZaAfLpUwwc3cCLvA&
  rqlang=cn&rsv_enter=1&
  rsv_dl=tb&
  rsv_btype=t&
  inputT=2367&
  rsv_sug3=16&
  rsv_sug1=14&
  rsv_sug7=101&
  rsv_sug2=0&
  rsv_sug4=2367

  ​

Composición de software de red (**)

La web también pertenece al software de red.

• Qué es el cliente y qué es el servidor.

  • Cliente: la parte que inicia la solicitud y recibe el mensaje del puerto del servidor. En la web, se refiere a nuestro navegador.
  • Servidor: Reciba la solicitud del cliente y dé una respuesta.

• Composición del sitio web

  • Cliente-navegador: El navegador es el cliente del servidor www. Envía varias solicitudes al servidor www, interpreta las respuestas devueltas por el servidor y permite a los usuarios interactuar con estos contenidos.

  • HTML (lenguaje de marcado de hipertexto)

    La esencia de una página web es HTML, que marca todas las partes de la página web para que el navegador las interprete.

  • CSS (hoja de estilo en cascada)

    HTML se utiliza para el marcado, pero el contenido de cada parte del marcado es desordenado y pobre en estética. Entonces usamos CSS para embellecer.

  • Lenguaje de secuencias de comandos del lado del cliente (JavaScript)

    • Script: un programa que no se puede ejecutar de forma independiente y debe tener un operador.
    • Cliente: navegador.
    • Lenguaje de secuencias de comandos del lado del cliente: programa que se ejecuta en el navegador.

    Comportamiento de control, utilizado para interactuar con el usuario.

    HTML, CSS, JavaScript: HTML se usa para el marcado, CSS se usa para el embellecimiento y JavaScript se usa para la interacción Su división del trabajo es muy clara. HTML es como una casa rústica, decoración CSS y JavaScript es como instalar algunos interruptores.

  • Servidor web

    También conocido como servidor www, por lo general lo que llamamos el lado del servidor se refiere al servidor web, que se utiliza para proporcionar comentarios al cliente solicitante.

    [Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-6PLXC9v4-1614844662803) (_ v_images / 20210215173541201_23072.png)]

  • Lenguaje de secuencias de comandos del lado del servidor

    Un lenguaje que funciona en el lado del servidor para ayudar al servidor web a completar la lógica empresarial.

    Java PHP Python

  • base de datos

    Un almacén para almacenar datos.

Cómo funciona la web hoy (**)

较为完整的webSe puede dividir en 浏览器, HTML, CSS, JavaScript, web服务器, 服务器端脚本语言, 数据库, y moderno web se utiliza en la mayoría de la parte delantera y la parte trasera de la separación de la arquitectura.

Las principales cosas que aprendemos en la interfaz son HTML, CSS y JavaScript. En cuanto a los marcos de Vue y React mencionados más adelante, todos son marcos encapsulados sobre JavaScript.

Navegador (*)

El navegador es la plataforma en la que se ejecutan las páginas web. Los navegadores más comunes incluyen IE, Firefox, Google (Chrome), Safari y Opera, etc. Por lo general, los llamamos los cinco principales navegadores. El sexto es el navegador Edge, que es el IE mejorado de Microsoft. Nuevo navegador integrado

Los llamados cinco navegadores principales se crearon debido a la diferencia en el kernel.

El llamado kernel se refiere al motor de renderizado, que es responsable de la interpretación de la sintaxis de la página web (como una aplicación de HTML, CSS, JavaScript bajo el lenguaje de marcado universal estándar) y de renderizar (mostrar) la página web. Por lo tanto, el llamado kernel del navegador suele ser el motor de renderizado utilizado por el navegador, que determina cómo el navegador muestra el contenido de la página web y la información de formato de la página.

Los diferentes núcleos del navegador tienen diferentes interpretaciones de la sintaxis de escritura de la página web. Por lo tanto, el efecto de representación (visualización) de la misma página web en navegadores con diferentes núcleos también puede ser diferente. Esta es también la razón por la que los escritores de páginas web necesitan probar páginas web en navegadores con diferentes núcleos. Mostrar la razón del efecto. Pero todos deben seguir los estándares W3C (HTML5, CSS3, estándares ES, etc.), por lo que habrá algunas diferencias entre navegadores y navegadores, pero la diferencia no es grande.

• IE IE es el núcleo de Trident. Después del lanzamiento de Windows, después del lanzamiento de Windows 10, IE nombró a su navegador integrado Edge. La característica más notable de Edge es el nuevo kernel.

• Firefox (Firefox) Gecko kernel, la característica de Gecko es que el código está completamente abierto, por lo que el grado de desarrollo es muy alto, los programadores de todo el mundo pueden escribir código para él, agregar funciones, pero lamentablemente ha disminuido en los últimos años, tal Como velocidad de apertura lenta y actualizaciones frecuentes, el compañero de equipo parpadea como un cerdo, el oponente se croma como un dios.

• Safari usa el famoso WebKit. Muchas personas ahora llaman erróneamente a webkit chrome (incluso si el núcleo de Chrome ya está parpadeando, el núcleo de webkit se usó antes).

• Chrome (Google) Blink kernel, desarrolló el motor de renderización del kernel Blink (es decir, el núcleo del navegador) en el proyecto Chromium, integrado en el navegador Chrome, Blink es en realidad una rama de Webkit, la mayoría de los navegadores domésticos usan el kernel Blink en la última versión

• El kernel de Opera Presto (obsoleto) es el kernel "predecesor" del navegador noruego Opera. ¿Por qué se llama el "predecesor"? Porque el último navegador Opera ha sido abandonado durante mucho tiempo e invertido en la adopción de Google, utilizando Blink.

• Otros navegadores domésticos han agregado sus propios shells de interfaz de usuario a los núcleos de navegadores extranjeros y se han convertido en sus propios navegadores.

La mayor parte del proceso de desarrollo ahora usa Chrome. Más del 90% del desarrollo utilizará cromo.

¿Qué es HTML (lenguaje de marcado de hipertexto) (*)

Lenguaje de marcado de texto: el idioma en el que el texto está marcado con un logotipo.

Súper: Los pantalones se usan afuera. El lenguaje de marcado de hipertexto tiene algo más basado en el lenguaje de marcado de texto, que puede marcar imágenes y videos.

Lenguaje de marcado de hipertexto (lenguaje de marcado de hipertexto), que utiliza símbolos de marcado para marcar y mostrar varias partes de una página web. HTML es un estándar y una especificación.

Historia de HTML (*)

1. Fue en 1991 que Tim-Lee escribió un documento llamado HTML, en el que utilizó más de 20 etiquetas para marcar el texto. Este es el legendario 1.0.
2. La primera especificación oficial de HTML es HTML2.0 emitida por IETF (Grupo de trabajo de ingeniería de Internet), de hecho no hay HTML1.0
3. Siguiendo el IETF, W3C (World Wide Web Consortium) se ha convertido en el fabricante de estándares de seguimiento de HTMl. Después de mediados de la década de 1990, el W3C actualizó HTMl varias veces hasta que se lanzó HTMl4.01 en 1999.
4. La versión revisada después de HTMl4.01 es xhtml1.0 (x significa extensible). De hecho, el contenido de la especificación XHTML1.0 es exactamente el mismo que HTML4.01, sin agregar ningún elemento nuevo o atributos nuevos. Las únicas dos especificaciones El La diferencia es que la gramática HTML tiene diferentes regulaciones. HTMl brinda a los desarrolladores mucha libertad para escribir elementos y atributos de acuerdo con sus deseos. Sin embargo, XHTML requiere que los desarrolladores cumplan con las reglas XML, y las reglas XHTML1.0 requieren reglas más estrictas., Requiere todas las etiquetas y atributos deben estar en minúsculas.
5. Más tarde, para estar más estandarizado, W3C lanzó xhtml1.1, pero muchos fabricantes de navegadores no cooperaron y no verificaron la especificación de xhtml.
6. El W3C comenzó a desarrollar XHTML2, pero XHTML2 no es compatible con todo el contenido web, incluso con la versión anterior de HTML.
7. En ese momento, algunas personas comenzaron a oponerse a XHML 2.0, especialmente representantes de opera, apple y moailla, querían apoyar la versión anterior y desarrollar algunas características nuevas, pero fueron rechazadas.
8. Más tarde, crearon la organización WHATWG y comenzaron a desarrollar algunas especificaciones, que fue el antecesor de HTML 5. Más tarde, debido al lento avance de XHTML2.0, la gente se mostró reacia a usarlo. Entonces, el W3C comenzó a negociar con la organización WHATWG para aceptar HTMl5.
9. El 28 de octubre de 2014, HTML 5.0, W3C lanzó oficialmente Recomendaciones HTML 5.0

HTML5 se utiliza de forma predeterminada durante el desarrollo, y otros navegadores antiguos solo se consideran bajo requisitos especiales.

Empezar conHTML4，CSS2, -》 HTML5、CSS3

Sintaxis HTML (****)

1. Cree un archivo de texto y cambie el nombre del sufijo axxx.html

2. Abra el archivo html y escriba un párrafo

3. Haga clic derecho en el editor- "Abrir en el navegador (esta forma es para acceder a través del servidor)

   http://localhost:52330/1.html

4. Además <marquee>是我要标记出来的内容</marquee>, lo que hay dentro se <marquee>llama etiqueta. Es la unidad más básica y la parte más importante de HTM.

5. <标签名></标签名>Este formato se llama doble etiqueta. El frente <标签名>representa el principio y </标签名>el final. Las dos letras inglesas entre el principio y el final son las mismas. Aparecieron en parejas.

6. <标签名 />, Esto se llama etiqueta única (etiqueta de cierre automático), no aparece en pares y el resultado final /se puede agregar o no.

   <br />Etiqueta de nueva línea.

7. htmlLa etiqueta no distingue entre mayúsculas y minúsculas. Sin embargo, se recomienda usar minúsculas.

8. loop="3"Este tipo de atributo se utiliza para modificar y controlar la etiqueta, incluso si no escribe un determinado atributo, el atributo tendrá un valor predeterminado.

   El formato del atributo:属性名="属性的值"

   • Los atributos deben estar escritos en la etiqueta.
   • El valor del atributo puede incluirse entre comillas simples, comillas dobles o sin comillas. Se recomienda utilizar comillas dobles.

9. Se pueden usar varios atributos en una etiqueta. Y no se distingue el orden de múltiples atributos.

10. Cómo representar el color:

    1. Usa palabras en inglés directamente.

    2. Está representado por un valor hexadecimal de 6 dígitos.

       0~9

       0~9a~f

       Divida los 6 dígitos en tres grupos y las subtablas representan la proporción de rojo, verde y azul.

       <MARQUEE width="50" loop="3" bgcolor="#FFCD43">李沛华</MARQUEE>

11. Manejo HTML de espacios y retornos de carro:

    1. Uno o más espacios en HTML se tratarán como un solo espacio.
    2. Un retorno de carro o varios retornos de carro en HTML también se tratarán como un espacio.

12. entidad

    Hay algunos caracteres en HTML que están reservados por el sistema o que no se pueden imprimir, por lo que debe utilizar entidades para que estos caracteres se utilicen normalmente.

    Entidad: una cadena de números y caracteres especiales que se utilizan para representar estos caracteres especiales.

    formato:&字母;

    Espacio: 

    <：<

    >：>

    &:&

    "："

    '：'

13. Anidamiento de etiquetas

    Las etiquetas individuales se pueden anidar dentro de las etiquetas dobles o las etiquetas dobles se pueden anidar. El código que escribiremos en el futuro es todo anidamiento de etiquetas.

14. para resumir:

    <标签名 属性1="值1" 属性2="值2">要标记的内容</标签名>

    <标签名 属性1="值1" 属性2="值2" />

15. Comentario

    <!-- 要注释的内容 -->

    Algunas cosas no quiero, pero no quiero eliminarlas todavía. Puedes comentarlo en este momento.

    1. Explique el significado del código.
    2. Al depurar código.

    shift + alt + a

    ctrl + /

    ​

    ​

    ​

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<head>标签Contenido en (****)

<body>标签Contenido en ()