La versión completa de HTML para comenzar con el desarrollo web front-end

HTML

etiqueta de imagen

imagen de cita

El primer caso: imágenes de Internet, use directamente la dirección de la imagen de Internet

<img src="http://img.mobiletrain.org/omlinerjcs.png">

En el segundo caso, consulte una imagen en una carpeta en el disco local

<img src="C:\hello.png">

• Los archivos de página y los archivos de imagen están al mismo nivel, puede omitir la ruta y usar el nombre de la imagen directamente
• El archivo de la página y la carpeta donde se encuentra la imagen están en el mismo nivel. Primero escriba el nombre de la carpeta donde se encuentra la imagen y luego use / para ingresar a la carpeta y encontrar el archivo de la imagen.
• La carpeta donde se encuentra la página y la imagen están en la misma relación de nivel, primero regrese al nivel superior de la carpeta donde se encuentra la página, .../

atributo de etiqueta de imagen

1. alt="Educación de Qianfeng" Se muestra cuando la imagen no se carga
2. Título Atributo:
   • El contenido definido no ocupa espacio en la página
   • Oculto de forma predeterminada, solo se muestra cuando se dibuja el mouse

Hipervínculo

El valor de href es la dirección de la página de destino, que es similar al atributo src de la imagen, y el contenido del par de etiquetas es el contenido que se muestra en la página.

<a href="目标页面地址" target="_self">显示在页面中的文本</a>

target="self" indica que el destino del enlace se abre en la ventana actual, y _blank indica que se abre en una página en blanco

decoración de texto

• <b>加粗的文本<b>

  <strong>加粗的文本</strong>

  La etiqueta b es solo para poner el texto en negrita, y la etiqueta fuerte es más semántica, lo que indica que el texto es más importante.

• <i>倾斜的文本</i>

  <em>倾斜的文本<em>

• <s>删除线文本</s>HTML5 no es compatible

  <del>删除线文本</del>

• <u>下划线文本</u>

• <sup>上角标文本</sup>

  <sub>下角标文本</sub>

la lista

lista ordenada (lista de pedidos)

<ol type="" start="">
  <li>列表项内容</li>
</ol>

escriba valor: A, una secuencia de letras inglesas, I, i secuencia de números romanos, 1 secuencia de números arábigos

El valor de inicio es el número de serie número de inicio

Lista desordenada (lista desordenada)

<ul type="">
    <li>...</li>
</ul>

tipo:

• disco: punto sólido
• círculo: punto hueco
• ninguno Ninguno
• cuadrado: cuadrado sólido

lista personalizada

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

Las etiquetas dt o dd no se pueden usar independientemente de dl

construcción rápida

• Nombre de la etiqueta {contenido del texto de la etiqueta}+tabulador o tecla Intro
• Etiquetar ${标题文$本内容}*repeticiones de etiquetas
• nombre de la etiqueta principal>nombre de la etiqueta secundaria{texto de la subetiqueta}*veces de repetición de la subetiqueta

hoja

Base

<table>
    <tr>
        <td></td>
        <th>加粗的文本</th>
    </tr>
</table>

tr representa una fila, td representa una celda y el número de td en cada tr en una tabla ordinaria es igual

El texto dentro de la etiqueta th está en negrita y centrado

Propiedades de formulario

• borde: define el grosor de la línea.<table border="1">
• Cellspacing: define la distancia entre celdas.
• cellpadding: define la distancia entre el borde de la celda y el texto

Si desea aumentar la distancia entre las celdas, o la distancia entre las celdas y el texto, simplemente ajuste los valores de los atributos de los dos espacios

propiedades de la fila de la tabla

• alinear (alineación horizontal) <tr align="" valign="">:
  • izquierda: alinear a la izquierda
  • centro: alineación central
  • derecha: alinear a la derecha
• valign (alineación vertical):
  • arriba: alineación superior
  • medio: alineación central
  • inferior: alineación inferior
• bgcolor: Modifica el color de fondo de la tabla.
• bordercolor: modifica el color del borde de la tabla.

propiedades de la celda

• rango de filas: fusionar entre filas

  <td rowspan="4"></td>

  Indica que la celda necesita ocupar el espacio de 4 celdas verticalmente

• colspan: fusionar entre columnas

Encabezados de tabla y agrupación estructural

Los títulos de las tablas generalmente se colocan antes de la primera etiqueta tr

<table>
    <caption>标题</caption>
    <tr></tr>
</table>

En la etiqueta thead, coloque el contenido de la línea tr del encabezado de la tabla correspondiente. La etiqueta tbody también es una subetiqueta de la etiqueta table al mismo nivel que la etiqueta thead. Todos los tr no agrupados en la tabla se colocarán en un tbody, y el pie de página de la tabla correspondiente se colocará en la etiqueta tfoot El contenido de la primera fila tr, una tabla solo permite un encabezado y un pie, pero permite múltiples tbody

