Layout do parágrafo e quebras de linha de páginas da web html

Autor：Eve Cole Data da Última Atualização：2025-05-26 03:00:03

Se a aparência de uma página da web é bonita depende em grande parte do seu layout. Grandes parágrafos de texto aparecem na página, que geralmente são planejados em segmentos, e há divisões extremamente rigorosas para quebras de linha. Esta seção começa com os detalhes do parágrafo, para que os leitores possam usar tags para processar grandes parágrafos de texto livremente após o aprendizado.

Texto e parágrafos nas páginas HTML

Por meio do estudo do capítulo anterior, os leitores têm uma base relativamente sólida na configuração geral de desempenho da página da web. No entanto, os leitores não apenas querem expressar texto na página da web, mas também querem digitar e modificar o texto na página da web. Este capítulo aprenderá layout simples, modificação, rolagem de texto e hiperlinks de texto. Os hiperlinks estão em toda parte no desenvolvimento de sites e são o foco das páginas da web.

Ao estudar este capítulo, crie um diretório chamado Capítulo3 no D:/Web/Diretório, mova o arquivo do capítulo anterior para d:/web/capítulo3 e faça uma classificação. Este capítulo continua a criar arquivos de amostra no diretório d:/ web/, para facilitar o teste de arquivos de amostra com o IIS.

- NOTA: Os capítulos a seguir serão tratados da mesma forma e não serão repetidos. Por exemplo, o arquivo no capítulo 4 é classificado como d:/ web/ capítulo4.

4.1 Tipes de parágrafo e quebra de linha

4.1.1 Segmento Grandes parágrafos de texto

Basta usar as tags comumente usadas para segmentação de texto, ou seja, use o início do parágrafo e use o final do parágrafo. Algumas páginas da web são omitidas quando segmentadas, ou seja, elas são usadas como tags únicas, porque a tag no início do próximo parágrafo significa o final do parágrafo anterior.

-Nota: o autor não recomenda usar como uma única tag, pois esse código não é padronizado e propenso a erros.

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

Código 4.1 Configurações do segmento: p.htm

<html>

<head>

<title> Configurações do segmento </title>

</head>

<Body>

Filme quinzenalmente: "Affairs Infernais Três: O Tópico de Comentário Ultimate Ininterrupted"

está apenas começando depois do fim

No final de 2002, o mito começou. 2003 Outono e inverno, indo para o clímax e o final. "Assuntos Infernais" significa que herda a filosofia budista, e essa luz e escuridão, sobrevivência e extinção, existência e nada estão enredadas de maneira mista e desmoronam de maneira chocante, o que também é um processo de enriquecimento e unidade. Há uma causa, há um resultado e há um pecado, há um destino. A maravilha da situação e aparência está nos limites das palavras e interpretações. Não pode ser revelado, nem pode ser silencioso e depende um do outro. O som do coração está sempre lá, questionando -se e tempo e espaço. Este é o melhor momento, é o pior momento, e as pessoas em quase todas as épocas dizem isso. No entanto, o "Vimalakirti Sutra: o sétimo capítulo da visão de toda a vida" diz: Sem apego, não há origem. A partir das palavras e ações do corpo, através do nível indizível, chegamos inicialmente ao estado de auto-visão, que no final nada mais é do que uma atitude de sobrevivência. Na minha opinião, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng e outros são figuras espelhadas em seu destino. Todos eles podem se ver, lutar, estourar, afundar e se dispersar, como se fossem desastres e torcidos, por isso são assuntos infernais.

Gu Zhun disse do idealismo ao empirismo, Wang Xiaobo disse estar alerta aos tiranos e heróis, quem são heróis? De onde eles vieram? E daí se eles vieram? Ainda queremos heróis em nossa época? Quando editei este fórum e, senti -me um pouco aliviado. Do texto, podemos ver que todos estão pensando. Afinal, não somos mais um seguidor cego. Na minha opinião, o entretenimento nunca foi apenas entretenimento. Você pode ver um mundo de uma gota de água, uma flor e um grão de areia. O que pensamos em um filme está destinado a ser mais, e o entendimento é ilimitado. Cada um de nós constitui este mundo, e temos uma parte, independentemente de o mundo ser bom ou ruim. Cada um de nós tem nossa própria vida, nossos pontos fortes e fracos, que é a base para o nosso progresso comum.

</body>

</html>

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

Figura 4.1 Configuração de segmentação

