Tags em HTML são como palavras-chave. Cada tag tem sua própria semântica (significado). Por exemplo, a tag <p> representa um parágrafo e a tag <b> representa negrito. Dependendo da tag, o navegador exibirá o conteúdo da tag de diferentes maneiras.
No desenvolvimento real, às vezes também chamamos tags HTML de elementos HTML.
propriedade
↓
<div class=foo>Rede de linguagem C</div>
↑ ↑ ↑
tag inicial conteúdo tag final
Além do atributo class, a tag inicial também pode conter outras informações do atributo, como id, título, etc., que explicaremos mais adiante.
Nota: Embora as tags HTML não façam distinção entre maiúsculas e minúsculas na sintaxe, por uma questão de padronização e profissionalismo, é altamente recomendável usar letras minúsculas ao definir tags.
(1) Semântica de tags
Aprender tags é complicado, o foco está em lembrar a semântica de cada tag. Uma compreensão simples refere-se ao significado do rótulo, ou seja, para que serve o rótulo. De acordo com a semântica do rótulo. Fornecer o rótulo mais razoável no lugar certo pode tornar a estrutura da página mais clara.
(2) Tag de título h1-h6
Para tornar as páginas da web mais semânticas, costumamos usar tags de título nas páginas. HTML fornece 6 níveis de títulos de páginas da web, nomeadamente <h1> - <h6>
<h1>Sou uma tag de primeiro nível</h1>
h é a abreviatura da palavra head, que significa título principal.
Semântica da tag: usada como título e em ordem decrescente de importância.
● Recursos:
1. O texto com o título ficará em negrito e o tamanho da fonte também aumentará sequencialmente.
2. Um título ocupa sua própria linha.
(3) Tags de parágrafo e tags de quebra de linha
Você deseja que o texto seja exibido em seções de uma página da web. A tag <p> é usada para definir estilos de parágrafo.
<p>Eu sou uma tag de parágrafo</p>
p significa parágrafo, o que significa que o parágrafo HTML pode ser dividido em vários parágrafos, e as linhas serão automaticamente quebradas de acordo com o tamanho da janela do navegador, deixando espaços entre os parágrafos.
No HIML, o texto em um parágrafo é organizado da esquerda para a direita até atingir a extremidade direita da janela do navegador e, em seguida, é quebrado automaticamente. Se você deseja que uma determinada seção do texto seja forçada a quebrar em uma nova linha, você precisa usar a tag de quebra de linha <br/>.
break força uma nova linha com pequeno espaçamento entre linhas de rótulo único.
Casos de notícias:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Notícias Internacionais</title></head><body><h1>Notícias Internacionais</h1><h4>A Ucrânia enviou drones para atacar aeroportos militares nos Oblasts de Ryazan e Saratov, na Rússia, naquela manhã</ h4><p> Em 5 de dezembro, horário local, o Ministério da Defesa russo emitiu um comunicado dizendo que a Ucrânia enviou drones para atacar aeroportos militares nas regiões russas de Ryazan e Saratov naquela manhã, mas foram interceptados pelo sistema de defesa aérea russo. Três soldados russos foram mortos e outros quatro ficaram feridos no ataque. </p><p>Além disso, a queda de um drone ucraniano sobre um aeroporto militar causou danos aos corpos de dois caças russos. Poucas horas depois, a Ucrânia informou que a Rússia havia lançado uma nova rodada de ataques com mísseis. </p><h4>É impossível para a Rússia entregar o controle da usina nuclear de Zaporozhye</h4><p>O porta-voz do Ministério das Relações Exteriores da Rússia, Zakharova, disse à Agência de Notícias Sputnik que é impossível para a Rússia entregar o controle de Zaporozhye Usina Nuclear Controle de usinas termonucleares. </p><h4>Biden não considerará usar o petróleo russo para reabastecer reservas estratégicas de petróleo.</h4><p>A Casa Branca disse que não ficou surpresa com a reação da Rússia ao teto de preços. Biden não considerará a utilização do petróleo russo para reabastecer a Reserva Estratégica de Petróleo. O enviado de segurança energética dos EUA, Hochstein, disse que os Estados Unidos ainda têm reservas estratégicas de petróleo (SPR) suficientes para lidar com emergências. A administração Biden realizará uma reunião online com executivos da indústria petrolífera dos EUA no dia 8 de dezembro para discutir como apoiar a infraestrutura energética da Ucrânia. O Secretário de Energia dos EUA reunir-se-á com vários executivos de empresas petrolíferas no dia 14. </p><p>Rede de linguagem C<br/>2022-12-6</p></body></html>
Exibido da seguinte forma:
(4) Tags de formatação de texto
Em páginas da web, às vezes você precisa definir efeitos de negrito, itálico ou sublinhado para o texto. Nesse caso, você precisa usar tags de formatação de texto em HTML. Faça o texto aparecer de uma maneira especial.
Semântica da tag: destacar a importância é mais importante do que o texto comum.
<strong>Negrito</strong><b>Negrito</b><em>Itálico</em><i>Itálico</i><del>Tachado</del><s>Tachado</ s><ins >Sublinhado</ins><u>Sublinhado</u>
Mostrado abaixo:
(5) tags div e span
<div> e <span> não têm semântica. São apenas caixas usadas para armazenar conteúdo.
divisão dividir partição span span span
● Recursos:
A tag <div> é usada para layout, mas agora apenas um <div> pode ser colocado em uma linha. A caixa grande ocupa uma linha.
A tag <span> é usada para layout. Pode haver vários <span>s em uma linha. Pode haver várias caixas pequenas em uma linha.
(6) Tags e caminhos de imagem
1. Tags de imagem
Nas tags HTML, a tag <img> é usada para definir imagens em páginas HTML.
<img src=imageURL />
Abreviação da palavra imagem. Imagem de significado.
src é um atributo obrigatório da tag <img>. Ele é usado para especificar o caminho e o nome do arquivo de imagem.
Os chamados atributos: uma compreensão simples são as características desta tag de imagem.
<imgsrc=bg.pngalt=/>
Propriedades adicionais para tags de imagem
Coisas a serem observadas ao usar tags de imagem
(1) Tags de imagem podem ter múltiplos atributos, que devem ser escritos após o nome da tag.
(2) Os atributos não estão em uma ordem específica de nomes e atributos e os atributos são separados por espaços.
(3) Os atributos assumem o formato de pares de valores-chave, ou seja, formato chave = "valor", atributo = valor do atributo"
2. Caminho
(1) Pasta de diretório e diretório raiz:
No trabalho real, nossos arquivos não podem ser colocados aleatoriamente, caso contrário será difícil encontrá-los rapidamente, por isso precisamos de uma pasta para gerenciá-los.
Pasta diretório: É uma pasta comum, que armazena apenas os materiais relevantes que precisamos para fazer as páginas, como arquivos html, imagens, etc.
Diretório raiz: O primeiro nível da pasta de diretório aberta é o diretório raiz.
(2) VSCode abre a pasta do diretório
Arquivo - abra a pasta Selecionar a pasta do diretório é muito conveniente para gerenciar arquivos posteriormente ou arraste-o diretamente.
Haverá muitas imagens na página. Normalmente criaremos uma nova pasta para armazenar esses arquivos de imagem (imagens). Ao procurar imagens, precisamos usar o método "caminho" para especificar a localização dos arquivos de imagem.
Os caminhos podem ser divididos em:
(1) Caminho relativo, um caminho de diretório estabelecido com base na localização do arquivo referenciado.
(2) Caminho absoluto refere-se à posição absoluta no diretório, que atinge diretamente o local de destino, geralmente o caminho começando na letra da unidade.
(7) Tags de hiperlink
1. Formato de sintaxe do link
<ahref=jump target target=método popup da janela de destino>texto ou imagem</a>
Abreviatura da palavra âncora: âncora
Os dois atributos funcionam da seguinte forma
2. Classificação de links
(1) Links externos, como <a href=http://www.baidu.com>baidu<a>.
(2) Links internos, os links mútuos entre as páginas internas do site, podem vincular diretamente os nomes das páginas internas, como <a href=index.html>Página inicial<a>.
(3) Link vazio, quando o destino do link não é determinado, <a href=#>Homepage<a>.
(4) Link para download, se o endereço em href for um arquivo ou pacote compactado, o arquivo será baixado.
(5) Links de elementos de páginas da Web Vários elementos de páginas da Web na página da Web, como imagens de texto, tabelas, áudio, vídeo, etc., podem ser adicionados com hiperlinks.