Lenguaje de marcado - Elementos de frases

Autor：Eve Cole Fecha de actualización：2025-05-15 13:48:02

Haga clic aquí para volver a la columna del tutorial Wulin.com HTML.

Arriba: Lenguaje de marcado - Formularios

Fuente original Capítulo 6 , y otros elementos de frases

En la introducción y los capítulos anteriores, el concepto de etiquetas semánticas se ha mencionado ligeramente, utilizando etiquetas para identificar el significado de los archivos en lugar de simplemente establecer el efecto de visualización con etiquetas. Diseñar una página web que usa completamente etiquetas semánticas es una buena idea. Sin embargo, creo que este objetivo es demasiado ideal. Por supuesto, no alcanzar el objetivo por completo no significa que el proceso de esfuerzo sea inútil. Al menos es valioso trabajar para este objetivo.

En realidad, a menudo es necesario agregar etiquetas no semánticas para lograr objetivos de diseño específicos, principalmente porque los navegadores famosos de hoy no pueden apoyar los estándares en un 100%. Algunas reglas de CSS no pueden mostrar el efecto correcto en algunos navegadores, y desafortunadamente, debemos usar etiquetas adicionales en el proceso de lograr ciertos objetivos de diseño.

Hay un concepto importante que debe tomarse en serio: es decir, tratar de escribir estructuras semánticas tanto como sea posible traerá beneficios prácticos. Al mismo tiempo, aunque el soporte para los estándares no ha alcanzado el 100%, ha cruzado el punto crítico para que ahora podamos escribir páginas web utilizando métodos que cumplan con los estándares de red. A veces tenemos que hacer algunos sacrificios, pero cuantas más etiquetas cumplan con los estándares, más fácil será para el futuro. Efecto de visualización vs. etiquetas de estructura

Este capítulo discutirá la diferencia entre los efectos de la pantalla y las etiquetas estructurales, o más bien, las diferencias entre el uso de reemplazo y el uso de reemplazo . Más adelante en este capítulo, también discutiremos varios otros elementos de frases y su importancia dentro de la gramática de etiqueta estructurada y compatible con estándares.

Es posible que haya escuchado que algunas personas sugieren usar reemplazo cuando necesitan texto en negrita, pero no le dicen más por qué se necesita tal reemplazo. Sin saber por qué , es realmente difícil esperar que otros diseñadores web cambien sus hábitos de uso de etiquetas solo porque han oído hablar de ello. ¿Por qué es mejor que ?

¿Cuáles son los beneficios de eliminar las etiquetas y y reemplazarlas con y ? De hecho, todo esto es expresar semántica y estructura , no solo para mostrar el efecto . Todos los ejemplos en este libro también se esfuerzan por seguir este concepto. Vea lo que dicen los expertos

Primero, echemos un vistazo a cómo W3C describe y en la especificación de elementos de frase html4.01 (http://www.w3.org/tr/html4/struct/text.html#h-9.2.1):

Los elementos de frases pueden agregar información estructural a los fragmentos de texto. Los elementos de frases comunes tienen los siguientes significados:

 representante estresado

 representa un énfasis más fuerte

Así que aquí estamos discutiendo dos grados diferentes de énfasis. Por ejemplo, es una sola palabra o frase. Cuando se pronuncia, debe ser más fuerte, con un tono más alto, pronunciado más rápido, o ... bueno, se enfatiza más que el contenido de texto general.

W3C luego describe el siguiente párrafo:

El efecto de visualización de los elementos de frases varía con el navegador. En términos generales, el navegador visual debe mostrar el contenido de texto en cursiva y el contenido de texto en negrita. El software de síntesis de voz puede cambiar los parámetros de síntesis con el contenido, como volumen, tono y velocidad, etc.

¡Ah! La última oración es particularmente interesante. El software de síntesis de voz (solíamos llamarlo lector de pantalla) manejará correctamente el texto que debe enfatizarse, lo cual es algo bueno.

En contraste, o son solo etiquetas de efecto de visualización simples. Si nuestro objetivo es separar la estructura del efecto de visualización, usar y es la opción correcta. Solo quiero mostrar texto en negrita y cursiva con CSS. Más ejemplos se discutirán más adelante en este capítulo.

A continuación, mire dos ejemplos de identificación para ayudarnos a comprender sus diferencias. Método A

Su número de pedido para referencia futura es: 6474-82071 . Method B

Su número de pedido para referencia futura es: 6474-82071 .

Esta situación es un ejemplo perfecto de usar más que . Tenemos la intención de hacer que el texto específico en la oración sea más importante. Además de mostrar los números de pedido en negrita, también esperamos que los lectores de pantalla también cambien la forma en que expresan este contenido: aumentar el volumen, cambiar el tono o la velocidad. El método B puede lograr ambos objetivos al mismo tiempo. ¿Así que lo que?

Del mismo modo, reemplazar con puede expresar importancia al mismo tiempo, en lugar de simplemente mostrar el contenido de texto en cursiva. Echemos un vistazo a estos dos ejemplos: el método A

Me tomó noton, pero tres horas para palear mi camino de entrada esta mañana. Método B

Me tomó noita, pero tres horas para palear mi camino de entrada esta mañana.

En el ejemplo anterior (la situación real cuando se escribió este libro), mi propósito era hacer que la palabra tres expresara en un tono de énfasis, al igual que leo esta palabra en voz alta, visualmente, el método B se mostrará en cursiva en la mayoría de los navegadores, y el lector de pantalla ajustará el tono, la velocidad o el volumen de manera apropiada. Mientras sea audaz o en cursiva, está bien

Cabe señalar que en muchos casos, solo se necesita el efecto de texto de BOLD y cursiva para mostrar visualmente. En otras palabras, suponga que tiene una lista de enlaces en la barra lateral, y le gusta dejar que todos los enlaces se muestren con el mismo efecto: es decir, Bold (Figura 6-1)

Figura 6-1. Ejemplo de enlaces en negrita colocados en la barra lateral

Además de las características visuales, no tenemos la intención de enfatizar el contenido de enlace. Este es un buen lugar para cambiar la apariencia de enlaces con CSS, para que los lectores de pantalla y otros navegadores no visuales los enfaticen particularmente.

Por ejemplo, ¿realmente quieres que el enlace en negrita se lea más rápido, más fuerte y un tono más alto? Probablemente no, el en negrita aquí es solo el efecto de visualización. Font-Weight es equivalente a audaz

Para lograr el efecto de visualización de la Figura 6-1, supongamos que la barra de enlace se coloca en <div> con ID establecida en la barra lateral, de modo que podamos usar CSS para especificar que los enlaces dentro de #sideBar deben mostrarse en negrita:

#sidebar a {

Font-Weight: Bold;

}