Através dos segmentos das tags , o layout de texto dos grandes segmentos é organizado.

4.1.2 Adicione espaços ao texto

Se você olhar atentamente para a Figura 4.1, a segmentação na figura parece um pouco estranha porque não há espaços de caracteres no início de cada segmento.

- Descrição: De acordo com os hábitos de escrita chinesa, a primeira linha do parágrafo deve ter 2 caracteres chineses.

Aprendi o capítulo anterior que é impossível exibir na página simplesmente tocando na barra de espaço com o teclado no código HTML. O HTML usa 1 caractere espacial (caractere de espaço em inglês). Como um caractere chinês ocupa a largura de dois caracteres em inglês, adicione 4 & nbsp; caracteres para o início da primeira linha do parágrafo e modifique o código de p.htm, conforme mostrado no código 4.2.

Código 4.2 Configurações dos caracteres do espaço: P.HTM

<html>

<head>

<title> Configurações do segmento </title>

</head>

<Body>

Filme quinzenalmente: "Affairs Infernais Três: O Tópico de Comentário Ultimate Ininterrupted"

está apenas começando depois do fim

& nbsp; & nbsp; & nbsp; & nbsp; No final de 2002, o mito começou. 2003 Outono e inverno, indo para o clímax e o final. "Assuntos Infernais" significa que herda a filosofia budista, e essa luz e escuridão, sobrevivência e extinção, existência e nada estão enredadas de maneira mista e desmoronam de maneira chocante, o que também é um processo de enriquecimento e unidade. Há uma causa, há um resultado e há um pecado, há um destino. A maravilha da situação e aparência está nos limites das palavras e interpretações. Não pode ser revelado, nem pode ser silencioso e depende um do outro. O som do coração está sempre lá, questionando -se e tempo e espaço. Este é o melhor momento, é o pior momento, e as pessoas em quase todas as épocas dizem isso. No entanto, o "Vimalakirti Sutra: o sétimo capítulo da visão de toda a vida" diz: Sem apego, não há origem. A partir das palavras e ações do corpo, através do nível indizível, chegamos inicialmente ao estado de auto-visão, que no final nada mais é do que uma atitude de sobrevivência. Na minha opinião, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng e outros são figuras espelhadas em seu destino. Todos eles podem se ver, lutar, estourar, afundar e se dispersar, como se fossem desastres e torcidos, por isso são assuntos infernais.

& nbsp; & nbsp; De onde eles vieram? E daí se eles vieram? Ainda queremos heróis em nossa época? Quando editei este fórum e, senti -me um pouco aliviado. Do texto, podemos ver que todos estão pensando. Afinal, não somos mais um seguidor cego. Na minha opinião, o entretenimento nunca foi apenas entretenimento. Você pode ver um mundo de uma gota de água, uma flor e um grão de areia. O que pensamos em um filme está destinado a ser mais, e o entendimento é ilimitado. Cada um de nós constitui este mundo, e temos uma parte, independentemente de o mundo ser bom ou ruim. Cada um de nós tem nossa própria vida, nossos pontos fortes e fracos, que é a base para o nosso progresso comum.

</body>

</html>

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

Figura 4.2 Configuração de caracteres espaciais

O parágrafo foi formado inicialmente e os espaços foram expressos. Os leitores podem adicionar caracteres espaciais para testar o parágrafo.

4.1.3 Definindo quebras de linha de texto e não quebras de linha

A Figura 4.1 parece que não há problema. Quando o texto atingir o limite do navegador, ele embrulha automaticamente a linha. No entanto, quando a largura do navegador é ajustada, a posição das quebras da linha de texto também muda de acordo e o formato parece bastante confuso. Para padronizar o formato, os leitores devem usar uma única tag para forçar uma quebra de linha ao escrever o código. Pelo contrário, as peças que não precisam ser embrulhadas são incluídas com tags duplas <Born> . Modifique o código P.HTM, conforme mostrado no código 4.3.

Código 4.3 Controle de quebra de linha: P.HTM

<html>

<head>

<title> Configurações do segmento </title>

</head>

<Body>

Filme quinzenalmente: "Affairs Infernais Três: O Tópico de Comentário Ultimate Ininterrupted"

está apenas começando depois do fim

