Anmeldung
Anmelden

HTML

Este mapa mental sobre HTML comparte el conocimiento de los estilos, etiquetas y atributos de las páginas web. Si estás interesado, puedes echarle un vistazo.

Bearbeitet um 2023-05-27 23:46:10

WSUJfrxa

HTML

WSUJfrxa

Für Sie empfohlen
Gliederung

HTML5
WSUJfrxa
Proceso de desarrollo de productos de hardware inteligente de tipo pedido.
WSb6eYgD
Proceso de desarrollo de productos de ventiladores de aire fresco e información relacionada.
WSb6eYgD
Proceso de desarrollo de nuevos productos.
- 1
WSb6eYgD
Proceso de desarrollo ágil
MM

HTML

Estilo web

Selector

Selector de etiquetas

Nombre de etiqueta {nombre de atributo: atributo; nombre de atributo: atributo}

Selector de clases

.Nombre de etiqueta {nombre de atributo: atributo; nombre de atributo: atributo}

selector de identificación

#id{Nombre del atributo: atributo; Nombre del atributo: atributo}

<pre class="prettyprint linenums Prettyprinted"><code class="language-html"><h1 style="font-size:18px">Cómo utilizar el formato en línea</h1></code></pre>

Nombre de etiqueta, .nombre de clase, #ID｛Selector de unión｝

Nombre de etiqueta.Nombre de clase {selector de intersección}

Nombre de etiqueta externaNombre de etiqueta interna｛Selector de descendientes｝

Cómo introducir estilos CSS

Estilos en línea

Insertar estilos

<pre class="prettyprint linenums Prettyprinted"><code class="language-html"><head><style type="test/css"> h1{Nombre del atributo: atributo;}< /style></head></code></pre>

Importar estilos

Especifica la relación entre el documento actual y el documento vinculado. Solo la hoja de estilo es aplicable a todos los navegadores.

subtema

Propiedades CSS

tipo

Tipo de fuente: familia de fuentes

Representación de fuente: texto-sombra

Tamaño de fuente: tamaño de fuente

Estilo de fuente: estilo de fuente

oblicuo ligeramente inclinado

cursiva

Peso de fuente: peso de fuente

Fuente en mayúsculas: variante de fuente

Atributo de fuente: fuente

fuente{estilo peso tamaño tipo}

Estilo de decoración del texto: decoración del texto

Subrayado: subrayado

Tachado: línea completa

Color: color

Fondo

Color de fondo: color de fondo

Imagen de fondo: imagen-de-fondo

Método de repetición de la imagen de fondo: bakeground-repeat

Imagen de fondo Posición inicial de los ejes X, Y: posición de fondo

Asociación de fondo: adjunto de fondo: fijo (el fondo no se desplaza con el texto)

bloquear

espaciado de palabras: espaciado de palabras

Espaciado entre letras: espaciado entre letras

Alineación vertical con texto: alineación vertical, alineación de texto

Sangría de primera línea: sangría de texto

Modo de visualización: visualización

altura de línea: altura de línea

Modelo de caja

Definir ancho y alto: ancho,alto

Relleno superior, inferior, izquierdo y derecho: padding-top,right,bottom,left

Márgenes externos superior, inferior, izquierdo y derecho: margen superior, derecho, inferior, izquierdo

margen:0px auto;Página web centrada

Borde: borde

Estilo de borde: estilo grosor del borde: ancho color del borde arriba, abajo, izquierda y derecha

<pre>estilo de borde: punteado, sólido, doble, discontinuo </pre>;

Display controla la visualización y ocultación de elementos

display:block muestra el elemento como un elemento a nivel de bloque, con saltos de línea antes y después

display:inline muestra elementos como elementos de seguimiento sin saltos de línea

display: none oculta el elemento

flotar

flotador claro claro

ambos flotadores claros izquierdo y derecho

procesamiento de desbordamiento del cuadro de desbordamiento

El contenido visible se recortará y el contenido recortado aparecerá fuera del cuadro

El contenido oculto se recortará y el resto del contenido será invisible

posición

posicionamiento relativo velativo

aparecerá donde está, permitiendo que el elemento se mueva "en relación con" su origen

posicionamiento absoluto

Un cuadro de elemento configurado en posicionamiento absoluto se elimina completamente del flujo de documentos y se coloca en relación con su bloque contenedor, que puede ser otro elemento en el documento o el bloque contenedor inicial. El espacio que anteriormente ocupaba el elemento en el flujo normal de documentos se cierra, como si el elemento no existiera. El elemento genera un cuadro a nivel de bloque después del posicionamiento, independientemente del tipo de cuadro que generó originalmente en el flujo normal.

nivel de configuración del índice z

lista

Tipo de número de artículo: tipo-estilo-lista

Imagen del número de artículo: imagen-estilo-lista

Posición de la marca del elemento: posición-estilo-lista

La etiqueta interior se muestra en el interior

La etiqueta onside se muestra afuera

Pseudoclase de hipervínculo

