Modificação detalhada de vários formatos de fonte de páginas da web html

Autor：Eve Cole Data da Última Atualização：2025-06-07 00:48:02

Esta seção começa com a modificação detalhada do texto, permitindo que os leitores compreendam as alterações em vários formatos de fonte de HTML e criem páginas da web mais profissionais.

4.2 Modificação diversificada de texto

Na seção anterior, aprendi várias configurações de grandes parágrafos, que pareciam mais atraentes para o próprio texto. Esta seção começa com a modificação detalhada do texto, permitindo que os leitores compreendam as alterações em vários formatos de fonte de HTML e criem páginas da web mais profissionais.

4.2.1 Etiquetas básicas para configurações de estilo de texto - 

A tag básica para definir estilos de fonte é , e o texto contido nela é a área de ação de estilo. Na redação do código HTML para iniciantes, é facilmente aninhado por várias fontes, como texto . Outra situação é o desalinhamento de nidificação da etiqueta, como texto . Para padronizar a redação do código e evitar erros desnecessários, os leitores devem ser cautelosos ao aprender.

4.2.2 Defina a cor do texto

A cor é um dos atributos da tag , que é usada para definir a cor do texto. Crie um arquivo de página da web no diretório d:/ web/, nomeado font_color.htm e escreva o código como mostrado no código 4.7.

Código 4.7 Configuração da cor da fonte: font_color.htm

<html>

<head>

<title> Configurações de cor da fonte </ititure>

</head>

<Body>

Texto vermelho claro: A essência do aprendizado html é usar o que deveria ser <r />

Texto carmesim: A essência do aprendizado html é usar o que deveria ser <r />

Texto verde claro: A essência do aprendizado html é usar o que deveria ser <r />

Texto verde escuro: A essência do aprendizado html é usar o que deveria ser <r />

Texto azul claro: A essência do aprendizado html é usar o que deveria ser <r />

Texto azul escuro: A essência do aprendizado html é usar o que deveria ser <r />

Texto amarelo claro: A essência do aprendizado html é usar o que deveria ser <r />

Texto amarelo escuro: A essência do aprendizado html é usar o que deveria ser <r />

Texto ciano leve: A essência do aprendizado html é usar o que deveria ser <r />

Texto azul escuro: A essência do aprendizado html é usar o que deveria ser <r />

Texto roxo leve: A essência do aprendizado html é usar o que deveria ser <r />

Texto roxo profundo: A essência do aprendizado html é usar o que deveria ser <r />

</body>

</html>

Digite http: //localhost/font_color.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.7.

Figura 4.7 Configurações de cor da fonte

Os leitores podem não apenas aprender como o atributo de cor é usado na tag de fonte do código 4.7, mas também familiariza -se com os métodos de representação de várias cores.

4.2.3 Defina o tamanho do texto

O tamanho também é uma propriedade da tag , que é usada para definir o tamanho do texto. O valor do tamanho é 1-7 e o padrão é 3. Podemos adicionar + e - caracteres antes do valor do atributo de tamanho para especificar o incremento ou decremento em relação ao valor inicial do tamanho da fonte. Crie um arquivo de página da web no diretório d:/ web/, nomeado font_size.htm e escreva o código como mostrado no código 4.8.

Código 4.8 Configuração do tamanho da fonte: font_size.htm

<html>

<head>

<title> Configurações de tamanho da fonte </ititure>

</head>

<Body>

O tamanho é 1: HTML Aprendizagem <r />

O tamanho é 2: HTML Aprendizagem <r />

O tamanho é 3: HTML Learning <r />

O tamanho é 4: HTML Aprendizagem <r />

O tamanho é 5: HTML Aprendizagem <r />

O tamanho é 6: HTML Aprendizagem <r />

O tamanho é 7: HTML Aprendizagem <r />

</body>

</html>

Digite http: //localhost/font_size.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.8.

Figura 4.8 Configurações do tamanho da fonte

Os leitores podem tentar adicionar + e - caracteres antes do valor do tamanho para definir o tamanho do texto com mais flexibilidade.

4.2.4 Defina a fonte do texto

O rosto também é uma propriedade da tag , que é usada para definir fontes de texto (fontes). As fontes exibidas nas páginas da Web HTML são chamadas do sistema de navegação; portanto, para manter a fonte consistente, é recomendável usar a fonte da música, e as páginas HTML também usam a fonte da música por padrão. Crie um arquivo de página da web no diretório d:/ web/, nomeado font_face.htm e escreva o código como mostrado no código 4.9.

Código 4.9 Configurações da fonte da fonte: font_face.htm

<html>

<head>

<title> Fonte Configurações </title>

</head>

<Body>

A fonte é a fonte da música: Qinyuanchun · changsha-mao zedong <r />

A fonte está em Kaishi: Qinyuanchun · Changsha-mao Zedong <r />