<table>
    <thead></thead>
    <tbody>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

l La etiqueta de agrupación de columnas es colgroup. La agrupación de columnas se usa a menudo para definir el color de una columna completa de celdas en una tabla. Significa cuántas columnas se dividen en un grupo. Si necesita dividir varios grupos, debe usar varios grupos de col

<colgroup span="3"></colgroup>

Valores de color y unidades de longitud

Representar método de valor de color:

• Nombre del color : use la palabra en inglés para el color para definir el valor del color

  • Se deben usar 140 nombres estándar en inglés
  • Los caracteres chinos no se pueden utilizar como valores de color.

• Valor hexadecimal : se refiere al uso de la forma #RRGGBB para definir el valor del color

  RR (rojo) GG (verde) BB (azul) intensidad de color entre 00-FF

  Ejemplo: #0000FF se muestra en azul

  • # no tirar
  • todas las letras minúsculas
  • Todos los navegadores son compatibles

• Valor RGB : se refiere al uso de RGB (rojo, verde, azul) para definir el valor del color (entero en 0-255)

  • no entre mayúsculas y minúsculas
  • Puede haber espacios antes y después de los números entre paréntesis y comas
  • Todos los navegadores son compatibles

Unidad de longitud:

• Unidades de longitud absoluta: Fijo, la longitud expresada en estas unidades se mostrará como el tamaño establecido.

  px (píxel)

• Longitud unitaria relativa: se refiere a la longitud calculada en relación a una longitud, generalmente utilizada para adaptarse a diferentes dispositivos

  porcentaje(%)

Elementos a nivel de bloque y elementos en línea

Elementos HTML—valor de visualización—bloque bloque/en línea

Elementos a nivel de bloque:

• Elemento de bloqueo: div (la etiqueta contiene el contenido del bloque)
• Elementos de encabezado h1-h6
• elemento de párrafo<p>
• elemento de lista<ol> <ul> <li> <dl> <dt> <dd>
• elemento de formulario<table> <tr> <td> <th> <thead> <tfoot> <caption>

Elementos en línea:

• Elemento de enlace:<p>
• Elementos modificadores de texto:<b><em><i><strong><sub><sup>
• Envolver elemento:<br>
• Elemento de imagen:<img>
• Elemento de rango:<span>

forma

<form></form>

cuadro de texto y cuadro de contraseña

Cuadro de texto de una sola línea:

<input type="">

cuadro de contraseña type="text" o type="password", el cuadro de texto ordinario de una sola línea de texto predeterminado

cuadro de texto de varias líneas

Permite al usuario ingresar varias líneas de texto. El texto se ajustará automáticamente cuando llegue al borde derecho. Cuando el texto exceda el borde inferior, se generará una barra de desplazamiento. Puede desplazar el mouse para ver la información completa.

<textarea cols></textarea>

Puede establecer el ancho y la altura del área de visualización. cols se utiliza para especificar el ancho visible de un área de texto

Tipo de botón de valor

opción única y múltiple

Establezca el valor del atributo de tipo de la etiqueta inpt, radio significa opción única, casilla de verificación significa opción múltiple

• Los controles de botón de radio deben usarse en grupos para que tengan sentido, y cada grupo requiere al menos dos botones de radio
• Los grupos se establecen a través del atributo de nombre, y aquellos con el mismo valor de nombre son un grupo
• Para los botones de radio en el mismo grupo, solo se seleccionará uno, y los demás se representarán automáticamente como no seleccionados

La casilla de verificación del botón de radio está seleccionada de forma predeterminada, y el atributo marcado se define para lograrlo. Siempre que no esté vacío, cualquier carácter está bien, generalmente marcado

Menú desplegable

<select multiple size=“2>
    <option selected></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

seleccionado es la opción seleccionada de forma predeterminada, múltiple permite que el menú desplegable seleccione varios valores, y el atributo de tamaño puede definir el número predeterminado de filas visibles del control

Seleccione un documento

<input type="file">

etiqueta de formulario

<form>
    <label for="username"></label>
    <input type="text" id=“username>
    <br>
    您的手机号:<input type="text" value="155****0000" readonly>
    <input type="radio" disabled>
</form>

La etiqueta puede ayudarnos a hacer clic en el área difícil de hacer clic en la pantalla, ya que se usa para definir el control de formulario asociado con la etiqueta.

solo lectura control de solo lectura deshabilitado deshabilitado: los valores de control de formulario deshabilitados no se recopilarán ni enviarán al backend, y no se pueden seleccionar

forma de agrupación

Formulario con borde y título:

<fieldset>
    <legend>标题</legend>
