Notas de entrada HTML 2 (etiquetas de uso común)

Introducción detallada a HTML a, img, tablas y etiquetas de formulario

Uno una etiqueta

atributos de una etiqueta: href, taiget, download, rel = noopener.
una función de etiqueta: se utiliza principalmente para saltar a páginas externas, páginas internas o buzones de correo de teléfono, etc.
El código es así <a href=""></a>
i

1 hora

Nota: href es la dirección de entrada, puede ingresar 1.1 URL , 1.2 ruta , 1.3 pseudo protocolo , 1.4 id ancla , 1.5 buzón, etc.

• Nota : Nunca haga doble clic para abrir el html, el usuario siempre ingresa la URL y tenemos que usar la entrada de la página web para abrirla como un usuario.

• Abra la URL de entrada, Método uno: Ingrese la yarn gloal add http-server
  entrada de instalación del terminal Después de instalar http-server . -c-1
  aquí se puede ignorar, -c se almacena en caché, -1 no se almacena en caché. "." Se recomienda hilo.
  Luego habrá varias direcciones, copie la dirección o ábrala directamente y conecte el archivo a abrir en la barra de direcciones.
• Método 2: Instalación de entrada de terminal Después de la yarn global add parcel
  instalación, directamente parcela xxx.html
  xxx es el nombre del archivo abierto

1.1 URL

Href puede ingresar la URL, el valor es, por ejemplo:

• https://baidu.com
• http://baidu.com
• //baidu.com

Nota : Es mejor elegir //baidu.com, es decir, URL sin protocolo. Cuando haga clic en el enlace, saltará automáticamente para seleccionar http o https para evitar errores al seleccionar el http o https incorrecto.
Para ver cómo se transmite, puede abrir la herramienta de desarrollo web (F12) y seleccionar Conservar el registro en la red para ver

1.2 Ruta

href puede ingresar la ruta, por ejemplo:

• /a B C
• a B C

Nota: / a / b / c, "/" no es el directorio raíz?

Respuesta: Cuando usamos http, ya no es un archivo, el directorio raíz es donde se abre el servicio.

Durante el desarrollo, si hace doble clic para abrir la página del enlace, tendrá la forma de un archivo y se buscará en el directorio raíz del archivo. El enlace no es válido y la ruta absoluta es incorrecta. Abrir en formulario web

1.3 Pseudo acuerdo

¿Qué es un pseudo-protocolo? Al hacer clic en una etiqueta se ejecutará el código en href, que se llama pseudo-protocolo de JavaScript.

<a href="javascript:alert(1);">javascript伪协议</a>

1.4 id ancla

Puede saltar a la página haciendo clic en el contenido de la etiqueta a

 	<p id="xxx">你点击了查看</p>


 	<a href="">查看（页面会刷新）</a>
    <a href="#">查看(页面不会刷新，会跳到页面顶部)</a>
    <a href="#xxx">查看（通过id跳转到指定的标签，锚点)</a>
    <a href="javascript:;">查看（这才是什么也不会做的a标签）</a>

1.5 Buzón, etc.

• Saltar buzón

 <a href="mailto:[email protected]">发邮件给我</a>

Efecto: envíeme un correo electrónico

• Saltar teléfono

<a href="tel:13258378250">请打电话给我</a>

Efecto: por favor llámame

2 atributo objetivo de un

Objetivo significa "objetivo". Target tiene los siguientes valores de uso común:

2.1 _en blanco

Abrir en una nueva ventana

2.2 _arriba

Si hay varias páginas web anidadas, se abrirá en la ventana superior. Puede anidar sitios web con iframes .

2.3 _padre

Abrir un nivel por encima del enlace actual

2.4 _auto

Abre a tu propio nivel

2.5 xxx

Nota: Cuando xxx es taiget = "xxx", xxx es la identificación, puede tomarlo como desee, abrirlo cuando haya xxx y crear una ventana cuando no haya xxx, llamarlo xxx.
Nota: cuando dos enlaces se denominan xxx, haga clic en diferentes enlaces del mismo xxx y cada clic ejecutará el enlace en la ventana xxx.

---

dos etiqueta img

El papel de la etiqueta img: envíe una solicitud de obtención para mostrar una imagen.
Los atributos son: alt / height / width / src
Evento: onload / onerror
Responsive: max-width: 100%;
elementos reemplazables

1 atributo

1.1 alt

alt es el texto del contenido alt para avisar al usuario cuando la imagen no se carga

1.2. alto 和 ancho

Alto y ancho de la imagen. Simplemente escriba ancho o alto, el alto o ancho de la imagen será adaptable, escribir ancho y alto juntos deformará la imagen.

Nota: nunca deforme la imagen

1.3. src

Fuente inglesa, fuente. La dirección del mapa.

2 eventos

onload y onerror se
utilizan para supervisar si la imagen se carga correctamente, ejecutar onload si tiene éxito y ejecutar onerror si falla. Es un remedio para el usuario.

 <body>
    <img id="xxx" width="400" src="1.gif" alt="加油动图" />

    <script>
      xxx.onload = function () {
     
     
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
     
     
        console.log("图片加载失败");
        xxx.src = "/图片加载失败.png";
      };
      // id测试时用，平时别用
    </script>
  </body>

Los resultados exitosos son los siguientes:

Los efectos de falla son los siguientes:

3 receptivo

