hogar / Instalación y configuración/ HTML de guiones que no se separan. Caracteres especiales HTML

Guión de no separación html. Caracteres especiales HTML

No todos los caracteres que ve en el teclado pueden usarse en el texto de un documento HTML. Sin embargo, esto es lógico. Si cada etiqueta comienza con un carácter (<) и заканчивается символом (>), entonces es lógico que estos caracteres no se puedan especificar dentro de un texto sin formato. Estos caracteres tienen un significado especial en los documentos HTML. Cuando el navegador las ve, piensa que son etiquetas HTML e intenta interpretarlas como tales.
Para resolver el problema de agregar caracteres que está prohibido ingresar en el texto de un documento HTML, se desarrolló un conjunto de caracteres especiales, secuencias que reemplazan los caracteres que están prohibidos ingresar desde el teclado. Los caracteres que no están presentes en su teclado también se pueden reemplazar con caracteres especiales. Cada una de estas secuencias (enlace mnemotécnico) debe comenzar con un carácter ampersand (&) y terminar con un punto y coma (;). Entre (&) y (;) puede escribir:

nombre de carácter especial (&name;);
el código numérico que se ingresa después del signo (), es decir, al escribir un carácter especial especificando su código numérico, debe usar la siguiente notación: (&code;);

El código numérico se puede representar en forma decimal o hexadecimal.
Por ejemplo, para mostrar un signo menor que (<) мы должны написать: < (nombre del símbolo) o &60;(código numérico en decimal) o &x0003C;(código numérico en sistema hexadecimal).

Espacio irrompible

El propósito principal del espacio sin ruptura. () (desde el espacio que no se rompe) - palabras separadas, pero prohíbe un salto de línea en este punto. Dado que el tamaño de la ventana del navegador no es constante, una nueva línea en un párrafo aparece automáticamente. En este caso, el navegador romperá la línea en cualquier lugar donde haya un espacio o un guión. De acuerdo con las reglas de ortografía, hay construcciones lingüísticas que no se pueden romper. Las construcciones con un espacio que no se rompe, por ejemplo, incluyen:

apellidos con iniciales;
em guiones precedidos por una palabra;
palabras monosilábicas seguidas de una palabra;
dígitos seguidos de las unidades de medida.

En estos casos, se suele utilizar un espacio de no separación () en el código HTML. Dicho espacio parecerá un espacio regular, pero garantiza que las palabras entre las que se encuentra estarán, bajo cualquier circunstancia, en la misma línea.

15 m/s
100 km/h

Como ya sabe, en HTML, varios espacios normales consecutivos se reemplazan por un solo espacio. Si escribe 10 espacios en su texto, el navegador eliminará 9 de ellos. Para agregar espacios reales en el texto, puede usar un espacio que no se rompa () .

Citas.

Existen tres tipos de comillas en la industria gráfica: las comillas de doble ángulo o en espiga (“ ”), las comillas tipográficas (“ ”) y las “patas” manuscritas (“ ”). Utilizará comillas rectas dobles (" ") y comillas rectas simples (" ") cuando trabaje con códigos de programa.
Por tradición, en ruso, el principal tipo de comillas son los "árboles de Navidad". En HTML, los árboles de Navidad corresponden a caracteres « Y » . Muchas publicaciones también utilizan comillas tipográficas y comillas dobles rectas en lugar de "espiga".
Las comillas tipográficas izquierda y derecha corresponden a los caracteres “ Y ” respectivamente, y la comilla inferior izquierda - „ .
Las comillas dobles rectas corresponden a un carácter especial " .

El uso de comillas especiales se muestra en el siguiente ejemplo:

Ejemplo: uso de comillas

Guión y guión.

En la imprenta, hay tres caracteres que son muy similares entre sí: un guión largo, un guión corto y un guión. De estos, solo hay uno en el teclado de una computadora: este es un guión. Es él quien generalmente se usa en todos los casos cuando se necesita poner un guión o guión en el texto. Sin embargo, se deben seguir ciertas reglas de puntuación con respecto al uso de estos caracteres.
Por ejemplo, un guión (-) se usa solo dentro de palabras o entre números. Un guión largo (-) se coloca entre las palabras de una oración y se separa de esas palabras por espacios. Un guión em corresponde a una referencia mnemotécnica — . Un guión corto (-) se coloca entre números sin letras o entre palabras que se escriben en mayúsculas, y también se usa como signo menos en fórmulas matemáticas. No hay espacio entre guiones y palabras. Un guión corto corresponde a una referencia mnemotécnica - .