</fieldset>

La función del borde es dividir visualmente los campos relevantes en bloques. Agregar otros controles en la etiqueta del grupo debe colocarse detrás de la etiqueta de la leyenda.

botón de formulario

valor = "" dar un nombre al botón

• Botón Enviar: haga clic para confirmar la información de envío y enviar los datos del formulario a la función de fondo al mismo tiempo

  <input type="submit">

  Cuando se hace clic en el botón:

  • La página se actualiza: los datos se envían al servidor de fondo y el servidor de fondo guarda los datos en la base de datos, donde el servidor proporcionará una dirección de acceso para el formulario de la página web.

    <form action="">

    El valor es la dirección del servidor.

  • El contenido del cuadro de entrada desaparece.

    También se puede reservar: defina un atributo de destino para el formulario (puede ser _blank o __self)

  • Hay un signo de interrogación en la barra de direcciones del navegador.

• Botón de reinicio: borre el contenido del cuadro de entrada

  <input type="reset">

• Botón normal:<input type="button">

• Botón de imagen: reemplaza la apariencia del botón de enviar con una imagen

​<input type="image" src="">

• Botón de botón de doble etiqueta:<button></button>

Agregue type="button" para que se convierta en un botón normal, y la función de enviar el formulario desaparecerá

Recopilación de datos de formularios y envío de formularios

Defina el atributo de nombre para el cuadro de entrada. El valor de nombre nos ayuda a almacenar el contenido ingresado por el usuario y mostrarlo en la barra de direcciones. Complete la dirección del servidor en el atributo de acción del formulario y envíe los datos al servidor.

Si los datos contienen información confidencial, no debe mostrarse en la barra de direcciones. La solución es definir el atributo del método (con valores de obtención y publicación) en la etiqueta del formulario.

• get es el valor predeterminado, y el navegador agregará los datos del formulario recopilados a la dirección del servidor y los enviará al servidor.
• El valor de la publicación no solo puede recopilar datos del formulario, sino que tampoco expone datos privados en la barra de direcciones.

Otras etiquetas útiles

<hr>Indica una línea horizontal, y su función es dibujar una línea divisoria horizontal en la página web.

<hr width="" size="" noshade="" color="" align="">

• ancho/tamaño: Controla el ancho y alto de la línea horizontal respectivamente. El ancho predeterminado de la línea horizontal es en toda la pantalla, por lo que es de 2 px.
• noshade: se utiliza para eliminar la sombra de la línea horizontal.
• color: se utiliza para definir el color de la línea horizontal.
• align: Se utiliza para ajustar la alineación horizontal de la línea horizontal. El valor predeterminado es la alineación central horizontal.

<pre>Las etiquetas dobles representan texto preformateado y el texto se mostrará exactamente como en el código fuente HTML.

<map>Etiquetas dobles, definir un mapa de imagen, hacer clic en diferentes áreas de la imagen para saltar a la página vinculada.

<map name="">
  <area href="" shape="" coords="">
</map>

el nombre está asociado con el atributo usemap de la etiqueta img,

La etiqueta única del área define el área del punto de acceso en la imagen, y la posición, el tamaño y la forma del área del punto de acceso se pueden configurar a través de la etiqueta del área.

• El atributo href se usa para definir la dirección de destino del enlace en el área del punto de acceso.
• shape se utiliza para definir la forma de la región. predeterminado: todas las áreas rect: rectángulo círculo: círculo poli: polígono
• El atributo coords se utiliza para definir las coordenadas del área en la que se puede hacer clic

iframe

Las pestañas dobles se utilizan para mostrar otra página web en una página web.

<iframe src="页面路径" width="数字" height="数字" frameborder="0" scrolling="yes"></iframe>

• src: se utiliza para introducir otras páginas del sitio web

• ancho: se utiliza para controlar el ancho de la página importada.

• altura: se utiliza para controlar la altura de la página importada.

• frameborder: La página importada tiene un borde por defecto, por lo general, el valor de este atributo se establece en 0 para cancelar el borde

• desplazamiento: se utiliza para controlar si mostrar la barra de desplazamiento del marco

  sí: las barras de desplazamiento siempre se muestran no: las barras de desplazamiento nunca se muestran automático: las barras de desplazamiento aparecen cuando es necesario

La dirección de un enlace puede ser la dirección del sitio web de Internet o la dirección de la página local hecha por uno mismo, y estas páginas se pueden mostrar en el iframe

<a href="http://www.baidu.com" target="iframe_a">百度</a>
<iframe name="iframe_a"></iframe>

SVG

SVG es un formato de imagen basado en la sintaxis XML, es decir, gráficos vectoriales escalables. En sí mismo es un archivo de texto con un tamaño pequeño, y no se distorsionará sin importar cuántas veces se amplíe. Las imágenes SVG se pueden dibujar a través de html. <svg>Una etiqueta es un contenedor para una imagen SVG.