A fonte é ousada: qinyuanchun · changsha-mao zedong <r />

A fonte é Lishu: Qinyuanchun · Changsha-mao Zedong

</body>

</html>

Digite http: //localhost/font_face.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.9.

Figura 4.9 Configurações da fonte

O autor define o tamanho do texto da fonte modificada para o número 5 para os leitores visualizam.

4.2.5 Faça o texto inclinar

O uso de tags duplos pode inclinar o texto a ser aplicado, alcançando efeitos especiais, como a data do artigo. é chamado de tag de ênfase e em itálico. Atualmente, é usado com mais frequência do que as tags . O método de escrita é o seguinte:

Este é o texto em itálico

Isso também é itálico

4.2.6 Torne o texto ousado

O uso de tags duplos pode tornar o texto aplicado em negrito, tornando o texto mais atraente, como a parte do título do artigo. é chamado de ênfase especial nos rótulos e também é ousado em texto. Atualmente, é usado com mais frequência do que tags. O método de escrita é o seguinte:

Este é o texto em negrito

Este também é um texto ousado

4.2.7 sublinhe o texto

Use tags duplas para adicionar sublinhados ao texto aplicado. A seguir, é apresentado um exemplo abrangente de inclinação de texto, em negrito e sublinhado. Crie um arquivo de página da web no diretório d:/ web/, nomeado font_style.htm e escreva o código como mostrado no código 4.10.

Código 4.10 Configurações de modificação de texto: font_style.htm

<html>

<head>

<title> Configurações de modificação da fonte </ititle>

</head>

<Body>

itálico: Qinyuanchun · Changsha-mao Zedong <r />

Em negrito: Qinyuanchun · Changsha-mao Zedong <r />

Subline: Qinyuanchun · Changsha-mao Zedong <r />

Subline em negrito em itálico: qinyuanchun · changsha-mao zedong

</body>

</html>

Digite http: //localhost/font_style.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.10.

Figura 4.10 Configurações de modificação da fonte

O autor define todos os tamanhos de texto em <body> </body> para o número 5 para os leitores visualizam.

- Nota: Quando várias tags contêm a mesma peça de texto, sua ordem de inclusão não pode ser desalinhada.

4.2.8 Uso de vários estilos de título

Nos artigos da web, para destacar a importância do título, o estilo do título é relativamente especial. A tecnologia HTML protege um conjunto de tags de estilo para títulos, ou seja, tags duplas <H1> para <H6>, e os tamanhos de texto representam diferentes níveis de títulos de grande a pequena. A tag de título possui um recurso, exclusivo de uma linha, em negrito no texto e no centro do texto. Dessa forma, é fácil definir o título e pode definir títulos de vários níveis. Crie um arquivo de página da web no diretório d:/ web/, nomeado font_h.htm, e escreva o código como mostrado no código 4.11.

Código 4.11 Configurações do título: font_h.htm

<html>

<head>

<title> Configurações de título </ititure>

</head>

<Body>

<H1> Título nº 1 </h1>

<H2> Título nº 2 </h2>

<H3> Título nº 3 </h3>

<H4> Título nº 4 </h4>

<H5> Título nº 5 </h5>

<H6> Título nº 6 </h6>

<h1> revista Fortune: Por que o Google não cai após sua prosperidade? </h1>

<H3> encontrando problemas em potencial </h3>

& nbsp; & nbsp; & nbsp; & nbsp; Alguns especialistas do setor acreditam que o Google pode diminuir após um monopólio de longo prazo no mercado de pesquisa e publicidade na Internet. ... Ao mesmo tempo, os novos planos recentes do Google, como a Open Mobile Alliance, a plataforma universal do site de redes sociais OpenSocial e o possível investimento de bilhões de dólares em lances para a faixa de frequência sem fio, também foram amplamente questionados.

<H3> continuará a monopolizar a busca </h3>

& nbsp; & nbsp; & nbsp; & nbsp; artigos recentes dizem que, se os mecanismos de pesquisa melhores aparecerem, as pessoas desistirão do Google sem hesitar. Mas mesmo que haja mecanismos de pesquisa realmente melhores, o Google ainda pode permanecer firme por um tempo. ... Nesse caso, a velocidade do site geralmente se torna a chave para o resultado.

</body>

</html>

Digite http: //localhost/font_h.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.11.

Figura 4.11 Configurações de título

4.2.9 Aprenda a lidar com caracteres especiais em páginas da web

No HTML, alguns caracteres têm significados especiais, como <e> são os colchetes esquerdos e próximos da tag, enquanto a tag controla a exibição do HTML. A tag em si só pode ser analisada pelo navegador e não pode ser exibida na página. Então, como exibir <e> em html? O HTML especifica a maneira de escrever alguns caracteres especiais a serem exibidos nas páginas da web, conforme mostrado na Tabela 4.1.

