Introducción a web front-end y java

Acerca de la introducción del front-end web
1. División de la estructura del software 1. Estructura
C / S: la interacción entre Cliente (cliente) y Servidor (servidor). Características: El software del cliente debe actualizarse para utilizar la versión superior del servidor. Por ejemplo: Alibaba, etc.
2. Estructura B / S: la interacción entre el navegador y el servidor. Características: El software en el lado del navegador puede acceder al sitio web en el lado del servidor sin actualizaciones específicas. Por ejemplo: Netease News, etc.
JavaWeb / EE se basan en la estructura B / S.
2. Comprensión básica del
sitio web Las aplicaciones basadas en la estructura B / S se denominan sitios web. Composición: se compone de muchas etiquetas html.
3. La organización W3C
estandarizó la escritura de html, css y js (javascript). Entre ellos:
html: estándares estructurados.
css: embellece el estilo de las páginas web.
javascript: estándares de comportamiento.
4. HTML (lenguaje de marcado de hipertexto)
1. Estructura del lenguaje HTML
Introducción a web front-end y java
2. Etiquetas comunes HTML
(1) Etiquetas de texto comunes Etiquetas de
título: h1 ~ h6 (las fuentes se vuelven más pequeñas a su vez)
Etiquetas de sangría: blockquote
Etiquetas de párrafo: p
etiqueta de salto de línea: <br/>
etiqueta de fuente: fuente
arriba / subíndice etiqueta: sup / sub
etiqueta de línea horizontal: hr
como está etiqueta de salida: pre
(2) etiqueta de imagen img
Introducción a web front-end y java
(3) etiqueta de tabla tabla
Introducción a web front-end y java
(4) formulario de etiqueta formulario (énfasis )
Rol: Recopilar datos ingresados ​​por el usuario.
Escenarios de aplicación: a. Iniciar sesión. Ingrese la información básica del nombre de usuario (nombre de usuario, contraseña, etc.) → haga clic en iniciar sesión → enviar al fondo del sistema → el sistema verifica si el usuario existe → si existe, el inicio de sesión es exitoso, de lo contrario falla. b. Registro. Recopile información de entrada del usuario → envíe antecedentes → base de datos del servidor para verificar si hay un nombre de usuario actual, si hay una falla en el registro, si no, se realizará correctamente.
Atributos importantes:
acción: dirección enviada (archivo de recursos o URL (localizador uniforme de recursos)).
método: método de envío, comúnmente utilizado para obtener y publicar. La diferencia entre obtener y publicar es la siguiente:
Obtener método de envío: a. Ponga la información del usuario en la barra de direcciones (inseguro); b. El tamaño del archivo enviado no puede exceder los 64 kb.
Método de envío de publicaciones: a. La información del usuario no se mostrará en la barra de direcciones (seguro); b. No hay límite para el tamaño del archivo enviado.
onsubmit: indica si el formulario actual se envió correctamente. verdadero: el envío se ha realizado correctamente. falso: el envío falló.
nombre: el atributo de nombre en la etiqueta del formulario debe especificarse para enviarlo al fondo.
Introducción a web front-end y java
Ejemplos:
Introducción a web front-end y java
(5) Etiqueta de hipervínculo a
: a. Conectarse a un archivo de recursos o dirección de recursos (URL); b. Utilizar como enlace de anclaje.
Cuando
esté bajo la misma página html: a. Anchor <a name="anchor name"> anchor name </a>
b. Crear salto <a href="# anchor name"> jump name < / a>
En diferentes páginas html:
a, anclar <a name="anchor name"> anchor name </a>
b, crear una marca de salto
c, saltar nombre <a href = "archivo de recursos O dirección de recurso # nombre de anclaje ">