El uso de un guión y una raya se muestra en el siguiente ejemplo:

Ejemplo: Caracteres especiales - y -

Inténtalo tú mismo "

El tiempo es dinero...

La página web está tardando demasiado en abrirse.
Debería cargarse en 2-4 segundos.
El tiempo es dinero...

Lista de algunos caracteres especiales HTML populares

Símbolo	Descripción	nombre nemotécnico	Código numérico
	espacio irrompible
<	menos que	<
>	más que	>	>
&	ampersand	&	&
"	comillas dobles rectas	"	"
"	apóstrofe	"	"
«	cita de doble ángulo izquierdo	«	«
»	cita de doble ángulo recto	»	»
‘	comilla simple izquierda	‘	‘
’	comilla simple correcta	’	’
‚	comilla simple inferior	‚	‚
“	comillas dobles izquierdas	“	“
”	comillas dobles a la derecha	”	”
„	comillas dobles inferiores	„	„
€	euro	€	€
	derechos de autor		©
®	marca registrada	®	®

Variedades de caracteres especiales.

En un teclado normal, no encontrará la mayoría de los caracteres especiales matemáticos, técnicos, geométricos y otros.
Para aplicar tales caracteres en una página HTML, puede usar sus nombres mnemotécnicos correspondientes.

El siguiente ejemplo muestra cómo se puede mostrar el mismo carácter usando diferentes códigos.

Artemy Lebedev.

en el teclado uno guión, generalmente está a la derecha del cero y arriba de las letras "Z" y "X". Las personas desinformadas lo llaman alternativamente un guión, un signo menos o una raya. Lebedev nos explica qué es cuatro(considerando dos tipos de guiones) caracteres diferentes. en realidad ellos al menos nueve, y te lo contaré ahora.

Sobre menos(−), ya todos lo saben: el signo menos se usa en expresiones matemáticas, tiene el mismo ancho que cualquier número, está alineado con la altura de la letra mayúscula, a diferencia del guión y el guión, y está escrito en HTML como − .

En este punto, todo el mundo suele ir al tablero. Pero espera, ¡aún no hemos cubierto tres personajes!

¿Qué símbolo se usa para escribir números de teléfono (555-41-72)? Guión, dices; ¡pero no! Hay un símbolo separado para esto: guión digital(guión de figura). Parece (‒) casi como un menos, pero no es un menos.

Puede preguntar: ¿por qué entonces no puede usar un signo menos, ya que se ve exactamente igual? Porque un menos es un signo de resta, y en un número de teléfono, nada se resta de nada. Por la misma razón que necesita usar em en lugar de i para seleccionar texto. No se puede explicar, sólo se puede saber.

El guión digital tiene el código U+2012 y está escrito como ‒ en HTML.

ACERCA DE guión, también llamado guión suave, también es conocido por muchos. Este símbolo, indicado en HTML como - , se coloca en palabras entre sílabas en aquellos lugares donde se puede hacer un guión. No se muestra en la pantalla, excepto cuando llega al final de una línea; en este caso, el navegador (dicen que incluso Firefox ha aprendido a hacer esto desde la tercera versión) no envuelve toda la palabra, sino que pone un guión y envuelve el resto de la palabra.

Esto es especialmente útil con palabras largas, donde la separación de palabras crea grandes espacios en blanco en el lado derecho de la pantalla. Una gran desventaja del carácter de guión es que es un inconveniente colocarlo manualmente (sin embargo, los programas de autotipografía pueden manejar esto) y que su uso desordena y hace que el código fuente sea ilegible (por lo tanto, es mejor si la separación de guiones la realiza el CMS en etapa de generación) código HTML a partir del texto almacenado en la base de datos).