<svg width="" height="">...</svg>

Entre ellos, ancho y alto se refieren al ancho y alto del lienzo respectivamente.

Elementos de forma predefinidos SVG

dibujar rectángulo

<rect width="" height="" fill="" />

• ancho: define el ancho del rectángulo

• altura: define la altura del rectángulo

• relleno: define el color de relleno del rectángulo

• ancho de trazo: define el ancho del borde del rectángulo

• trazo: define el color del borde del rectángulo

• fill-opacity: define la opacidad del color de relleno, el valor legal va de 0 a 1, cuanto menor sea el valor de transparencia, mayor será la transparencia

• stroke-opacity: define la opacidad del color del trazo, el rango de valores legales es de 0 a 1

• opacidad: la opacidad de todo el elemento, que va de 0 a 1

Dibujar un rectángulo redondeado

<rect rx="" ry=""/>

Si los dos valores son iguales, es una esquina redondeada, y si los dos valores no son iguales, es una esquina elíptica.

dibujar circulo

<circle cx="" cy="" r="" stroke="" stroke-width="" fill="" />

• cx: Define la coordenada x del centro del círculo
• cy: Define la coordenada y del centro del círculo
• r: define el radio del círculo

dibujar ovalado

<ellipse cx="" cy="" rx="" ry=""/>

• cx: Define la coordenada x del centro de la elipse
• cy: define la coordenada y del centro de la elipse
• rx: define el radio horizontal
• ry: define el radio vertical

dibujar líneas

<line x1="" y1="" x2="" y2=""/>

Se forma conectando las coordenadas de dos puntos. El origen de coordenadas es la esquina superior izquierda del lienzo.

dibujar polígono

<polygon points="220,20 250,190 160,210"/>

• puntos: Define las coordenadas de cada punto, separadas por espacios.

dibujar varias líneas

<polyline points="20,20 40,25 60,40 80,120 120,140"/>

dibujar camino

La aplicación de una ruta puede dibujar gráficos de cualquier forma.

<path d="M150 0 l75 200"/>

• d: comando utilizado para definir la ruta de dibujo. como:
  • Comando M (moveto): d="M150 0" significa comenzar a dibujar desde el punto (150,0)
  • Comando L (lineto): se usa para dibujar una línea recta, lo que significa dibujar una línea recta desde el último punto final hasta x75, y200
  • Comando q: se utiliza para dibujar una curva Bezier cuadrática. q 150 -300 300 0 significa que las coordenadas del punto de control son (150, -300), y las coordenadas del punto final son (300,0)

etiqueta g

En SVG, las etiquetas g se pueden usar para envolver múltiples elementos de dibujo y los atributos públicos se pueden definir en las etiquetas g.

<g>
   <path />
   <circle />
   <text> </text>
</g>

Atributos de trazo SVG

<path stroke /> //笔画属性
<path stroke-width />  //笔画宽度属性
<path stroke-linecap />  //笔画笔帽属性
<path stroke-dasharray />  //虚线笔画属性

Efectos de desenfoque y sombra

filtro filtro

<defs>
  <filter id>
      <feGaussianBlur stdDeviation="" />
  </filter>
</defs>

feGaussianBlur define la cantidad de desenfoque a través del atributo stdDeviation, el valor es un número, cuanto mayor sea el valor, mayor será el desenfoque

<filter>
   <feOffset dx="" dy="" in="" />
    <feBlend in="SourceGraphic"/>
</filter>

• dx, dy representan el desplazamiento de la sombra en los ejes x e y
• en indica la fuente de la imagen de la sombra: negro SourceAlpha imagen original SourceGraphic

feBlend mezcla la imagen de la sombra sobre la imagen original.

Degradados lineales y degradados radiales

gradiente lineal

<defs>
   <linearGradient x1="" y1="" x2="" y2="">
      <stop offset="10%" stop-color="" />
   </linearGradient>
</defs>

y1=y2 x1≠x2 gradiente horizontal

x1=x2 y1≠y2 gradiente vertical

x1≠x2 y1≠y2 gradiente de ángulo

La gama de colores de un degradado lineal puede estar compuesta por dos o más colores, detener define el color, el atributo de desplazamiento se utiliza para definir la posición inicial y final del degradado de color, stop-color define el degradado de color

gradiente radial

<defs>
   <radialGradient id="" cx="" cy="" r="" fx="" fy="" >
       <stop offset="10%" stop-color="" />
   </radialGradient>
</defs>

El atributo id define el nombre único del gradiente, cx, cy, r definen el círculo más externo, fx, fy definen el círculo más interno