Galeria de mapas mentais Pontos de conhecimento HTML5 e CSS3
Este é um mapa mental sobre pontos de conhecimento HTML5 CSS3, incluindo elementos e atributos de página HTML, introdução ao CSS, modelo de caixa CSS, flutuação e posicionamento, aplicação de formulário, etc.
Editado em 2021-07-06 01:12:01Il 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.
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.
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.
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.
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.
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.
HTMLCSS3
Primeira introdução ao HTML
tag de controle de texto
etiqueta de título
<hn align="alignment">Texto do título</hn>
marca de parágrafo
<p align="alignment">Texto do título</p>
marca de linha horizontal
<hr atributo="valor do atributo"/>
marca de nova linha
<br/>
Tags de formatação de texto
O texto <b></b> e <strong></strong> é exibido em negrito (b define texto em negrito e forte define texto enfatizado)
etiqueta de imagem
<img src=”URL da imagem”/>
texto de substituição alternativo quando a imagem não pode ser exibida
tag de hiperlink
<a href="Jump target" target="Como a janela de destino aparece">Texto ou imagem</a> target _self é o valor padrão, o que significa abrir na janela original, _blank significa abrir em uma nova janela
Link âncora <a href="#id name">Texto do link</a>
Elementos e atributos da página HTML
Listar elementos
<ul> Lista não ordenada <li>Item da lista 1</li> (<ul></ul> só pode ser aninhado <li> </li>)
<ol> Lista ordenada <li>Item da lista 1</li> Altere o valor inicial da numeração da lista <ol start="2">
O elemento dl é frequentemente usado para explicar e descrever termos ou substantivos <dl> <dt>Substantivo 1</dt> <dd>Explicação do substantivo 1<dd>
Elementos estruturais
elemento de cabeçalho
elemento de cabeçalho (um elemento estrutural com função orientadora e de navegação que pode conter todo o conteúdo normalmente colocado no cabeçalho da página) Formato gramatical básico; <cabeçalho> <h1>Tema da Web</h1> …. </header>
elemento de navegação
elemento nav (links com propriedades de navegação podem ser resumidos em uma área) Formato de sintaxe básico: <navegação> <ul> <li><a href=”#”>Página inicial</li> </ul> </nav>
Elementos interativos da página
elemento de detalhes e elemento de resumo
elemento de detalhes e elemento de resumo resumo define um título para detalhes e então o conteúdo oculto aparece quando clicado <detalhes> <summary>Mostrar lista</summary> <ul> <li>Lista 1</li> <li>Lista 2</li> </ul> </detalhes>
Introdução ao CSS
Folha de estilo CSS
em linha
<tagname style="Atributo1:Valor do atributo 1";"Atributo2:Valor do atributo 2";>Conteúdo</tagname>
Integrado
<cabeça> <style type="texto/css"> Seletor {Atributo 1: Valor do atributo 1; Atributo 2: Valor do atributo 2} </estilo> </head>
tipo=texto/css
Link-in
<link href="caminho para arquivo css" type="text/css" rel="stylesheet"> Todos os três devem estar presentes
Seletores básicos CSS
seletor de tags
Nome da tag {Atributo 1: Valor do atributo 1; Atributo 2: Valor do atributo 2}
seletor de classe
.Nome da classe {Atributo 1: Valor do atributo 1;
Seletor de ID
#id nome {atributo 1: valor do atributo 1; atributo 2: valor do atributo 2}
seletor curinga
*{Atributo 1: Valor do atributo 1;
Pode corresponder a todos os elementos da página
Seletor de união
Os seletores são conectados por vírgulas e qualquer seletor pode ser usado como parte do seletor de união.
Propriedades de estilo de texto
tamanho da fonte: tamanho da fonte
em tamanho da fonte px pixels são mais comumente usados
família de fontes: fonte
em tamanho da fonte px pixels são mais comumente usados
peso da fonte: peso da fonte
normal Padrão negrito Define caracteres em negrito mais negrito Define caracteres em negrito mais claro define caracteres mais claros (100-900) 400 é igual ao normal
estilo da fonte: estilo da fonte
normal valor padrão itálico itálico oblíquo inclinação
Propriedades de aparência do texto
coler: cor do texto
espaçamento entre linhas na altura da linha
Geralmente existem três tipos de unidades de valor de atributo: pixel px valor relativo em porcentagem %
decoração de texto decoração de texto
nenhum Sem decoração sublinhado sublinhado sobrelinhado linha tachado
text-align: modo de alinhamento horizontal
esquerda alinhada à esquerda direita alinhada à direita centralizada
taxt-indent: recuo da primeira linha
Formulário de inscrição
Criar formulário
<from action="endereço de url" method="método de envio (post)" name="nome do formulário"> Vários controles de formulário </de>
elementos de entrada e atributos
Caixa de entrada de texto de linha única ,<input type="texto">
Caixa de entrada de senha <tipo de entrada = "senha">
botão único <input type="rádio">
caixa de seleção <input type="caixa de seleção">
botão de envio <input type="enviar">
botão de reset <input type="redefinir">
selecione o elemento
<selecionar> <option>Opções</option> <option>Opções</option> <selecionar>
Flutuação e posicionamento
elemento flutuante
O atributo float do elemento float elemento esquerdo flutua para a esquerda elemento direito flutua para a direita nenhum elemento não flutua
posicionamento do elemento
Posição: valor do atributo posicionamento estático posicionamento relativo posicionamento absoluto posicionamento absoluto fixo posicionamento fixo
tipo de elemento
A tag <span> só pode conter texto e várias tags embutidas
Modelo de caixa CSS
<div>modelo de caixa
<div> pode substituir elementos em nível de bloco
O espaço entre <div> e </div> é equivalente a uma caixa. Você pode definir as margens, preenchimento, largura e altura. Ao mesmo tempo, pode acomodar vários elementos da rede, como parágrafos, títulos, tabelas, imagens,. etc.
Propriedades relacionadas ao modelo de caixa
Propriedades de borda
estilo de borda
estilo de borda: /Configuração abrangente de estilo de borda/
largura da borda
largura da borda Um valor para os quatro lados
Cor da borda
Cor da borda
Configurações abrangentes de borda
borda: largura estilo cor
Propriedades de margem
automático automático
preenchimento
Acolchoamento superior Acolchoamento inferior inferior Preenchimento esquerdo preenchimento esquerdo Preenchimento direito preenchimento direito
margem margem
Preenchimento superior da margem Preenchimento inferior da margem inferior Preenchimento esquerdo da margem esquerda Preenchimento direito da margem direita Margem superior direita inferior esquerda
margens internas e externas claras
*{ preenchimento: 0; margem: 0; }
propriedades de fundo
Ao adicionar fotos à caixa Se a largura e a altura forem 100%, a cobertura poderá ser ajustada automaticamente.
cor de fundo Definir cor de fundo
imagem de fundo Definir imagem de fundo
fundo de repetição Definir blocos de imagem de fundo
blocos de repetição de fundo horizontalmente e verticalmente -no-repeat não lado a lado Repita x blocos horizontalmente Repita para colocar lado a lado verticalmente
posição de fundo Valores de pixel para controlar a posição da imagem de fundo
tamanho de fundo Definir tamanho da imagem
Tamanho do plano de fundo: atributo 1 atributo 2; A capa é grande o suficiente. O tamanho máximo do conteúdo se ajusta perfeitamente à área de conteúdo.
Seletores CSS3
:antes do seletor
Para inserir conteúdo antes do conteúdo do elemento selecionado, o conteúdo deve ser especificado com o atributo content. <elemento>: antes { Conteúdo do Texto; }
Pseudoclasse de link
a: link{regra de estilo css;} O status do hiperlink não visitado
a: visitado{regras de estilo CSS;} O status do hiperlink após a visita
a: hover {regra de estilo css;} O estado do hiperlink quando o mouse passa ou passa o mouse
a: active {regra de estilo css;} O estado do hiperlink quando o mouse não está se movendo
esquerda esquerda certo, certo centro centro
largura (largura) altura título (conteúdo exibido ao passar o mouse)