Otro carácter parecido a un guión es el guión (⁃), que se utiliza como marcador de lista ( maldita bala). The Lebedev Studio señala acertadamente que en la tradición tipográfica rusa no existe una viñeta (es decir, círculos tradicionales con cuadrados), y sugieren usar un guión (largo) como marcador; como puede ver, eso es exactamente lo que hacen (o hicieron) en su sitio e incluso se enfurecieron con un artículo que explica cómo hacerlo.

De hecho, existe un símbolo especial para los marcadores de lista, que tiene el código U+2043 (sin embargo, Lebedev afirma que esto no se aplica a la tipografía rusa). En HTML, es bastante fácil crear un marcador de este tipo para una lista usando CSS:

ul( estilo de lista: ninguno dentro; ) ul>li: antes( contenido: "\2043"; margen izquierdo: -1ex; margen derecho: 1ex; )

(Por supuesto, el código anterior no es perfecto y solo funcionará en los navegadores correctos, pero espero que capte la idea).

Ahora finalmente podemos pasar al tablero; aquí ya está todo bien recorrido: la diferencia entre en guión(-, en guión, un guión tan ancho como la letra "n", -) y guión largo(—, em dash, un guión tan ancho como la letra "M", -). Se sabe que la tipografía rusa utiliza exclusivamente guiones largos (aunque existen disputas sobre la posibilidad de usar guiones largos en rangos numéricos), mientras que en Occidente se suele preferir el guión largo.

El em dash también se usa en ruso en los diálogos. En Occidente, para este propósito, a menudo usan un símbolo separado barra horizontal (―):

- Je m'ennuie tellement, dit-elle.
- Cela n'est pas de ma faute, rétorqua-t-il.

Entonces, nueve líneas diferentes:

Firmar	HTML	Nombre	Finalidad y uso
-	-	hipsominus	en lugar de todos los demás guiones en ausencia de viabilidad técnica
‐	‐	guión	para separar partes de una palabra: “gris claro”, “en mi opinión”, “alguien”, etc.
−	−	menos	expresiones matemáticas: 2 − 3 = −1
‒	‒	guión digital	números de teléfono y otros códigos digitales
	-	guión	en palabras (largas) donde se puede separar
⁃	⁃	maldita bala	marcador de lista
-	-	en guión	tipografía occidental
—	—	guión largo	tipografía rusa
―	―	barra horizontal	diálogos (en tipografía occidental)

Y, a modo de comparación, en una línea:
- ‐
−
‒

⁃
-
—

¡Hola, querida habradrug! En este tutorial, aprenderemos a crear dos formularios HTML5: un formulario de inicio de sesión y un formulario de registro. Estas formas se intercambiarán entre sí utilizando la pseudoclase CSS3 :target. Usaremos CSS3 y una fuente de icono. La idea detrás de esta demostración es mostrarle al usuario un formulario de inicio de sesión y proporcionarle un enlace "ir" al formulario de registro.
En este tutorial, lo guiaré a través de cómo crear el efecto como en la Demostración 1 en detalle.

HTML

Hemos usado algunos trucos de HTML5 aquí. Por ejemplo, elemento tipo=contraseña oculta automáticamente lo que el usuario escribe y reemplaza los caracteres con puntos o asteriscos (según el navegador). Elemento escriba = correo electrónico permite que el navegador verifique el formato correcto de la dirección de correo electrónico. Además, utilizamos el parámetro requerir = requerido; los navegadores que admiten esta configuración no permitirán que el usuario envíe el formulario hasta que se llene el campo, no se requiere JavaScript aquí. Parámetro autocompletar=activado llenará automáticamente algunos campos. También usamos texto de marcador de posición para ayudar al usuario a completar el formulario.

Ahora para dos puntos difíciles. Es posible que haya notado dos enlaces al principio del formulario. Este ingenioso truco permitirá que nuestro formulario se comporte correctamente cuando trabaje con anclas (anclajes).

El segundo punto está relacionado con el uso de una fuente con iconos. Usaremos atributos de datos para mostrar los íconos. Parámetro de configuración icono de datos = "icono_carácter" con los caracteres correspondientes en el HTML, solo necesitamos asignar una regla CSS para establecer el estilo de todos los íconos. Puede leer más sobre esta técnica en el sitio web: 24 formas: mostrar iconos con fuentes y atributos de datos.

