1. Escrito en el frente: si no tiene ideas para el autoestudio del front-end, puede consultar los siguientes métodos

1. páginas estáticas html+css (cuatro semanas) durante el primer mes

capa de estructura de esqueleto de página web html (lenguaje de marcado de hipertexto)

css (hojas de estilo en cascada) para modificar páginas web

html5 + css3 proporciona un terminal de computadora con terminal de teléfono móvil interactivo más hermoso y de mejor estilo

2. El segundo mes (4-5 semanas): las preguntas de la entrevista sobre el lenguaje de programación JavaScript son más

3. El tercer mes (3-4 semanas): php/node.js interactúa con el front-end ajax y git construye un servidor

4. El marco vuejs del cuarto mes (cuatro semanas) (más común en el mercado)

5. En el quinto mes, marco reaccionarjs programa pequeño visualización de big data currículum vitae curso de empleo preguntas del proyecto
hoja de ruta de desarrollo de ingeniero front-end dirección técnica ingeniero junior-intermedio-full stack (también director técnico) -gerente de producto-director técnico-director de proyecto- Director ejecutivo de tecnología

Dirección de gestión Líder del equipo front-end-supervisor técnico (también director técnico, gerente de producto)

2. 1. Navegador

1.1 Clasificación de navegadores ( cinco navegadores principales )

IE, Google Chrome, Firefox, Safari, Opera (navegador móvil Oupeng)

1.2 Núcleo del navegador

1. Tridente (núcleo de IE)

La nueva versión del navegador es de doble núcleo o incluso de múltiples núcleos, uno es el modo de navegador compatible con Tridents y los otros núcleos son el modo de navegación de alta velocidad.

2. Gecko (núcleo de Firefox)

Mozilla Firefox

3. Webkit (kernel Safari, prototipo del kernel Chrome, código abierto)

Navegador de 360 velocidades, Navegador de alta velocidad Sogou, Apple Safari

2. Páginas web y sitios web

2.1 Clasificación de páginas web

pagina de inicio
pagina de inicio

2.1 Clasificación del sitio web

1. Portales (Tencent, Sina)

2. Sitios web de la industria (gran front-end, jardín de blogs)

3. Naturaleza funcional del sitio

4. Sitio web empresarial (institución educativa)

5. Sitio web personal (se recomienda aprender de Ruan Yifeng y Zhang Xinxu) Nota: Alibaba Cloud puede comprar nombres de dominio

3. El concepto de HTML

Hyper Text Markup Language (Lenguaje de marcado de hipertexto), el lenguaje más básico para crear páginas web,

Puede ser ejecutado directamente por el navegador. Nota:

Un lenguaje utilizado para describir páginas web.
Lenguaje de marcado de hipertexto
Es un lenguaje de marcado, no un lenguaje de programación.
Un lenguaje de marcado es un conjunto de etiquetas de marcado.
Utilice etiquetas de marcado para describir páginas web
El documento contiene etiquetas HTML y contenido de texto.
Los documentos también se llaman páginas web.

4. La estructura básica de HTML.

Nota: <!DOCMENT HTML> se refiere a la declaración del documento HTML5.

etiqueta de metadatos, la descripción del contenido del sitio web en meta no debe exceder los 150 caracteres

conjunto de caracteres conjunto de caracteres utf-8 código universal gbk, gb2312

El título de la pestaña de la página <título></título>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    </body>
</html>

5. Etiquetas HTML

5.1 Clasificación de etiquetas

Etiqueta doble etiqueta <label>contenido</label> <p></p><h1>Título de nivel 1</h1><h6>Título de sexto nivel</h6><title></title><ul></ ul><ol></ol><li></li><dl></dl><dt></dt><dd></dd>

Etiqueta de etiqueta única <nombre de etiqueta> <img><br><hr>

5.2 Etiquetas comunes

1. Hipervínculo <a href=""></a>

el cursor puede cambiar el icono puntero mano pequeña espera ayuda
Cuando no hay valor, esta página se actualiza, cuando hay un enlace, puedes saltar y el color cambiará
Escriba target="_blank" en <a></a> para abrir un hipervínculo en una nueva ventana
Ambos <base href=""> en el encabezado saltan al mismo sitio web. Los anuncios fraudulentos utilizan este método. Si hay un enlace en el cuerpo, saltará a su propio enlace. Si no hay ningún enlace, saltará a el enlace establecido en la cabeza.
Si configura <base target="_blank"> en el encabezado de esta manera, no necesita configurar _blank nuevamente en todo el texto, y puede mostrarlo en una nueva página y abrir una nueva ventana.
Puede haber un atributo de identificación en cualquier etiqueta, el valor de identificación es único y la letra o letra del nombre + letra numérica + símbolo de la identificación está preferiblemente en inglés.