Estilo de hipervínculo cuando se accede sin hacer clic en un enlace:

Estilo de hipervínculo después de hacer clic para visitar a:visited

El estilo de hipervínculo sobre el que se sitúa el ratón a:hover

Estilo de hipervínculo que no se libera al hacer clic con el mouse a:activo

Establecer forma del mouse: cursor

Cursor predeterminado: predeterminado

Puntero de hipervínculo: puntero

abarcar{cursor:puntero;}

Indica que el programa está ocupado: espera

Indica ayuda disponible: ayuda

Texto de instrucción: texto

Etiquetas y atributos

Texto entre <html> y </html> que describe la página web.

El texto entre <head> y </head> es el contenido visible en el encabezado de la página web

El texto entre <title> y </title> es el título de la página web

El texto entre <body> y </body> es el contenido visible de la página.

El texto entre <h1> y </h6> se muestra como título.

El texto entre y se muestra como un párrafo

Salto de línea <hr/> Línea horizontal

El texto entre y y está en cursiva

El texto entre y está resaltado

Las imágenes HTML <img/> y </img> se definen mediante la etiqueta <img>.

<pre><img src="Dirección de la imagen" ancho="ancho" alto="largo" <code>alt="</code><code>Se utiliza para definir una cadena de texto reemplazable preparado para la imagen"</ código > title="Pase el ratón por encima para mostrar el texto"/></pre>

Los enlaces HTML <a> y </a> se definen mediante la etiqueta <a>.

·······

Enlace ancla (salte a la etiqueta especificada): <a href="#name"></a>

símbolos especiales

Espacio

> Signo mayor que

< signo menor que

www.w3school.com.cn

UTF-8, GB2312, GBK

lista

<ul><li> Con </li></ul> Lista desordenada

Tipo de atributo: disco círculo sólido, caja cuadrada, círculo círculo hueco

<ol><li> y </li></ol> lista ordenada

Tipo de atributo: 1aAIi

<dl><dt><dd> y </dd>Observaciones</dt></dl> Lista de definiciones

Etiquetas de tabla <table> y </table>, las listas se pueden anidar dentro

<th> y </th> definen encabezados

<tr> y </tr> definen filas de la tabla

<td> y </td> definen las celdas de la tabla

<thead> y </thead> <tbody> y </tbody> <tfoot> y </tfoot>. . .

Propiedades (alineación horizontal: izquierda, centro, derecha; alineación central de la imagen media alineación vertical valign: alineación superior superior, alineación central media, alineación inferior inferior, alineación de línea base)

Fusionar colspan horizontalmente, fusionar lista de intervalos de filas

<frameset> y </frameset> (escritos fuera del cuerpo)

Atributos (definir columnas de clasificación horizontal del marco="200px,*,100px" filas de clasificación vertical)

Etiquetas de formulario <form> y </form>, los elementos del formulario se pueden anidar dentro

Si el envío del formulario es pasivo (como una consulta en un motor de búsqueda) y no contiene información confidencial. Cuando utiliza GET, los datos del formulario son visibles en la barra de direcciones de la páginaSi el formulario actualiza datos o contiene información confidencial (como una contraseña). POST es más seguro porque los datos enviados en la barra de direcciones de la página son invisibles.

<input type="text"> define un campo de entrada de una sola línea para entrada de texto

<input type="contraseña"> define el cuadro de contraseña.

<input type="radio"> define un botón de opción.

<pre><input type="radio" name="sex" (los nombres de los mismos botones de radio deben ser consistentes) value="female">Mujer</pre>

<input type="checkbox" name="Los nombres entre las casillas de verificación deben ser consistentes"> Defina casilla de verificación.

<input type="submit"> define el botón para enviar el formulario.

<input type="reset"> Define el botón para restablecer el formulario.

<input type="button"> define un botón normal para el formulario .

<input type="file"> define el cuadro de selección de archivos.

<input type="hidden">campo oculto

<select>Definir la lista desplegable<option>Definir la opción a seleccionar</option></select>

<pre><select name="cars" size="Duración de cada aparición"> <option value="volvo" selected = "seleccionado" (seleccionado por defecto)>Volvo</ opción> <opción valor="saab">Saab</option> <opción valor="fiat">Fiat</option> <opción valor="audi">Audi</option> </select></pre>

El elemento <textarea> define un campo de entrada de varias líneas (textarea)</textarea>

<pre><textarea name="message" rows="10" cols="30"> Este es contenido de texto predefinido </textarea></pre>

El elemento <datalist> especifica una lista predefinida de opciones. <opción valor="Contenido predefinido"></datalist>

<fieldset field><título del campo de leyenda>Forma semántica</legend></fieldset>

Formularios relacionados

<pre id="line1"><etiqueta for="<a class="atributo -value">masculino</a>">Masculino</etiqueta> <entrada tipo="<a class="atributo -value">radio</a>" nombre="<a class="attribute-value">género</a>" id="<a class="attribute-value">masculino</a>"/></pre>