CSS

Para mantener limpio el código, omitiré los parámetros básicos (html, cuerpo, etc.), pero puede encontrarlos en los archivos fuente. Nuevamente, estoy usando trucos de CSS3 que no funcionarán en todos los navegadores. ¡Entonces empecemos!

Formas de estilo usando CSS3

Primero, demos a nuestros formularios un estilo básico.

#subscribe, #login( posición: absoluta; arriba: 0px; ancho: 88%; relleno: 18px 6% 60px 6%; margen: 0 0 35px 0; fondo: rgb(247, 247, 247); borde: 1px sólido rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) recuadro; border-radius: 5px ; ) #iniciar sesión (índice z: 22; )

Aquí le asignaremos propiedades al encabezado:

/**** texto ****/ #wrapper h1( tamaño de fuente: 48px; color: rgb(6, 106, 117); relleno: 2px 0 10px 0; familia de fuentes: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Actualmente, solo webkit admite background-clip:text; **/ #envoltorio h1( fondo: -webkit-repetición-degradado lineal(-45 grados, rgb(18, 83, 93), rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparente; -webkit-background-clip: text; ) #wrapper h1:after( content: " "; pantalla: bloque; ancho: 100%; altura: 2 píxeles; margen superior: 10 píxeles; fondo: degradado lineal (izquierda, rgba (147,184,189,0) 0%, rgba (147,184,189,0.8) 20%, rgba ( 147.184.189,1) 53 %, rgba(147.184.189,0,8) 79 %, rgba(147.184.189,0) 100 %); )

Tenga en cuenta que hoy en día solo los navegadores con soporte webkit clip de fondo: texto, por lo que crearemos el fondo rayado solo para webkit y lo anclaremos al encabezado H1. Dado que el parámetro clip de fondo: texto funciona solo en navegadores Webkit, decidí trabajar solo con propiedades de webkit. Es por eso que dividí el CSS en dos y solo usé el degradado de webkit. Sin embargo, ¡no solo debe usar webkit en sus sitios web! Así, por ejemplo, el parámetro -webkit-text-fill-color: transparente nos permite tener un fondo transparente, pero solo para navegadores webkit, todos los demás navegadores ignorarán esta propiedad.

También creamos una línea delgada debajo del título con el elemento de pseudoclase :after. Usamos un degradado de 2px y redujimos la opacidad en los bordes a cero.

Ahora cuidemos los campos de entrada y démosles un buen aspecto.

/**** estilo de entrada avanzado ****/ /* marcador de posición */ ::-webkit-input-placeholder ( color: rgb(190, 188, 188); font-style: italic; ) input:-moz- marcador de posición, área de texto:-moz-marcador de posición (color: rgb (190, 188, 188); estilo de fuente: cursiva;) entrada (esquema: ninguno;)

Primero, diseñaremos los márgenes y eliminaremos el trazo. Pero ojo: el trazo ayuda al usuario a entender en qué campo se encuentra. Si lo elimina, debe aplicar las propiedades :active y :focus.

/* todos los campos excluyen envío y casilla de verificación */ #wrapper input:not()( width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box -dimensionamiento: cuadro de contenido; radio de borde: 3 px; sombra de cuadro: 0 px 1 px 4 px 0 px rgba (168, 168, 168, 0.6) recuadro; transición: todo 0.2 s lineal; ) # entrada de contenedor: no (): activo , #entrada del contenedor: no (): foco (borde: 1px sólido rgba (91, 90, 90, 0.7); fondo: rgba (238, 236, 240, 0.2); caja-sombra: 0px 1px 4px 0px rgba (168) , 168, 168, 0.9) recuadro; )

Aquí hemos usado la pseudo clase :not para diseñar todos los campos excepto las casillas de verificación. Además, decidí eliminar el trazo y agregué las propiedades :focus y :active.