2. Enlace de anclaje #Agregue valor de identificación , escriba id="top1" en otras etiquetas y luego escriba "#top1" en el hipervínculo href

3.<h1></h1>....<h6></h6>

El mismo punto: todo negrita, línea exclusiva, elemento de bloque

La diferencia: el tamaño de fuente disminuye sucesivamente y el valor predeterminado de un em en una página web es 16 píxeles px.

h4 es 16 grosor de fuente negrita negrita

4. La etiqueta de etiqueta única <img> requiere el nombre del atributo y el valor del atributo

El texto alternativo para la ruta de la imagen alternativa no se pudo cargar y no aparece ningún texto cuando se logra

ancho establecer ancho alto alto
El px predeterminado no se agrega y se puede agregar%, que es el porcentaje del navegador y cambiará con el navegador.
Atributo title="", el texto recordatorio cuando el mouse se mueve hacia la etiqueta, se puede usar cualquier etiqueta
<p>Ingrese lorem y presione la tecla tab, puede aparecer algo de texto.
Elemento de bloque en línea; se puede mostrar en la misma línea que otros elementos y también puede cambiar la altura y el ancho

5. <br> nueva línea, etiqueta de etiqueta única

6. <ul></UL> es una lista desordenada, utilizada con el elemento de lista <li></li>, y los demás se colocan en li. elemento de bloque ul, el valor predeterminado es disco sólido punto pequeño

7. Lista ordenada <ol></ol>, usada con li, tiene una secuencia, también es un elemento de bloque, el valor predeterminado es un número y otros elementos se colocan en li

8. <dl></dl> define la lista, <dt></dt> define el elemento de la lista. <dd></dd> explica el contenido. Generalmente no se usa, también es un elemento de bloque. El amarillo terroso es el margen exterior y el margen interior verde.

9. Si hay énfasis, use <strong></strong> para negrita y el elemento en línea <b></b> solo significa negrita (font-weight: negrita)

10. <i></i>Inclina o <em></em> la tabla de dedos principal para enfatizar, introduce el icono

11. Fuente grande <big></big>, no se recomienda su uso. Se puede usar fuente pequeña <small></small>

112. <hr/>Línea horizontal, elemento de bloque, alineación predeterminada centro align=""alineación horizontal, alineación horizontal central alineación izquierda alineación derecha alineación derecha color="rojo" el ancho debe establecerse al configurar cómo alinear

6. Clasificación de imágenes

gif tiene menos rendimiento de color, velocidad de análisis rápida, admite animación y admite transparencia. Es la primera opción para retocar imágenes en páginas web.
jpg tiene más rendimiento de color, no admite animación, no admite transparencia y es la primera opción para imágenes de contenido en páginas web
PNG admite transparencia y tiene un buen efecto.
webp admite compresión con pérdida y compresión sin pérdida, imágenes de la misma calidad, de menor tamaño

7. Clasificación de elementos

7.1 Elementos de bloque (visualización; bloque)

1, exclusivamente en una línea 2. Cuando no se establece el ancho, el navegador lo afectará de forma predeterminada 3. Cualquier elemento se puede anidar dentro del elemento de bloque (excepto el elemento p, que no se puede colocar dentro del elemento p)

7.2 Elementos en línea

1. Se puede mostrar en una línea con otros elementos 2. El ancho solo se ve afectado por el contenido 3. Los márgenes internos y externos y la altura de la línea solo se ven afectados parcialmente 4. Los elementos en línea pueden ser elementos en línea anidados, elementos de bloque en línea y texto

7.3 Elemento de bloque en línea (diaplay:inline-block)

8. Marco

marco en línea

No hay borde cuando frameborder="0" se establece dentro, y hay un borde cuando 1

Cuando se desplaza = no, no hay barra de desplazamiento, sí, hay una barra de desplazamiento

9. Estructura básica de la mesa.

<table></table> marco básico