& nbsp; & nbsp; & nbsp; & nbsp; No final de 2002, o mito começou. 2003 Outono e inverno, indo para o clímax e o final. <bir> Os assuntos infernais são herdar a filosofia budista e a luz e a escuridão, a sobrevivência e a extinção, a existência e o nada estão enredadas de maneira mista e desmoronam de maneira chocante. É também um processo de enriquecimento e unidade. Há uma causa, há um resultado e há um pecado, há um destino. A beleza da situação e aparência está nos limites das palavras e interpretações. Não pode ser revelado, nem pode ser silencioso e depende um do outro. O som do coração está sempre lá, questionando -se e tempo e espaço. <bir> Este é o melhor momento, este é o pior momento, e as pessoas em quase todas as épocas dizem. No entanto, o "Vimalakirti Sutra: o sétimo capítulo da visão de toda a vida" diz: Sem apego, não há origem. Palavras e ações do corpo, e através do nível indizível, chegamos inicialmente ao estado de auto-visão, que no final nada mais é do que uma atitude de sobrevivência. Na minha opinião, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng e outros são figuras espelhadas em seu destino. Todos eles podem se ver, lutar, estourar, afundar e se dispersar, como se fossem desastres e torcidos, por isso são assuntos infernais.

</body>

</html>

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

Figura 4.3 Controle de quebra de linha

A partir deste exemplo, a parte contida em <BeR> não será embrulhada automaticamente, a menos que haja um embrulho forçado.

4.1.4 Defina o alinhamento de texto

O texto nos parágrafos precisa ser alinhado de maneira diferente em algum momento, e o alinhamento padrão é deixado. O atributo de alinhamento da tag está alinhado. Defina o alinhamento para o valor esquerdo, direito ou central para atingir o alinhamento esquerdo, direito e central. Modifique o código p.htm, conforme mostrado no código 4.4.

Código 4.4 Controle de Alinhamento: P.HTM

<html>

<head>

<title> Configurações do segmento </title>

</head>

<Body>

Filme quinzenalmente: "Affairs Infernais Três: O Tópico de Comentário Ultimate Ininterrupted"

está apenas começando depois do fim

& nbsp; & nbsp; & nbsp; & nbsp; No final de 2002, o mito começou. 2003 Outono e inverno, indo para o clímax e o final. "Assuntos Infernais" significa que herda a filosofia budista, e essa luz e escuridão, sobrevivência e extinção, existência e nada estão enredadas de maneira mista e desmoronam de maneira chocante, o que também é um processo de enriquecimento e unidade. Há uma causa, há um resultado e há um pecado, há um destino. A maravilha da situação e aparência está nos limites das palavras e interpretações. Não pode ser revelado, nem pode ser silencioso e depende um do outro. O som do coração está sempre lá, questionando -se e tempo e espaço. Este é o melhor momento, é o pior momento, e as pessoas em quase todas as épocas dizem isso. No entanto, o "Vimalakirti Sutra: o sétimo capítulo da visão de toda a vida" diz: Sem apego, não há origem. A partir das palavras e ações do corpo, através do nível indizível, chegamos inicialmente ao estado de auto-visão, que no final nada mais é do que uma atitude de sobrevivência. Na minha opinião, Liu Jianming, Chen Yongren, Han Chen, Huang Zhicheng, Ni Yongxiao, Lu Qichang, Yang Jinrong, Shen Cheng e outros são figuras espelhadas em seu destino. Todos eles podem se ver, lutar, estourar, afundar e se dispersar, como se fossem desastres e torcidos, por isso são assuntos infernais.

& nbsp; & nbsp; & nbsp; & nbsp; Gu Zhun disse do idealismo ao empirismo, disse Wang Xiaobo a estar alerta aos tiranos e heróis, quem é o herói? De onde eles vieram? E daí se eles vieram? Ainda queremos heróis em nossa época? Quando editei este fórum e, senti -me um pouco aliviado. Do texto, podemos ver que todos estão pensando. Afinal, não somos mais um seguidor cego. Na minha opinião, o entretenimento nunca foi apenas entretenimento. Você pode ver um mundo de uma gota de água, uma flor e um grão de areia. O que pensamos em um filme está destinado a ser mais, e o entendimento é ilimitado. Cada um de nós constitui este mundo, e temos uma parte, independentemente de o mundo ser bom ou ruim. Cada um de nós tem nossa própria vida, nossos pontos fortes e fracos, que é a base para o nosso progresso comum.

</body>

</html>

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

Figura 4.4 Controle de alinhamento

4.1.5 Adicionando divisor horizontal