Ahora es el momento de divertirse: fuente con iconos. Como no podemos usar las pseudoclases :before y :after, agregaremos el icono al parámetro de la etiqueta y luego lo colocaremos en el campo. Usaré la biblioteca de fontomas. Puede hacer coincidir los iconos con la letra correspondiente usted mismo. Recordar atributo icono de datos? Es en él que necesitas insertar una letra. solía icono de datos = 'u' para inicio de sesión, 'e' para correo electrónico, 'p' para contraseña. Una vez que elegí las letras, descargué la fuente y usé el generador de fuentes fontsquirrel para convertirla a un formato adecuado para @font-face.

@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fuentes/fontomas-webfont.woff") formato("woff"), url("fuentes/fontomas-webfont.ttf") formato("truetype"), url("fuentes/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** ¡truco de magia! **/ :después (contenido: attr(icono de datos); familia de fuentes: "FontomasCustomRegular"; color: rgb(106, 159, 171); posición: absoluta; izquierda: 10px; arriba: 35px; ancho: 30px; )

Eso es todo. No necesita tener una clase separada para cada icono. Usamos el parámetro content:attr(icono de datos) para obtener la letra del atributo data-icon. Así, solo necesitamos asignar una fuente, elegir un color y colocar el icono.

Ahora vamos a asignar reglas al botón de enviar del formulario.

/*diseñar ambos botones*/ #wrapper p.button input(ancho: 30%; cursor: puntero; fondo: rgb(61, 157, 179); relleno: 8px 5px; familia de fuentes: "BebasNeueRegular","Arial Narrow ", Arial, sans-serif; color: #fff; tamaño de fuente: 24 px; borde: 1 px rgb sólido (28, 108, 122); margen inferior: 10 px; sombra de texto: 0 1 px 1 px rgba (0, 0 , 0, 0.5); borde-radio: 3px; caja-sombra: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) recuadro, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb (210, 210, 210); transición: todo 0,2 s lineal; ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:activo, #wrapper p. entrada de botón: enfoque (fondo: rgb (40, 137, 154); posición: relativa; superior: 1 px; borde: 1 px sólido rgb (12, 76, 87); caja-sombra: 0 px 1 px 6 px 4 px rgba (0, 0 , 0, 0.2) recuadro; ) p.login.button, p.signin.button(text-align: right; margin: 5px 0; )

El truco es usar box-shadow para crear múltiples bordes. Naturalmente, puede usar solo un marco, pero también puede usar varios. Usaremos el parámetro de longitud para crear un segundo borde blanco "falso", de 3 px de ancho, sin desenfoque.

Ahora vamos a diseñar la casilla de verificación, no haremos nada inusual aquí:

/* aplique estilo a la casilla de verificación "recuérdame"*/ .keelogin( margin-top: -5px; ) .keelogin input, .keelogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping(margen-right: 5px; ) .keelogin label(ancho: 80%; )

Aplique estilo al pie de página de la forma utilizando varios degradados lineales para crear un degradado rayado.

P.change_link(posición: absoluta; color: rgb(127, 124, 124); izquierda: 0px; altura: 20px; ancho: 440px; relleno: 17px 30px 20px 30px; tamaño de fuente: 16px; alineación de texto: derecha; borde superior: 1px rgb sólido (219, 229, 232); borde-radio: 0 0 5px 5px; fondo: rgb (225, 234, 235); fondo: gradiente lineal repetido (-45 grados, rgb (247, 247, 247), rgb (247, 247, 247) 15 px, rgb (225, 234, 235) 15 px, rgb (225, 234, 235) 30 px, rgb (247, 247, 247) 30 px); ) #envoltura p .change_link a (pantalla: bloque en línea; peso de fuente: negrita; fondo: rgb (247, 248, 241); relleno: 2px 6px; color: rgb (29, 162, 193); margen izquierdo: 10px; texto -decoración: ninguno; borde-radio: 4px; borde: 1px rgb sólido (203, 213, 214); transición: todo 0.4s lineal;) #wrapper p.change_link a:hover (color: rgb(57, 191, 215) ); fondo: rgb(247, 247, 247); borde: 1px solid rgb(74, 179, 198); ) #wrapper p.change_link a:active( posición: relativa; top: 1px; )