Tabela 4.1 caracteres especiais em html

Símbolos especiais

Código HTML

Símbolos especiais

Código HTML

& lt;

™ (símbolo de marca registrada)

&troca;

& gt;

® (símbolo de registro)

& reg;

(Meia largura em inglês)

& times;

& seita;

&cópia;

Crie um arquivo de página da web no diretório d:/ web/, chamado String.htm, e escreva o código String.htm, conforme mostrado no código 4.12.

Código 4.12 Configurações de caracteres especiais: String.htm

<html>

<head>

<title> Configurações de caracteres especiais </title>

</head>

<Body>

Como exibir tags: & lt; html & gt; <r />

Como exibir citações: "citações duplas de meia largura em inglês"

Método de exibição de marca registrada: & Trade; <r />

Como exibir símbolos de registro: & reg; <r />

Como exibir símbolos de direitos autorais: & cópia; <r />

Mostrar & seita;

Show & times;

</body>

</html>

Digite http: //localhost/string.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.12.

Figura 4.12 Configurações de caracteres especiais

- Descrição: Os símbolos devem ser exibidos separadamente e devem ser usados com código & amp;.

4.2.10 Como ignorar mais convenientemente a análise do navegador de algum html

Se você fizer um exemplo de código HTML semelhante a este livro em uma página da web, talvez seja necessário converter todos <e> em & lt; E parecerá mais problemático. <PlainText> e <xmp> </xmp> no código HTML podem resolver facilmente esse problema.

<PlainText> é uma única tag. Quando é inserido no código HTML, todas as tags HTML depois de serem inválidas. Ou seja, o navegador não analisa todas as tags HTML após <PlainText> e as exibe diretamente na página.

<xmp> </xmp> é uma tag dupla, que apenas invalida as tags no conteúdo que ele contém, e o uso de <xmp> </xmp> é mais comum. Crie um arquivo de página da web no diretório d:/ web/, chamado html.htm, e escreva o código como mostrado no código 4.13.

Código 4.13 Ignore as configurações das tags: html.htm

<html>

<head>

<title> ignore as configurações de tags </title>

</head>

<Body>

<H2> Qinyuanchun · Changsha </h2>

<xmp> Independente do outono frio, vá para o norte do rio Xiangjiang , a cabeça da Ilha Orange. Olhe para as montanhas vermelhas e as florestas são tingidas; <r /> O rio é verde e claro, e centenas de barcos competem pela corrente. <r/> </xmp>

As águias atingem o céu, os peixes nadam no fundo raso e todos os tipos de espécies competem pela liberdade no céu de geada. Quando estou triste com a vasta terra, quem é responsável pelos altos e baixos?

Trouxe centenas de casais para viajar e lembrei dos últimos anos gloriosos. Os colegas de classe são jovens, no auge; <r /> O estudioso está cheio de entusiasmo e coragem. <r /> Diga ao país e inspire palavras, <r /> O estrume da sujeira era de dez mil famílias naquela época. <r /> Você já se lembrou que, quando bate na água no meio, as ondas para de barcos voadores!

</body>

</html>

Digite http: //localhost/string.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.13.

Figura 4.13 Ignore as configurações das tags

4.2.11 Outros métodos de modificação de texto

Para atender às necessidades de diferentes campos, o HTML possui outras tags que modificam o texto. Os mais usados são os rótulos de formato de SuperScript e os rótulos de formato de subscrito. Em alguns casos, você ainda precisa usar o efeito de exclusão e pode usar a tag HTML no meio de descrição.

- A tag de formato de Superscript é a tag dupla <pup> </pup>, que é usada principalmente para representar expoentes matemáticos, como o metro quadrado ou cúbico de um determinado número.

- O rótulo do formato subscrito é o rótulo duplo </suge>, que é usado principalmente para anotação e representação básica matemática.

-O rótulo de pontuação média é o rótulo duplo <Share> </strike>, que é usado principalmente para efeitos de exclusão.

Crie um arquivo de página da web no diretório d:/ web/ chamado outro.htm e escreva o código como mostrado no código 4.14.

Código 4.14 Outras configurações de tag de modificação: outros.htm

<html>

<head>

<title> Outras configurações para modificar tags </ititle>

</head>

<Body>

Qinyuanchun <pup> changsha </pup>!

Representação do índice matemático: 2 <pup> 3 </pup> = 8, 100 <pup> 2 </pup> = 10000 <r /> <hr />

Qinyuanchun Changsha !

Representação de números básicos matemáticos: log 3 < /subs.

Efeito de exclusão: <STTER> Fui excluído </strike>

</body>

</html>

Digite http: //localhost/other.htm na barra de endereço do navegador, e o efeito de navegação é mostrado na Figura 4.14.

Figura 4.14 Configurações de outras tags de modificação