O HTML fornece divisores horizontais para modificar parágrafos, que podem ser facilmente usados em muitas ocasiões sem desenhos adicionais. O rótulo do divisor horizontal é um único rótulo <hr />, que ocupa uma linha por padrão.

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

Código 4.5 Configurações de linha de divisor: Hr.

<html>

<head>

<title> Configurações de linhas de divisor </title>

</head>

<Body>

Revise as gloriosas músicas cantonesas na cena musical

<hr />

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Qual música é a música mais antiga cantonesa ainda é controversa. Em 1973, o membro da Flor da Irmã do Chotostick, Xian Dula, cantou a música tema do mesmo nome da série de TV "Hidden and Crystal", criada por Gu Jiahui. Essa música também é a música tema do primeiro drama cantonês na indústria da música de Hong Kong. No mesmo ano, o incipiente Adam Cheng também estrelou o drama da TVB "Smoky Rain" e cantou a música tema de mesmo nome. A música tema do mesmo nome do popular filme "The Two Stars", cantada por Xu Guanjie em 1974, foi uma bomba na indústria da música, tornando -se a primeira música chinesa a ser tocada na rádio da BBC no Reino Unido. Era famoso naquela época e era o mais reconhecido por todos pela origem das músicas cantonesas.

</body>

</html>

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

Ainda é controverso qual música era a música mais antiga cantonesa. Em 1973, a irmã do pauzinho Hua Cheng Zhongxian Dula cantou a música tema do mesmo nome da série de TV "Hidden and Crystal" criada por Gu Jiahui. Essa música também é a música tema do primeiro drama cantonês na indústria da música de Hong Kong. No mesmo ano, Adam Cheng, que era novato, também estrelou o drama da TVB "Smoky Rain" e cantou a música tema de mesmo nome. A música tema do mesmo nome do filme de sucesso "The Two Stars" cantada por Xu Guanjie em 1974 foi uma bomba na indústria da música. Tornou -se a primeira música chinesa a ser tocada na Rádio BBC no Reino Unido. Era famoso naquela época e era o mais reconhecido por todos pela origem do cantonês.

Figura 4.5 Configuração de linhas de divisor

Uma tag simples <hr /> pode realizar o divisor, modificando facilmente o layout do parágrafo para torná -lo mais bonito. No entanto, para diferentes ocasiões de aplicação, o estilo de linha única padrão obviamente não pode atender aos requisitos. Os múltiplos atributos da tag <hr /> resolvem esse problema. Os atributos comumente usados incluem largura, tamanho, alinhamento, cor e título. Largura é a configuração de largura. A unidade padrão do valor do atributo é pixels. A porcentagem também pode ser usada para representar a proporção do espaço ocupado pelo divisor. O tamanho pode ser entendido como a espessura ou a altura do divisor, e a unidade padrão do valor do atributo é a mesma que a largura. O alinhamento é um alinhamento, semelhante ao alinhado de . A cor é a cor e as cores diferentes do divisor são definidas de acordo com as necessidades. O atributo do título não é muito usado e o prompt de conteúdo do valor do atributo aparece quando o cursor do espectador paira sobre o divisor.

- Descrição: O alinhamento padrão de <hr /> está centrado. As unidades padrão dos atributos de largura e altura HTML são pixels e geralmente não é necessária uma unidade de identificação. No entanto, a unidade deve ser identificada no atributo de estilo.

<hr /> Há outro atributo que é Noshade. Quando o divisor não tem conjunto de cores e um certo tamanho é definido, o divisor parece côncavo tridimensional e tem sombras. Se a propriedade Noshade for usada, o divisor será monocromático. Modifique o código HR.HTM, conforme mostrado no código 4.6.

Código 4.6 Configurações de divisor de estilo: hr.htm

<html>

<head>

<title> Configurações de linhas de divisor </title>

</head>

<Body>

Defina uma largura de 300 pixels e divisor alinhado à direita: <r />

Defina um divisor de 50% de largura e alinhado central: <r />

Defina 50% de largura, 50 pixels de espessura e sem divisor de Noshade: <r />

Defina uma espessura de 50 pixels e use o divisor de Noshade: <r />

Defina uma espessura de 50 pixels e um divisor vermelho escuro: <r />

Defina a espessura de 50 pixels, defina o azul claro e defina o agradecimento pela sua chegada! Dicas para divisor: <r />

</body>

</html>

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

Figura 4.6 Configurações de estilo de linhas de divisor