Ahora puede ver que tenemos dos formularios agradables, pero queremos que solo se muestre uno de ellos. ¡Es tiempo de animación!

Crear una animación

Lo primero que haremos será ocultar la segunda forma estableciendo la opacidad en 0:

#registro( índice z: 21; opacidad: 0; )

¿Recuerdas que el formulario de inicio de sesión tiene un índice z: 22? En el segundo formulario, asignaremos este parámetro a 21 para ponerlo "debajo" del formulario de inicio de sesión.

Ahora viene la parte divertida: intercambiar formas usando la pseudo clase :target. Hay una cosa que debes entender sobre :target: usaremos anclas para navegar. El comportamiento normal de un ancla es saltar a un elemento de página específico. Pero no queremos eso, solo queremos cambiar las formas. Aquí es donde nuestro truco de usar dos enlaces en la parte superior de la página viene al rescate. En lugar de llevarnos directamente a la segunda forma, a riesgo de experimentar un efecto de “salto”, le daremos a los enlaces un parámetro pantalla: ninguno. Esto te ayudará a evitar saltar. Encontré este truco en el sitio: CSS3 create (francés).

#pararegistrar:objetivo ~ #envoltorio #registrar, #parainiciar sesión:objetivo ~ #envoltorio #iniciar sesión (índice z: 22; nombre de animación: fadeInLeft; retraso de animación: .1s; )

Esto es lo que sucede: cuando hacemos clic en el botón Unirse, nos dirigimos a #toregistrar. Luego se lleva a cabo la animación y solo entonces vamos al elemento #registrar. Usamos una animación llamada desvanecerse a la izquierda. Dado que estamos "ocultando" la forma con opacidad cero, aplicaremos una animación que se desvanecerá. También cambiamos el índice z para que aparezca encima de la otra forma. Lo mismo sucede con la otra forma.
Aquí está el código de animación. Usamos el marco de animación CSS3 de Dan Eden y adaptamos este marco para nuestro tutorial.

Animate( duración-animación: 0.5s; función-timing-animación: fácil; modo-relleno-animación: ambos; ) @keyframes fadeInLeft ( 0% ( opacidad: 0; transform: translateX(-20px); ) 100% ( opacidad : 1; transformar: traducirX(0); ) )

La forma que "desaparece" tendrá una animación de desvanecimiento a la izquierda:

#pararegistrar:objetivo ~ #envoltorio #inicio de sesión, #parainiciar sesión:objetivo ~ #envoltorio #registrar(nombre-animación: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacidad: 1; transformar: translateX(0); ) 100% ( opacidad : 0; transformar: traducirX(-20px); ) )

Ahora puedes usar otras animaciones de Dan Eden con el archivo animate.css: simplemente cambia la clase .animate y los nombres de las animaciones. También encontrará otras animaciones al final del archivo animate-custom.css.

Eso es todo, amigos. ¡Espero que hayan disfrutado este tutorial!

Tenga en cuenta que en algunos navegadores la opción clip de fondo: texto No soportado. Las animaciones no funcionan en Internet Explorer 9. En Internet Explorer 8 y versiones anteriores, la pseudoclase :target no es compatible, por lo que este efecto no funcionará allí.

PD Todos los comentarios acerca de la traducción serán felices de aceptar en forma personal. ¡Gracias!

Etiquetas: Agregar etiquetas

El texto escrito a máquina consta de caracteres impresos: símbolos gráficos.
Los caracteres gráficos son caracteres que tienen una visualización visible en el texto.
Todos los caracteres gráficos se recopilan en un conjunto de un único sistema Unicode universal.
Insertar carácter gráfico unicode en documento html
- el propósito principal y único de esta tabla.

Puede insertar un carácter en un documento html de una de las siguientes maneras:

copie la imagen del símbolo de la ventana del navegador en la ventana de su editor html visual
copie el código html de un personaje directamente en el código del documento html

Entendemos que se trata de dos formas diferentes:

insertar visual en visual
incrustar código dentro del código.

La fuente de un símbolo, su tamaño y color en HTML se puede configurar con un código como:
CHAR_CODE
Dónde,
Arial - fuente,
10px - tamaño de fuente en píxeles,
#ff0000 - código de color de fuente (rojo)

