Linguagem de marcação - elementos de frase

Autor：Eve Cole Data da Última Atualização：2025-05-15 13:48:02

Clique aqui para retornar à coluna do tutorial Wulin.com HTML.

Acima: Linguagem de marcação - formulários

Fonte original Capítulo 6 , e outros elementos de frase

Na introdução e capítulos anteriores, o conceito de tags semânticos foi mencionado um pouco, usando tags para identificar o significado dos arquivos em vez de simplesmente definir o efeito de exibição com tags. Projetar uma página da web que usa completamente tags semânticas é uma boa ideia. No entanto, acho que esse objetivo é muito ideal. Obviamente, não atingir completamente o objetivo não significa que o processo de esforço não tenha valor. Pelo menos é valioso trabalhar em direção a esse objetivo.

Na realidade, muitas vezes é necessário adicionar tags não semânticas para atingir objetivos de design específicos, principalmente porque os navegadores famosos hoje não podem apoiar os padrões em 100%. Algumas regras CSS não podem exibir o efeito correto em alguns navegadores e, infelizmente, devemos usar tags adicionais no processo de atingir certas metas de design.

Existe um conceito importante que deve ser levado a sério: isto é, tentar escrever estruturas semânticas o máximo possível trará benefícios práticos. Ao mesmo tempo, embora o suporte para padrões não tenha atingido 100%, ele cruzou o ponto crítico para que agora possamos escrever páginas da web usando métodos que atendem aos padrões de rede. Às vezes, temos que fazer alguns sacrifícios, mas quanto mais rótulos que cumprem os padrões, mais fácil será para o futuro. Efeito de exibição vs. rótulos de estrutura

Este capítulo discutirá a diferença entre os efeitos de exibição e os rótulos estruturais, ou melhor, as diferenças entre o uso de substituição e usando substituição . Mais tarde neste capítulo, também discutiremos vários outros elementos de frase e sua importância na gramática de etiquetas estruturadas compatível com padrão.

Você deve ter ouvido falar que algumas pessoas sugerem usar substituição quando precisam de texto em negrito, mas não dizem ainda mais por que essa substituição é necessária. Sem saber o porquê , é realmente difícil esperar que outros designers da web mudem seus hábitos de uso de tags apenas porque ouviram falar disso. Por que é melhor do que ?

Quais são os benefícios de remover as tags e e substituí -las por e ? De fato, tudo isso é para expressar semântica e estrutura , não apenas para mostrar o efeito . Todos os exemplos deste livro também se esforçam para seguir esse conceito. Veja o que os especialistas dizem

Primeiro, vamos dar uma olhada em como o W3C descreve e na especificação do elemento de frase html4.01 (http://www.w3.org/tr/html4/struct/text.html#h-9.2.1):

Os elementos da frase podem adicionar informações estruturais aos fragmentos de texto. Os elementos de frase comuns têm os seguintes significados:

 Representante enfatizado

 representa uma ênfase mais forte

Então, aqui estamos discutindo dois graus diferentes de ênfase. Por exemplo, é uma única palavra ou frase. Quando pronunciado, deve ser mais alto, com um tom mais alto, pronunciado mais rápido, ou ... bem, é mais enfatizado que o conteúdo geral de texto.

W3C descreve o seguinte parágrafo:

O efeito de exibição dos elementos da frase varia com o navegador. De um modo geral, o navegador visual deve exibir o conteúdo de texto em itálico e o conteúdo de texto em negrito. O software de síntese de voz pode alterar os parâmetros de síntese com o conteúdo, como volume, tom e velocidade, etc.

Ahh! A última frase é particularmente interessante. O software de síntese de fala (costumávamos chamá -lo de leitor de tela) irá lidar com o texto corretamente que deve ser enfatizado, o que é realmente uma coisa boa.

Por outro lado, ou são apenas tags de efeito de exibição simples. Se nosso objetivo é separar a estrutura do efeito de exibição, usar e é a escolha certa. Só quero exibir texto ousado e itálico com CSS. Mais exemplos serão discutidos mais adiante neste capítulo.

Em seguida, veja dois exemplos de identificação para nos ajudar a entender suas diferenças. Método a

O número do seu pedido para referência futura é: 6474-82071 .Method b

Seu número de pedido para referência futura é: 6474-82071 .Rough and Beautiful

Esta situação é um exemplo perfeito de usar mais do que . Pretendemos tornar o texto específico na frase mais importante. Além de exibir números de pedidos em negrito, também esperamos que os leitores de tela também mudem a maneira como expressam esse conteúdo: aumente o volume, altere o tom ou a velocidade. O método B pode atingir os dois objetivos ao mesmo tempo. E daí?

Da mesma forma, substituir por pode expressar importância ao mesmo tempo, em vez de simplesmente exibir o conteúdo de texto em itálico. Vamos dar uma olhada nesses dois exemplos: método a

Levei no Nonone, mas três horas para escavar minha garagem esta manhã.

Levou -me Notone, mas três horas para empurrar minha garagem esta manhã.

No exemplo anterior (a situação real em que este livro foi escrito), meu objetivo era fazer com que a palavra três expresse em um tom de ênfase, assim como eu li essa palavra em voz alta, visualmente, o método B será exibido em itálico na maioria dos navegadores, e o leitor de tela ajustará o tom, velocidade ou volume adequadamente. Contanto que seja ousado ou itálico, está bem

Deve -se notar que, em muitos casos, apenas o efeito de texto de negrito e itálico é necessário para exibir visualmente. Em outras palavras, suponha que você tenha uma lista de links na barra lateral e você goste de deixar que todos os links sejam exibidos com o mesmo efeito: ou seja, ousado (Figura 6-1)

Figura 6-1. Exemplo de links em negrito colocados na barra lateral

Além dos recursos visuais, não pretendemos enfatizar o conteúdo do link. Este é um bom lugar para alterar a aparência dos links com o CSS, para que eles não sejam particularmente enfatizados pelos leitores de tela e outros navegadores não visuais.

Por exemplo, você realmente deseja que o link em negrito seja lido mais rápido, mais alto e mais alto? Provavelmente não, o ousado aqui é apenas o efeito de exibição. O peso da fonte é equivalente a ousado

Para alcançar o efeito de exibição da Figura 6-1, vamos supor que a barra de link seja colocada em <div> com ID definido na barra lateral, para que possamos usar o CSS para especificar que os links dentro do #sideBar devem ser exibidos em negrito:

#sideBar a {

Peso da fonte: negrito;

}

