Wondershare EdrawMind
Galería de mapas mentales HTML
- 10
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.
Editado a las 2023-05-27 23:46:10,
- Recomendados
- Resumen
HTML
Estilo web<br>
Selector
Selector de etiquetas<br>
Nombre de etiqueta {nombre de atributo: atributo; nombre de atributo: atributo}<br>
Selector de clases<br>
.Nombre de etiqueta {nombre de atributo: atributo; nombre de atributo: atributo}<br>
selector de identificación<br>
#id{Nombre del atributo: atributo; Nombre del atributo: atributo}<br>
<pre class="prettyprint linenums Prettyprinted"><code class="language-html"><span class="tag"><h1 style="font-size:18px">Cómo utilizar el formato en línea</h1>< /span></code></pre>
<span style="font-family: 'Wawati SC';">Nombre de etiqueta, .nombre de clase, #ID</span><span style="font-family: 'Wawati SC';"><span style=" font-family:Wawati SC">｛</span>Selector de unión</span><span style="font-family:Wawati SC">｝</span>
<span style="font-family:Wawati SC">Nombre de etiqueta.Nombre de clase {selector de intersección}</span>
<span style="font-family: 'Wawati SC';">Nombre de etiqueta externaNombre de etiqueta interna</span><span style="font-family: 'Wawati SC';"><span style="font-family: Wawati SC">｛</span>Selector de descendientes</span><span style="font-family:Wawati SC">｝</span>
Cómo introducir estilos CSS<br>
Estilos en línea<br>
Insertar estilos<br>
<pre class="prettyprint linenums Prettyprinted"><code class="language-html"><span class="tag"><head><style type="test/css"> h1{Nombre del atributo: atributo;}< /style></head></span></code></pre>
Importar estilos<br>
<link href="Nombre de archivo de estilo" type="Formato de texto/archivo de enlace css" rel="hoja de estilo" hoja de estilo externa del documento/><br>
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<br>
tipo
Tipo de fuente: familia de fuentes<br>
Representación de fuente: texto-sombra<br>
Tamaño de fuente: tamaño de fuente<br>
Estilo de fuente: estilo de fuente<br>
oblicuo ligeramente inclinado<br>
cursiva<br>
Peso de fuente: peso de fuente<br>
Fuente en mayúsculas: variante de fuente<br>
Atributo de fuente: fuente
fuente{estilo peso tamaño tipo}<br>
Estilo de decoración del texto: decoración del texto<br>
Subrayado: subrayado<br>
Tachado: línea completa<br>
Color: color<br>
Fondo<br>
Color de fondo: color de fondo<br>
Imagen de fondo: imagen-de-fondo<br>
Método de repetición de la imagen de fondo: bakeground-repeat<br>
Imagen de fondo Posición inicial de los ejes X, Y: posición de fondo<br>
Asociación de fondo: adjunto de fondo: fijo (el fondo no se desplaza con el texto)<br>
bloquear
espaciado de palabras: espaciado de palabras
Espaciado entre letras: espaciado entre letras<br>
Alineación vertical con texto: alineación vertical, alineación de texto<br>
Sangría de primera línea: sangría de texto<br>
Modo de visualización: visualización<br>
altura de línea: altura de línea
Modelo de caja<br>
Definir ancho y alto: ancho,alto<br>
Relleno superior, inferior, izquierdo y derecho: padding-top,right,bottom,left<br>
Márgenes externos superior, inferior, izquierdo y derecho: margen superior, derecho, inferior, izquierdo<br>
margen:0px auto;Página web centrada<br>
Borde: borde<br>
Estilo de borde: estilo grosor del borde: ancho color del borde arriba, abajo, izquierda y derecha<br>
<pre>estilo de borde: punteado, sólido, doble, discontinuo </pre>;
Display controla la visualización y ocultación de elementos<br>
display:block muestra el elemento como un elemento a nivel de bloque, con saltos de línea antes y después<br>
display:inline muestra elementos como elementos de seguimiento sin saltos de línea<br>
display: none oculta el elemento<br>
flotar<br>
flotar<br>
flotador claro claro <br>
ambos flotadores claros izquierdo y derecho<br>
procesamiento de desbordamiento del cuadro de desbordamiento<br>
El contenido visible se recortará y el contenido recortado aparecerá fuera del cuadro<br>
El contenido oculto se recortará y el resto del contenido será invisible<br>
posición
posición
posicionamiento relativo velativo<br>
aparecerá donde está, permitiendo que el elemento se mueva "en relación con" su origen
posicionamiento absoluto<br>
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<br>
lista
Tipo de número de artículo: tipo-estilo-lista<br>
Imagen del número de artículo: imagen-estilo-lista<br>
Posición de la marca del elemento: posición-estilo-lista<br>
La etiqueta interior se muestra en el interior<br>
La etiqueta onside se muestra afuera<br>
Pseudoclase de hipervínculo<br>
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<br>
Cursor predeterminado: predeterminado<br>
Puntero de hipervínculo: puntero<br>
abarcar{cursor:puntero;}
Indica que el programa está ocupado: espera<br>
Indica ayuda disponible: ayuda<br>
Texto de instrucción: texto
Etiquetas y atributos<br>
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<br>
El texto entre <title> y </title> es el título de la página web<br>
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 <p> y </p> se muestra como un párrafo
<br/> Salto de línea <hr/> Línea horizontal<br>
El texto entre <em> y </em> <i> y </i> está en cursiva<br>
El texto entre <strong> y </strong> está resaltado<br>
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><p name="name"></p>
símbolos especiales
Espacio<br>
> Signo mayor que
< signo menor que
&copiar símbolo de copyright ©
www.w3school.com.cn
<meta> y </meta> definen el formato de codificación<br>
UTF-8, GB2312, GBK<br>
<meta juego de caracteres="UTF-8"></meta><br>
<link> y </link> se utilizan para introducir estilos CSS<br>
lista
<ul><li> Con </li></ul> Lista desordenada<br>
Tipo de atributo: disco círculo sólido, caja cuadrada, círculo círculo hueco<br>
<ol><li> y </li></ol> lista ordenada<br>
Tipo de atributo: 1aAIi<br>
<dl><dt><dd> y </dd>Observaciones</dt></dl> Lista de definiciones<br>
Etiquetas de tabla <table> y </table>, las listas se pueden anidar dentro<br>
<th> y </th> definen encabezados<br>
<tr> y </tr> definen filas de la tabla<br>
<td> y </td> definen las celdas de la tabla<br>
<thead> y </thead> <tbody> y </tbody> <tfoot> y </tfoot>. . .
Propiedades (alineación horizontal: izquierda, centro, derecha; alineación central de la imagen media<br> alineación vertical valign: alineación superior superior, alineación central media, alineación inferior inferior, alineación de línea base)
<table border="1" cellpadding="El espacio entre celdas y el contenido" cellpacing="El espacio directo entre celdas''"></table>
Fusionar colspan horizontalmente, fusionar lista de intervalos de filas<br>
<frameset> y </frameset> (escritos fuera del cuerpo)
Atributos (definir columnas de clasificación horizontal del marco="200px,*,100px" filas de clasificación vertical)<br>
<frame src="Otra dirección de página web" name="Nombre, fácil de acceder"/>
<iframe> y </iframe>
Etiquetas de formulario <form> y </form>, los elementos del formulario se pueden anidar dentro<br>
<pre><form action="Sitio web enviado" método="GET o POST"></pre>
<p>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ágina</p><p>Si 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. </p>
<input name="Nombre del elemento" tipo="Tipo" valor="Valor" tamaño="Ancho de visualización" maxlength="Longitud del carácter" verificado="Si está seleccionado" deshabilitado="deshabilitado" readonly="solo lectura solo lectura" > <br>
<em><input type="text"></em> define un campo de entrada de una sola línea para <em>entrada de texto</em>
<pre><tipo de entrada="texto" nombre="apellido"></pre>
<em><input type="contraseña"></em> define el <em>cuadro de contraseña</em>.
<pre><tipo de entrada="contraseña" nombre="apellido"></pre>
<em><input type="radio"></em> define un <em>botón de opción</em>.
<pre><input type="radio" name="sex" (los nombres de los mismos botones de radio deben ser consistentes) value="female">Mujer</pre>
<em><input type="checkbox" name="Los nombres entre las casillas de verificación deben ser consistentes"></em> Defina <em>casilla de verificación</em>.
<em><input type="submit"></em> define el botón para <em></em><em>enviar</em> el formulario.
<em><input type="reset"></em> Define el botón para <em></em><em>restablecer</em> el formulario.
<em><input type="button"></em> define un botón normal para el formulario <em></em><em></em>.
<pre><button type="button" onclick="alert('¡Hola mundo!')">¡Haz clic en mí!</button></pre>
<em><input type="file"></em> define el <em></em><em>cuadro de selección de archivos</em>.
<input type="hidden">campo oculto<br>
<em><select></em>Definir la <em>lista desplegable</em><em><em><option></em>Definir la opción a seleccionar</option></select> </em>
<pre><select name="cars" size="Duración de cada aparición"><br><option value="volvo"<em></em> selected = "seleccionado" (seleccionado por defecto)>Volvo</ opción><br><opción valor="saab">Saab</option><br><opción valor="fiat">Fiat</option><br><opción valor="audi">Audi</option> <br></select></pre>
El elemento <em><textarea></em> define un campo de entrada de varias líneas (<em>textarea</em>)</textarea>
<pre><textarea name="message" rows="10" cols="30"><br>Este es contenido de texto predefinido<br></textarea></pre>
El elemento <em><datalist></em> especifica una lista predefinida de opciones. <opción valor="Contenido predefinido"></datalist>
<datalist id="navegadores"><br> <opción valor="Internet Explorer"><br> <opción valor="Firefox"><br> <opción valor="Chrome"><br> <opción valor=" Ópera"><br> <option value="Safari"><br></datalist>
<fieldset field><título del campo de leyenda>Forma semántica</legend></fieldset><br>
Formularios relacionados<br>
<pre id="line1"><span><<span class="start-tag">etiqueta</span> <span class="attribute-name">for</span>="<a class="atributo -value">masculino</a>"></span><span>Masculino</span><span></<span class="end-tag">etiqueta</span>></span><span ><br></span><span><<span class="start-tag">entrada</span> <span class="attribute-name">tipo</span>="<a class="atributo -value">radio</a>" <span class="attribute-name">nombre</span>="<a class="attribute-value">género</a>" <span class="atributo- nombre">id</span>="<a class="attribute-value">masculino</a>"<span>/</span>></span></pre>