Wondershare EdrawMind
EdrawMindNoções básicas de HTML
Galeria de mapas mentais Noções básicas de HTML
- 4
Noções básicas de HTML
Um resumo do mapa mental do conhecimento básico de HTML, incluindo a estrutura dos elementos e conteúdo da página HTML, estilos de página (como cor e tamanho) que expressam a aparência e a posição dos elementos CSS da página da web, a definição e a interação superficial da página da web JS comportamental modelos, etc
Editado em 2022-12-09 10:01:22- Anévrisme intracrânien
Il s'agit d'une carte mentale sur les anévrismes intracrâniens, avec le contenu principal, notamment: le congé, l'évaluation d'admission, les mesures infirmières, les mesures de traitement, les examens auxiliaires, les manifestations cliniques et les définitions.
- Entretien de la comptabilité des coûts
Il s'agit d'une carte mentale sur l'entretien de comptabilité des coûts, le principal contenu comprend: 5. Liste des questions d'entrevue recommandées, 4. Compétences de base pour améliorer le taux de réussite, 3. Questions professionnelles, 2. Questions et réponses de simulation de scénarios, 1. Questions et réponses de capacité professionnelle.
- Méthode de recherche de littérature
Il s'agit d'une carte mentale sur les méthodes de recherche de la littérature, et son contenu principal comprend: 5. Méthode complète, 4. Méthode de traçabilité, 3. Méthode de vérification des points, 2. Méthode de recherche inversée, 1. Méthode de recherche durable.
Noções básicas de HTML
- Anévrisme intracrânien
Il s'agit d'une carte mentale sur les anévrismes intracrâniens, avec le contenu principal, notamment: le congé, l'évaluation d'admission, les mesures infirmières, les mesures de traitement, les examens auxiliaires, les manifestations cliniques et les définitions.
- Entretien de la comptabilité des coûts
Il s'agit d'une carte mentale sur l'entretien de comptabilité des coûts, le principal contenu comprend: 5. Liste des questions d'entrevue recommandées, 4. Compétences de base pour améliorer le taux de réussite, 3. Questions professionnelles, 2. Questions et réponses de simulation de scénarios, 1. Questions et réponses de capacité professionnelle.
- Méthode de recherche de littérature
Il s'agit d'une carte mentale sur les méthodes de recherche de la littérature, et son contenu principal comprend: 5. Méthode complète, 4. Méthode de traçabilité, 3. Méthode de vérification des points, 2. Méthode de recherche inversée, 1. Méthode de recherche durable.
- Recomendado para você
- Descrição
HTML
padrões da web
Estruturar elementos e conteúdo da página HTML
Expresse a aparência e a posição dos elementos CSS da página da web e outros estilos de página (como cor, tamanho)
Definição de modelo de página da web JS comportamental e interação de página
Noções básicas de HTML
HTML (linguagem de marcação de hipertexto)
HTML (linguagem de marcação de hipertexto)
Estrutura fixa da página HTML
Tag HTML: toda a página da web
tag head: o cabeçalho da página da web
Body tag: o corpo da página web (onde o código HTML do tema está escrito)
tag de título: o título da página da web
Código VS
Crie o corpo HTML: ! aba/entrar
Ver no navegador:
Clique com o botão direito → abrir no navegador padrão/outro navegador
alt B/shift alt B
Nota: ctrl / (não pode ser após a instrução, é necessária uma nova linha)
Composição de tags
Este é o parágrafo (etiqueta dupla)
(rótulo único)
Propriedades do rótulo
`<img src=" " alt=" ">` (tag única de imagem)
Nome do atributo = "valor do atributo"
relacionamento de tags
Relacionamento aninhado/relacionamento paralelo
aprendizagem de rótulos
Tags de tipografia
Título da etiqueta
<h1>Título 1</h1>
h1-h6 (colocado no corpo)
O cursor pisca em vários lugares ao mesmo tempo no VS: Ctrl D
tags de parágrafo
<p>Parágrafo</p>
Quebra automática de linha no VScode: Barra de menu → Exibir → Quebra automática de linha
Nova linha '<br>'
Linha divisória horizontal '<hr>'
tag de formatação de texto
efeito básico
b: Negrito
você: sublinhado
eu: inclinação
s: tachado
declaração de importância
forte: ousado
ins: sublinhado
em: inclinação
del: excluir linha
etiqueta de mídia
Tag de imagem (tag única
Código `<img src=” ” alt=” ”>`
Atributo: src (caminho da imagem de destino; tecla de atalho: ./)
Atributo: alt (substituir texto; exibir quando o carregamento da imagem falha)
Atributo: título (exibe o texto do prompt ao passar o mouse)
Atributos: largura/altura (basta escrever uma imagem e ela não ficará deformada)
caminho
Caminho absoluto: o local absoluto no diretório, que pode atingir diretamente o local de destino
A letra da unidade começa com: D:\day01\images\1.jpg
Endereço de rede completo: https://www.itcast.cn/2018czgw/images/logo.gif (entenda)
Caminho relativo: o processo de localização do arquivo de destino a partir do arquivo atual
Diretório do mesmo nível (tecla de atalho: ./)
Diretório subordinado (tecla de atalho: ./)
Diretório pai (tecla de atalho: ../)
etiqueta de áudio
Inserir arquivo de áudio: tecla de atalho VScode: ./m... (pesquisa difusa)
Código: `<audio src="./music.mp3" controles>texto</audio>`
Atributos
src: caminho de áudio
controles: exibe controles de reprodução
reprodução automática: reprodução automática (não suportada por alguns navegadores)
loop: reprodução em loop
etiqueta de vídeo
Inserir arquivo de vídeo: tecla de atalho VScode: ./m... (pesquisa difusa)
Código: `<video src="./video.mp4" controles></video>`
Atributos
src: caminho do vídeo
controles: exibe controles de reprodução
reprodução automática: reprodução automática (o navegador Google precisa cooperar com o modo mudo para obter reprodução silenciosa)
loop: reprodução em loop
etiqueta de link
uma tag/hiperlink/link âncora: após clicar, salte de uma página para outra
Código: `<a href=”./targetpage.html” target=”_blank”>Hyperlink</a>`
Atributos
href: para qual página da web ir após clicar (o caminho da página da web de destino)
alvo: o formulário de abertura da página da web de destino
target="_self" (valor padrão, substitui a página da web original)
target="_blank" (nova janela, manter a página original)_
etiqueta de lista
lista não ordenada
ul: representa toda a lista não ordenada, usada para agrupar a tag li
li: representa cada item da lista não ordenada, usada para conter o conteúdo de cada linha
A tag ul pode conter apenas tags li; a tag li pode conter qualquer conteúdo.
lista ordenada
ol: representa toda a lista ordenada, usada para envolver a tag li
li: representa cada item da lista ordenada, usado para conter o conteúdo de cada linha
A tag ol só pode conter tags li; a tag li pode conter qualquer conteúdo.
lista personalizada
dl: representa toda a lista personalizada, usada para agrupar tags dt/dd
dt: representa o título da lista personalizada
dd: indica que a lista personalizada é para cada item do tema
A tag dl só pode conter tags dt/dd; a tag dt/dd pode conter qualquer conteúdo;
rótulo de mesa
Tags básicas da tabela
tabela: tabela como um todo, usada para agrupar vários tr
tr: cada linha da tabela, usada para envolver td
td: célula da tabela, pode ser usada para agrupar conteúdo
Relacionamento de aninhamento de tags: tabela > tr > td
Propriedades básicas da tabela (configurações CSS recomendadas)
border="número": largura da borda
largura="número": largura da tabela
height="número": altura da tabela
Título da tabela e rótulo da célula do cabeçalho
Representa o título geral e uma coluna de legendas em uma tabela
legenda: Título da tabela (o título de toda a tabela, exibido na parte superior e central de toda a tabela por padrão)
th: célula da tabela (indica uma coluna de legendas, geralmente usada na primeira linha da tabela, o texto está em negrito e centralizado)
Perceber
A tag de legenda está escrita dentro da tag da tabela
A tag th é escrita dentro da tag tr (usada para substituir a tag td)
tabela > legenda tr > th
tags de estrutura de tabela
thead: cabeçalho da tabela
tbody: corpo da tabela
tfoot: parte inferior da mesa
mesa > cabeça > tr > td
Mesclar células (valor da propriedade)
rowspan = "número de células mescladas": mesclar entre linhas/mesclar verticalmente
colspan = "número de células mescladas": mesclar colunas/mesclar horizontalmente
etiqueta de formulário
etiqueta de entrada
Introdução básica: a entrada pode exibir diferentes efeitos por meio de diferentes valores de atributos de tipo.
texto: caixa de texto (texto de linha única)
placeholder: placeholder, solicita que o usuário insira o conteúdo do texto (atributos comuns)
Exemplo: `<input type="text" placeholder="Por favor, insira um apelido">`
senha: caixa de senha
placeholder: placeholder, solicita que o usuário insira o conteúdo do texto (atributos comuns)
Exemplo: `<input type="senha" placeholder="Digite a senha">`
rádio: botão de opção
nome: Grupo; caixas de botão de opção com o mesmo valor de atributo de nome são um grupo e apenas uma de um grupo pode ser selecionada ao mesmo tempo.
verificado: verificado por padrão
Exemplo: `<input type="radio" name="casar" verificado> solteiro `
caixa de seleção: caixa de seleção
verificado: verificado por padrão
Exemplo: `<input type="checkbox" name="like"> Charmoso`
arquivo: seleção de arquivo
múltiplo: seleção de vários arquivos
exemplo:
enviar: botão enviar
Envie dados para o servidor back-end após clicar
Use com tag de formulário: use a tag de formulário para agrupar a tag de formulário
Exemplo: `<input type="submit" value="Registro gratuito">`
redefinir: botão de reinicialização
Restaurar os valores padrão do formulário após clicar
Use com tag de formulário: use a tag de formulário para agrupar a tag de formulário
Exemplo: `<input type="reset">`
inferior: botão normal
Nenhuma função por padrão, use JS para adicionar funções
Use com tag de formulário: use a tag de formulário para agrupar a tag de formulário
rótulo do botão inferior (rótulo duplo)
enviar: botão enviar
Envie dados para o servidor back-end após clicar
redefinir: botão de reinicialização
Restaurar os valores padrão do formulário após clicar
inferior: botão normal
Nenhuma função por padrão, use JS para adicionar funções
selecione o rótulo do menu suspenso
Controle de formulário de menu suspenso que fornece várias seleções em uma página da web
select tag: todo o menu suspenso
tag de opção: cada item no menu suspenso
Exemplo: `<select nome="ano"> <option value="">Selecione um ano</option> <option value="">1990</option></select>`
textarea: rótulo da área de texto (texto multilinha)
linhas: especifica o número de linhas visíveis no campo de texto
cols: especifica a largura visível dentro do campo de texto
O canto inferior direito pode ser arrastado para alterar o tamanho durante o desenvolvimento real, é recomendado usar configurações CSS para efeitos de estilo;
rótulo rótulo
Vinculando o relacionamento entre tags de conteúdo e formulário
Método um: `<input type="checkbox" id="one">``<label for="one">código</label>`
Método 2: `<label><input type="checkbox">Ficar acordado até tarde</label>`
Tags semânticas
div/span: tags de layout sem semântica
Ao desenvolver páginas da web, as duas tags de layout semanticamente sem sentido, div e span, são usadas com frequência.
tag div: apenas um é exibido em uma linha (ocupa uma linha)
tag span: uma linha pode exibir vários
Tags de layout semântico
cabeçalho: cabeçalho da página da web
navegação: navegação na web
rodapé: parte inferior da página da web
à parte: barra lateral da página da web
seção: seção da página da web
artigo: artigo da web
entidade de personagem
Mesclagem de espaços: se vários espaços, quebras de linha, recuos, etc. aparecerem lado a lado no código HTML, o navegador analisará apenas um espaço no final.
Entidades de caráter comum
Espaço
< menos que sinal
> sinal maior que
& e comercial&
"aspas
' apóstrofo (não suportado pelo IE)
centavos (dinheiro)
£ libra
& ienes;
€
seção;
©