<tr></tr> define la fila de la tabla

<td></td>Las celdas de la fila se dejan por defecto

<th></th> título de celda o encabezado de tabla, el texto predeterminado está en negrita y centrado

como instalar

border="" mostrará el borde, establezca el borde de la tabla.

cellspaceing="0" No hay espacio entre celdas

La distancia entre el contenido del relleno de celda y las celdas circundantes.

El ancho, el ancho y el alto también se pueden configurar

align puede establecer la alineación horizontal

valign Dirección de alineación vertical (el medio está centrado verticalmente, la parte superior está verticalmente arriba, la parte inferior está verticalmente abajo)

color de fondo

color del borde color del borde

Las reglas estipulan que la parte del borde interior es visible (ninguno es invisible, las líneas entre filas son visibles, las líneas entre columnas son visibles y las líneas entre todas las filas y columnas son visibles)

<table>
	 	<tr>
	 		<td></td>
	 		<td></td>
	 		<td></td>
	 	</tr>
</table>

10. Fusión de celdas (agregue a quien desee fusionar)

colsapn = "Número de celdas fusionadas" Fusionar celdas a izquierda y derecha, es decir, fusionar horizontalmente

rowspan="Número de celdas" Fusionar celdas hacia arriba y hacia abajo, es decir, fusionar verticalmente

11 mapa del área de hotspot

área área forma forma rect rectángulo círculo círculo poli polígono coords coordenadas

当shape="rect" coords="x1 y1 x2 y2"

当shape="círculo" coords="x1 y1 r"

当shape="poly" coords="x1 y1 x2 y2..."

Para configurar en dw, primero inserte una imagen, opere en la vista de diseño, abra las propiedades, seleccione el área para pintar

Generará coordenadas automáticamente, agregará hipervínculos y hará clic en un área determinada para saltar.

<img src="hh.png" alt="" width="1345" height="1948" usemap="#Map"/>
<map name="Map">
  <area shape="circle" coords="234,864,214" href="https://baike.baidu.com">
</map>

12. Símbolos especiales

<significa<
> >
Espacio: los espacios se hacen más grandes de arriba a abajo
- &emsp ( dos es igual a uno es igual a un carácter chino )
&veces; X
• es un punto

13. Método de ruta de importación de imágenes

src importa la ruta de la imagen

Ruta absoluta: limitada a su propia ruta, generalmente no utilizada

Ruta relativa: consulte su propia ubicación./directorio actual

1. El archivo HTML y la imagen están en el mismo directorio y el valor de src es el nombre de la imagen o ./nombre de la imagen.

2. Cuando el archivo HTML y la carpeta de imágenes están en el mismo directorio, el valor de src es escribir primero el nombre de la carpeta de imágenes y luego escribir el nombre de la imagen <img src="nombre de la carpeta de imágenes/nombre de la imagen"> o <img src= "./Nombre de la carpeta de imágenes/Nombre de la imagen">

3. Cuando la carpeta html y la imagen están en el mismo directorio, el valor de src es saltar del directorio actual a través de ../ y luego escribir el nombre de la imagen <img src="../nombre de la imagen>

4. Cuando la carpeta HTML y la carpeta de imágenes están en el mismo directorio, el valor de src primero salta del directorio actual a través de ../, luego escribe el nombre de la carpeta de imágenes y finalmente escribe el nombre de la imagen <img src=" ../carpeta de imágenes Nombre/nombre de la imagen> Solo los mismos proyectos pueden acceder entre sí

14. Teclas de acceso directo y manual de estudio.

Comentarios Ctrl+/

../Ir al directorio anterior./Directorio actual

(Guía manual: W3school, tutorial para novatos, mdn)

(Software para tomar notas csdn cortina breve libro Nuggets language bird markdown)

(vídeo de vista previa html:

https://www.bilibili.com/video/BV1dZ4y1G75D?share_source=copy_web
vídeo de vista previa css:
https://www.bilibili.com/video/BV1bV411y7LH?share_source=copy_web)

Mantenga presionada la tecla Ctrl en hbuilder, haga clic con el botón izquierdo del mouse y coloque el cursor en otras posiciones, que se pueden modificar en lotes.

Al insertar una tabla, también puede usar table>tr*3>td*4>{cell}, presione la tecla tab

div>p*3>a*2

Puntos de conocimiento HTML que los principiantes deben dominar