Extremadamente simple, creo que es un poco ridículo cuando lo menciono, pero esta es una buena manera de ayudar a separar la estructura y mostrar los efectos. ¡Es audaz!

Del mismo modo, puede aplicar ideas similares al pensar en el texto en cursiva. Cuando no desea enfatizar el contenido y solo desea mostrar el texto en cursiva, puede usar el atributo de estilo fuente para tratar estas situaciones a través de CSS nuevamente.

Usemos el mismo #sidebar como ejemplo. Por ejemplo, si desea que todos los enlaces en #sidebar se muestren en cursiva, puede escribir esto:

#sidebar a {

estilo de fuente: cursiva;

}

Es otro concepto simple, pero en el campo de la gramática de marcado estructurado, creo que es muy importante discutir estas situaciones: usar CSS para procesar CCTV en lugar de mostrar etiquetas de efectos. A veces, la solución más simple también es la más fácil de ignorar. Compartir en negrita e cursiva

Cuando planeo mostrar el contenido de texto en negrita y en cursiva al mismo tiempo, creo que primero debo pensar en una pregunta, ¿qué grado de énfasis planea transmitir? Según la respuesta a esta pregunta, elegiré la etiqueta apropiada: (énfasis) o <énfasis más fuerte), y luego marcaré el texto con la etiqueta seleccionada.

Por ejemplo, en cuanto al siguiente ejemplo, originalmente planeé dejar que la diversión se muestre en negrita e cursiva al mismo tiempo, pero al final elegí usar para enfatizar esta palabra.

¡Construir sitios con estándares web puede ser divertido !

La mayoría de los navegadores solo mostrarán esta palabra en cursiva. Para usar tanto en negrita como en cursiva, tenemos varias opciones. Oh, realmente espero que estén de acuerdo con la oración anterior. Ordinario

Un método es usar un paquete normal fuera de la diversión, y especificar la regla CSS para mostrar todos los s en negrita. La sintaxis de la etiqueta se ve así:

¡Construir sitios con estándares web puede ser diversión !

Y CSS se ve así:

EM SPAN {

Font-Weight: Bold;

}

La parte semántica obvia no es buena porque agregamos etiquetas adicionales, pero este método sigue siendo útil para todos. Enfatizar con la clase

Otro método es especificar una clase para la etiqueta y agregar un efecto audaz en CSS. La sintaxis de la etiqueta se ve así:

Construir sitios con estándares web puede ser diversión !

Y CSS se ve así:

Em.Bold {

Font-Weight: Bold;

}

Usar puede lograr el efecto cursiva (aunque enfatiza semánticamente el contenido de texto), y agregarle una clase en negrita hará que el texto dentro de aparezca en negrita.

Métodos similares también se pueden usar para modificar . En este momento, cuando enfatizamos un cierto párrafo, podemos diseñar la clase cursiva con efecto cursiva y luego combinar el efecto audaz original.

El lenguaje de marcado se ve así:

¡Construir sitios con estándares web puede ser diversión !

Y CSS es así:

fuerte.italic {

estilo de fuente: cursiva;

}

Página anterior1 2 3 4 5 Página siguiente Lea el texto completo