href: el archivo de recursos o la dirección a la que conectarse.
objetivo: la forma de abrir el archivo de recursos. Valores de atributo comunes: _self (abrir directamente en la ventana actual), _blank (abrir una nueva ventana).
Protocolo de uso común:
archivo: // protocolo de archivo local.
http: // ejecute el proceso usted mismo. Verifique si hay una ip correspondiente al nombre de dominio en el archivo de hosts. En caso afirmativo, llame al programa para acceder, si no, acceso al funcionamiento de la red.
trueno: // Acuerdo de trueno.
mailto: // protocolo de correo.
(6) Carácter de escape (debe agregar un punto y coma)
Espacio: & nbsp; <: ⁢>: & gt Marca registrada: & reg; Copyright: & copy;
5. CSS (Hoja de estilo en cascada)
1. Tres formas de uso
( 1)
Atributo de estilo de etiqueta de estilo en línea : estilo designado
Desventajas: el uso mixto del atributo de estilo y la etiqueta html no favorece el mantenimiento posterior
(2) Estilo interno (en la etiqueta principal, etiqueta de estilo de escritura)
<style type = "text / css">
etiqueta Nombre {
estilo de escritura;
}
</style>
(3) Estilo externo
a. Cree un
selector de archivos css independiente con un sufijo de .css {
estilo de escritura;
}
b. Importe archivos css externos
<link href = "xxx. css "rel =" hoja de estilo "
2. selector de css
(1) selector de
etiquetas nombre de etiqueta {
atributo de css: valor de atributo de css;
}
(2) selector de id
# valor de atributo de id {
atributo de css: valor de atributo de css;
}

                                    a. Si una etiqueta es seleccionada tanto por el selector de etiquetas como por el selector de id, el selector de id tiene una prioridad más alta que el selector de etiquetas. 
                                    b. En la misma página html, no se puede asignar el mismo atributo de identificación a varias etiquetas. Si tiene el mismo nombre, no se puede obtener cuando js obtiene el objeto de etiqueta. getElementById ("valor de atributo de id"). 
                (3) Selector de 
                          clase, valor de atributo de clase { 
                                                          atributo css: valor del atributo css; 
                                                                         }   
                                 En la misma página html, varias etiquetas pueden tener el mismo atributo de clase de nombre. 
                (4) Selector de unión (seleccione varias etiquetas al mismo tiempo, entre las etiquetas está ",") 
                          selector 1, selector 2, ... { 
                                                                             atributo css: valor del atributo css; 
                                                                                            } 
                (5) selector de intersección (seleccione varias etiquetas al mismo tiempo Con espacios entre etiquetas)
                          Selector 1 Selector ...... { 
                                                                             atributo css: valor del atributo css; 
                                                                                         } 
                (6) Selector de pseudo-clase (una pseudo-clase representa un estado) 
                         ! [] (Https://s4.51cto.com/images /blog/201803/29/e18abb87af4739bad21f9c9592c93136.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100g_se,x_10,y_10,shapedow_90 
            (atributos de uso común) 3. 
                      Color: color  
                                Altura de la línea: altura de la línea
                                Espaciado entre caracteres (la distancia entre palabras): espaciado 
                                entre letras (la distancia entre palabras): espaciado entre palabras
                                Alineación de texto: alineación de 
                                texto Decoración de texto: decoración de texto Valores de atributo comunes: subrayado (subrayado), ninguno (sin subrayado), sobrelínea (sobrelínea), línea-aunque (línea media). 
                (2) 
                        ¡ Atributos de fuente ! [] (Https://s4.51cto.com/images/blog/201803/29/a8e8738cfda5e0604b4d025926b05b1b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5ag6ise, , x_10, y_10, shadow_90, type_ZmFuZ3poZW5naGVpdGk =) 
                (3) Atributo de 
                        fondo color de fondo: color de fondo. 
                                background-image: imagen de fondo.
                                background-repeat: establece el modo de repetición de la imagen de fondo y si se debe repetir, valores de atributo comunes: repeat (repetición de los ejes xey, valor predeterminado), repeat-x (repetición horizontal), repeat-y (repetición vertical), ni- repetir (no repetir) 
                                posición de fondo: establece la posición inicial de la imagen de fondo. Valores de atributo comunes: la posición de visualización de la imagen (arriba, centro, abajo), la posición de la imagen en el navegador (izquierda, centro, derecha). 
                                Atributo de taquigrafía de imagen de fondo: fondo: color, dirección de imagen, método de repetición, 
                atributo de lista de posición inicial (4) 
                         ! [] (Https://s4.51cto.com/images/blog/201803/29/bbc2e896ce4d30673b5be07cd51081d4.png?x-oss- process = image / watermark, size_16, text_QDUxQ1RP5Y2a5a6i, color_FFFFFF, t_100, g_se, x_10, y_10, shadow_90, type_ZmFuZ3poZW5naGVpdGk =) 
                (5) Atributo de formulario 
                         border-collapse: colapso. Combina los bordes de la mesa en un solo cuadro. 
                                 border-color: atributo abreviado del color del borde. a. El orden predeterminado del color del borde: superior, derecho, inferior, izquierdo (en el sentido de las agujas del reloj); b. Si no se establece un lado del color del borde, se tomará el valor del color del lado opuesto. 
                                 border-width: atributo abreviado del ancho del borde. a. El orden predeterminado de los colores del borde: superior, derecho, inferior, izquierdo (en el sentido de las agujas del reloj); b. Si no se establece un lado del color del borde, se tomará el valor del color del lado opuesto.
                                 border-style: estilo de borde. Si una etiqueta quiere mostrar el efecto de borde, se debe especificar el estilo de borde. 
                                 Propiedad taquigráfica de borde: borde: tamaño estilo color 
                                                              ancho: ancho 
                                                                                            alto: alto

Seis, modelo de caja (etiqueta de bloque div + diseño de página css)
atributos comunes:
capacidad: especifique la altura y el ancho de la etiqueta div.
Establecer borde: div {
borde: tamaño estilo color;
ancho: ancho;
alto: alto;
}
margen interno: relleno (la distancia entre el cuadro y el contenido). padding-left: Mueve el margen interior del cuadro hacia la derecha. Las otras direcciones de movimiento se pueden deducir por analogía.
Margen: margen (la distancia entre la caja y la caja), el margen inferior. Las otras direcciones se pueden deducir por analogía. Atributo abreviado: margen: parte superior derecha inferior izquierda; al configurar el margen exterior para el botón, la situación es especial y el margen exterior debe configurarse como un bloque como un todo.
atributo de visualización: valores de atributo comunes: ninguno (este elemento no se mostrará ni se ocultará), bloque (este elemento se mostrará como un elemento a nivel de bloque con saltos de línea antes y después), en línea (este elemento se mostrará como un elemento en línea, antes y después Sin saltos de línea).
float float atributo: valores de atributo comunes: izquierda (flotante izquierda), derecha (flotante derecha).
Propiedad clara: establece si se permiten otros elementos flotantes en el lateral de un elemento. Valor de atributo común: ambos (no se permiten elementos flotantes en ambos lados de la corriente).

 border-style: capacitación de aprendizaje front-end, tutoriales en video, rutas de aprendizaje, agregue prestigio: haomei0452, ¡contácteme!

Acerca de la entrada de java
1. La estructura del directorio de instalación de jdk
bin: Todos son archivos ejecutables con el sufijo .exe.
db: para algunos paquetes jar principales (bases de datos) del kit de desarrollo.
incluyen: archivos de sufijo que terminan en .h, archivos c.
lib: almacena muchas bibliotecas de clases principales.
jre: contiene jvm (máquina virtual java). (Jdk contiene el entorno de ejecución de Java, jre contiene jvm).
src.zip: código fuente java.
2.
Clase de formato básico Nombre de clase {
public static void main (String [] args) {
......
System.out.printIn ("......");
}
Ejemplo de programa: "Holle Java" java programa.
Introducción a web front-end y java


Supongo que te gusta

Origin blog.51cto.com/14895198/2544335
Recomendado
Clasificación