Por ejemplo:
☎ - tamaño de fuente de carácter 30px,
☎ - tamaño de fuente de caracteres 30px, color - rojo
☎ - tamaño de fuente de caracteres 20px,
☎ - tamaño de fuente de caracteres 10px.
Nota. Las fuentes recomendadas para insertar caracteres especiales son Arial, Verdana y Tahoma. Estas fuentes muestran correctamente los caracteres Unicode y, a su vez, son compatibles con las aplicaciones web.

"Símbolo"
(visualización de símbolo visible)
Desde esta columna, puede copiar la imagen del símbolo y pegarla en la ventana del editor de texto html. El símbolo se copiará con un tamaño de fuente de 20 px. Una vez completada la copia, puede ser necesario ajustar individualmente el tamaño de fuente directamente para el carácter copiado.
"Nombre"
(solo para personajes importantes u oscuros)
Explicación de la finalidad del símbolo, su alcance, ejemplos...
"Mnemotécnica"
Un mnemotécnico es una construcción de letra de la forma ", que denota el código de letra de un carácter en HTML. Se inserta directamente en el código html de un documento html. Los mnemotécnicos son muy populares entre los tipógrafos profesionales. Son perfectamente recordados por una persona y son compatibles con todas las aplicaciones html. Cada mnemónico contiene un nombre de letra (designación) de su símbolo y un carácter de servicio (&), que sirve como una señal para leer el código del navegador y no se muestra en la pantalla del monitor. de cada mnemónico es único y fácil de leer, porque se forma a partir de la palabra inglesa que caracteriza el símbolo.
Mnemotecnia (griego) - el arte de recordar algo. La mnemotécnica se utiliza para facilitar la percepción de información difícil de recordar cuando el objeto de memorización se lleva a un estado asociativo con algo.
"Código"
Código - Código numérico de caracteres decimales en HTML, de la forma &. Insertado directamente en el código html de un documento html. El código numérico decimal consta de un número que indica el número de serie del carácter en el sistema Unicode y varios caracteres de servicio (& y #), que sirven como señal para que el navegador lea el código y no se muestran en la pantalla del monitor. El código numérico decimal es muy utilizado y usado debido a su versatilidad y facilidad de percepción.

Caracteres de control en HTML (XHTML)

Los caracteres de control en HTML (XHTML) son los símbolos de servicio del lenguaje HTML que se utilizan en el diseño HTML de una página web. Estos caracteres deben ser compatibles con cualquier navegador, ya que sin ellos es imposible mostrar correctamente el texto HTML. Los caracteres de control no se muestran en el texto y, cuando se ingresan directamente desde el teclado, el navegador los interpreta como signos de puntuación, lo que requiere alguna acción cuando la página se dibuja en la pantalla.

Se permite el uso de caracteres de control en textos ordinarios, donde simbolizan conceptos universales y son tratados por el navegador como caracteres tipográficos ordinarios. Con este uso de símbolos de servicio en textos HTML, no se requiere ingresar el valor del símbolo en sí, sino su código HTML. Porque, repito, de lo contrario, el navegador percibirá el símbolo del servicio como una llamada a la acción y no mostrará correctamente el texto HTML en la pantalla del monitor.

Los caracteres de control y su código HTML son conocidos y entendidos por todos los navegadores sin excepción, lo que, por desgracia, no se puede decir de otros caracteres que pueden no mostrarse correctamente en diferentes navegadores o, peor aún, no mostrarse en absoluto.

Sintaxis y puntuación


	espacio de longitud N (espacio regular)
	espacio de longitud M (espacio largo)

-	guión suave (marca no imprimible)	-
‑	guión		‑
-	guión de longitud N (guión normal)	-	–
—	Guión de longitud M (guión em)	—	—
.	punto		.
,	coma		,
…	elipsis	…	…
:	colon		:
;	punto y coma		;
!	signo de exclamación		! ǃ
?	signo de interrogación		?
@	"perro"		@
*	"estrella"		*
#	"enrejado"		#
‘	cita única superior izquierda	‘	‘
’	comilla única superior derecha	’	’
‚	cita única inferior derecha	‚	‚
“	cita doble superior izquierda	“	“
”	cita doble superior derecha	”	”
„	cita de doble fondo a la derecha	&bdquo	„
«	cita de doble ángulo izquierdo (rus)	«	«
»	cita de doble ángulo recto (rus)	»	»
́	acento, ejemplo: Vasya		́
"	apóstrofe, ejemplo: tú "yo		"
´	agudo, ejemplo: you'ya	´	´
¶	párrafo (carácter no imprimible)	¶	¶
§	párrafo	§	§
ˆ	acento (pájaro invertido)	ˆ	ˆ
˜	pequeña tilde	˜	˜
¦	línea punteada vertical	¦	¦
(	paréntesis izquierdo		(
)	paréntesis derecho		)
〈	paréntesis angular izquierdo	〈	〈
〉	corchete de ángulo derecho	〉	〉
‹	soporte angular izquierdo, variante	‹	‹
›	soporte angular derecho, variante	›	›
[	corchete a la izquierda		[
]	corchete a la derecha		]
/	barra oblicua - carácter de barra oblicua		/
\	barra invertida		\
⁄	barra oblicua (signo de división)	⁄	⁄
ǀ	barra vertical		ǀ
ǁ	doble barra vertical		ǁ
‾	subrayado, ejemplo: Vasya‾Vasya	‾	‾
¯	macron, ejemplo: Vasya¯vasya	¯	¯

Marcas y moneda

+	más	+	+
−	menos	−	- −
=	es igual		=
±	más o menos	±	±
×	signo de multiplicación	×	×
÷	signo de división	÷	÷
⋅	operador de punto (medio de la cadena)	⋅	· ⋅
∗	operador asterisco (medio de la cadena)	∗	∗
∼	operador de tilde	∼	∼
.	marcador de lista (medio de la línea)	.
¹	superíndice "1"	¹	¹
²	superíndice "2"	²	²
³	superíndice "3"	³	³
Superíndice y subíndice en HTML (XHTML) se puede insertar usando etiquetas ^{Y _{, respectivamente: NÚMERO ^Sobrescrito→ NÚMERO Superíndice NÚMERO _subíndice→ NÚMERO Subíndice}}
½	fracción "un medio"	½	½
⅓	fracción "un tercio"		⅓
¼	fracción "un cuarto"	¼	¼
¾	fracción de tres cuartos	¾	¾
№	símbolo de número		№
%	por ciento		%
‰	ppm	‰	‰
°	grados	°	°
′	brazada (minutos, pies)	′	′
″	carrera doble (segundos, pulgadas) Ejemplo 1: 30° 25′ 12″ Ejemplo 2: 25′ 12 ″	″	″
µ	micro	µ	µ
π	Pi	π	π
ƒ	signo de función (que no debe confundirse con "integral")	ƒ	ƒ
∫	integral	∫	∫
∅	tachado cero, conjunto vacío (no debe confundirse con "diámetro")	∅	∅
⌀	diámetro (que no debe confundirse con la "o" latina tachada)		⌀
ø	"o" latina cruzada en diagonal	ø	ø
Ø	"O" mayúscula latina cortada en diagonal	Ø	Ø
∏	marca de producto	∏	∏
∑	signo de suma	∑	∑
√	radical (raíz cuadrada o raíz x)	√	√
∝	proporcionalmente	∝	∝
∞	infinidad	∞	∞
∠	esquina	∠	∠
⊥	ortogonal (perpendicular)	⊥	⊥
∴	signo "por lo tanto"	∴	∴
≅	aproximadamente igual a	≅	≅
≈	casi igual	≈	≈
≠	no es igual	≠	≠
≡	idénticamente	≡	≡
≤	menor o igual	≤	≤
≥	más o igual	≥	≥
∧	Y lógico	∧	∧
∨	O lógico	∨	∨
⊕	signo más en un círculo (suma directa)	⊕	⊕
⊗	firmar "multiplicación en un círculo" (producto cruzado, flecha del observador)	⊗	⊗
ʘ	punto en un círculo (flecha en el observador)		ʘ










				✵ ✵