Extremamente simples, acho um pouco ridículo quando mencionei, mas essa é realmente uma boa maneira de ajudar a separar a estrutura e exibir efeitos. É ousado!

Da mesma forma, você pode aplicar idéias semelhantes ao pensar em texto em itálico. Quando você não deseja enfatizar o conteúdo e apenas exibir o texto em itálico, você pode usar o atributo no estilo da fonte para lidar com essas situações através do CSS novamente.

Vamos usar o mesmo #sideBar como exemplo. Por exemplo, se você deseja que todos os links no #sideBar sejam exibidos em itálico, pode escrever isso:

#sideBar a {

estilo de fonte: itálico;

}

É outro conceito simples, mas no campo da gramática de marcação estruturada, acho que é muito importante discutir essas situações - usando o CSS para processar o CCTV em vez de exibir rótulos de efeito. Às vezes, a solução mais simples também é a mais fácil de ignorar. Compartilhar ousado e itálico

Quando pretendo exibir o conteúdo de texto em negrito e itálico ao mesmo tempo, acho que devo primeiro pensar em uma pergunta, que grau de ênfase você planeja transmitir? Com base na resposta a esta pergunta, escolherei o rótulo apropriado: (ênfase) ou <ênfase mais forte) e marquei o texto com o rótulo selecionado.

Por exemplo, como no exemplo a seguir, originalmente planejei deixar a diversão ser exibida em negrito e em itálico ao mesmo tempo, mas no final eu escolhi usar para enfatizar essa palavra.

Os locais de construção com padrões da Web podem ser divertidos !

A maioria dos navegadores exibirá apenas essa palavra em itálico. Para usar ousado e itálico, temos várias opções. Oh, eu realmente espero que você concorde com a frase acima. Ordinary <pan>

Um método é usar um pacote normal fora da diversão e especificar a regra CSS para exibir todos os s em negrito. A sintaxe da tag é assim:

Os locais de construção com padrões da Web podem ser diversão !

E o CSS se parece com o seguinte:

span {

Peso da fonte: negrito;

}

A parte semântica óbvia não é boa porque adicionamos tags extras, mas esse método ainda é útil para todos. Enfatize com a classe

Outro método é especificar uma classe para a tag e adicionar um efeito ousado no CSS. A sintaxe da tag é assim:

Os locais de construção com padrões da Web podem ser Fun !

E o CSS se parece com o seguinte:

Em.Bold {

Peso da fonte: negrito;

}

O uso de pode obter o efeito itálico (embora enfatize semanticamente o conteúdo do texto) e a adição de uma classe em negrito a ele fará com que o texto dentro apareça em negrito.

Métodos semelhantes também podem ser usados para modificar . Neste momento, quando enfatizamos um certo parágrafo, podemos projetar a classe itálica com efeito itálico e, em seguida, combinar o efeito ousado original.

O idioma de marcação se parece com o seguinte:

Os locais de construção com padrões da Web podem ser Fun !

E CSS é assim:

fort.italic {

estilo de fonte: itálico;

}

Página anterior1 2 3 4 5 Próxima página Leia o texto completo