Galleria mappe mentale Punti di conoscenza HTML5 e CSS3
Questa è una mappa mentale sui punti di conoscenza di HTML5 CSS3, inclusi elementi e attributi della pagina HTML, introduzione ai CSS, modello box CSS, mobile e posizionamento, applicazione di moduli, ecc.
Modificato alle 2021-07-06 01:12:01Microbiologia medica, Infezioni batteriche e immunità riassume e organizza i punti di conoscenza per aiutare gli studenti a comprendere e ricordare. Studia in modo più efficiente!
La teoria cinetica dei gas rivela la natura microscopica dei fenomeni termici macroscopici e le leggi dei gas trovando la relazione tra quantità macroscopiche e quantità microscopiche. Dal punto di vista del movimento molecolare, vengono utilizzati metodi statistici per studiare le proprietà macroscopiche e modificare i modelli di movimento termico delle molecole di gas.
Este é um mapa mental sobre uma breve história do tempo. "Uma Breve História do Tempo" é um trabalho científico popular com influência de longo alcance. Ele não apenas introduz os conceitos básicos da cosmologia e da relatividade, mas também discute os buracos negros e a expansão. Do universo. questões científicas de ponta, como inflação e teoria das cordas.
Microbiologia medica, Infezioni batteriche e immunità riassume e organizza i punti di conoscenza per aiutare gli studenti a comprendere e ricordare. Studia in modo più efficiente!
La teoria cinetica dei gas rivela la natura microscopica dei fenomeni termici macroscopici e le leggi dei gas trovando la relazione tra quantità macroscopiche e quantità microscopiche. Dal punto di vista del movimento molecolare, vengono utilizzati metodi statistici per studiare le proprietà macroscopiche e modificare i modelli di movimento termico delle molecole di gas.
Este é um mapa mental sobre uma breve história do tempo. "Uma Breve História do Tempo" é um trabalho científico popular com influência de longo alcance. Ele não apenas introduz os conceitos básicos da cosmologia e da relatividade, mas também discute os buracos negros e a expansão. Do universo. questões científicas de ponta, como inflação e teoria das cordas.
HTML CSS3
Prima introduzione all'HTML
tag di controllo del testo
etichetta del titolo
<hn align="alignment">Testo del titolo</hn>
segno di paragrafo
<p align="alignment">Testo del titolo</p>
segno di linea orizzontale
<hr attributo="valore attributo"/>
segno di nuova riga
<br/>
Tag di formattazione del testo
<b></b> e <strong></strong> il testo viene visualizzato in grassetto (b definisce il testo in grassetto e forte definisce il testo enfatizzato)
tag immagine
<img src="URL immagine"/>
alt testo sostitutivo quando l'immagine non può essere visualizzata
tag del collegamento ipertestuale
<a href="Salta target" target="Come si apre la finestra di destinazione">Testo o immagine</a> target _self è il valore predefinito, che significa l'apertura nella finestra originale, _blank significa l'apertura in una nuova finestra
Link di ancoraggio <a href="#id name">Testo del link</a>
Elementi e attributi della pagina HTML
Elenca elementi
<ul> Elenco non ordinato <li>Voce elenco 1</li> (<ul></ul> può essere nidificato solo <li> </li>)
<ol> Elenco ordinato <li>Elenco voce 1</li> Modificare il valore iniziale della numerazione dell'elenco <ol start="2">
L'elemento dl è spesso usato per spiegare e descrivere termini o sostantivi <dl> <dt>Sostantivo 1</dt> <dd>Spiegazione del sostantivo 1<dd>
Elementi strutturali
elemento di intestazione
elemento header (un elemento strutturale con ruolo guida e di navigazione che può contenere tutto il contenuto solitamente posto in testa alla pagina) Formato grammaticale di base; <intestazione> <h1>Tema Web</h1> …. </intestazione>
elemento di navigazione
elemento nav (i collegamenti con le proprietà di navigazione possono essere riepilogati in un'unica area) Formato della sintassi di base: <nav> <ul> <li><a href="#">Home page</li> </ul> </nav>
Elementi interattivi della pagina
elemento dettagli ed elemento riepilogo
l'elemento dettagli e l'elemento riepilogo riepilogo definiscono un titolo per i dettagli e quindi il contenuto nascosto viene visualizzato quando si fa clic <dettagli> <summary>Mostra elenco</summary> <ul> <li>Elenco 1</li> <li>Elenco 2</li> </ul> </dettagli>
Iniziare con i CSS
Foglio di stile CSS
in linea
<tagname style="Attribute1:Attributo valore 1";"Attributo2:Attributo valore 2";>Contenuto</tagname>
Incorporato
<testa> <style type="text/css"> Selettore {Attributo 1: Valore attributo 1; Attributo 2: Valore attributo 2} </stile> </testa>
tipo=testo/css
Collegamento
<link href="percorso del file css" type="text/css" rel="stylesheet"> Devono essere presenti tutti e tre
Selettori di base CSS
selettore di tag
Nome tag {Attributo 1: Valore attributo 1; Attributo 2: Valore attributo 2}
selettore di classe
.Nome classe {Attributo 1: Valore attributo 1; Attributo 2: Valore attributo 2}
Selettore dell'ID
#id nome {attributo 1: valore attributo 1; attributo 2: valore attributo 2}
selettore di caratteri jolly
*{Attributo 1: Valore attributo 1; Attributo 2: Valore attributo 2}
Può corrispondere a tutti gli elementi della pagina
Selettore dell'Unione
I selettori sono collegati da virgole e qualsiasi selettore può essere utilizzato come parte del selettore di unione.
Proprietà dello stile del testo
dimensione-carattere: dimensione del carattere
I pixel più comunemente utilizzati sono i caratteri em con dimensione px
famiglia di caratteri: carattere
I pixel più comunemente utilizzati sono i caratteri em con dimensione px
font-weight: peso del carattere
normal Predefinito bold Definisce i caratteri in grassetto bolder Definisce i caratteri in grassetto più leggero definisce i caratteri più leggeri (100-900) 400 equivale a normale
font-style: stile del carattere
valore predefinito normale corsivo corsivo obliquo
Proprietà dell'aspetto del testo
coler: colore del testo
interlinea dell'altezza della riga
Esistono generalmente tre tipi di unità di valore degli attributi: pixel px valore relativo em percentuale %
decorazione del testo decorazione del testo
nessuno Nessuna decorazione sottolineatura sottolineatura sopralinea sopralinea barrato
text-align: modalità di allineamento orizzontale
sinistra allineata a sinistra destra allineata a destra centro centrato
taxt-indent: trattino della prima riga
Applicazione del modulo
Crea modulo
<from action="indirizzo url" metodo="metodo di invio (post)" nome="nome modulo"> Vari controlli del modulo </da>
elementi e attributi di input
Casella di immissione testo a riga singola ,<tipo di input="testo">
Casella di immissione della password <tipo di input="password">
pulsante singolo <input type="radio">
casella di controllo <tipo di input="casella di controllo">
pulsante di invio <input type="invia">
pulsante di reset <tipo input="reimposta">
seleziona elemento
<seleziona> <option>Opzioni</option> <option>Opzioni</option> <seleziona>
Galleggiamento e posizionamento
elemento galleggiante
L'attributo float dell'elemento float l'elemento sinistro fluttua a sinistra l'elemento destro fluttua a destra none l'elemento non fluttua
posizionamento degli elementi
Posizione: valore dell'attributo posizionamento statico statico relativo posizionamento relativo assoluto posizionamento assoluto fisso posizionamento fisso
tipo di elemento
Il tag <span> può contenere solo testo e vari tag in linea
Modello a scatola CSS
<div>modello a scatola
<div> può sostituire elementi a livello di blocco
Lo spazio tra <div> e </div> equivale a un riquadro. Puoi impostare i margini, il riempimento, la larghezza e l'altezza. Allo stesso tempo, può ospitare vari elementi di rete come paragrafi, titoli, tabelle, immagini. eccetera.
Proprietà relative al modello box
Proprietà di confine
stile del bordo
border-style: /Impostazione completa dello stile del bordo/
larghezza del bordo
larghezza del bordo Un valore per i quattro lati
colore del bordo
colore del bordo
Impostazioni complete dei bordi
bordo: colore dello stile della larghezza
Proprietà del margine
automatica automatica
imbottitura imbottitura
Imbottitura superiore imbottita Imbottitura fondo-imbottitura Imbottitura sinistra imbottitura sinistra Imbottitura destra, imbottitura destra
margine margine
Imbottitura superiore con margine superiore Imbottitura inferiore del margine inferiore Imbottitura sinistra del margine sinistro Imbottitura del margine destro destro Margine in alto a destra in basso a sinistra
margini interni ed esterni netti
*{ imbottitura: 0; margine: 0; }
proprietà dello sfondo
Quando si aggiungono immagini alla casella Se sia la larghezza che l'altezza sono al 100%, la copertura può essere regolata automaticamente.
colore di sfondo Imposta il colore di sfondo
immagine di sfondo Imposta l'immagine di sfondo
ripetizione dello sfondo Imposta i riquadri dell'immagine di sfondo
riquadri con ripetizione dello sfondo in orizzontale e in verticale -no-repeat non piastrellare Ripeti x tessere in orizzontale Ripeti y per affiancare verticalmente
posizione dello sfondo Valori dei pixel per controllare la posizione dell'immagine di sfondo
dimensione dello sfondo Imposta la dimensione dell'immagine
Dimensione dello sfondo: attributo 1 attributo 2; La copertina è sufficientemente grande. La dimensione massima del contenitore si adatta perfettamente all'area del contenuto.
Selettori CSS3
:prima del selettore
Per inserire contenuto prima del contenuto dell'elemento selezionato, il contenuto deve essere specificato con l'attributo content. <elemento>: prima { Contenuto: testo; }
Link pseudo-classe
a: link{regola di stile CSS;} Lo stato del collegamento ipertestuale non visitato
a: visitato{regole di stile CSS;} Lo stato del collegamento ipertestuale dopo la visita
a: hover {regola di stile CSS;} Lo stato del collegamento ipertestuale quando il mouse passa o si ferma
a: attivo {regola di stile CSS;} Lo stato del collegamento ipertestuale quando il mouse non si muove
sinistra sinistra giusto giusto centro centro
larghezza (larghezza) altezza titolo (contenuto visualizzato al passaggio del mouse)