Responsive para agregar sobre el max-width: 100%;estilo de imagen La imagen se puede adaptar a un teléfono móvil

<style>
      * {
     
     
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
     
     
        max-width: 100%;
      }
    </style>

---

Tres etiqueta de mesa

1 valor de atributo

Solo hay tres etiquetas que se pueden usar en la etiqueta de la mesa. Son thead, tbodyy tfootel orden en que están escritas es irrelevante. La disposición es solo cabeza, cuerpo y pies. Entre los tres, puede escribir tr(fila de la tabla, que representa una fila en la tabla), td(datos de contenido), th(que representa el encabezado).

No hay mucho que decir, mira el código

  <body>
    <table>
      <thead>
        <tr>
          <th>英语</th>
          <th>翻译</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>hyper</td>
          <td>超级</td>
        </tr>
        <tr>
          <td>target</td>
          <td>目标</td>
        </tr>
        <tr>
          <td>reference</td>
          <td>引用</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>空</td>
          <td>空</td>
        </tr>
      </tfoot>
    </table>
  </body>

El efecto es el siguiente:

2 estilos relacionados

Estilos relacionados: table-layout, table-collapse, border-spacing. Generalmente se usa para aclarar el estilo de la mesa.

    <style>
      table {
     
     
        table-layout: auto; /*计算每行宽高，由内容大小决定宽高*/
        /* table-layout: fixed;尽量每一行平均 */
        border-collapse: collapse;
        /* collapse合并边框 */
        border-spacing: 0;
        /* border和border之间的距离 */
      }
    </style>

cuatro formulario formulario

Función: envíe una solicitud de obtención o publicación y luego actualice la página.
Atributo: acción / autocomolete / método / objetivo
Evento: onsubmit

Nota : Un formulario debe contener un tipo igual a "enviar" antes de que se pueda enviar. Si el botón no escribe enviar, el valor predeterminado es enviar.
Si type = "button", no se puede realizar el envío. Cada entrada debe tener un nombre.

1 atributo de entrada

1.1 acción

El src equivalente a img es donde se envía la solicitud . Se utiliza para controlar a qué página se accede, qué está escrito en la acción y a qué página va la solicitud.

<body>
	<form action="/xxx">
      	<input name="username" type="text" />
      	<input type="submit"/>
	</form>
</boody>

type = "text" es un cuadro de texto, type = "submit" es un envío.

1.2 método

Se usa para controlar si la solicitud es post u obtener.

<form action="/xxx" method="POST"></form>

1.3 autocompletar

Relleno automático. Habrá un mensaje de entrada de historial después de que se mueva el mouse.

    <form action="/xxx" method="POST" autocomplete="on">
      <!-- on是打开提示，off是关闭提示 -->
      <input name="username" type="text" />
      <input type="submit" />

El efecto es el siguiente:

1.4 objetivo

A qué página se envía, qué página se actualizará.

Hay muchos atributos de tipo, tipo = color (cambie el color), contraseña (ingrese como * cuadro de entrada), casilla de verificación y raido (cuadro de selección múltiple y cuadro de selección única, deje que aquellos con el mismo nombre representen un grupo), archivo (Se puede agregar multipe para indicar que se pueden seleccionar varios archivos), oculto (oculto)

2 textarea

<textarea style="resize: none; width: 50%; height: 300px"></textarea>

Se puede tirar libremente sin estilo.

3 seleccionar

<select>
        <option value="">-请选择-</option>
        <option value="1">一</option>
        <option value="2">二</option>
        <hr />
        <input type="text" required />
      </select>

Seleccione el cuadro, el valor es el valor real. Uno, dos es el valor para los usuarios

El efecto es el siguiente:

4 atributos

• onchange se activa cuando cambia la entrada del usuario
• onfocus Se activa cuando el usuario enfoca el mouse en este
• onblur Usa el ratón para salir onblur

5 validador

Nuevas funciones de HTML 5

 <input type="text" required />

Si no hay nada en el cuadro de entrada y envíelo, no se permite el envío y se proporciona la verificación.

El efecto es el siguiente

6 Asuntos que necesitan atención:

Generalmente, el evento de clic de entrada no se monitorea.
La entrada en el formulario debe tener un nombre, si no hay nombre, es incorrecto.
Ponga un tipo = "enviar" en el formulario para activar el evento de envío.

¿Cuál es la diferencia entre el envío de formularios y el envío de botones?

    <form action="/xxx" method="POST" autocomplete="off" target="a">
	    <input name="username" type="text" />
        <input type="submit" value="<strong>搞起</strong>" />
      	<button type="submit"><strong>搞起</strong> <img src="1.gif" />
		</button>
	</form>

La entrada no admite otras etiquetas, solo texto sin formato y se puede agregar cualquier cosa al botón.

7 Otras etiquetas:

• vídeo
• audio
• dibujo de anvas
• vectorización svg

Por lo general, existen problemas de compatibilidad y la compatibilidad de estas etiquetas debe leerse en la documentación.

---

---

Estoy en camino de aprender el frente desde la entrada al suelo. Cada vez que navegas, me gusta, comentas y recopilas, es tu mayor aliento para mi viaje de aprendizaje. ¡Trabajemos duro juntos!

Bienvenidos a dejar sus valiosos comentarios.

Finalmente,
el campo expandió un espacio inconmensurable en